Skip to Content
Technical Articles
Author's profile photo Vivekanandhan Srinivasan

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.

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo ARPITH BHAT
      ARPITH BHAT

      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.

      Author's profile photo gautam 06
      gautam 06

      Could you please provide the link to complete code?

      Author's profile photo Ashish Bedi
      Ashish Bedi

      Can you share the compete code

      Author's profile photo Dharmendra Kumar
      Dharmendra Kumar

      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

      Author's profile photo Shubham Mane
      Shubham Mane

      Hi Vivekanandhan Srinivasan,

      How can we add table data, using your code i am able to add column but cells value how to add i trucked there