Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
vivek_anandhan
Participant

Dynamic generation of table in SAPUI5


This blog post gives you an idea about generating a table dynamically in the UI5 application based on the oData/Json.


For this we are going to consider sap.m.Table  control and the API information as follows.


Control Sample:


sap.m.Table


UX Guidelines:


Responsive Table


Extends:


sap.m.ListBase


Module: sap/m/Table


Visibility: public


Available since: 1.16


Application Component: CA-UI5-TBL


You can also get much more information on the UI5 demokit link https://sapui5.hana.ondemand.com/#/api/sap.m.Table


How the sap.m.Table works?



Above is the sections involved in the sap.m.Table.


Comprises of Column and ColumnListItem and which results for header and the dynamic values which we bind.


To generate the table dynamically, first create a table element with id in the view.



<Table id="idMyTable"  inset="false" growing="true" growingScrollToLoad="true" alternateRowColors="true">
<!-- Our code in the controller goes here -->
</Table>

 


In respective the controller.js


Based on the oData model execution or however you want generate the Column element



var oTable = this.getView().byId("idMyTable");

for (i = 0; i < s; i++) {
var oColumn = new sap.m.Column("col" + i, {
width: "1em",
header: new sap.m.Label({
text: <oData header text binding>
})
});
oTable.addColumn(oColumn);
}

Now add the oColumn you have created to the table within the loop


oTable.addColumn(oColumn);


Now the column part is over and now we have to concentrate on the ColumnListItem


Before that, create an array for cells and use the same count as that of column.



Var oCell = [];
for (i = 0; i < s; i++) {
if (i === 0) {
var cell1 = new sap.m.Text({
text: "{QuestionTx}"
});
}
oCell.push(cell1);
}

After creating the respective UI’s like Text box in which needs to be shown in the table, push them to the oCell Array.


This should happen within in the array.


Now the final part is creating the columnListItem



var aColList = new sap.m.ColumnListItem("aColList", {
cells: oCell
});

Add the cell array we have created to the cell of the columnListItem we have created.


Now finally, bind the odataset of to the table along with the columnListItem and this does the magic for us.



oTable.bindItems("<entityset>", aColList);

Now you can generate table based on the odata output and including the columns and rows.


This is very much helpful in scenarios where you are trying to develop apps for surveys and reports for attendance based on the dynamic values.


5 Comments
Labels in this area