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 details filter panel has two states:

  • Unpinned (default) - the panel overlays the content. Applying a filter or clicking outside the panel closes it

  • Pinned - the panel pushes the content so nothing is hidden. Applying a filter or clicking outside the panel keeps it visible

• In some cases, active filters are represented by a chickletchicklets, appearing on a bar at the top of the data set

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

  • Faceted filters - The 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 parent 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 equivalent same filter on the other related workspaces

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

...

• The filter bar contains one or more itemstabs

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

...

• The filter bar sticks to the left end side of the page

• The background of the bar stretches from the page header to the bottom of the page

• The width of the bar is fixed

• The group of items tabs is aligned to the top of the bar

States

• Each item tab can have one of these states:

• In addition, an item can have one of these indicators, shown to the left of the icon:

  A blue dot - indicates that the presented

  if the data set is

  currently filtered by this itemAn orange indicator (ring?) - indicates that the filter contains one or more unsaved fields

  already filtered, a blue dot will appear next to the the relevant tabs

Default State

• By default no item is tabs are selected

Interaction

• Clicking an itema tab:

  • Switches the item tab to the selected state

  • Unselects any other selected itemtabs

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

  • If it’s pinned - switches to the relevant panel

...

• The filter panel contains the following elements:

  • At the top:

    • A title, similar to the filter’s name 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

  • At the bottomThe bottom of the panel may contain the following elements:

    • An Apply button

    • In case of a form - a Cancel button

    • In case of a list - an (mandatory, unless the panel contains only one action)

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

    • A Cancel button

    • A Clear button

Placement and Positioning

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

• The width of the panel will be is fixed

Content

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

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

...

• Clicking the pin icon:

  • When pinned:

    • Switches the icon to unpinned

    • Closes the panel

    • Stretches the main area 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:

    • The panel will keep both the data and the focus

    The orange indicator will appear next to the relevant item on the filter bar

    , 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 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 a relevant help page in a new tab

• Clicking outside the panel:

  • If changes were made but the filter was not applied, it will:

    • Keep the current selections and focus in the panel

    • Show an orange indicator next to the relevant item on the filter bar

    a toast will appear, informing the user that the changes were not saved

  • If unpinned - closes the panel

• Clicking the Apply button:

  • Applies the filter to the data set

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

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

  • If unpinned - closes the panel

• If the panel contains a form, clicking Clicking the Cancelbutton will:

  • When unpinned - close the panel without saving any changes

  • When pinned?

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

Validations and errors

• For validations within a form see Field Validation

...

• 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 show items in multiple rowsthe 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

Interaction

• Clicking a chicklet:

  • When the filter panel is pinned: switches the panel to the selected filter

  • When unpinned: opens the relevant filter panel

• Clicking the x icon:

  • Hides the chicklet

  • Removes the relevant filter

  • Remove the relevant blue indicator from the filter bar

Best Practices

• When to use

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

  • When dealing with complex filtering or with a large number of filters

• When not to use

  • When the data set is presented in a dialog or details pane

Common Examples

Future Version (TBD)

...