首页 > SAP > SAPUI5 > Table sap.m.Table in SAPUI5
2019
08-27

Table sap.m.Table in SAPUI5

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

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.

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.

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.

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

最后编辑:
作者:yangsen
有需要可在文章留言或者邮件yan252@163.com给我。