...
...
...
...
...
...
| Status | ||||
|---|---|---|---|---|
|
...
| Table of Contents | ||
|---|---|---|
|
Description
A filter pane is a panel an area located on the left side of a page, allowing users to filter the presented data set by a variety set of selected parameters.
...
Basic Flow
The filter pane contains two areas: the a filter bar and the filter a content panel.
On the relevant pagespages where the pane is applied, the filter bar is always shown
The details panel has two states:
Unpinned (default) - the panel overlays the content.
Applying a filter or clicking outside the panel closes itPinned - the panel pushes the content so nothing is hidden. Applying a filter or clicking outside the panel keeps it visible
Selected filters are represented by a chicklet chiclets, appearing on a bar at the top of the data setA set of filters above the data (see the Chiclet Area below).
In some cases, active
Usage and Behavior
The filter pane can behave in one of two three ways:
Faceted filters- The filters are sorted by importance or popularity. Applying a filter affects applying one filter affects other filters, e.g. by updating the number of expected results shown on against the other filters or removing irrelevant options.
Funnel - the filters are ordered by hierarchy. Applying applying a parent filter will affect affects child filters, but applying a child filter will does not affect parent filters.
Independent - applying a filter does not affect other filters.
Users can apply changes on 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 equivalent same filter on the other related workspaces.For more information see
The Filter Bar
...
The Filter Bar
...
...
Structure
The filter bar contains one or more itemstabs.
Each item tab consists of an icon and a title (e.g. Employees).
Whenever a filter is applied, a blue dot will be shown next to the corresponding tab.
Placement and Positioning
The filter bar
...
should:
stick to the left end side of the pageThe background of the bar stretches from the page header , beside the main workspace,
have a fixed width,
always fill the vertical space, from beneath the VerinTop to the bottom of the page, and
The width of the bar is fixed
The have the group of items is tabs aligned to the top of the bar.
States
Each item 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 |
In Focus
TBD
In addition, an item can have one of these indicators, shown to the left of the icon:
A blue dot - indicates that the presented data set is currently filtered by this item
An orange indicator (ring?) - indicates that the filter contains one or more unsaved fields
Default State
By default no item is selected
Interaction
Clicking an item:
...
Switches the item to the selected state
...
Unselects any other selected item
...
If filter panel is unpinned - opens the relevant filter panel in overlay mode, hiding the content beneath it
...
If it’s pinned - switches to the relevant panel
The Filter Panel
...
Structure
...
. | ||
Selected, Hover |  | |
Focused |  | |
Focused, Hover |  | |
Focused, Selected |  |
Default State
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 it.
unselects any other tab.
when the content panel is pinned - updates the content of the panel to correspond 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 title, similar to the
filter’s namecorresponding title on the filter bar (e.g. Employees).
A pin icon button, allowing the user to switch between pinned and unpinned states.
A help icon button (optional).
The area under the title is the main content area of the panel. See
contentContent below
At the bottom.
The bottom of the panel may contain the following elements:
An Apply button
In case of a form - a Cancel button
In case of a list - an indicator
. 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 the 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 counter showing the number of selected items (e.g. 4 queues selected).
An error message (see Validations and Errors below).
Placement and Positioning
The
...
content panel:
is positioned to the right side of the filter barThe width of the panel will be fixed.
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 hold may:
TBDThe content area may.
have a variety of layouts
(see Common Examples below)
The count 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 pinnedwhen the content panel is unpinned:
Switches changes the icon to unpinnedpinned.
Closes the panel
Stretches the main area changes the state of the page to take the place of the closed panel
In case the panel’s content was updated but the filter was not applied:
The panel will keep both the data and the focus
The orange indicator will appear next to the relevant item on the filter bar
When unpinned:
Switches the icon to pinned
Narrows the main area of the page to be shown next to the panel (so nothing is hidden)
Note: pinning and unpinning a panel will pin/unpin all other panels simultaneously
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 tabClicking outside the browser window.
Updating the content of a panel:
If changes were made but the filter was not applied, it will:
Keep the current selections and focus in the panel
Show an orange
enables the Apply button.
shows a blue indicator next to the relevant
itemtab on the filter bar
If unpinned - closes the panel.
shows / updates the number of changes made across allcontent panels.
Clicking the Apply button:
The filter paneApplies applies the filter to the data set
Shows a blue indicator next to the relevant item on the filter bar
If relevant - adds a chicklet to the chicklet bar (see below)
If unpinned - closes the panel
If the panel contains a form, clicking the Cancel button will:
When unpinned - close the panel without saving any changes
Validations and errors
For validations within a form see Field Validation
Transitions
(s).
disables the Apply button.
removes the updates counter from the bottom of the panel.
adds one or more chiclets to the chiclet area (see The 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.
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.
...
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.
Best Practices
Opening a panel containing a blank 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 gives the user an indication that the data set is currently filtered by one or more filtersChiclets are indicators of the currently applied filters.
There are two types of chicklets:
Pre-defined - The user can change their value but cannot remove them (for example, when filtering by a single organization is mandatory)
Optional - the user can add, update and delete the chicklet
Structure
The chicklet bar stretched to the full width of its container
The bar may contain any number of items. In case items doesn’t fit in a single row, the bar will expand to show items in multiple rows
Each chicklet contains:
An icon, similar to the relevant icon on the filter bar
A label, showing the filter value Regular.Deleting these chiclets will clear the corresponding filters.
Mandatory.Each mandatory chiclet will have a default value.Mandatory chiclets cannot be deleted, only be reset to their default values (see below).
In rare cases, a filter pane can be used without chiclets. In this case, a Clear button should be included in the content panel.
chiclets:
...
Clicking Apply on the filter pane may add a single or multiple chiclets, depending on the number of filters that have been applied.
States
Each 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 chiclet will depend on its content, within minimum and maximum limits.
Each chiclet contains:
an icon, which is a smaller version of the corresponding tab icon on the filter bar.
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 chiclet, the name of the filter followed by the number of values in brackets (e.g. Interactions (3)). In this case, hovering the chiclet will show a tooltip with the full list of items.
a close icon button (for regular chiclets) or a reset icon button (for mandatory chiclets), shown on hover.
If no mandatory chiclets were defined, a Clear All icon button will appear after the last chiclet, allowing users to clear all filters.
If at least one mandatory chiclet was defined, a Reset to default icon button will appear after the last chiclet.
The Reset to default button will be disabled by default. Changing the default value or adding more chiclets will enable it.
...
Placement and Positioning
The chicklet bar chiclet area appears on in the main area of the pageworkspace, above the data setIn case the chicklet bar has no item it will be hiddencorresponding page content.
When no filters are applied, the chiclet area will be hidden, and the page content will start directly below the page header. Adding the first item will show the bar, pushing all chiclet will push all of the content below itPre-defined chicklets down, below the chiclet area.
Mandatory chiclets will be the first items on the bar. Other items chiclets will appear in the order they were added (in the order shown on the chicklet bar?).
In case the set of chicklets chiclets (including the Clear All button) exceeds the width of the chicklet bar’s container, it chiclet area, they will wrap on to another row
Best Practices
When to use
When not to use
Common Examples
Future Version (TBD)
< Edge cases, uncertain aspects, incomplete description>
<…>
<…>
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
Focus management
<<How will the component work with keyboard only - without a mouse. Can be reference if written above
We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>
Contrast & size compliance
<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>
Design
...
Zeplin link
...
Screen thumbnail
...
<<Short Zeplin link. You
Use this 
>>
...
<<Screen with 200 width>>
Code
...
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 chiclets - shows an X icon inside the chiclet, allowing the user to remove it.
Mandatory chiclets - shows a reset icon inside the chiclet, allowing the user to reset the 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 chiclet. Any remaining 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 chiclet to its default value,
applies the corresponding filter.
Clicking the Clear all button:
shows a confirmation dialog (if needed),
removes all non-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 chiclets,
resets all mandatory 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.
Note: in complex scenarios, 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 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.
Accessibility compliance
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.
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.
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
...