Technical Articles
Dynamic generation of table in SAPUI5
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:
UX Guidelines:
Extends:
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.
Hello Vivekanandhan,
Very informative blog and the details are very crisp and to the point and is really helpful for many UI5 developers.
Would be awaiting for many more such informative blogs from you.
Thanks.
Could you please provide the link to complete code?
Can you share the compete code
The content is good.. but not able to replicate the activity you are trying to perform...
i have a need to build a table will dynamic column holding rows dynamic elements e.g.
col 1 | col2 | col 3
val1 | val11| element of type check box
val2 | val11| element of type input box
val3 | val11| element of type combobox
ie table having column element dynamic based on data.. i hoping your approach might give some way to it.. let me know
Thanks
Hi Vivekanandhan Srinivasan,