| 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 selected parameters.
...
Basic Flow
The filter pane contains two areas: a filter bar and a content panel.
When relevantOn pages where the is applied, the filter bar is always shown.
Selected filters are represented by chicklets, appearing above the presented data (see The the Chicklet Area below).
States
The content panel has two states:
Unpinned (default) - the panel overlays the content of the page, hiding everything behind it.
Pinned - the panel is shown next to the content of the page so nothing is hidden
.
Usage and Behavior
A set of filters The filter pane can behave in one of three ways:
Faceted - filters are sorted by importance or popularity. Applying one filter changes applying one filter affects the other filters, e.g. by updating the number of possible results shown in brackets next to other filters, where applicable. (Common).Funnel - the filters are ordered by hierarchy. Applying 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. (Less common).
Independent - applying a filter does not affect other filters. (Not recommended).
The filter pane can operate in one of two modes:
Discrete - the user applies their selection from each filter tab independently, by clicking the Apply button separately for each one. (Common).
An exception is if only one selection is allowed within the tab. In this case, the Apply button will be hidden, and performing that single selection will apply the filter and close the filter pane. Combined - the user can apply selections from multiple filter tabs in one go, by clicking the Apply All Filters buttonAn 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.
Users can apply changes on either a single or multiple tabs using the Apply button (see Interactions below).
...
The Filter Bar
...
The Filter Bar
...
...
Structure
The filter bar contains one or more tabs.
Each tab consists of an icon and a title (e.g. Employees).
Once Whenever a filter has been is applied, a blue dot will be shown on the left side of the relevant next to the corresponding tab.
Placement and Positioning
...
stick to the left side of the page, beside the main workspace,
have a fixed width,
always fill the vertical space, from beneath the VerinTop to the bottom of the page, and
have the group of tabs aligned to the top of the bar.
States
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 |  |
...
In most cases, no tabs are selected by default.
Interaction
Users will be able to go from tab to tab freely, without the need to apply changes to each tab separately, as long as there are no errors on the current content panel (see below).
Clicking a tab:
Selects selects it,.
unselects any other tab,.
when the content panel is pinned - updates the content of the panel to correspond with to the selected tab,.
when the content panel is unpinned - opens the corresponding content panel. When the panel is open, clicking the selected tab again closes it.
The Content Panel
...
...
States
The content panel has two states:
Unpinned (default) - the panel overlays the content of the page, hiding the content behind it.
Pinned - the panel is shown next to the content of the page so nothing is hidden.
Structure
The content panel contains the following elements:
At the top:
a A title, similar to the corresponding title on the filter bar (e.g. Employees).
a A pin icon button, allowing the user to switch between pinned and unpinned states.
a A help icon button (optional).
The area under the title is the main content area of the panel. See Content below.
The bottom of the panel may contain the following elements:
Either an Apply or an Apply to All button, depending on whether you’re using Discrete or Combined filtering (see Basic Flow).
The Apply button is disabled until the filters currently shown in the content panel have been changed.
The Apply All Filters button is disabled until the filters in any of the tabs have been changed.
An indicator An Apply button. Thebutton is disabled until at least one filter was changed.
A Cancel button:
When the content panel is unpinned, the Cancel button will always be enabled.
When to content panel is pinned, the Cancel button will be disabled until a change was made to the content.
A counter of the total number of updates made to the filter pane (e.g., 2 updates).
In some cases:
A Clear button (only if Chicklets are not being used).
A counter showing the number of selected items (e.g. 4 queues selected).
A Cancel button.
The button is disabled until the filter selection in the content panel has been changed.
The button is disabled if no filters have been appliedAn error message (see Validations and Errors below).
Placement and Positioning
...
is positioned to the right of the filter bar.
fills the vertical space, from beneath the VerinTop to the bottom of the page.
has a fixed width.
Content
The main content area of the panel can may:
The number of possible results can (optionally) be shown next each filter item in brackets. Seehave a variety of layouts (see Common Examples below
)
The content can have a variety of layoutscount of each itemmay be shown in brackets. See Common Examples below.
In some cases, users can navigate from the content panel to Subsections, allowing them to access additional settings.
Interaction
Clicking the pin icon:
when the content panel is unpinned:Toggles
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 the content of the panel enables the Apply / Apply All Filters, Cancel, and Clear buttons, where they existselection within a panel:
enables the Apply button.
shows a blue indicator next to the relevant tab on the filter bar.
shows the number of changes made across allcontent panels.
Clicking the Apply /Apply All Filters button:
applies the filter(or filterss).
disables the Apply 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) removes the updates counter from the bottom of the panel.
adds one or more chicklets to the chicklet area (see The Chicklet Area below), unless otherwise specifiedwhere relevant.
If if unpinned, closes the content panel.
Clicking the Cancel button:
cancels any reverts all unapplied changes made to the content.
disables the Apply/ Apply All Filters and Cancel buttons button.
If unpinned, closes if 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 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 :
The content panel closes if:
the panelwhen it is unpinned.
(When pinned, the panel always stays open).If no unapplied changes have been made, the panel closes.
If unapplied changes have been made to the content but have not been applied, a Message Popup may will appear , allowing the user to either : close the panel without applying the filter
,(s) or
continue editing.
...
Validations and errors
...
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.
...
Opening a panel containing a form will set the focus to the first field of the form.
Allow the user users to determine the persistency of the pin status in system preferences.
...
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 on the filter pane may add a single or multiple chicklets, depending on the number of filters that have been
changedapplied.
States
Each chicklet can have one of these states:
State | Regular | ImageMandatory | Comments |
|---|---|---|---|
Regular |  | ||
Hover |  |  | |
Active / Selected |  |  | Only one chicklet can be selected at any given time. |
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 (for regular chicklets) or a reset icon button (for mandatory chicklets), shown on hover.
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, a Reset to default icon button will appear after the last chicklet.
The Reset to default button will be disabled by default. Changing the default value or adding more chicklets will enable it.
...
The chicklet area appears in the main workspace, above the corresponding datapage content.
When no filters are applied, the chicklet area will be hidden, and the page content will start directly below the page header. Adding the first chicklet will push all of the content down, below the chicklet area.
Mandatory chicklets will be the first items. Other chicklets will appear in the order they were added.
In case the set of chicklets (including the Clear All button) exceeds the width of the chicklet 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.
...
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 chicklet x icon:
removes the chicklet. Any remaining chicklets 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 chicklet reset icon:
resets the chicklet to its default value,
applies the corresponding filter.
Clicking the Clear all button:
shows a confirmation dialog (if needed),
removes all chicklets,
removes the Clear all button,
clears all filters,
removes the blue indicator from all tabs.
Clicking the Reset to default button:
shows a confirmation dialog (if needed),
removes all regular chicklets,
resets all mandatory chicklets 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.
Note: in complex scenarios, behaviour behavior may vary (see Common Examples below).
Validations and Errors
...
All local field validations will occur when removing focus from a field (or when clicking the Apply button).
In case of an error (e.g. an end date earlier than a start date):
the Apply button will be disabled.
an error message will appear at the bottom of the content panel.
clicking outside the content panel when it is unpinned will open a Message Popup, allowing the user to either close the panel without applying any changes or continue editing. (See Interaction above).
For detailed information on local field validations see Field Validation.
Best Practices
General
Where possible, values should be shown next to each filter in the content panel, showing the number of results that will be produced if the filter is applied.
Where the number of filters is great, consider removing filters which will produce zero results.
Use:
For for major data sets (for example a table, grid, or dashboard), which needs to be filtered by one or more parameters.
For for complex filtering or when a large number of filters is needed.
Don’t use:
For for data in a Dialog or Details Panel.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Responsive design
Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.
...
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. |
...
Zeplin link | Screen thumbnail |
|---|---|
  | |
  | |
 | |
  |
Code
...