| Table of Contents | ||
|---|---|---|
|
...
The main content area of the panel can show either a form, a list or a combination of the two.
The content can have a variety of layouts. 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 switches the icon between pinned and unpinned states.
When pinned:
the content of the page stretches to its full width,
the content panel closes, unless changes were made to the content before applying the filter. If changes were made, the panel will stay open until the changes are applied or cancelled.
When unpinned:
the content of the page narrows to be shown next to the panel (so nothing is hidden).
Clicking the help icon opens a relevant help page in a new browser window.
Changing the content of the panel enables the Apply / Apply All, Cancel and Clear buttons, if exists.
Clicking the Apply / Apply All Filters button:
applies the filter (or filters),
disables the button,
enables the Clear button, if exists,
shows a blue indicator next to the relevant tab (or tabs) on the filter bar,
adds a chicklet (or chicklets) to the chicklet area (see below), unless otherwise specified,
if unpinned - closes the content panel.
Clicking the Cancelbutton:
cancels any changes made to the content before hitting the Apply / Apply All Filters button,
disables the Apply / Apply All Filters and Cancel buttons,
if unpinned - closes the panel.
Clicking the Clear button:
Resets all fields in the content panel to their initial states, to either blanks or default values.
At this point, the user can either:
click Apply - this will remove the blue dot next to the relevant tab on the filter bar, as well as the corresponding chicklet, if exists,
click Cancel - this will revert the content panel to its previous state, before clicking the Clear button.
Clicking outside the content panel:
If no changes were made to the content and the panel is unpinned - closes the panel.
If changes were made to the content but the filter was not applied, a popup may appears, allowing the user to either close the panel without applying the filter or continue editing.
...
Opening a panel containing a form will set the focus to the first field of the form.
The Chicklet Area
  |
General Guidelines
Chicklets give the user an indication that the data is currently filtered by one or more filters.
There are two types of chicklets:
Regular - deleting these chicklets will clear the corresponding filters.
Mandatory - deleting these chicklets will show an empty state, instructing the user to apply the mandatory filters (see below).
 |
In Discrete mode (see 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 were changed.
...
State | Image | Comments |
|---|---|---|
Regular |  | |
Hover |  | |
Active / Selected |  | Only one chicklet can be selected at any given time |
Ghost |   | |
Ghost, Hover |   | |
Ghost, Active | <TBD> | |
Focused |  | |
Focused, Hover |  | |
Focused, Active |  |
...