Show TOC

Master List FilteringLocate this document in the navigation structure

You can use the following best practices when implementing search, sorting, filtering and grouping functions for a master list in your Master-Detail apps.

A search field is displayed in the master list to filter the list items for a custom keyword. In the footer of the master list, options for sorting, filtering, and grouping are displayed. When searching or using one of the options in the footer, the list content is updated automatically and the search result is displayed.

All four options adjust the master list content (search, sort, filter, group) and are managed and applied in the logic of the master controller. This section describes the implementation details for these four options.

Search

The search is implemented in a manual mode and the list operation mode is "server". This means that the search has to be triggered explicitly by pressing enter or the search button, and the results are always fetched from the server.

The search function is implemented using the standard SAPUI5 sap.ui.model.Filter objects. The options are added to an internal state object of the controller and applied together with the filters that can be selected in the filter options. The type of these filters is "Application", and these filters are added on top of the predefined filters from the framework of type "Control".

The Search field also displays a Refresh button. Pressing this button triggers a simple refresh for the list binding. On touch-enabled devices, a refresh can be triggered by pulling the master list down using a sap.m.PullToRefresh control.

Sorting, Filtering and Grouping

Sorting, filtering, and grouping can be implemented in two ways:

  • By using a semantic select control (sap.m.semantic.SortSelect/GroupSelect/FilterSelect ) in the footer area of the master page (recommended for simple operations)
  • By using a semantic button that opens a sap.m.ViewSettingsDialog containing options for sorting, grouping, and filtering (recommended for more complex logic, such as custom filters)

In a Master-Detail app, these two modes can also be mixed as specified in the SAP Fiori Design Guidelines (see Related Information at the bottom of this chapter for more details). In the Master-Detail template app, the sorting and grouping options are implemented with a semantic Select control and the filtering options in a ViewSettingsDialog control to show both use cases.

The event handlers that are called when selecting a sorting and grouping option are similar, and create a sap.ui.model.Sorter object on the "key" field of the selected item. For the grouping functionality, a custom grouper is loaded and applied to the selected entry. Both sorting and grouping options are applied together on the binding of the master list.

The filtering options are implemented as an XML fragment with a sap.m.ViewSettingsDialog in a fragment. Therefore we process the selected filter options in the handler of the dialog's confirm event. A sap.ui.model.Filter object is created for each filter option that has been selected in the dialog and applied together with the search option on the master list.

The filter bar is automatically updated with the chosen filter texts. It is displayed on top of the master list and can be clicked to reopen the filter settings.