Advance table column definition and Model binding with SAPUI5

Note : This blog is for application in SAPUI5 with JS View,

This blog will be useful for the table column definition and binding and SAPUI5. This explain how to format the table cell with the data coming from the Webservice or oData Service at runtime, because sometimes it is not possible to configure the desired values to flow from the DB.

Let’s take an example of one JSON response coming from the webservice,

{“JSON”:[{“A”:34,”B”:56,”C”:78},

{“A”:20,”B”:90,”C”:45},

{“A”:10,”B”:20,”C”:87}]};

Now I want to display first two columns in the table as it is but third column should be subtraction of 2nd and 3rd column coming from the model,

var JSON = {“JSON”:[{“A”:34,”B”:56,”C”:78},

{“A”:20,”B”:90,”C”:45},

{“A”:10,”B”:20,”C”:87}]};

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

oModel.setData(JSON );

var oTableproduct1 = new sap.ui.table.Table();

oTableLastReading.addColumn(new sap.ui.table.Column().setTemplate(new sap.ui.commons.TextView().bindProperty(“text”, {parts : [ {path : “‘A'”} ]})).setLabel(new sap.ui.commons.Label({text : “A”})));

oTableLastReading.addColumn(new sap.ui.table.Column().setTemplate(new sap.ui.commons.TextView().bindProperty(“text”, {parts : [ {path : “‘B'”} ]})).setLabel(new sap.ui.commons.Label({text : “B”})));

oTableLastReading.addColumn(new sap.ui.table.Column().setTemplate(new sap.ui.commons.TextView().bindProperty(“text”,{parts : [{path : “‘B'”},{path : “‘C'”} ],
formatter : function(B,C){

var val=B-C
return val;
}})).setLabel(new sap.ui.commons.Label({text : “C”})));

As shown above, “formatter” function can be used along with the “binproperty” aggregate to format any column element at runtime.

Thanks and Regards,

Bhavin Anajwala