Overview
The Simple Filter Bar filters content (like item lists, tables, or card-based catalogs) according to a fixed set of filter criteria. It can be used for all kinds of data arrays, regardless of their size or complexity. The Simple Filter Bar has afixed set of filter criteriaand is not intended to support variants.
Look and Feel
When to Use
Recommended
- Display a fixed set of filter criteria in the page header.
- Display a Search Field as the first filter criteria.
- Implement cascading data filtering which promotes exploration.
Not Recommended
- Avoid using adapting filters our saving filter criteria.
- Avoid using the filter buttons, use filters dynamically as they are applied.
- Avoid cascading filter criteria a.k.a. avoid filtering the filters.
Anatomy
Search Field
The search field filter is the recommended way of filtering data. The term used should be applied to all elements of the data array (all table columns) with the OR operand. This will allow providing maximum results based on criteria.
Search Field
See also:
Fiori Design Guideline - Search
UI5 DemoKit Sample - Search Field
Data Filter Fields
Filtering specific data array elements varies based on the data type. In general using Select, ComboBox, DatePicker would be sufficient. Do some data types which involve time and time ranges abstracting specific dates to predefined ranges could be very beneficial.
Recommended
- Label the Data Filter Field to describe the content.
- If possible match the label the Data Filter Field with a table column name you are filtering
- Always have All <Label> selected in the Data Filter Field. This will display all data entries.
- Always have an option to resent the filter from the dropdown.
Not Recommended
- Do not filter descriptions. Use search instead.
- Do not filter unique identifiers (ex. numeric ID, tracking number, etc.). Use search instead.
STRING - Single Selection (Recommended)
It is recommended to use single selection when filtering enumerations of strings. Use this if the single selection is sufficient for your filter.
STRING - Single Selection
Recommended
- Use the Select control if the number of entries is low and can be easily browsed (less than 20)
- Use the Combo Box control if the number of entries is large (more than 20)
See also:
Fiori Design Guideline - Select
Fiori Design Guideline - Combo Box
Fundamental Styles Sample - Select
Fundamental Styles Sample - Combo Box
STRING - Multi Selection
It is recommended to use multi-selection when filtering enumerations of strings. Use if it is customary to select more than one filter option from a predefined list.
STRING - Multiple Selection
Recommended
- Use the Multi-Combo Box control to allow multi-select.
See also:
Fiori Design Guideline - Multi-Combo Box
UI5 DemoKit Sample - Multi-Combo Box
Fundamental Styles Sample - Multi-Combo Box
DATETIME - Time Ago (Recommended)
When filtering dates and times it is preferred to use a time ago designation of the data. Not only does it simplify the filter process, but also it allows for dynamic selections. Consider your data and common filter options and introduce them in a simple Select.
DATETIME - Time Ago
DATETIME - Date Selection
When there is a need of filtering a specific date, several dates or a range that cannot be represented in the section above, consider using a Date Picker.
DATETIME - Date Selection
See also:
Fiori Design Guideline - Date Picker
UI5 DemoKit Sample - Date Picker
Fundamental Styles Sample - Date Picker
INTEGER - Value Range (Recommended)
When filtering numeric content consider defining logical and usable range sets and use a Multi-Combo Box to present the valid options.
INTEGER - Value Range