Skip to Content
0
May 16, 2014 at 11:48 AM

How to data binding in Tables

54 Views

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>