UI Elements Filter Info Bar

Updated: March 17, 2021
SAPUI5 Version 1.82

Infobar

sap.ui.commons.Toolbar | sap.m.sample.ToolbarActive.Toolbar | sap.m.SelectDialog

Intro

The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:

  • Filter criteria: The infobar indicates the filter criteria that have been applied for a filter or contextual filter. Do not show the infobar if no filter is applied.
  • Selected items: In a multi-select dialog, the infobar shows the number of selected items.
The infobar is placed above the content and shows the applied filters
The infobar is placed above the content and shows the applied filters

Responsiveness

The bar has the same height, text size, and icon size in both cozy and compact formats. The text inside the bar will be truncated if there’s not enough space.

Text is truncated on a small screen. The example shows an infobar for a contextual filter.
Text is truncated on a small screen. The example shows an infobar for a contextual filter.

Types

There are three situations in which an infobar is shown:

  1. After a general filter has been applied.
  2. After a contextual filter has been applied.
  3. After the user has selected multiple items in a select dialog.

General Filter

All applied filters are shown as labels in the infobar.

Infobar after a filter has been applied
Infobar after a filter has been applied

Contextual Filter

The contextual filter allows the user to see a prefiltered view of a list. The title on the left side and an icon on the right side display the filter criteria. The Filter icon should represent the filter category. Do not use a generic filter icon, otherwise it may be confused with the user-triggered filters. For more information, see contextual filter.

Infobar after a contextual filter has been applied
Infobar after a contextual filter has been applied

Multiselection

If the user selects multiple items, the infobar shows the number of selected items. For more information, see select dialog.

Infobar after multiselection has been applied
Infobar after multiselection has been applied

Components

The infobar is a toolbar that consists of a label on the left side and an icon on the right side.

The label shows the filter criteria, and the icon selected depends on the use case.

General Filter and Multiselection

No icon is shown. The only exception is the Cancel icon, which is used to reset the current filter criteria.

Infobar with optional Cancel icon
Infobar with optional Cancel icon

Contextual Filter

The icon is mandatory and represents the current filter criterion.

There is one exception in which it is useful to be able to cancel the contextual filter. In this special case, the contextual filter is used to prefilter the listed items in a select dialog. For this case, use the Cancel icon instead of the Filter icon. For more information, see contextual filter.

In all other use cases, show an icon that represents the filter criterion.

Contextual filter with filter icon
Contextual filter with filter icon

Behavior and Interaction

The bar can have two active areas: either the entire bar can be active, or if an icon is added, it creates a second active area. We recommend that you use the active behavior for the bar and the icon.

Bar Area

When the user clicks the bar, the filter dialog from the view settings dialog is shown. If only one filter is applied, the filter can be changed directly in the detailed filter selection. If more than one filter is applied, the filter dialog shows a list with general filter categories.

Clicking the infobar with a single filter shows the detailed filter selection.
Clicking the infobar with a single filter shows the detailed filter selection.
Clicking the infobar with multiple filters shows the filter categories.
Clicking the infobar with multiple filters shows the filter categories.

Icon Area

  • Cancel: The user clicks the icon to delete the current filter settings. We recommend that you use the cancel icon.
  • Filter (only contextual filter): Clicking the icon has the same effect as clicking the bar. The filter dialog is shown.

States

The infobar has two states – active and non-active (non-clickable). If set to non-active, the whole bar turns gray and the user cannot interact with it.

Infobar - Active state
Infobar - Active state
Infobar - Non-active state
Infobar - Non-active state

Properties

The contextual filter is not a separate control. If you want to build an infobar, you need to use the sap.m.toolbar control. To achieve the infobar design, set the design toolbar property to “info”.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation