Filter
Description
- Purpose
- Filters are used to let the user limit content within a table, list or any other collection of items presented on the screen.
- Composition
- Filters are composed of two visually separated areas: First, there is the Filter Bar at the top. It contains an Expand/Collapse Glyph on the left side. On the right, an "Apply" Bulky Button, a "Reset" Bulky Button and a Toggle Button for activating/deactivating the Filter are placed. An additional row with set filter settings will be shown at the bottom of the Filter Bar, when the Filter Bar is collapsed and the Filter is activated at the same time. Second, there is an area where the Input Fields are displayed. Every Input Field is rendered with a Label on the left and a "Remove" Glyph on the right. The values, that are currently entered in the Input Fields, are displayed as non-editable text and will get editable when the user focuses an Input Field (see effect). After the last Input Field, an "Add" Bulky Button is shown if additional Input Fields can be added.
- Effect
- In the Filter Bar: Clicking on the Expand/Collapse Glyph expands/collapses the second area of the Filter, where the Input Fields are placed. When the Filter Bar is expanded, the row with set filter settings at the bottom of the Filter Bar will be hidden. Clicking on the "Apply" Bulky Button applies the settings which the user has made for the Filter and reloads the content of the item collection (e.g. Table) immediately. Clicking on the "Reset" Bulky Button resets the Filter to the initial state and reloads the content of the item collection immediately. Clicking on the "Toggle" Button imitates a click on the "Apply" Bulky Button, activates/deactivates the Filter and reloads the content of the item collection immediately. In the Input Fields Area: Clicking on an Input Field between its Label and its "Remove" Glyph shows up a Popover where the Input Field is presented. Writing down a value into the Input Field in the Popover synchronizes the values in both Input Fields. Clicking on the "Remove" Glyph next to an Input Field makes this Input Field disappear from the Filter. Clicking on the "Add" Bulky Button shows up a list with Labels of all possible Input Fields, which are not part of the Filter yet, in a Popover. Clicking on one specific Input Field Label in this list adds the selected Input Field to the Filter and imitates a click on it.
Rivals
- forms
- Unlike Filters, Forms are used to enter or modify data in the system.
Rules
- Usage
- Filters MUST be used on the same page as tables or other collections of items.
- Interaction
- Input Fields outside of Popovers MUST NOT be editable, just clickable.
- Wording
- Labels of Input Fields MUST be shown shortened (with three dots at the end) when space is scarce.
- The set filter settings in the bottom row of the Filter Bar MUST be shown shortened when space is scarce.
- Ordering
- A Filter MUST be placed above the item collection it acts upon.
- Style
- The Filter Bar and the Input Fields Area SHOULD be separated visually, e.g. with a border-line.
- The Toggle Button MUST NOT contain a Label.
- The Popovers SHOULD be shown below the Input Field or the "Add" Bulky Button.
- Responsiveness
- On screens larger than medium size, there MUST be three Input Fields per row. On medium-sized screens or below, only one Input Field MUST be shown per row.
- Accessibility
- Input Fields MUST be accessible by keyboard by using the "Tab"-Key and clickable by using the "Return"-Key.
Relations
- Parents
- UIComponent
- Input
- Container
- Descendants
- Standard