IconTabBar-RowRepeater

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>Row Repeater Sample</title>
    <!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
    <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.ui.commons,sap.m,sap.ui.unified"
	data-sap-ui-xx-bindingSyntax="complex"></script>

    <!-- 2.) Create a UI5 RowRepeater and place it onto the page -->
    <script>

			// create the row repeater control
		var oRowRepeater = new sap.ui.commons.RowRepeater("rr1");
		oRowRepeater.setNoData(new sap.ui.commons.TextView({text: "Sory, no data available!"}));
// create test data
	 	var dataObject = { data : [
				{lastName: "Platte", name: "Rudolf", gender: "male" , country: "US"},
				{lastName: "Dwyer", name: "Nora", gender: "female" , country: "US"},
				{lastName: "Wallace", name: "Alex", gender: "male", country:  "DE"},
				{lastName: "Wang", name: "Megan", gender: "female", country: "US"},
				{lastName: "Ingalls", name: "Barbara", gender: "female" , country: "US"},
				{lastName: "Wallace", name: "Bruno", gender: "male", country: "US"},
				{lastName: "Zar", name: "Lou", gender: "male", country:  "DE"},
				{lastName: "Watson", name: "Mary", gender: "female", country: "US"},
				{lastName: "Spring", name: "Sally", gender: "female", country: "US"},
				{lastName: "Schutt", name: "Doris", gender: "female", country: "US"},
				{lastName: "Nicols", name: "John", gender: "male", country:  "FR"},
				{lastName: "Gains", name: "Viola", gender: "female", country:  "DE"},
				{lastName: "Bay", name: "Sue", gender: "female", country:  "FR"},
				{lastName: "Smith", name: "John", gender: "male", country:  "CH"},
				{lastName: "Gordon", name: "Randy", gender: "male", country:  "DE"},
				{lastName: "Schulz", name: "Justin", gender: "male", country:  "DE"},
				{lastName: "Time", name: "Tino", gender: "male", country: "US"},
				{lastName: "East", name: "Jonathan", gender: "male", country:  "FR"},
				{lastName: "Poole", name: "Gene", gender: "female", country:  "IT"},
				{lastName: "Ander", name: "Corey", gender: "male", country:  "CH"},
				{lastName: "Early", name: "Brighton", gender: "male", country:  "FR"},
				{lastName: "Noring", name: "Constance", gender: "female", country: "US"},
				{lastName: "Miller", name: "Michael", gender: "male", country:  "DE"},
				{lastName: "Tress", name: "Matt", gender: "female", country: "US"},
				{lastName: "Turner", name: "Pamela", gender: "female", country:  "DE"},
				{lastName: "Dente", name: "Al", gender: "male", country: "US"},
				{lastName: "Friese", name: "Andy", gender: "male", country:  "DE"},
				{lastName: "Mann", name: "Anita", gender: "female", country:  "DE"},
				{lastName: "Fisher", name: "Richard", gender: "male", country: "US"},
				{lastName: "Fuchs", name: "Peter", gender: "male", country:  "DE"},
				{lastName: "Rush", name: "Joanne", gender: "female", country:  "DE"},],
					empty : []
				};
		// Increase the number of the lines to more than 100
	  for(var n = 1; n <= 100; n++) {
		  dataObject.data.push( { lastName:"LastName"+ n, name:"Name" + n, country: "DE"} );
	  }

		// create JSON model
		var oModel = new sap.ui.model.json.JSONModel();
		oModel.setData(dataObject);
		sap.ui.getCore().setModel(oModel);
		
				//create title
		var oTitle = new sap.ui.core.Title({text:"Employees", tooltip:"Employees"});

		//configure the RowRepeater
		oRowRepeater.setDesign("Standard");
		oRowRepeater.setNumberOfRows(3);
		oRowRepeater.setShowMoreSteps(3);
		oRowRepeater.setCurrentPage(1);
		oRowRepeater.setTitle(oTitle);


//create the template control that will be repeated and will display the data
		var oRowTemplate = new sap.ui.commons.layout.MatrixLayout("theMatrix");

		var  matrixRow, matrixCell, control;
		// main matrix
		oRowTemplate.setWidth("70%");
		// main row
		matrixRow = new sap.ui.commons.layout.MatrixLayoutRow();

		//label 1
		control = new sap.m.Label();
		control.bindProperty("text","lastName");
		matrixCell = new sap.ui.commons.layout.MatrixLayoutCell();
		matrixCell.addContent(control);
		matrixRow.addCell(matrixCell);

		//label 2
		control = new sap.m.Label();
		control.bindProperty("text","name");
		matrixCell = new sap.ui.commons.layout.MatrixLayoutCell();
		matrixCell.addContent(control);
		matrixRow.addCell(matrixCell);

		//label 3
		control = new sap.m.Label();
		control.bindProperty("text","country");
		matrixCell = new sap.ui.commons.layout.MatrixLayoutCell();
		matrixCell.addContent(control);
		matrixRow.addCell(matrixCell);
		
				//label 3
		control = new sap.m.IconTabBar({items:[
						new sap.m.IconTabFilter({text:"info", content:[new sap.m.Text({text:"Info Content Goes Here..."})]}),
						new sap.m.IconTabFilter({text:"Attachments", content:[new sap.m.Text({text:"Attachments go here ..."})]}),
						new sap.m.IconTabFilter({text:"Notes", content:[new sap.m.Text({text:"Notes go here ..."})]})]});
		matrixCell = new sap.ui.commons.layout.MatrixLayoutCell();
		matrixCell.addContent(control);
		matrixRow.addCell(matrixCell);

		// add row to matrix
		oRowTemplate.addRow(matrixRow);



		//attach data to the RowRepeater
		oRowRepeater.bindRows("/data", oRowTemplate);
												
		var oLayout = new sap.ui.layout.VerticalLayout("Layout1", {
	content: [oRowRepeater]
});							


    oLayout.placeAt("uiArea");


     </script>
</head>
<body class="sapUiBody">

    <!-- This is where you place the UI5 List -->
    <div id="uiArea"></div>
</body>
</html>

// Code goes here

/* Styles go here */