Lead:  Liav Nadler Asaf Ben-Oved  

...

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

...

Default State

• By default no tabs are selected

...

• Clicking a tab:

  • Switches the tab to selected Selected state

  • Unselects all any other tabstab

  • 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

...

• The filter panel contains the following elements:

  • At the top:

    • A title, similar to the 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 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 Reset button (TBD)

      • The button is disabled until the filter was applied

Placement and Positioning

...

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

  • When pinned:

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

    • The content 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)

• Clicking the help icon opens a relevant help page in a new browser window

• Changing the content of the panel switches enabled the Apply button to enabled, the Cancel and the Reset buttons

• Clicking the Apply button:

  • Applies the filter to the data set

  • Disables the apply button

  • 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 stateIf relevant implemented - adds a relevant chicklet to the chicklet area (see below)

• Clicking the Cancelbutton:

  • Cancels any changes made to the content before hitting the Apply button dialog?

  • Disables the Apply and Cancel buttons

  • If unpinned - closes the panel

• Clicking the Reset button:

  • Removes the filter from the data set

  • Removes the blue dot next to the relevant tab on the filter bar

  • Resets all fields in the filter to their initial state, either blank or default values

  • Disables the Apply and Cancel buttons

• Clicking outside the 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 changes remain? or continue editing

Validations and errors

...

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

...

• 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 Mandatory- The user can change their value but cannot remove them (for example, when filtering by organization is mandatory)
    Deleting these chicklets will switch the data set to empty state, instructing the user to apply all mandatory filters

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

Structure

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

• The bar chicklet area may contain any number of items. In case items doesn’t fit in a single row, the bar will expand to the next rowSee placement and positioning below

• 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) in case of 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 mandatory 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 containerarea, it will wrap to another the next 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

...