Intro

The filter feedback bar is a horizontal scroll area containing interactive chips that provides users quick access to filter controls. The bar appears below the app bar, and above the list of objects. The interactive chips in the filter feedback bar indicate which filters have been applied, and what filters are available. Users can modify the filters directly by tapping on the chips.

Filter feedback bar on mobile (left) and tablet (right)
Filter feedback bar on mobile (left) and tablet (right)

Usage

Do
  • Use the filter feedback bar to provide direct access to frequently used filters.
  • Use the filter feedback bar when filter options are relatively simple and straightforward.
  • Use the filter feedback bar when users want to modify applied filters often.
Don't

Don’t use the filter feedback bar when users require a large number of filters, or the filter options are difficult to represent by chips. For example, when filter options have very complex names and structures.

Anatomy

The filter feedback bar sits between the app bar and content area. The chips in the filter feedback bar are grouped into two types:

A. Active Filters

Active filters indicate the sort (if it is a non-default sort) and filters currently applied to the list. They are represented by chips in the selected state. The active filters are always on the left side of inactive filters, with sort (if applicable) at the very left.

B. Inactive Filters (for fast filters)

Inactive filters are available filter options that are not currently applied to the list. Only fast filters will be shown as inactive filters. They are represented by chips in the non-selected state.

Filter feedback bar anatomy
Filter feedback bar anatomy

Behavior and Interaction

Horizontal Scroll

All filter options in the filter feedback bar are displayed in one row. Users can scroll horizontally to view all filters.

Horizontal scroll
Horizontal scroll

Applying Fast Filters

Users can apply a fast filter simply by tapping the chip. This will change the chip to the selected state and become an active filter. The active filter will move to the left of any inactive filters. Each time a fast filter is applied, the list below will be refreshed to show the filtered result.

Applying fast filters
Applying fast filters

Removing Fast Filters

Users can remove a fast filter simply by tapping the chip. This will change the chip to non-selected state and back to an inactive filter. The inactive filter will move back to its original position as the fast filter. Users can only remove one fast filter at a time, and the list below will be refreshed to show the updated result.

Removing fast filters
Removing fast filters

Applying Filters from the Filter Dialog

In the filter dialog, users can apply multiple filters at a time. All applied filters will be displayed in the feedback bar as active filters. If fast filters are defined from the options in the dialog, they can be applied through the dialog as well.

In general, the active filters take the selected filter’s name or value directly. If the value or name is not clear enough, we recommend using both the label and value in the active filter. For example, a location value could represent arrival or departure, adding “Arr:” or “To:” and “Dep:” or “From:” to the location value would help users identify what the location stands for. By default, we recommend adding “Sort By:” to the sort value in the filter feedback bar for clarity.

Applying filters from the Filter dialog
Applying filters from the Filter dialog

Removing Filters from the Filter Dialog

Users can remove an applied filter from the filter dialog directly by tapping the chip in the filter feedback bar. If that option is not defined as a fast filter, it will disappear from the filter feedback bar. The user can also remove a filter by deselecting it in the filter dialog as the standard behavior of the filter dialog.

Removing applied filters from the Filter dialog
Removing applied filters from the Filter dialog

Expanding and Collapsing

To maximize screen space for users to scan through the list content, the filter feedback bar will collapse as users scroll down the page. It will expand and stay on top of the list content when users start to scroll back up to provide easy access.

Expanding and collapsing behavior
Expanding and collapsing behavior

Variations

Fast Filters

Fast filters are pre-defined filter options that remain visible in the filter feedback bar even when they are not applied. With fast filters, users can apply filters to the list directly in the page instead of opening the filter dialog. The fast filter options are defined by the app team. To make fast filters most effective, we recommend only including the most frequently used filters as fast filters.

Filter Feedback Bar with Fast Filters

With fast filters, the filter feedback bar is visible by default with all fast filters as inactive filters. Users can apply fast filters directly or through the filter dialog. All applied filters will be shown in the filter feedback bar as active filters.

Filter Feedback Bar without Fast Filters

When no fast filters are defined, the filter feedback bar is hidden by default. The default sort does not show up in the filter feedback bar. After the user has applied a filter or changed the sort option through the filter dialog, the filter feedback bar will appear to show the active filters.

Resources

Development: FilterFeedbackBar

SAP Fiori for iOS: Filter Feedback Bar