Binding Data in sapui5

[venkatachala_ck]

In SAPUI5 data binding can be done using 4 models(JSON, OData , XML  and Resource )

and we can bind using three modes(One Way, Two Way, and One Time).

only two models explained here

JSON Model : supports two way binding and its used for small scale binding

we can bind the data to JSON model using array.

In table bind property is used to bind the data to the table columns

// json.view.js

var oData = [

             {name:"Tom", email:"tom@gmail.com", gender:"Male", checked:true, phno:"676866966",location:"xyz" },

             {name:"John", email:"xyz@gmail.com", gender:"Male", checked:false, phno:"758585959",location:"New york" },

             {name:"Angel", email:"angel@gmail.com", gender:"FeMale", checked:true, phno:"84474644",location:"Alaska" }

              ];

  var tab = new sap.ui.table.Table("table1id",{

  title:"Static value Table",

  firstVisibleRow: 3,

  viisibleRowCount:7,

  fixedColumnCount:2,

  selectionMode:sap.ui.table.SelectionMode.Multiple,

  navigationMode:sap.ui.table.NavigationMode.Paginator

  });

  tab.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text:"Name"}),

  template: new sap.ui.commons.TextView().bindProperty("text","name"),

  sortProperty:"name",

  filterProperty:"name",

  width:'150px'

  }));

  tab.addColumn( new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text:"Email"}),

  template: new sap.ui.commons.TextView().bindProperty("text","email"),

  sortProperty:"email",

  filterProperty:"email",

  width:'200px'

  }));

  tab.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text:"Gender"}),

  template: new sap.ui.commons.TextView().bindProperty("text", "gender"),

  sortProperty:"gender",

  filterProperty:"gender",

  width:'150px'

  }));

  tab.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text:"Checked"}),

  template: new sap.ui.commons.CheckBox().bindProperty("checked","checked"),

  width:'80px',

  hAlign:"Center"

  }));

     tab.addColumn(new sap.ui.table.Column({

      label: new sap.ui.commons.Label({text:"Phone Number"}),

      template: new sap.ui.commons.TextView().bindProperty("text","phno"),

      sortProperty:"phno",

      filterProperty:"phno",

      width:'150px'

     }));

     tab.addColumn(new sap.ui.table.Column({

      label: new sap.ui.commons.Label({text:"Loaction "}),

      template: new sap.ui.commons.TextView().bindProperty("text", "location"),

      sortProperty:"location",

      filterProperty:"location",

      width:'150px'

     }));

   // json binding

   var aModel = new sap.ui.model.json.JSONModel();

       aModel.setData({modelData:oData});

       tab.setModel(aModel);

       tab.bindRows("/modelData");

       return tab;

ODATA Model : supports one way binding and its used for large scale binding

In table bind property is used to bind the data to the table columns

While binding we have to mention the url where exactly data resides in the server

//odata.view.js

var tab = new sap.ui.table.Table("table1id1",{

  title:"Static value Table",

  firstVisibleRow: 3,

  viisibleRowCount:7,

  fixedColumnCount:2,

  selectionMode:sap.ui.table.SelectionMode.Multiple,

  navigationMode:sap.ui.table.NavigationMode.Paginator

  });

  tab.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text:"SupplierID"}),

  template: new sap.ui.commons.TextView().bindProperty("text","SupplierID"),

  sortProperty:"SupplierID",

  filterProperty:"SupplierID",

  width:'150px'

  }));

  tab.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text:"CompanyName"}),

  template: new sap.ui.commons.TextView().bindProperty("text","CompanyName"),

  sortProperty:"CompanyName",

  filterProperty:"CompanyName",

  width:'150px'

  }));

  tab.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text:"ContactName"}),

  template: new sap.ui.commons.TextView().bindProperty("text","ContactName"),

  sortProperty:"ContactName",

  filterProperty:"ContactName",

  width:'150px'

  }));

  tab.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text:"ContactTitle"}),

  template: new sap.ui.commons.TextView().bindProperty("text","ContactTitle"),

  sortProperty:"ContactTitle",

  filterProperty:"ContactTitle",

  width:'150px'

  }));

  tab.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text:"Address"}),

  template: new sap.ui.commons.TextView().bindProperty("text","Address"),

  sortProperty:"Address",

  filterProperty:"Address",

  width:'150px'

  }));

     var oModel = new sap.ui.model.odata.ODataModel("proxy/http/services.odata.org/V2/Northwind/Northwind.svc");

     console.log(oModel);

     tab.setModel(oModel);

     tab.bindRows("/Suppliers?City='London'");

     return tab;

// index.html

<!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 src="resources/sap-ui-core.js"

  id="sap-ui-bootstrap"

  data-sap-ui-libs="sap.ui.commons,sap.ui.table"

  data-sap-ui-theme="sap_bluecrystal">

  </script>

  <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

  <script>

  sap.ui.localResources("databind");

  var view = sap.ui.view({id:"idjson1", viewName:"databind.json", type:sap.ui.core.mvc.ViewType.JS});

  var view1 = sap.ui.view({id:"idodata1", viewName:"databind.odata", type:sap.ui.core.mvc.ViewType.JS});

  //view.placeAt("content");

  view1.placeAt("content");

  </script>

  </head>

  <body class="sapUiBody" role="application">

  <div id="content"></div>

  </body>

</html>