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.
2. Click on Next and provide the Project Name, choose sap.m library and hit Next to create a initial view.
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.
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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
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.
|
1 2 3 4 5 |
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 As → Web App Preview. You should see the Table with data of products.
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
