Sort By Multiple Criteria
Fiori: MultiSort
The sort by multiple criteria pattern is an enhancement to the sorting features in the sort and filter. It allows users to select more than one sorting criterion and set the order in which these criteria will be applied. This advanced sorting feature allows users to prioritize the list of objects to their specific needs so they can find the most important options easily.
Sort by multiple criteria on mobile (left) and tablet (right)
Sort by multiple criteria is formed by a group of checkbox cells with the reorder feature.
A. Sorting Criteria
The Sort by label indicates the purpose of this selection. The available sorting criteria are presented as a list of checkbox cells. The use of checkboxes hints to users that they can select more than one option.
B. Drag Handle
Each option will have a drag handle. Users can tap on the drag handle or long press on the cell to reorder their selection.
C. Sort Order (Optional)
An optional feature that allows user to set the sorting direction for each sorting criteria they selected. Users tap on the text button to toggle between ascending or descending. When possible, describe the sort order in context, for example use “High to Low” and “Low to High” for price instead of “Ascending” and “Descending”.
D. Helper Text (Optional)
An optional helper text can be used to provide guidance on how this control works. A brief hint would be helpful to users who may be unfamiliar with this control. If the control is in an error state, an error message will appear in the place of the helper text.
Anatomy of Sort by multiple criteria
If all options are deselected, an error message will show up to remind users that at least one sorting criterion needs to be selected in order to show the list of objects.
Error interaction
Development: MultiSort