| Table of Contents | ||
|---|---|---|
|
...
At the top:
A title, similar to the corresponding 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 Content below.
The bottom of the panel may contain the following elements:
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 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).
...
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.
...