Quantcast
Channel: SCN : All Content - SAPUI5 Developer Center
Viewing all articles
Browse latest Browse all 6178

How to data binding in Tables

$
0
0

How can I re-do the following table using data binding instead of hard coding for instance var aData below is hard-coded.

 

<!DOCTYPE HTML>
<HTML>
<HEAD>

<meta name="description" content="UI5 table example with local JSON model" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

<META http-equiv="X-UA-Compatible" content="IE=edge">
<META http-equiv='cache-control' content='no-cache'>
<META http-equiv='expires' content='0'>
<META http-equiv='pragma' content='no-cache'>

<TITLE>SAPUI5 Projects Status</TITLE>


<SCRIPT type="text/javascript" src="/XMII/JavaScript/bootstrap.js" data-libs="i5Chart,i5Grid"
    type="text/javascript" src="/sapui5/resources/sap-ui-core.js" data-sap-ui-theme="sap_goldreflection"
                  data-sap-ui-libs="sap.ui.core,sap.ui.commons,sap.ui.commons,sap.ui.table">
 
</SCRIPT>

<script>
// create the DataTable control
  var oTable = new sap.ui.table.Table({editable:true});
 
  // define the Table columns
  var oControl = new sap.ui.commons.TextView({text:"{jobs}"}); // short binding notation
  oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Jobs"}), template: oControl, sortProperty: "lastName", filterProperty: "lastName", width: "100px"}));
  oControl = new sap.ui.commons.TextField().bindProperty("value", "status"); // more verbose binding notationt
  oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Status"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "80px"}));
  oControl = new sap.ui.commons.TextField().bindProperty("value", "percentcomplete"); // more verbose binding notationt
  oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "PercentComplete"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "80px"}));
  oControl = new sap.ui.commons.TextField().bindProperty("value", "startdate"); // more verbose binding notationt
  oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "StartDate"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "80px"}));
  oControl = new sap.ui.commons.TextField().bindProperty("value", "enddate"); // more verbose binding notationt
  oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "EndDate"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "80px"}));
 
 

 

  // create some local data
  var aData = [
   {Jobs: "BOD - 9212", Status: "1", PercentComplete: "NA", StartDate: "2014-01-01T10:00:00", EndDate: "06/01/2014 10:00:00" },
   {Jobs: "BOD - 3301", Status: "l", PercentComplete: "NA", StartDate: "2014-01-01T10:00:00", EndDate: "06/01/2014 10:00:00" },
   {Jobs: "BOD - 3303", Status: "l", PercentComplete: "NA", StartDate: "2014-01-01T10:00:00", EndDate: "06/01/2014 10:00:00" },
   {Jobs: "Hazelton", Status: "l", PercentComplete: "NA", StartDate: "2014-01-01T10:00:00", EndDate: "06/01/2014 10:00:00" },
   {Jobs: "Cornwall", Status: "l", PercentComplete: "NA", StartDate: "2014-01-01T10:00:00", EndDate: "06/01/2014 10:00:00" },
   {Jobs: "WVL1", Status: "l", PercentComplete: "80", StartDate: "2014-01-01T10:00:00", EndDate: "06/01/2014 10:00:00" },
   {Jobs: "JAXHistorian", Status: "l", PercentComplete: "80", StartDate: "2014-01-01T10:00:00", EndDate: "06/01/2014 10:00:00" },
   {Jobs: "Bod", Status: "l", PercentComplete: "80", StartDate: "2014-01-01T10:00:00", EndDate: "06/01/2014 10:00:00" },
   {Jobs: "3 Stream", Status: "l", PercentComplete: "80", StartDate: "2014-01-01T10:00:00", EndDate: "06/01/2014 10:00:00" },
   {Jobs: "Fenley", Status: "l", PercentComplete: "80", StartDate: "2014-01-01T10:00:00", EndDate: "06/01/2014 10:00:00" },
  ];
 
  // create a JSONModel, fill in the data and bind the Table to this model
  var oModel = new sap.ui.model.json.JSONModel();
  oModel.setData({modelData: aData});
  oTable.setModel(oModel);
  oTable.bindRows("/XMII/CM/Projects Status/Projects_Status.html");
 
  // finally place the Table into the UI
  oTable.placeAt("content");
 
</script>

 

</head>
<body class='sapUiBody'>
  <div id='content'></div>
</body>
</html>


Viewing all articles
Browse latest Browse all 6178

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>