| Table of Contents | ||
|---|---|---|
|
...
The filter pane contains two areas: a filter bar and a content panel.
On pages where the pane is applied, the filter bar is always shown.
Selected filters are represented by chicklets chiclets, appearing above the data (see the Chicklet Chiclet Area below).
Usage and Behavior
The filter pane can behave in one of three ways:
Faceted - applying one filter affects the other filters, e.g. by updating the number of expected results against the other filters or removing irrelevant options.
Funnel - applying a parent filter affects child filters, but applying a child filter does not affect parent filters.
Independent - applying a filter does not affect other filters.
Users can apply changes on either a single or multiple tabs using the Apply button (see Interactions below).
An application may have a similar set of filters across related workspaces. In this case, applying a filter on one workspace will affect the same filter on all related workspaces.
The Filter Bar
...
Each tab can have one of these states:
State | Image | Comments |
|---|---|---|
Regular |  | |
Regular, Applied |  | |
Hover |  | |
Active |  | |
Selected |  | Only one tab can be selected at any given time. |
Selected, Hover |  | |
Focused |  | |
Focused, Hover |  | |
Focused, Selected |  |
Default State
In most cases, no tabs are selected by default.
...
Clicking the pin icon:
when the content panel is unpinned:
changes the icon to pinned.
changes the state of the content panel to pinned (see above).
when the content panel is pinned:
changes the icon to unpinned.
closes the content panel.
Clicking the help icon, if exists, opens a relevant help page in a new browser window.
Changing Updating the selection within content of a panel:
enables the Apply button.
shows a blue indicator next to the relevant tab on the filter bar.
shows / updates the number of changes made across allcontent panels.
Clicking the Apply button:
applies the filter(s).
disables the Apply button.
removes the updates counter from the bottom of the panel.
adds one or more chicklets chiclets to the chicklet chiclet area (see The Chicklet Chiclet Area below), where relevant.
if unpinned, closes the content panel.
Clicking the Cancel button:
reverts all unapplied changes to the content.
disables the Apply button.
if the content panel is unpinned, closes it.
if the content panel is pinned, sets the focus to the first field of the content panel.
Clicking outside the content panel when it is unpinned.:
If no unapplied changes have been made, closes the panel closes.
If unapplied changes have been made, a Message Popup will appear allowing the user to either close the panel without applying the filter(s) or continue editing.
...
Opening a panel containing a form will set the focus to the first field of the form.
Allow users to determine the persistency of the pin status in system preferences.
The
...
Chiclet Area
...
General Guidelines
Chicklets Chiclets are indicators of the currently applied filters.
There are two types of chickletschiclets:
Regular.Deleting these chicklets chiclets will clear the corresponding filters.
Mandatory.Each mandatory chicklet chiclet will have a default value.Mandatory chicklets chiclets cannot be deleted, only be reset to their default values (see below).
In rare cases, a filter pane can be used without chickletschiclets. In this case, a Clear button should be included in the content panel.
...
Clicking Apply on the filter pane may add a single or multiple chickletschiclets, depending on the number of filters that have been applied.
States
Each chicklet chiclet can have one of these states:
State | Regular | Mandatory | Comments |
|---|---|---|---|
Regular |  | ||
Hover |  |
 | |
Active / Selected |  |
 | Only one |
chiclet can be selected at any given time. | |||
Focused |  | ||
Focused, Hover |  |
 | |
Focused, Active |  |
 |
Structure
The width of a chicklet chiclet will depend on its content, within minimum and maximum limits.
Each chicklet chiclet contains:
an icon, which is a smaller version of the corresponding tab icon on the filter bar.
chicklet chiclet 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 chickletchiclet, the name of the filter followed by the number of values in brackets (e.g. Interactions (3)). In this case, hovering the chicklet chiclet will show a tooltip with the full list of items.
a close icon button (for regular chickletschiclets) or a reset icon button (for mandatory chickletschiclets), shown on hover.
If no mandatory chicklets chiclets were defined, a Clear All icon button will appear after the last chickletchiclet, allowing users to clear all filters.
If at least one mandatory chicklet chiclet was defined, a Reset to default icon button will appear after the last chickletchiclet.
The Reset to default button will be disabled by default. Changing the default value or adding more chicklets chiclets will enable it.
...
Placement and Positioning
The chicklet chiclet area appears in the main workspace, above the corresponding page content.
When no filters are applied, the chicklet chiclet area will be hidden, and the page content will start directly below the page header. Adding the first chicklet chiclet will push all of the content down, below the chicklet chiclet area.
Mandatory chicklets chiclets will be the first items. Other chicklets chiclets will appear in the order they were added.
In case the set of chicklets chiclets (including the Clear All button) exceeds the width of the chicklet chiclet area, they will wrap on to the next row, pushing the page content down. There can be up to three rows: beyond that point, a scrollbar will appear.
Interaction
Hovering a
...
chiclet
Regular chicklets chiclets - shows an X icon inside the chickletchiclet, allowing the user to remove it.
Mandatory chicklets chiclets - shows a reset icon inside the chickletchiclet, allowing the user to reset the chicklet chiclet to its default value.
Clicking a
...
chiclet
When the panel is pinned - shows the relevant content in the panel.
When unpinned - opens the relevant content panel (if not already open).
Clicking the
...
chiclet x icon:
removes the chickletchiclet. Any remaining chicklets chiclets will move to close the gap, if exists,
clears the corresponding filter,
clears the blue indicator from the corresponding tab on the filter bar (unless there are more items related to that filter).
Clicking the
...
chiclet reset icon:
resets the chicklet chiclet to its default value,
applies the corresponding filter.
...
shows a confirmation dialog (if needed),
removes all chickletsnon-mandatory chiclets,
removes the Clear all button,
clears all non-mandatory filters,
removes the blue indicator from all tabs, except for mandatory filters.
Clicking the Reset to default button:
shows a confirmation dialog (if needed),
removes all regular chickletschiclets,
resets all mandatory chicklets chiclets to their default values,
disables the Reset to default button,
applies the default filter,
removes the blue indicator from all tabs except for mandatory filters.
...
The filter pane should always fill the vertical space available, from beneath the VerinTop to the bottom of the page.
When the screen height (and therefore the filter pane height) changes:
the content of the filter bar and the content panel (including headers, search, and filter options), should remain fixed to the top.
an internal Scrollbar should be used if the content does not fit vertically.
the Apply button and footer information should remain fixed to the bottom.
Common Examples
Designs | Comment |
|---|---|
 | A single list filter with no dialog buttons. |
 | A date picker filter. |
 | A multi accordion filter. |
Design
Zeplin link | Screen thumbnail |
|---|---|
 | |
 | |
 | |
 |
Code
...