首页 > SAP > SAPUI5 > Grouping,Filtering and Sorting in sap.m.Table
2019
08-27

Grouping,Filtering and Sorting in sap.m.Table

Hello everyone, in this SAPUI5 tutorial, we will see how to apply groping,filtering and sorting in sap.m.Table in any SAPUI5 applications or Fiori applications. To achieve this we need use the sap.m.ViewSettingsDialog in table. Lets get started.

1.Prerequisites

You should have basic understanding of SAPUI5 applications.
You should be aware of how to use sap.m.Table to display Table in SAPUI5 applications.

2.SAPUI5 API’s Involved

sap.ui.model.json.JSONModel
sap.ui.xmlfragment
sap.ui.model.Sorter
sap.ui.model.Filter
sap.m.Table
sap.m.ViewSettingsDialog

3.Step-by-Step Procedure

1. Create an SAPUI5 application in Eclipse IDE with a single view

2. You application structure should look like below

SAPUI5 Application Structure

3. Next you need to design the view to display Table data.Below is the code for view and controller.
Table.view.xml

Table.controller.js

4. Now run the application, you should be able to see the table and the data inside the table like below.

sap.m.Table and its Content

5. If you look at the output, you should be able to see a toolbar button above the table with an icon to the top right corner, when you click on this button we will implement a Table View Settings popup window and inside this window we will add grouping,sorting and filtering capabilities.

6. Next we need to design the Table – View Settings by using the standard view settings library sap.m.ViewSettingsDialog. To do that we need a fragment in which we design this dialog.If you we familiar with fragments, please go through it here before continuing this tutorial.

7. Below is the code for fragment file which contains the code for Table Settings Dialog.
SettingsDialog.fragment.xml

In the above file we created

Sorting for City and Age – Line 3 to 6
Grouping for City – Line 7 to 9 and
Filter for Age – Line 10 to 16

8. Now we need to call this fragment when the button is pressed. To do that we need to create event handler method for the event “onPress” of the button. Before the provide the event handler method name in the Table.view.xml we did that in Step-3 Line-10. Below is the code in the Table.controller.js to call the table view settings dialog.

9. After adding the above code, run the application to test whether we were able to call the dialog. You should the output like below.

Table View Settings Dialog

10. Now that we have seen the table view settings dialog our next step would be applying the grouping,sorting and filter to the table data. To do that we will need to create a event handler method for the event “confirm” and provide the same the table view settings fragment definition like in step-7 line-2. Copy and paste the below code in the controller Table.controller.js.

In the above code Line 8 to 21 is for grouping, Line 23 to 27 for sorting and Line 29 to 41 for filtering.

11. You final SAPUI5 application structure look like below.

Final SAPUI5 Application Structure

12. Its time for running the application, lets what we have done

Initial Output

Sorting on Age

Grouping on City

Filtering on Age > 25

Lets see the final video of our SAPUI5 application

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

留下一个回复

你的email不会被公开。

four + nine =