Quick sort is a contextual sort pattern that allows users to change the sort criteria of a component. It can be implemented on component level to allow sorting list cards or preview table views. It can also be implemented in fullscreen view, for example, in list reports.
Quick sort as a menu on a list report (left) and as a submenu on a list card component (right).
A. Sort Icon
The “Sort” icon opens the quick sort menu.
The menu/submenu contains sort options for the user.
C. Checkmark Icon
The checkmark only appears when a criterion is selected and active.
D. Sort Criteria
The sort criteria define the options available to the user to sort the component. Do not use more than five sort criteria to avoid scrolling in the menu.
E. Expand Submenu
This opens the submenu with the sort criteria.
F. Collapse Submenu
This closes the submenu with the sort criteria.
G. Submenu Title
By default, the title of the submenu is “Sort By”. The subtitle is the current selected sort criterion.
Quick Sort in a menu
If a direct sort action is available, for example, in a navigation bar, a tap on the sort button opens the menu that shows the sort criteria. As soon as a user selects a sort criterion, the menu closes and the component gets sorted according to the new criterion. A toast message indicates that the sorting has changed to the new criterion.
Quick Sort in a submenu
If the sort action is part of an overflow menu, a tap on the sort entry opens a submenu. Once a user has selected a sort criterion in the submenu, both menus close. The sorting of the component changes based on the selected criterion. A toast message indicates the new sorting.
The overflow icon in the card header (1) triggers the overflow menu (2), selecting the “Sort By” entry opens the submenu with the sort criteria. After selecting a new sort criterion(3), the list gets sorted and a toast message indicates completion (4)
On iPhone in compact width and on iPad in regular width, quick sort uses the default iOS menu and submenu.
Quick sort menu on iPhone (left) and iPad (right)
Behavior of the Submenu
On iPhone, the submenu is opened on top of the menu. The menu entry that opens the submenu has a chevron on the left side. The chevron turns down in the submenu header. The header shows the same information as the menu entry, which opened the submenu.
Submenu behavior on iPhone: menu (left) and submenu (right)
Quick Sort in a Menu
The quick sort in a menu allows users to access the quick sort criteria by tapping on an icon button, for example, in the navigation bar.
Quick sort criteria in a menu
Quick Sort in a Submenu
If users need to take several actions within a component or fullscreen view, they can access the quick sort criteria in a submenu.
Quick sort criteria in a submenu
Related Components / Patterns: Sort & Filter Form, Sort & Filter Overview
SAP Fiori for Android: N/A
Human Interface Guidelines: Menu