| Table of Contents | ||
|---|---|---|
|
...
The content area of the panel 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.
...
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.
Updating the 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 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.
...
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.
...
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.
...
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.
...