Patterns Sort & Filter Sort & Filter Overview

Updated: February 7, 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 & Filter Patterns

Sort & Filter Form

The sort & 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 & 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 & filter form for large complex filters with a lot of sort & filter options.
  • Use it if the amount of data is very large and advanced filtering is needed.
Don't

Don’t use the sort & 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 & filter form for iPhone (left) and for iPad (right)
Sort & filter form for iPhone (left) and for iPad (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 & 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 fullscreen 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

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

Development: Create and Filter Patterns

SAP Fiori for Android: Sort and Filter Pattern