...

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

Basic Flow

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

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

• The filter panel has two states:

  • Unpinned (default) - the panel overlays the content.

  • Pinned - the panel pushes is shown next to the content so nothing is hidden.

• In some cases, active Active filters are represented by chicklets, appearing at the top of the presented data set (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 will affect affects child filters, but applying a child filter will does not affect parent filters (less common).

  • Independent - applying a filter does not affect other filters (not recommended).

• Filters can work in one of two modes:

  • Discrete (common) - the user applies the set of filters on each tab separately, by clicking an Apply button.

  • Combined - the user can set filters on multiple tabs, and then click an Apply All Filters button.

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

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

...

Default State

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

...

• Clicking a tab:

  • selects it,

  • unselects any other tab,

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

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

The Filter Panel

Structure

• The filter panel contains the following elements:

  • At the top:

    • a title, similar to the 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:

    • An Either an Apply or an Apply to All button, depending on the filtering mode - Discrete or Combined respectively (see above).

      • Apply button:

        • This button is mandatory, unless the panel contains only one possible selection.

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

      • Apply All Filters button:

        • This panel is mandatory on all panels.

        • The button is 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.

...

• 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 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, Cancel and Clear buttons, if exists.

• Clicking the Apply / Apply All Filters button:

  • applies the filter (or filters) to the presented data,

  • disables the Apply button,

  • enables the Clear button, if exists,

  • shows a blue indicator next to the relevant tab (or tabs) on the filter bar,

  • if unpinned - closes the filter panel,

  • adds a chicklet (or chicklets) to the chicklet area (see below), unless otherwise specified.

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

• Clicking outside the filter panel (including clicking on another filter tab):

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

  • On Combined mode, clicking on another tab opens the filter panel of that tab.

Validations and errors

For validations within a form see Field Validation.

...

• Chicklets give the user an indication that the data is currently filtered by one or more filters.

• There are two types of chicklets:

  • Mandatory - deleting these chicklets will show an empty state, instructing the user to apply all mandatory filters.

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

• In most casesDiscrete mode, clicking Apply in the filter pane panel creates a single chicklet. However, when one tab 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 parameters.

States

...

Common Examples

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

...