...

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

  • Faceted - the filters are sorted by importance or popularity. Applying a one filter affects changes the number of possible results shown on in brackets next to other filters, where applicable. (commonCommon).

  • 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 Less common).

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

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

  • Discrete - the user applies their selection from each filter tab independently, by clicking the Apply button separately for each one. (commonCommon).
    An exception is if only one selection is allowed within 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 apply selections from multiple filter tabs in one go, by clicking the 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 all related workspaces.

...

• 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 whether you’re using Discrete or Combined filtering (see Basic Flow).

    • The Apply button is disabled until the filters currently shown in the content panel have been changed.

    • The Apply All Filters button is disabled until the filters in any of the tabs have been changed.

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

  • A Cancel button.

    • The button is disabled until the filter selection in the content panel has been changed.

  • A Clear button (in case the design has no chickletsonly if Chicklets are not being used).

    • The button is disabled if no filters have been applied.

...

• The main content area of the panel can show either a Form, a List, or a combination of the two.

• The number of possible results can (optionally) be shown next each filter item in brackets. See Common Examples below.

• The content can have a variety of layouts. see See Common examplesExamples below.

• In some cases, users can navigate from the content panel to Subsections, allowing them to access additional settings.

...

• Clicking the pin icon switches the icon between pinned and unpinned states.

  • When unpinned, the content of the page stretches to its full width, being partially hidden by the content panel.

  • When pinned, 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 Filters, Cancel, and Clear buttons, where they exist.

• Clicking the Apply / Apply All Filters button:

  • applies the filter (or filters).

  • disables the button.

  • enables the Clear button, where it 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 The Chicklet Area below), unless otherwise specified.

  • closes the content panel, if it is unpinned.

• Clicking the Cancelbutton:

  cancels any changes made to the content before hitting the Apply / Apply All Filters button.

  • cancels any unapplied changes made to the content.

  • disables the Apply / Apply All Filters and Cancel buttons.

  • closes the content panel, if it is unpinned.

• Clicking the Clear button:

  • Resets all fields in the content panel to their default states (either blank or with default selections).
    

    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

  (The Clear button is only shown if Chicklets are not being used).

• Clicking outside the content panel:

  • The content panel closes if:

    • the panel is unpinned. (When pinned, the panel always stays open).

    • no unapplied changes have been made.

  • If changes have been made to the content but have not been applied, a Popup may appear, allowing the user to either:

    • close the panel without applying the filter, or

    • continue editing.

...

• Chicklets show the user that their data is currently filtered by one or more filters, which can be quickly cleared.

• There are two types of chicklets:

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

  • Mandatory - deleting these chicklets will show an empty state for the data, instructing the user to apply the mandatory filters (see below).

• In some rare cases, the filter pane can be used without chicklets. In this case, a Clear button must be included in the Content Panel.

• In Discrete mode (see Basic Flow 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 have been changed.

...

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

• Each chicklet contains:

  • an icon, which is a smaller version of the corresponding tab icon on the filter bar.

  • chicklet 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 chicklet, the name of the filter followed by the number of values in brackets (e.g. Interactions (3)). In this case, hovering the chicklet will show a tooltip with the full list of items.

  • a Close icon button (X), shown on hover.

• 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 will show a tooltip with the full text.

• A Clear All icon button, shown to the right of the last chicklet.

...

• clears the corresponding filter.

• clears the blue indicator from the corresponding tab on the filter bar (unless there are more items related to that filter).

• In case of a regular chicklet:

  • removes the chicklet. Any remaining chicklets will move to close the gap.

• In case of a mandatory chicklet:

  • switches the chicklet to a “ghost” state.

  • shows an empty state for the data, instructing the user to add the mandatory filter (see example 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, where they exist.

• clears all filters.

• clears the blue indicator from all tabs on the filter bar.

• shows an empty state.

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

Best Practices

Use:

• For major data sets (for example a table, grid, or dashboard), which needs to be filtered by one or more parameters.

• For complex filtering or when a large number of filters is needed.

...