IconTab-RowSample

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8">
        <title>IconTabRowRepeaterXML</title>
        <script id="sap-ui-bootstrap" 
                type="text/javascript"
                src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
                data-sap-ui-theme="sap_bluecrystal"
                data-sap-ui-libs="sap.m"
                data-sap-ui-xx-bindingSyntax="complex"
        >
        </script>

		
        <!-- XML-based view definition -->
        <script id="chartView" type="sapui5/xmlview">
<mvc:View
  xmlns:l="sap.ui.layout"
  xmlns:core="sap.ui.core"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:commons="sap.ui.commons"
  xmlns="sap.m"
  controllerName="demo_1.Main" >
  <commons:RowRepeater id="rowrepeater">
  <Input id="oInput" value="{lastName}" ></Input>
  <IconTabBar
  id="idIconTabBarNoIcons"
  expanded="{device>/isNoPhone}"
  class="sapUiResponsiveContentPadding">
  <items>
  <IconTabFilter
  text="Info">
  <Text text="Info content goes here ..." />
  </IconTabFilter>
  <IconTabFilter
  text="Attachments">
  <Text text="Attachments go here ..." />
  </IconTabFilter>
  <IconTabFilter
  text="Notes">
  <Text text="Notes go here ..." />
  </IconTabFilter>
  <IconTabFilter
  text="People">
  <Text text="People content goes here ..." />
  </IconTabFilter>
  </items>
  </IconTabBar>
</commons:RowRepeater>
</mvc:View>
        </script>

        <script>
            // Controller definition
sap.ui.controller("demo_1.Main", {
 
onInit: function() {
 
 
  var dataObject = { data : [
            {lastName: "Platte", name: "Rudolf",  href: "http://www.sap.com", src: "images/persons/male_PlatteR.jpg", gender: "male" , country: "US"},
            {lastName: "Dwyer", name: "Nora",  href: "http://www.sap.com", src: "images/persons/female_DwyerN.jpg", gender: "female" , country: "US"},
            {lastName: "Wallace", name: "Alex",  href: "http://www.sap.com", src: "images/persons/male_WallaceA.jpg", gender: "male", country:  "DE"},
            {lastName: "Wang", name: "Megan",  href: "http://www.sap.com", src: "images/persons/female_WangM.jpg", gender: "female", country: "US"},
            {lastName: "Ingalls", name: "Barbara",  href: "http://www.sap.com", src: "images/persons/female_IngallsB.jpg", gender: "female" , country: "US"},
            {lastName: "Wallace", name: "Bruno",  href: "http://www.sap.com", src: "images/persons/male_WallaceA.jpg", gender: "male", country: "US"},],
            empty:[]
  };
  var oModel = new sap.ui.model.json.JSONModel();
  oModel.setData(dataObject);
  sap.ui.getCore().setModel(oModel);
  var oRowRepeater = this.getView().byId("rowrepeater");
  var oRowTemplate = new sap.ui.commons.layout.MatrixLayout("theMatrix");

		var  matrixRow, matrixCell, control;
		// main matrix
		oRowTemplate.setWidth("100%");
		// main row
		matrixRow = new sap.ui.commons.layout.MatrixLayoutRow();
				//label 1
		control = this.getView().byId("oInput");
		matrixCell = new sap.ui.commons.layout.MatrixLayoutCell();
		matrixCell.addContent(control);
		matrixRow.addCell(matrixCell);
		
		matrixRow1 = new sap.ui.commons.layout.MatrixLayoutRow();
		var oIconTab = this.getView().byId("idIconTabBarNoIcons");
				//label 1
		matrixCell = new sap.ui.commons.layout.MatrixLayoutCell();
		matrixCell.addContent(oIconTab);
		matrixRow1.addCell(matrixCell);
		oRowTemplate.addRow(matrixRow);
		oRowTemplate.addRow(matrixRow1);
		
  oRowRepeater.bindRows("/data", oRowTemplate);
  },
});
            
            // Instantiate the View, assign a model
            // and display
            var oView = sap.ui.xmlview({
                viewContent: jQuery('#chartView').html()
            });
            
            oView.placeAt('content');
        </script>
    </head>
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>

// Code goes here

/* Styles go here */