The filter feedback bar is a horizontal bar that appears above a list of content. It uses interactive buttons to communicate which filters have been applied to the list, and allows users to quickly apply frequently-used filters. It is typically used in List Report or Work List floorplans.

Usage

• Use filter feedback bar when there are frequently-used filter options.
• Use filter feedback bar when users need to interact with filters that have been applied to a list.

• Don’t use filter feedback bar when there are a large amount of filters need to apply to the list or the filters have complex names. Use the count as feedback in Filter button instead.

Anatomy

The filter feedback bar sits below the nav bar (and beneath the search bar, if present), positioned directly above the content area.

Filter Buttons

There are two types of filter buttons in the filter feedback bar.

A. Active filter buttons

Active filter buttons are those that have been selected. They indicate a sort button (if it is a non-default sort) and the filters currently applied to the list. They are always placed to the left of any visible inactive filter buttons.

B. Inactive filter buttons

Inactive filter buttons will only appear in the filter bar for fast filters that are not currently selected by the user. More information on fast filters can be found in the Types section below.

Behavior and Interaction

Horizontal scrolling

Users can scroll the filter feedback bar horizontally to see any additional buttons that may be off-screen. If the sort button is present, the filter buttons will slide beneath it when scrolling.

Applying fast filters

When the user taps a fast filter button, it will be applied to the content list and its button will take on active status. Active fast filter buttons move to the left of any inactive fast filter buttons (to the right of the sort button, if present).

Applying filters from the filter modal

When the user selects a filter from the filter modal window, it will be applied to the content list and an active filter button will appear on the left side of the filter feedback bar (to the right of the sort button, if present).

Removing filters

To remove a filter, users can tap on its active filter button in the filter feedback bar or deselect it within the filter modal window. Fast filters remain in the filter feedback bar even when inactive, whereas standard filters disappear from the filter feedback bar when deactivated.

Search mode

The filter feedback bar is hidden when the user has activated the search bar.

Variations

Filter feedback bar with fast filters

Fast filters are buttons that remain visible in the filter feedback bar even when they are not currently applied to the content list below. They provide users with quick access to the most frequently-used filter options. It is up to the app designer to define which filters should be included as fast filters – users cannot customize them within the app.

Filter feedback bar without fast filters

When there are no fast filters predefined for the app, the filter feedback bar is hidden by default. It will only appear after the user has either applied a filter or changed the sort option within the filter modal. Only new sort will present in the filter feedback bar. Please note that default sort does not appear in the filter feedback bar.

Specification

Resources

Related Pattern: Sort and Filter

Development: FUIFilterFeedbackControl

SAP Fiori for Android: Filter Feedback Bar