<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
 
 
	<script
		id="sap-ui-bootstrap"
		src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
		data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.layout,sap.suite.ui.commons"
    data-sap-ui-xx-bindingSyntax="complex"
		data-sap-ui-resourceroots='{
				"sap.ui.demo.wt": "./"
			}'>
	</script>
  <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
 
 
  <script>
  var view = sap.ui.view({id:"idmyView1", viewName:"sap.ui.demo.wt.myView", type:sap.ui.core.mvc.ViewType.JS});
  view.placeAt("content");
  </script>
 
 
  </head>
  <body class="sapUiBody" role="application">
  <div id="content"></div>
  </body>
</html>
// Code goes here

/* Styles go here */

sap.ui.jsview("sap.ui.demo.wt.myView", {  
  /** Specifies the Controller belonging to this View. 
  * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller. 
  * @memberOf routingdemo.App 
  */  
  getControllerName : function() {  
  return "sap.ui.demo.wt.myView";  
  },  
  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
  * Since the Controller is given to this method, its event handlers can be attached right away. 
  * @memberOf routingdemo.App 
  */  
  createContent : function(oController) {  
  this.setDisplayBlock(true);  
  
  var oVCard = new sap.suite.ui.commons.BusinessCard({
    firstTitle:  new sap.ui.commons.Label({id:"vcard1-name-label",text:"White, Helen",tooltip:"White, Helen"}),
    iconPath: "sap-icon://employee",
    secondTitle: "Sales Contact at Customer Side",
    imageTooltip:"White, Helen",
    width: "424px"
});

var oContentCard = new sap.ui.commons.layout.MatrixLayout({widths:["20px", "100px"]});
var oCell = new sap.ui.commons.layout.MatrixLayoutCell({hAlign:sap.ui.commons.layout.HAlign.Center});
oCell.addContent(new sap.ui.commons.TextView({text:"Phone:"}));
oContentCard.createRow(oCell, new sap.ui.commons.TextView({text:"+41 (635) 457-2875"}));
		
oCell = new sap.ui.commons.layout.MatrixLayoutCell({hAlign:sap.ui.commons.layout.HAlign.Center});
oCell.addContent(new sap.ui.commons.TextView({text:"E-Mail:"}));
oContentCard.createRow(oCell, new sap.ui.commons.TextView({text:"helen.white@company.com"}));
		
oContentCard.createRow(new sap.ui.commons.TextView({text:"Address:"}), new sap.ui.commons.TextView({text:"Diermar-Hopp Allee 16"}));
oVCard.setContent(oContentCard);
  
  		//create the ApplicationHeader control
		var oAppHeader = new sap.ui.commons.ApplicationHeader("appHeader"); 

		//configure the branding area
		oAppHeader.setLogoSrc("http://www.sap.com/global/images/SAPLogo.gif");
		oAppHeader.setLogoText("SAP Accordion Sample");

		//configure the welcome area
		oAppHeader.setDisplayWelcome(true);
		oAppHeader.setUserName("Sindhuja");

		//configure the log off area
		oAppHeader.setDisplayLogoff(true);
		
  //Create the Accordion control
  var oAccordion = new sap.ui.commons.Accordion("accordionA");
 
  //Building Section 1
  var oSection1 = new sap.ui.commons.AccordionSection( "section1" );
   oSection1.setTitle("Section 1");
   oSection1.setTooltip("Section 1");
   oSection1.setMaxHeight("100px");
   for (var i=0 ; i < 5 ; i++){   
  var oCheckBox1 = new sap.ui.commons.CheckBox( "CheckBox1"+i );
   oCheckBox1.setText("CheckBox1 "+i);
   oSection1.addContent( oCheckBox1); 
  var oLabel1 = new sap.ui.commons.Label( "Label1"+i );
   oLabel1.setText("Label 1 "+i);   
   oSection1.addContent( oLabel1);
   }
   oAccordion.addSection( oSection1 );
 
  //Building Section 2
  var oSection2 = new sap.ui.commons.AccordionSection( "section2");
   oSection2.setTitle("Section 2");
   for (var i=0 ; i < 5 ; i++){ 
  var oCheckBox2 = new sap.ui.commons.CheckBox( "CheckBox2"+i );
   oCheckBox2.setText("CheckBox2 "+i);
   oSection2.addContent( oCheckBox2);
   }
   oAccordion.addSection( oSection2 );
 
  //Building Section 3
  var oSection3 = new sap.ui.commons.AccordionSection( "section3");
   oSection3.setTitle("Section 3");
   oSection3.setEnabled(false);
  var oCheckBox3 = new sap.ui.commons.CheckBox( "CheckBox3" );
   oSection3.addContent( oCheckBox3);
   oAccordion.addSection( oSection3 );
 
  //Building Section 4
  var oSection4 = new sap.ui.commons.AccordionSection( "section4");
   oSection4.setTitle("Section 4");
  var oCheckBox4 = new sap.ui.commons.CheckBox( "CheckBox4" );
   oSection4.addContent( oCheckBox4);
 
  //Accordion properties settings
   oAccordion.addSection( oSection4 );
   oAccordion.setWidth("200px");
   
   var oLayout = new sap.ui.layout.VerticalLayout({width:"100%",content:[oAppHeader,oVCard,oAccordion]});
 
  return oLayout;
  }  
});
sap.ui.controller("sap.ui.demo.wt.myView", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf table_v01.Main
*/

	onInit: function() {			
	
	}

});