| Table of Contents | ||
|---|---|---|
|
...
The filter pane contains two areas:
thea filter bar
,and
thea content panel.
On When relevant pages, the filter bar is always shown.
Selected filters are represented by chicklets, appearing above the presented data (see The Chicklet Area below).
...
The main content area of the panel can show either a Form, a List, or a combination of the two.
The number of possible results can (optionally) be shown next each filter item in brackets. See Common Examples below.
The content can have a variety of layouts. See Common Examples below.
In some cases, users can navigate from the content panel to Subsections, allowing them to access additional settings.
...
Clicking the pin icon switches the icon between pinned and unpinned states.
When unpinned, the content of the page stretches to its full width, being partially hidden by the content panel.
When pinned, the content of the page narrows to be shown next to the panel, so nothing is hidden.
Clicking the help icon opens a relevant help page in a new browser window.
Changing the content of the panel enables the Apply / Apply All Filters, Cancel, and Clear buttons, where they exist.
Clicking the Apply / Apply All Filters button:
applies the filter (or filters).
disables the button.
enables the Clear button, where it exists.
shows a blue indicator next to the relevant tab (or tabs) on the filter bar.
adds a chicklet (or chicklets) to the chicklet area (see The Chicklet Area below), unless otherwise specified.
If unpinned, closes the content panel.
Clicking the Cancelbutton:
cancels any unapplied changes made to the content.
disables the Apply / Apply All Filters and Cancel buttons.
If unpinned, closes the content panel.
If pinned, sets the focus to the first field of the content panel.
Clicking the Clear button:
Resets all fields in the content panel to their default states (either blank or with default selections).
(The Clear button is only shown if Chicklets are not being used).Sets the focus to the first field of the content panel.
Clicking outside the content panel:
The content panel closes if:
the panel is unpinned. (When pinned, the panel always stays open).
no unapplied changes have been made.
If changes have been made to the content but have not been applied, a Popup may appear, allowing the user to either:
close the panel without applying the filter, or
continue editing.
...
For validations within a form see Field Validation.
Transitions
The content panel will open and close with a brief slide effect.
When pinning / unpinning the content panel, the content on the main area of the page will collapse / expand with a transition effect.
...
General Guidelines
Chicklets show the user that their data is currently filtered by one or more filters, which can be quickly clearedare indicators of the currently applied filters.
There are two types of chicklets:
Regular - deleting .Deleting these chicklets will clear the corresponding filters.
Mandatory - deleting these chicklets .Each mandatory chicklet will have a default value.Deleting a mandatory chicklet will show an empty state for the data, instructing the user to apply the mandatory filters (see below).
In some rare cases, the a filter pane can be used without chicklets. In this case, a Clear button must should be included in the Content Panelcontent panel.
 |
In Discrete mode (see Basic Flow above):
in most cases, clicking Apply in the content panel creates a single chicklet. However, when the panel contains several distinct parameters, applying the filter may create several chicklets.
In Combined mode:
clicking Apply All Filters may create a single or multiple chicklets, depending on the number of filters that have been changed.
...
The width of a chicklet will depend on its content, within minimum and maximum limits.
Each chicklet contains:
an icon, which is a smaller version of the corresponding tab icon on the filter bar.
chicklet text.
For a single selection, the selected value will be shown (e.g. Last 24 hours).
For multiple selections, it can show either:
the selected values, separated by commas (e.g. APAC, EMEA), or
if the text exceeds the maximum width of the chicklet, the name of the filter followed by the number of values in brackets (e.g. Interactions (3)). In this case, hovering the chicklet will show a tooltip with the full list of items.
a Close icon button (X), shown on hover.
In some cases, an additional action will appear:
If no mandatory chicklets were defined, a Clear All icon button
will appear after the last chicklet, allowing users to clear all filters.
If at least one mandatory chicklet was defined, and the user changed its default value or added more chicklets, a Reset to default icon button will appear. Clicking the button will reset all mandatory chicklets to their default values and remove all other chicklets.
...
Placement and Positioning
...
For major data sets (for example a table, grid, or dashboard), which needs to be filtered by one or more parameters.
For complex filtering or when a large number of filters is needed.
Don’t use:
For data in a Dialog or Details Panel.
Common Examples
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
 | |
 | |
 | |
 |
...