| 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).
...
Clicking a tab:
Selects it,
unselects any other tab,
when panel is pinned - updates the content of the panel to correspond with the selected tab,
when panel is unpinned - opens the corresponding panel. When the panel is open, clicking the selected tab closes it.
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.
Allow the user to determine the persistency of the pin status in system preferences.
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.Mandatory chicklets cannot be deleted, only be reset to their default values (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.
...
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.
...
...
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 support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.
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.
...
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
...