Quick Sort
Intro
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 of 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)
- Use quick sort for contextual fast sorting.
- If sorting and filtering is needed, use the sort and filter form.
- Keep the sort criteria in the menu as short as possible.
Filtering is not possible with quick sort.
A. Sort Icon
The “Sort” icon opens the quick sort menu.
B. Menu/Submenu
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 menu anatomy
Quick sort submenu anatomy
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.
The sort icon in the navigation bar (left) triggers the sort menu (middle), a new sort criterion is chosen and the list gets sorted. A toast message indicates completion (right)
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 in compact width: menu (left) and submenu (right)
On iPad, the submenu is opened next to the menu. The menu entry that opens the submenu shows a chevron on the right side. This indicates that the submenu is opened next to it. The submenu only shows the sort criteria. It does not have a header.
Submenu behavior in regular width
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
Human Interface Guidelines: Menu
Related Components/Patterns: Sort & Filter Form, Sort & Filter Overview
Your feedback has been sent to the SAP Fiori design team.