Sorting and Filtering

Objective

After completing this lesson, you will be able to use the capabilities offered by SAPUI5 to sort and filter model data.

Initial Sorting and Filtering

With the aggregation binding, sort and filter criteria can be provided for the initial display of the data. In XML views, the complex binding syntax is employed for this purpose.

Watch this video to learn more about sorting and filtering for initial display of data.

Sorting and Filtering API

Filtering

To filter data manually after the aggregation binding is complete, you can access the corresponding binding object and call the filter method on it. The method applies a new set of filters to the data represented by the queried binding. The filters passed are objects of class sap/ui/model//Filter.

Sample filter method code, as described in the following text.

The example in the figure Using the filter Method shows the view controller method filterCustomers, which is used to filter the data in the customer table.

First, this method instantiates a Filter object that filters the model data for those customers that contain the string "SAP" in the CustomerName property.

The created Filter object is added to an array via the push method.

Then the customer table on the view is retrieved via its Id, and the binding object for its items aggregation is queried. Finally, the filter method is called on the binding object and the array with the Filter object is passed to it.

As a result, only those customers are displayed in the customer table on the UI whose customer name contains the string "SAP".

Sorting

To sort data manually after the aggregation binding is complete, you can access the corresponding binding object and call the sort method on it. The sort method sorts the data represented by the queried binding according to the passed sorter object. Instead of a single sorter also an array of sorters can be passed to the sort method. In this case they are processed in the sequence in which they are contained in the array. The sorters passed are objects of class sap/ui/model/Sorter.

Sample view controller method, as described in the following text.

The example in the figure Using the sort Method shows the view controller method sortCustomers, which is used to sort the data in the customer table.

First, this method instantiates a Sorter object that sorts the model data in descending order by the City property. The second (optional) parameter of the constructor specifies the sort direction. Its default value is false, which means an ascending sort.

The created Sorter object is added to an array via the push method.

Then the customer table on the view is retrieved via its Id, and the binding object for its items aggregation is queried. Finally, the sort method is called on the binding object and the array with the Sorter object is passed to it.

As a result, the customer table on the UI is sorted by City in descending order.