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:

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.