Updated: June 21, 2023

Sort & Filter Overview

Intro

The sort and filter pattern allows users to narrow down results from a set of data by setting sort and filter criteria.

Sort and Filter Patterns

Sort and Filter Form

The sort and filter form is used for advanced filtering. For compact layout, it opens in a fullscreen modal, where the sort and filter options can be set. The modal closes and shows the results once the user taps on the result button in the form.

For regular width layout (iPad), the sort and filter form opens in a popover. The popover closes and updates the results when tapping the results button. To learn more, see Sort and Filter Form.

Do
  • Use the sort and filter form for large complex filters with a lot of sort and filter options.
  • Use it if the amount of data is very large and advanced filtering is needed.
Don't

Don’t use the sort and filter form for contextual filtering, that is, when the user should be able to immediately view changes on the filtered data. Use the filter feedback bar instead.

Sort and filter form in compact width (left) and regular width (right)
Sort and filter form in compact width (left) and regular width (right)

Filter Feedback Bar

The filter feedback bar is used for contextual onscreen sorting & filtering that enables the user to maintain the context to the displayed results.
The filter feedback bar is a horizontal bar above a set of data. It allows the user to apply frequently used filters. It shows the filters that have been applied to the data. The user can set multiple filters at once, as the data below reacts immediately to the changes. To learn more, see Filter Feedback Bar.

Do
  • Use the feedback filter bar for contextual onscreen sorting and filtering.
  • Use it if there are frequently used filter options.
  • Use it when users need to interact with already applied filters.
Don't

Don’t use the filter feedback bar if lots of filters need to be applied to the data. Use the sort & filter form instead.

Filter feedback bar above a list report
Filter feedback bar above a list report

Quick Sort

Quick sort is used for contextual onscreen sorting. It can be implemented on component level to allow users to sorting list cards or to preview table views. It can also be implemented in full-screen view, for example, in list reports. Quick sort criteria are either shown in a menu or in a submenu as part of an overflow menu.  To learn more, see Quick Sort. 

Do

Use the quick sort pattern for contextual onscreen sorting.

Don't

Don’t use the quick sort pattern if filters need to be applied to the data. Use the sort & filter form or filter feedback bar instead. 

Image with quick sort
Image with quick sort

Resources

Development: Create and Filter Patterns

SAP Fiori for Android: Sort and Filter Pattern

Related Components/Patterns: Sort & Filter Form, Filter Feedback Bar, Quick Sort