Lead:  Liav Nadler Asaf Ben-Oved  

...

• 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 the content so nothing is hidden

• In some cases, active filters are represented by chicklets, appearing at the top of the data set (see below)

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

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

  • Funnel - the filters are ordered by hierarchy. Applying a parent filter will affect child filters, but applying a child filter will not affect parents filters

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

• 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 BarArea below

Types

• In addition to the basic type described below, the filter pane can have these other types:

The Filter Bar

...

Structure

• The filter bar contains one or more tabs

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

• An active filter is represented by a blue dot shown on the left side of the tab

Placement and Positioning

...

• In addition, if the data set is already filtered, a blue dot will appear next to the the relevant tabs

Default State

• By default no tabs are selected

...

• Clicking a tab:

  • Switches the tab to the selected state

  • Unselects any all other selected tabs

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

  • If it’s pinned - switches to shows the relevant panelcontent

The Filter Panel

...

Structure

• The filter panel contains the following elements:

  • At the top:

    • A title, similar to the filter’s name title on the filter bar

    • A pin icon, allowing the user to switch between pinned and unpinned states

    • A help icon (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 (:

      • The button is mandatory, unless the panel contains only one

      action)

      • possible selection

      • The button is disabled until the content of the panel 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 (TBD)

Placement and Positioning

• The filter panel will be is attached to the right side of the filter bar

• The width of the panel is fixed

...

• The main content area of the panel can hold show either a form, a list or a combination of the two

• The content area may can have a variety of layouts. see common examples below

Interaction

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

  • When pinned:

    • Switches the icon to unpinned

    • Closes the panel

    • Stretches the main area The panel closes, unless changes were made to the content before applying the filter

    • The content of the page to take the place of the closed panel

    • In case the panel’s content was updated but the filter was not applied, a toast will appear, informing the user that the changes were not saved

    When unpinned:

    • Switches the icon to pinned

    • Narrows the main area of the page is stretched to its full width

  • When unpinned:

    • The content of the page narrows to be shown next to the panel (so nothing is hidden)

    Note: pinning and unpinning a panel will pin/unpin all other panels simultaneously

• Clicking the help icon will open opens a relevant help page in a new tab

  Clicking outside the panel:

• If changes were made but the filter was not applied, a toast will appear, informing the user that the changes were not saved

If unpinned - closes the panel

browser window

• Changing the content of the panel switches the Apply button to enabled

• Clicking the Apply button:

  • Applies the filter to the data set

  • Shows a blue indicator next to the relevant tab on the filter bar

  • If unpinned - closes the panel

  • If pinned - switches the apply button to disable state

  • If relevant - adds a relevant chicklet to the chicklet bar area (see below)

• Clicking the Cancelbutton:

  • Cancels any changes made to the content

  • Disables the Apply and Cancel buttons

  • If unpinned - closes the panel

• Clicking outside the Cancelbutton willpanel:

  • When unpinned - 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 saving any changes

  • When pinned?

• Clicking the Clear button will reset the panel content to default values

• • applying the filter changes remain? or continue editing

Validations and errors

For validations within a form see Field Validation

Transitions

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

Best Practices

Opening a panel containing a blank form will set the focus to the first field of the form

The Chicklet

...

Area

...

General Guidelines

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

• There are two types of chicklets:

  • Pre-defined - The user can change their value but cannot remove them (for example, when filtering by a single organization is mandatory)

  • Optional - the user can add, update and delete the chickletchicklets

Structure

• The chicklet bar stretched to the full width of its container

• The bar may contain any number of items. In case items doesn’t fit in a single row, the bar will expand to the next row

• Each chicklet contains:

  • An icon, similar to the relevant icon on the filter bar

  • A label, showing the filter value (e.g. Last 24 hours) multiple selection?

  • If the chicklet is optional - a closing icon (x), allowing the user to remove the filter

...

• The chicklet bar appears on the main area of the page, above the data set

• In case the chicklet bar has no item it will be hidden. Adding the first item will show the bar, pushing all the content below it

• Pre-defined chicklets will be the first items on the bar. Other items will appear in the order they were added (in the order shown on the chicklet bar?)

• In case the set of chicklets exceeds the width of the chicklet bar’s container, it will wrap to another row

...