Description

A filter pane is a panel pane located on the left side of a page, allowing users to filter the currently presented data by relevant a set of parameters.

Basic Flow

• The filter pane contains two areas: the filter bar and the filter content panel.

• On relevant pages, the filter bar is always shown.

• The filter 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.

• Active filters are represented by chicklets, appearing at the top of the presented data (see below).

• A set of filters can behave in one of three ways:

  • Faceted - the filters are sorted by importance or popularity. Applying a filter affects the number of results shown on other filters (common).

  • Funnel - the filters are ordered by hierarchy. 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).

• Filters can have The filter pane can operate in one of two modes:

  • Discrete (common) - the user applies the set of filters on each tab content content panel separately, by clicking the Apply button (common).
    An exception is a case where there is only one possible selection in 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 set filters on multiple tabs, and then click the Apply All Filters button, which appears on each tab.

• An 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 the all related workspaces.

• For more information see The Filter Bar, The Filter Content Panel and The Chicklet Area below.

...

• The filter bar contains one or more tabs.

• Each tab consists of an icon and a title (e.g. Employees).

• An active A filter that was applied is represented by a blue dot shown on the left side of the tab.

...

State	Image	Comments
Regular
EditedApplied
Hover
Active
Selected		Only one tab can be selected at any given time
Selected, Hover
Focused
Focused, Hover
Focused, Selected

Default State

• In most cases, no tabs are will be selected by default.

Interaction

• Clicking a tab:

  • selects it,

  • unselects any other tab,

  • if the filter content panel is unpinned - opens the filter content panel in overlay mode, hiding the content everything behind it,

  • if it’s it is pinned - shows the relevant content in the filter content panel.

The

...

Content Panel

Structure

• The filter content panel contains the following elements:

  • At the top:

    • a title, similar to the corresponding title on the filter bar,

    • 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:

    • Either an Apply or an Apply to All button, depending on the filtering mode (see above).

      • The Apply button is :

      • mandatory (unless the panel contains only one possible selection),

      disabled until the content of the panel was changed.

      • The Apply All Filters button is :

      • mandatory on all panels,

      disabled until the content on any of the panels was changed.

    • An indicator showing the number of selected items (e.g. 4 queues selected).

    • A Cancel button:

      • The button is disabled until the content of the panel was changed.

    • A Clear button (in case the design has no chicklets):

      • The button is disabled until the filter was applied.

Placement and Positioning

• The filter content panel is attached to the right side of the filter bar.

• The width of the panel is fixed.

...

• 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 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 filter 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 filter 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 filter content panel to its previous state, before clicking the Clear button.

• Clicking outside the filter 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 dialog appears, allowing the user to either close the panel without applying the filter or continue editing.

...

Luxify image

Validations and errors

For validations within a form see Field Validation.

...

• The filter pane will open and close with a brief slide effect.

• When pinning / unpinning the filter 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.

The Chicklet Area

Fix chicklets width, crop the image to show only the tabs and the chicklet area, fix title size

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 all the mandatory filters (see image below).

  • Optional - deleting these chicklets will clear the corresponding filters.

...

Fix chicklets width and title size

• In Discrete mode (see above), in most cases clicking Apply in the filter 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 changes parametersfilters that were changed.

States

State	Image	Comments
Regular
Hover
Active / Selected		Only one chicklet can be selected at any given time
Focused
Focused, Hover
Focused, Active

Fix chicklets width, add “ghost” chicklet

Structure

• Each chicklet contains:

  • an icon, similar to which is a smaller version of the corresponding icon on the filter bar,

  • the chicklet text:a label, showing the filter

    • In case of a single selection - the selected value (e.g.

    Last

    • “Last 24

    hours

    • hours”).

    • In case of a multiple selection - either the selected values, separated by commas (e.g. “APAC, EMEA”), or, if the text exceeds the maximum width of the chicklet

    will show

    • , the name of the filter

    ,

    • followed by the number of

    items

    • values in brackets (e.g.

    Interactions

    • “Interactions (3)”).
      In this case, hovering the chicklet will show a tooltip with the full list of items,

  • a closing icon (x, showing on hover), allowing the user to clear the filter.

• The width of a chicklet will depend on its content, with a minimum and maximum limits.

• If the content of the chicklet exceeds the maximum width, the text will be truncated, ending with an ellipsis (…). In this case, hovering the chicklet area contains at least one chicklet, a will show a tooltip with the full text.

• A Clear All icon button is shown will appear after the right chicklet.

...

• The chicklet area appears on the content section of the page, above the data.

• In case the chicklet area has no items it will be hidden. Adding the first chicklet will push all the content below the chicklet area.

• Mandatory chicklets will be the first items. Other items will appear in the order they were added.

• Chicklets have a fixed width. The closing icon (x) will be aligned to the right of the chicklet.

• In case the set of chicklets (including the Clear All button) exceeds the width of the chicklet area, it will wrap to the next row, up to three rows. Beyond that point, a scrollbar will appear.

Interaction

Hovering a chicklet will show the x icon, allowing the user to remove it.

Clicking a chicklet

...

• When the

  filter

  content panel is pinned

  : switches the filter panel to the selected filter.

  - shows the relevant content in the content panel

• When unpinned

  :

  - opens the relevant

  filter

  content panel.

Clicking the x icon:

...

removes the chicklet,

...

• clears the corresponding filter,

• clears the blue indicator from the corresponding tab on the filter bar (unless there are more items

  relating to that filter)

  related to that filter).

• In case of a regular chicklet - removes the chicklet, moving remaining chicklets to take the place of the chicklet that was removed.

• In case of a mandatory chicklet:

  • switches the chicklet to “ghost” state,

  • shows an empty state, instructing the user to add the mandatory filter (see above).

• If all chicklets were removed, an empty state will appear.

Clicking the Clear All button:

• shows a confirmation dialog (optional),

• removes all chicklets, except for “ghost” chicklets if, exists,

• clears

  the corresponding

  all filters,

• clears the blue indicator from

  the corresponding

  all tabs on the filter bar

  .In some cases, a confirmation dialog may appear

  ,

• Shows an empty state.

Note: in complex scenarios, behaviour may vary (see below).

Best Practices

• Use:

  • When when a major data set (a table or , a grid, a dashboard etc.) is shown in the page and there is a need to filter it by one or more parameters.

  • When dealing with for complex filtering or with when a large number of filters is needed.

• Don’t use:

  • When the for data is presented in a dialog or details a detail pane.

Common Examples

Designs	Comment
	A single list filter with no dialog buttons
	A date picker filter
	A multi accordion filter

...