Table sap.m.Table in SAPUI5

21
44250

Hello everyone, in this tutorial we will learn how to use tables in SAPUI5 applications or SAP Fiori Apps.

In SAPUI5 UI elements library table can be found in two libraries one sap.m.Table and other sap.ui.table.Table.

Both UI controls are used for creating tables in SAPUI5 application with subtle difference. As the namespace tells that sap.m.Table is used in developing mobile specific applications and sap.ui.table.Table is used in desktop specific applications.

In this tutorials we will use sap.m.Table control to create a table and explores all possible features what it got for us. So lets get started.

1. Open Eclipse IDE and create a SAPUI5 Application project by clicking on File → New → Project. Choose Application Project under SAPUI5 Application Development.

New SAPUI5 Application Project

2. Click on Next and provide the Project Name, choose sap.m library and hit Next to create a initial view.

Choose sap.m Library

3. Provide the view name and choose type of the view as Java Script.Here you can choose any of the option as per your preference and hit Next to create project.

Create a New View

4. A new SAPUI5 project is created in Project Explorer. Select index.html file in the project and double click to appear in the workbench window. Make sure the sap.m library is provided in this file to be able to use in the application.Code inside the index.html should like below.

Index.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />

<script src="resources/sap-ui-core.js" 
        id="sap-ui-bootstrap"
   data-sap-ui-libs="sap.m"  
        data-sap-ui-theme="sap_bluecrystal">  
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

<script>
  sap.ui.localResources("demotable");
  var app = new sap.m.App({
    initialPage: "iddemoTable1"
  });
  var page = sap.ui.view({
    id: "iddemoTable1",
    viewName: "demotable.demoTable",
    type: sap.ui.core.mvc.ViewType.JS
  });
  app.addPage(page);
  app.placeAt("content");
</script>

</head>
<body class="sapUiBody" role="application">
 <div id="content"></div>
</body>
</html>

5. Now double click on the demoTable.view.js to create and add Table inside the View. All the UI Element controls should be placed in the CreateContent() method of the view. Add the below code to create a Table and columns of the table in the view.

var oTable = new sap.m.Table("idPrdList", {   
      inset : true, 
      headerText : "List of Products",
      headerDesign : sap.m.ListHeaderDesign.Standard, 
      mode : sap.m.ListMode.None,   
      includeItemInSelection : false,   
    });
    
    var col1 = new sap.m.Column("col1",{header: new sap.m.Label({text:"Product Name"})});
    oTable.addColumn(col1); 
    
    var col2 = new sap.m.Column("col2",{header: new sap.m.Label({text:"Description"})});
    oTable.addColumn(col2); 
    
    var col3 = new sap.m.Column("col3",{header: new sap.m.Label({text:"Price"})});
    oTable.addColumn(col3);    

6. In the above step we have instantiated the Table and set the properties like “headerText” to the Table. After that we have added 3 columns Product Name, Description and Price to the Table. The full API reference for the table is available here.

7. After adding columns we need to have “ColumnListItem” as Aggregation to hold the data i.e different rows inside the table.So create the ColumnListItem and bind the aggregation to the table. Write the below code.

var colItems = new sap.m.ColumnListItem("colItems",{type:"Active"});
oTable.bindAggregation("items","/value",colItems);

8. After adding the ColumnListItem we need to define cells. Each cell can by of any basic Value Holders from the sap.m library. Here i have used sap.m.Text to display the data in Table as simple Text.Append the below code to the existing code.

var txtNAME = new sap.m.Text("txtNAME",{text:"{ProductID}"});
colItems.addCell(txtNAME); 
    
var txtNAME2 = new sap.m.Text("txtNAME2",{text:"{ProductName}"});
colItems.addCell(txtNAME2); 
   
var txtNAME3 = new sap.m.Text("txtNAME3",{text:"{UnitsInStock}"});
colItems.addCell(txtNAME3);

9. Now we have created a Table with 3 columns and ColumnListItem as aggregation to hold multiple rows. We need to add the Table to the View to be able to see in the UI. So add the instance of the Table to the content of the Page like below.

return new sap.m.Page({
		title: "Title",
		content: [
		            oTable
		]
	});

10. By this our designing of Table is done. Lets test the application and check whether we are able to see the Table in UI. You should see the Table like below.

Table Output

11. Now table is empty our next step is to provide the data to this Table. To provide the data to the table we need to create JSON Model to set the data to the model. So Navigate to the controller demoTable.comtroller.js and write the below code inside the Init( ) method.

onInit: function() {
var sUrl = "http://services.odata.org/Northwind/Northwind.svc/Products";
var oModel = sap.ui.model.json.JSONModel(sUrl);
sap.ui.getCore().setModel(oModel);
}

12. What we have done in the above step. Declared a JSON model and set the data to the model by passing the Northwind OData service url of Product List. Next we have set the model to the core to access globally in the application. You can set the model to the View by writing this.getView().setModel(oModel).

13.  Save the project the test the application to running the index.html file. Right click in index.html → Run AsWeb App Preview. You should see the Table with data of products.

Final Output

You have successfully created a table in SAPUI5 Application.In our next tutorials we will see what the different modes of Table available in sap.m.Table UI control.

Please stay tuned to us for more SAPUI5 Tutorials. Please feel free to comment and let us know your feedback. You feedback will keep us alive.

Thank you. 🙂

Comments are closed.