| Table of Contents | ||
|---|---|---|
|
...
A filter pane is an area located on the left side of a page, allowing users to filter data by a set of parameters.
 |
Basic Flow
The filter pane contains two areas: a filter bar and a content panel.
When relevant, the filter bar is always shown.
Selected filters are represented by chicklets, appearing above the presented data (see The Chicklet Area below).
...
Each tab can have one of these states:
State | Image | Comments |
|---|---|---|
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 a tab will shows the relevant content in the content panel.
The Content Panel
 |
Structure
The content panel contains the following elements:
...
Opening a panel containing a form will set the focus to the first field of the form.
The Chicklet Area
 |
General Guidelines
Chicklets are indicators of the currently applied filters.
There are two types of chicklets:
Regular.Deleting these chicklets will clear the corresponding filters.
Mandatory.Each mandatory chicklet will have a default value.Deleting a mandatory chicklet will show an empty state, instructing the user to apply the mandatory filters (see below).
In rare cases, a filter pane can be used without chicklets. In this case, a Clear button should be included in the content 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.
...
Each chicklet can have one of these states:
State | Image | Comments |
|---|---|---|
Regular |  | |
Hover |  | |
Active / Selected |  | Only one chicklet can be selected at any given time. |
Ghost |  | |
Ghost, Hover |  | |
Ghost, Active |  | |
Focused |  | |
Focused, Hover |  | |
Focused, Active |  |
Structure
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.
...
For data in a Dialog or Details Panel.
Common Examples
Designs | Comment |
|---|---|
 | A single list filter with no dialog buttons. |
 | A date picker filter. |
 | A multi accordion filter. |
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Responsive design
Verint products should dynamically respond to the user’s screen size, platform, and orientation, supporting all devices down to the common tablet size (960px width).
For more information, see the general Responsive Design guidelines.
Pane width
The filter bar and the content panel always have a fixed width, and do not respond to the width of the screen.
The default state of the content panel changes at different widths.
For screen sizes of 1366 px and below, it is recommended that it is closed and unpinned by default.
For screen sizes of 1367 px and above, it is recommended that it is pinned open by default. (This is optional depending on the use case).
At 960px and below, the pin and expand options should be disabled.
Pane height
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.
Design
Zeplin link | Screen thumbnail |
|---|---|
 | |
 | |
 | |
 |
Code
...