Filter Bar

The filter bar lets users set criteria to limit the data loaded and displayed in a table. It is part of the list report and the overview page, and is also available as an alternative layout to the visual filter bar in the analytical list page.

It is made up of input controls that filter objects according to various criteria, such as status or date. Users can adapt the filter bar, for example, by showing and hiding input controls or changing their order. They can also store the current set of filter criteria in a view.

The filter bar is displayed in the header area of a list report, overview page, or analytical list page. Because these floorplans are based on the dynamic page layout, the expand and collapse header functions are available.

When to Use

The filter bar is always part of the list report and overview page.

Do not use the filter bar:

In a table in an object page section. Use the filter in the View Settings dialog instead.
In a wizard.
In a simple list. Use the search instead.

Filter Bar Components

Expanded Filter Bar

The expanded filter bar consists of:

Views (optional)
Basic search field (optional)
Filter input controls
Go button (only for manual update mode)
Adapt Filters button

Expanded filter bar

Views (1) store the settings for the filter bar, including the values of filter input controls, the fields visible in the filter bar, and their order.

You can also use the filter bar without view management. In this case, display a page title instead.

If the basic search field (2) is available, it is displayed first. It allows users to filter the results with a given keyword. Unlike the other input control fields, the basic search field has a placeholder text instead of a label.

The f ilter input controls (3) are arranged in a horizontal, linear layout, with a label above them. An asterisk next to the filter label indicates the filter is mandatory.

If the browser window size is reduced or filter input controls exceed the available width, they wrap to the next line. The height of the expanded filter bar is not limited and adjusts to accommodate the visible filters. The size of the widest input control is inherited by all other filters to ensure visual cohesion.

The full labels for the filter input controls are always displayed. They are displayed without wrapping on all screen sizes but S. On an S-sized screen, they are displayed with wrapping.

The Go button (4) triggers the search for the manual update mode. Alternatively, you can offer the live update mode where the table results are updated each time the user changes an input control value. For more information, see Behavior and Interaction.

In most cases, only a subset of all available filters is visible in the filter bar. Users can control the visibility and order of the filters and assign values to them in the Adapt Filters dialog (5).

Next to Adapt Filters, the number of active filters is displayed in parentheses. A filter is active when a value is assigned to it either in the filter bar or the Adapt Filters dialog. Note that a filter can be active, but not visible in the filter bar.

Collapsed Filter Bar

The collapsed filter bar takes up very little space, leaving most of the screen to display the results.

Collapsed filter bar

It shows a summary of the filters currently applied:

Either 1 filter active or <n> filters active, where “n” stands for the number of applied filters.
A comma-separated list of the currently applied filters for up to five filters. If there are more, an ellipsis (…) shows at the end of the string.

If no filters have been applied, the summary text is No filters active.

“Adapt Filters” Dialog

Users can manage all the available filters in the Adapt Filters dialog, including their visibility and order in the filter bar and the values of filters both visible and not visible in the filter bar.

Adapt Filters dialog - list view, hidden values

The Adapt Filters dialog consists of:

Select control and search
Show Values/Hide Values toggle
List or group view
Mandatory and optional filters
Footer bar buttons
Arrows to move the filter up and down
Active filter with assigned value

When opened, the dialog displays all the available filters in the Hide Values view with the List view.

The selected filters are visible in the filter bar and displayed in the same order as in the filter bar.

Searching and Displaying Filters in the Dialog

To find filters (1), users can search for them by name or use the select control to limit the filters displayed in the dialog to certain filter types, such as visible, active, or mandatory.

Mandatory filters have an asterisk next to their label (4). They must have values for the search to return results. Users can set the values either in the filter bar or the Adapt Filters dialog.

In the dialog, when a mandatory filter has:

No value assigned, its checkbox is automatically selected and cannot be deselected.
A value assigned, the users can deselect it to remove the filter from the filter bar.

In the dialog, users can display the filters:

With or without the filter values (2).

When the values are hidden, a visual indicator (7) flags the active filters.

In the list or group view (3).

The group view shows the filters according to group. The first group is called Basic and contains the filters for the standard view that you design to ship with the app. You can design additional views to ship with the app, but no additional groups are created for these views.

Displaying Filters in the Filter Bar

All the views in the dialog allow users to select filters to be visible in the filter bar.

In the Hide Values view with the List view, users can reorder the selected filters with the arrows (6).

In the Adapt Filters footer bar (5):

OK applies changes and closes the dialog.
Cancel closes the dialog without applying changes.

Resetting Filters

In the header area, Reset (8) (optional) restores the selected filters and filter values to the ones in the current view. Before the filters are reset, the user gets a warning because the reset applies immediately to the filter bar, even though the dialog stays open. Clicking Cancel in the footer bar does not reverse the reset action.

Adapt Filters dialog - list view, values shown

Adapt Filters dialog - grouped view, hidden values

Adapt Filters dialog - grouped view, values shown

Filter Input Controls

To prevent unnecessary complexity in the filter bar, pick the simplest input control that works for your use case, as recommended below:

For	Use
A predefined list for single or multiple selection	The select control or combo box control
Temporal information	The date picker or date range selector
Multi-input fields	Suggestions to help the user enter a valid value

For a comprehensive overview of when to use which input field, see Which Selection Control Should I Use?

Use the value help control only as a last resort. It is especially beneficial if you want to offer an advanced function for selecting single or multiple items either inline (by entering text) or by means of a dialog.

Developer Hint

For development information, see Data Types for the smart filter bar.

For more information on the selection controls, see:

Behavior and Interaction

In the live update mode, the search results are updated each time the user changes the value of an input control or the search field. A Go button is not necessary.

As the user types in the search field, the search is triggered with the entry of each character. The table is updated with the results that match all the filter values and include the search term.

In the manual update mode, the search results are updated only when the users click Go or press Enter on their keyboard.

Responsiveness

The name of the view or title is always visible.

The filter area (basic search field, input controls, optional Go button, Adapt Filters dialog) varies:

Desktop: Expanded or collapsed by default
Tablet: Collapsed by default
Phone: Not displayed. Accessible through filter dialog.

The labels for the filter input controls are displayed in full for all device sizes:

On a desktop and tablet, without wrapping
On a phone, with wrapping.

Examples

Top Tips

Filter Bar

Always provide a set of predefined default filters to deliver with the app (Basic group in the Apply Filters dialog). Include filters that are:

Mandatory / crucial for the use case
Frequently used
Vital for reducing the number of items in the list

Users can set filters from the Basic group not to display in the filter bar, but cannot remove them from the Adapt Filters dialog.

Filter Input Controls

Use the basic search field to provide a keyword search. Do not show a search field in the table toolbar.
Pick the simplest selection control that works for your use case. See When to Use which Selection Control?
For temporal filters, use the date picker or date range selector.
To help the user enter a valid value for multi-input fields, enable suggestions.

Preset Filter Values

Provide meaningful default values for as many filters as possible to prevent unnecessary data from loading. This is particularly important when the application has large data sets.
Example:
A default value for date ranges should reflect the time frame the user would normally apply.
For list reports and overview pages, preset values for mandatory filters to prevent error messages when the page loads.

Update Mode

Whenever possible, use the live update mode because it is more convenient for the user.
Consider the manual update mode only in cases where:
- The volume of unfiltered data to load would be excessively high.
- The users need to enter multiple filter values to display results they can work with.

Responsiveness

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

Types

The infobar is shown in the following situations:

After a general filter has been applied
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

Multiple Selection

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

Infobar after multiple items have been selected

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 Multiple Selection

No icon is shown. The only exception is the Cancel icon, which is used to reset the current filter criteria. For more information, see the responsive table.

Infobar with optional 'Cancel' 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 multiple filters shows the filter categories

Icon Area

Cancel: The user clicks the icon to delete the current filter settings. We recommend using the cancel icon.

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 - Non-active state

Properties

The infobar 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 property of the toolbar to “info”.

Resources

Elements and Controls

Select Dialog (guidelines)
Toolbar (guidelines)
View Settings Dialog (guidelines)

Implementation

Table View Settings Dialog (SAPUI5 samples)
Multi Select Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Toolbar (SAPUI5 API reference)

Filter Bar

When to Use

The filter bar is always part of the list report and overview page.

Do not use the filter bar:

In a table in an object page section. Use the filter in the View Settings dialog instead.
In a wizard.
In a simple list. Use the search instead.

Filter Bar Components

Expanded Filter Bar

The expanded filter bar consists of:

Views (optional)
Basic search field (optional)
Filter input controls
Go button (only for manual update mode)
Adapt Filters button

Expanded filter bar

Views (1) store the settings for the filter bar, including the values of filter input controls, the fields visible in the filter bar, and their order.

You can also use the filter bar without view management. In this case, display a page title instead.

The f ilter input controls (3) are arranged in a horizontal, linear layout, with a label above them. An asterisk next to the filter label indicates the filter is mandatory.

Collapsed Filter Bar

The collapsed filter bar takes up very little space, leaving most of the screen to display the results.

Collapsed filter bar

It shows a summary of the filters currently applied:

Either 1 filter active or <n> filters active, where “n” stands for the number of applied filters.
A comma-separated list of the currently applied filters for up to five filters. If there are more, an ellipsis (…) shows at the end of the string.

If no filters have been applied, the summary text is No filters active.

“Adapt Filters” Dialog

Adapt Filters dialog - list view, hidden values

The Adapt Filters dialog consists of:

Select control and search
Show Values/Hide Values toggle
List or group view
Mandatory and optional filters
Footer bar buttons
Arrows to move the filter up and down
Active filter with assigned value

When opened, the dialog displays all the available filters in the Hide Values view with the List view.

The selected filters are visible in the filter bar and displayed in the same order as in the filter bar.

Searching and Displaying Filters in the Dialog

To find filters (1), users can search for them by name or use the select control to limit the filters displayed in the dialog to certain filter types, such as visible, active, or mandatory.

In the dialog, when a mandatory filter has:

No value assigned, its checkbox is automatically selected and cannot be deselected.
A value assigned, the users can deselect it to remove the filter from the filter bar.

In the dialog, users can display the filters:

With or without the filter values (2).

When the values are hidden, a visual indicator (7) flags the active filters.

In the list or group view (3).

Displaying Filters in the Filter Bar

All the views in the dialog allow users to select filters to be visible in the filter bar.

In the Hide Values view with the List view, users can reorder the selected filters with the arrows (6).

In the Adapt Filters footer bar (5):

OK applies changes and closes the dialog.
Cancel closes the dialog without applying changes.

Resetting Filters

Adapt Filters dialog - list view, values shown

Adapt Filters dialog - grouped view, hidden values

Adapt Filters dialog - grouped view, values shown

Filter Input Controls

To prevent unnecessary complexity in the filter bar, pick the simplest input control that works for your use case, as recommended below:

For	Use
A predefined list for single or multiple selection	The select control or combo box control
Temporal information	The date picker or date range selector
Multi-input fields	Suggestions to help the user enter a valid value

For a comprehensive overview of when to use which input field, see Which Selection Control Should I Use?

Developer Hint

For development information, see Data Types for the smart filter bar.

For more information on the selection controls, see:

Behavior and Interaction

In the live update mode, the search results are updated each time the user changes the value of an input control or the search field. A Go button is not necessary.

As the user types in the search field, the search is triggered with the entry of each character. The table is updated with the results that match all the filter values and include the search term.

In the manual update mode, the search results are updated only when the users click Go or press Enter on their keyboard.

Responsiveness

The name of the view or title is always visible.

The filter area (basic search field, input controls, optional Go button, Adapt Filters dialog) varies:

Desktop: Expanded or collapsed by default
Tablet: Collapsed by default
Phone: Not displayed. Accessible through filter dialog.

Examples

Top Tips

Filter Bar

Always provide a set of predefined default filters to deliver with the app (Basic group in the Apply Filters dialog). Include filters that are:

Mandatory / crucial for the use case
Frequently used
Vital for reducing the number of items in the list

Users can set filters from the Basic group not to display in the filter bar, but cannot remove them from the Adapt Filters dialog.

Filter Input Controls

Use the basic search field to provide a keyword search. Do not show a search field in the table toolbar.
Pick the simplest selection control that works for your use case. See When to Use which Selection Control?
For temporal filters, use the date picker or date range selector.
To help the user enter a valid value for multi-input fields, enable suggestions.

Preset Filter Values

Provide meaningful default values for as many filters as possible to prevent unnecessary data from loading. This is particularly important when the application has large data sets.
Example:
A default value for date ranges should reflect the time frame the user would normally apply.
For list reports and overview pages, preset values for mandatory filters to prevent error messages when the page loads.

Update Mode

Whenever possible, use the live update mode because it is more convenient for the user.
Consider the manual update mode only in cases where:
- The volume of unfiltered data to load would be excessively high.
- The users need to enter multiple filter values to display results they can work with.

Usage

Use tokens only in the multi-combo box, multi-input control, or value help dialog.

Components

The tokenizer is an invisible container that can display multiple tokens.

Tokens have the following properties:

They usually contain single text items.
They may also contain key-value pairs, such as John Miller (ID1234567).
They contain a (Remove) icon, which is only visible if the token is in edit mode.

Tokens with a surrounding tokenizer

Behavior and Interaction

Interacting

Users can interact with tokens using a mouse, keyboard, and/or touch input. In size L (desktop) only, hovering with the mouse over the token produces a tooltip with the entire content of the token (on a maximum of two lines).

Selecting and Deselecting Tokens

Users can select tokens by clicking them, or by using the keyboard. The selected tokens are then indicated. Users can select multiple tokens separately by holding down the Ctrl key and clicking the relevant tokens.

The user can select a series of tokens by placing the cursor in an initial position (which can also be a token), holding down the SHIFT key, and clicking a new position. The tokens between these two cursor positions are then selected.

Adding Tokens

The user can add tokens to the multi-combo box and multi-input control. New tokens are added in the order in which they are entered.

Information

For information on how to manage leading and trailing white space (blanks) when copying and pasting text into input controls, please see removing leading and trailing white space.

Removing Tokens

The user can instantly remove tokens via the keyboard, or by clicking the Remove icon.

Styles

There are five different styles of tokens: regular, on hover, selected, selected on hover and read-only. These styles correspond to the type of interaction being used.

Regular

On hover

Selected

Read only

Hover selected

Guidelines

The tokenizer can also be used as a tag container.

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

Multi-Combo Box (guidelines)
Multi-Input Field (guidelines)
Value Help Dialog (guidelines)
Combo Box (guidelines)

Implementation

Token (SAPUI5 samples)
Tokenizer (SAPUI5 samples)
Token (SAPUI5 API reference)
Tokenizer (SAPUI5 API reference)

Views (Variant Management)

Information

Note on terminology:

On the user interface, we now call variants “views”, which is better understood by end users. To describe the SAPUI5 controls, however, we still speak of “variants” and “variant management”.

Intro

Variants store view settings, such as filter settings or control parameters.

The filter settings consist of filter parameters, selection fields, and the layout of filters. They are set within the filter bar.

Control parameters are the sort order, filter and group settings, column visibility, and the layout of a table or chart. They are set within the toolbar of the control.

The variant management control enables the user to load, save, change, and maintain variants.

Usage

Use the variant management control if:

The user needs to save and load different filter settings to find the relevant data.
The user needs to save and load different layouts (for example, a table) to display data in different views.
The user needs to save the settings for the whole page, including the filter settings and table layout.

Responsiveness

Size S (Smartphone)

On phones, the My Views dialog for selecting variants, the Manage Views dialog, and the Save View dialog open in full screen mode.

My Views

Manage Views

Save View

Size M (Tablet)

My Views

Manage Views

Save View

Size L (Desktop)

My Views

Manage Views

Save View

Components

Variant management come with several components:

A clickable title with an icon
The My Views dialog for selecting variants
The Manage Views dialog for setting view parameters and deleting views
The Save View dialog for creating a new view

Name of View

The view name is the entry point for opening the My Views, Manage Views, and Save View dialogs.

If the user has made changes to the user interface that affect the saved view, the view is marked with an asterisk (*) to indicate the unsaved changes. This happens when the user deletes or adds a filter to the filter bar, for example.

Selecting a view

My Views Dialog

The My Views dialog contains all favorite views, including the default view, the pre-shipped standard views, and the views marked as favorites by the user. The default view and the pre-shipped standard views are marked as favorites automatically.

Default View

There can only be one default view, which the user can change in the Manage Views dialog. If the user sets a new default view, the last view remains as a favorite. The user can explicitly unfavorite the last view in the Manage Views dialog.

Pre-Shipped Standard Views

The standard view is the minimum set of filters delivered by SAP, and cannot be modified or deleted. It is flagged as a favorite and cannot be removed. There can be several pre-shipped standard views, depending on the use case.

Favorite Views

Users can mark views as favorites (or unfavorite them) in the Manage Views dialog. If more than 10 favorite views exist, a search option is displayed.

The views created by users themselves are favorited automatically, while views created by other users are unfavorited by default. This prevents the My Views popover from becoming overcrowded with public variants that are not relevant for the user.

The user can also mark public views as favourites.

Public Views

Public views are visible to all users who have access to the app. A view can be set to Public by individual users, key users, SAP (default delivery), or partners. All views that are set to Public are available within the Manage Views dialog.

A public view can be edited by the user who created it and by key users. All other users can only display the public view.

Actions in the My Views Dialog

Users can open the Manage Views dialog using the Manage button in the footer bar of the My Views dialog. From this dialog, users can Save changes to the current view, or choose Save As to create a new view, which opens the Save View dialog.

'My Views' dialog with a few views

'My Views' dialog with more than 10 views and a search option

Manage Views Dialog

In the Manage Views dialog, users can make the following changes:

Mark a view as a favorite
Change the name of a self-created view
Set a view as the default
Apply the view automatically
View the Sharing and Created By information of each view
Delete a self-created view

In addition to the personal views users create for themselves, they can also see the pre-shipped and public views. A user can only modify his or her own views, and not public, pre-shipped, or third-party views created by other users.
Exception: Key users can also change and delete views created by others.

'Manage Views' dialog

Apply View Automatically

Users can select or deselect this option. The control allows app teams to add an optional text next to the checkbox. This can be useful if you apply filter exceptions that overwrite the standard behavior.

'Manage Views' dialog with additional text in "Apply Automatically" set

Save View Dialog

The Save View dialog is for creating a new view. For each view, you can make the following settings:

View: Name of the new view (required field)
Set as Default: If checked, the new view is the new default view.
Public: If checked, the new view is available to everyone who has access to the app.
Apply Automatically: If checked, the view is applied immediately whenever it is selected. The user does not need to click the Go button in the filter bar.
We do not recommend checking this option if the selection is likely to cause long loading times.

'Save View' dialog

Layout

The variant management control is merged with the page title (or next to or merged with title of the respective control, such as a table).

Filter Bar (Page Title)

The variant management control is merged with the page title within the page header container, and saves the stored filter settings or both the filter and control settings.

Variant management within the filter bar, merged with the page title

Table

The variant management control can also store control settings like layout, table column visibility, sorting, or grouping independently of the filter settings.

It is either merged with the control title or placed next to it.

If you place the title or variant management control inside a toolbar, apply the following styles:

Set the toolbar height to 3 rem.
Use a transparent toolbar.
Use the title class “sapMH4Fontsize”.

Variant management within the table toolbar

If the table has a separate title, place the title first.

Variant management with table title

Behavior and Interaction

This control allows the user to select, create, update, and delete variants for filter settings and control parameters such as layout, table column visibility, sorting and grouping.

My Views dialog: Selecting a View

The page title displays the active variant. Clicking the title dropdown opens a popover that displays all available variants. The currently active variant is highlighted. To load another variant, the user simply selects one from the list.

Save

Save can only be applied to variants that the user is allowed to save. Otherwise, this button is disabled. Save overwrites the active variant.

Save As

Save As enables the user to save the current filter settings as a new view. The Save As function can also be used to duplicate existing variants for later modification.

Manage

Manage opens the Manage Views dialog that allows the user to update, delete or favorite/unfavorite existing variants.

Selecting a view

Save View dialog

The Save View dialog is for creating new views. Providing a name for the new view is mandatory. Clicking OK saves the new view.

Save View

Manage Views dialog

In the Manage Views dialog, the user can rename, delete, and change properties of existing views.

Users can only modify or delete entries if they have the necessary permissions. By default, variants that a user has created can also be modified and deleted.

Manage Views

Save as Tile

The user can save the currently selected variant as a tile on the launchpad using the Save as Tile action in the Share menu.

In the Save as Tile dialog, the user can define the tile title and subtitle, a description, and the launchpad group in which the tile should appear.

Save as tile via 'Share' button

'Save as Tile' dialog

Guidelines

Save as Tile

Use the name of a variant as the title of the application tile. Map this as a preset title that cannot be edited by the user. In this case, whenever the variant is updated, the tile is updated accordingly.

Exception: If the variant cannot be referenced directly due to technical limitations, offer the standard tile creation option where filter parameters and settings are only saved within the URL.

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

Responsive Table (guidelines)
Table Toolbar (guidelines)
Filter Bar (guidelines)

Implementation

Variant Management (SAPUI5 API reference)

Icon Tab Bar

The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.

There are two key use cases:

You want to let users navigate between different object facets in the object details area.
You want to let users filter lists, and give them the option of calling up the entire list, or only items with a specific attribute.

In both cases, the user switches between tab pages by clicking the respective tab.

Usage

Use the icon tab bar if:

Your business objects need to show multiple facets at the same time.
You want to allow the user to browse through these facets.
You need a prominent or very visual filter on top of a list.
You have clear-cut process steps that need to be visualized.

Do not use the icon tab bar if:

You plan to use only one single tab.

Responsiveness

The icon tab bar stretches horizontally, which often exceeds the available width on small screens. It responds to limited space by offering a scrolling mechanism.

Responsiveness – Text tabs

Responsiveness – Icon tabs

In addition to the responsive overflow behavior, the icon tab bar can be forced into compact mode or even react dynamically to the application’s global density setting. See the Tab Density section for details.

If there is not enough space to show all the tabs on the main tab bar, an overflow menu appears, containing all the remaining tabs that do not fit on the screen. By default, the overflow menu appears on the far right (see image “Responsiveness – Overflow on the far right”).

Another option is to display an overflow menu on both sides of the icon tab bar. The use of this overflow behavior depends on whether the order of the tabs is fixed or can be rearranged:

For processes with a fixed order or in the anchor bar of an object page, display an overflow menu on both sides (property: TabsOverflowMode, value: StartAndEnd).
For tabs that can be rearranged, display only one overflow menu on the far right (property: TabsOverflowMode, value: End).

Responsiveness – Overflow on the far right

Layout

The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from. These are described in detail below.

Types

You can use the icon tab bar control to build the following types of tab bars:

Text only
Icon tabs
Tabs as filters
Tabs as process steps

Text Only

The text-only variant is one of the most common types. It allows longer labels, and can also display counters next to the text to indicate the number of items on the tab page.

Unlike all other tab variants, the labels do not get truncated. The full text is always shown. As a result, you need to ensure that your labels do not become too long. They should still be easy to read on smaller screens.

If you use text-only tabs, make sure that the UpperCase property is disabled and that you enter the labels in title case (for example: Approval Flow).

Types – Text-only without counters

Types – Text-only with inline counters

Counters and Text Tabs

If counters are used, set the property HeaderMode to “Inline” so the counters appear in brackets after the labels.

Do not use the old layout that shows the counters on top of the labels (Headermode = “Standard”).

Counters – Inline layout ('HeaderMode' set to 'Inline')

Don't

Counters – Old layout ('HeaderMode' set to 'Standard')

Icon Tabs

Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.

Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.

Types – Icons with counters

Please note that starting with SAPUI5 version 1.40, you should only use the horizontal type of label (icon and label side by side).

If your labels get truncated, consider using shorter labels or text tabs (without icons), since text tabs cannot get truncated.

Types – Icons with counters and labels

Types – Icon-only

Tabs as Filters

If you build the tab bar as a filter, it can comprise two parts:

An “all” tab on the left (optional)
This tab shows the total number of items, and describes the type of item (for example, 189 Products).
Tabs for specific filters
Use the tab text to indicate the filter attribute.
We strongly recommend showing a counter on every tab.

Types – Filter

Tabs as Process Steps

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

To connect the process steps, you can use the triple-chevron icon () from the SAP icon font (technical name: process). Do not use the triple-chevron icon in the anchor bar of an object page.

If the process steps have a fixed order, set the property TabsOverflowMode to “StartAndEnd” to show an overflow menu on both sides and to keep the order of the tabs intact.

Types – Process

Developer Hint

When using icons with labels, add a comment in the properties file to make editors and translators aware that space is limited.
Example: Label for icon tab on detail screen. Max 14-16 characters (depending on character width).

Test whether your labels and their translations are displayed in full, and do not get truncated.

Hierarchies

The tab bar supports hierarchies, allowing multiple tabs underneath one main tab. This way, you can group several tabs together, with the main tab acting as a headline.

Subtabs

The example on the right shows the main tab Notes with two subtabs, Internal and External, with no specific hierarchy except for their order.

Types – Subtabs

Nested Tabs

Nesting allows deeper hierarchies with indentations to indicate the level of each tab.

By default, the property maxNestingLevel is “0” (zero). To enable nesting, adjust this value to the highest level of nesting that your app allows.

Types – Nested tabs

Behavior and Interaction

Clicking a Tab

To navigate through the views, the user clicks the tabs.

Optional behavior: If the user clicks a tab that is already open, the container collapses. It opens again when the user clicks any tab.

Use the expandable property to specify whether users can collapse the tab container (default = “true”):

Let users collapse the container if there is additional content below the container, and the information inside the container is not always needed.
If there is no content below the tab container, set the expandable property to “false”.

The expandable property controls the initial state of the container. Do not change the default state (“true”).

Changing the Order of Tabs

You can allow users to rearrange the tab order in a desktop environment (property: enableTabReordering). If this feature is enabled, users can drag and drop tabs to reorder them, either directly on the tab bar or inside the overflow menu.

It is also possible to drag and drop tabs from the tab bar to the overflow menu and vice versa.

If nesting is enabled (property maxNestingLevel > 0), users can choose the level at which they want to drop a tab.

Dragging a tab activates a visual indicator for positioning the tab. For example, dragging tab 8 on top of tab 5 makes tab 8 the child of the now highlighted tab 5 (see image 1).

If the user drags a tab between two other tabs, the indicator shows the level at which level the tab will be nested (see image 2).

Interaction - Tab nesting using drag and drop (1 of 2)

Interaction - Tab nesting using drag and drop (2 of 2)

Guidelines

Do not use this feature for:

Tabs as process steps:
This ensures that consecutive steps do not get mixed up.
Anchor bar navigation:
Sections that are represented in the anchor bar have a fixed order.

Styles

Tab Density

The default responsive design of the icon tab bar applies to both compact and cozy modes. However, in addition to this responsive behavior, the control can be forced into a compact mode, or even react dynamically to the application’s global density setting. This feature can be used to:

Save vertical space on the page (applies to both text and icon tabs)
Save horizontal space (icon tabs only; this is especially helpful when there are many tabs)
Generally use less space on mobile devices
Reduce noise when there are already more important visual elements on the screen (primarily icon tabs)

The property for the override is called tabDensityMode, which can be set to “Cozy”, “Compact”, or “Inherit”. “Cozy” is the default setting that renders the control in its regular dimensions. “Compact” reduces the control’s height and icon sizes (if applicable), even if there would be enough space for the cozy design. “Inherit” instructs the control to follow the global density mode defined for the application. For backward compatibility, the default setting is “Cozy”.

The following image shows some types of tabs with their default style (cozy, left) and the reduced density mode (compact, right).

Style – Tab density

Colors

The two different styles (round tabs and text only) are discussed in the Types section. In both cases, you can use semantic colors to give users additional orientation.

Only use semantic colors if it is important for users to know that they need to take action (for example, to indicate errors or critical situations requiring action). Otherwise, use the neutral default colors. For more information, see How to Use Semantic Colors.

Developer Hint

To apply semantic colors to the icons and the text-only tabs, you can use the property sap.ui.core.IconColor.

Example

In the example below, one step in the process is indicating an error. Since the other tabs have neutral colors, it is clear that they do not contain errors. Coloring them green to show that they are OK is unnecessary, and would reduce the severity of the red tab.

Styles – Colors

Badge

A tab can have an attention badge to indicate that new items were added to that tab. Only display a badge if new items are triggered from outside the app. Do not display a badge when users add new items themselves.

Icon tab with an attention badge

Badge in Default or Semantic State

You can add a badge to all types of icon tab bar.

The badge inherits the state of its tab (default state or semantic state):

For the default tab state, the default red badge is displayed.
If the tab has a semantic state, the badge inherits the semantic color for the current state.

Don’t mix tabs in the default state with tabs that have a semantic state.

Badge for the default state / semantic state

Badge Interaction

The badge becomes part of the tab. When the user selects a tab with a badge, the badge disappears. If a new item is added to the tab that is currently open, no badge is shown.

In addition, the badge inherits the interaction of its tab. For example, if a tab is moved using drag and drop, the attention badge moves with it.

Selecting a tab with a badge

Overflow Menu

If there isn’t enough space to show all the tabs on the main bar, an overflow menu appears on the right by default, containing all the remaining tabs. Depending on the use case, an overflow menu can also appear on both sides (for example, for process steps or anchor bar navigation).

A badge on the chevron icon indicates that a tab within the overflow menu has received new items. The tab in question is indicated by a second badge on the item in the overflow menu.

Badge within overflow menu

Guidelines

Apply the styles as follows:

Icons only: Use this option if you have only 4-5 tabs that can be very clearly identified by their icon. If a short description is needed, use icons and labels.
Text only: Use this option if you have more than 4-5 tabs, or if there are no clear icons to represent the content. The text-only style also allows for longer labels. Set the property HeaderMode to “Inline”.

Counters – Inline layout ('HeaderMode' set to 'Inline')

Don't

Counters – Old layout ('HeaderMode' set to 'Standard')

If you use icon tabs, ensure the following:

The icons clearly identify the content on the tab pages.
Each tab has a unique icon. Do not use the same icon more than once.
The icons are easily distinguishable.
Any icons between tabs (for example, as separators or connectors) are visually very different from the icons on the tabs.
Either all or none of the icons have labels.

Implement the focus as follows:

By default, show the first tab as open. This is the initial setting provided by the control.
Note: Technically, you can also override the initial selection. However, this is not recommended.
Later on, you can show the tab last selected by the user.

Additional guidelines:

Do not display a loading indicator above the tab while the number for the item count is loading.
Handle empty tabs as follows:
- Hide tabs that do not contain any information, and do not allow the user to create content..
- Show empty tabs that allow users to create content, such as notes or attachments.
Only use the tab bars to navigate between tabs. Do not use any other navigation links. For example, do not let users click an item in tab A that takes them to tab B. This type of cross-navigation inside a container is confusing, and cannot be handled by the back navigation.

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

How To Use Semantic Colors

Implementation

Icon Tab Bar (SAPUI5 Samples)
Icon Tab Bar (SAPUI5 API reference)
Icon Tab Bar – Badges (SAPUI5 Samples)

Variant Management

Intro

Variants store view settings, such as filter settings or control parameters.

The filter settings consist of filter parameters, selection fields, and the layout of filters. They are set within the filter bar.

Control parameters are the sort order, filter and group settings, column visibility, and the layout of a table or chart. They are set within the toolbar of the control.

The variant management control enables the user to load, save, change, and maintain variants.

Information

Note on terminology:

Usage

Use the variant management control if:

The user needs to save and load different filter settings to find the relevant data.
The user needs to save and load different layouts (for example, a table) to display data in different views.
The user needs to save the settings for the whole page, including the filter settings and table layout.

Responsiveness

Size S (Smartphone)

On phones, the My Views dialog for selecting variants, the Manage Views dialog, and the Save View dialog open in full screen mode.

My Views

Manage Views

Save View

Size M (Tablet)

My Views

Manage Views

Save View

Size L (Desktop)

My Views

Manage Views

Save View

Components

Variant management come with several components:

A clickable title with an icon
The My Views dialog for selecting variants
The Manage Views dialog for setting view parameters and deleting views
The Save View dialog for creating a new view

Name of View

The view name is the entry point for opening the My Views, Manage Views, and Save View dialogs.

Selecting a view

My Views Dialog

Default View

Pre-Shipped Standard Views

Favorite Views

Users can mark views as favorites (or unfavorite them) in the Manage Views dialog. If more than 10 favorite views exist, a search option is displayed.

The user can also mark public views as favourites.

Public Views

A public view can be edited by the user who created it and by key users. All other users can only display the public view.

Actions in the My Views Dialog

'My Views' dialog with a few views

'My Views' dialog with more than 10 views and a search option

Manage Views Dialog

In the Manage Views dialog, users can make the following changes:

Mark a view as a favorite
Change the name of a self-created view
Set a view as the default
Apply the view automatically
View the Sharing and Created By information of each view
Delete a self-created view

'Manage Views' dialog

Save View Dialog

The Save View dialog is for creating a new view. For each view, you can make the following settings:

View: Name of the new view (required field)
Set as Default: If checked, the new view is the new default view.
Public: If checked, the new view is available to everyone who has access to the app.
Apply Automatically: If checked, the view is applied immediately whenever it is selected. The user does not need to click the Go button in the filter bar.
We do not recommend checking this option if the selection is likely to cause long loading times.

'Save View' dialog

Layout

The variant management control is merged with the page title (or next to or merged with title of the respective control, such as a table).

Filter Bar (Page Title)

The variant management control is merged with the page title within the page header container, and saves the stored filter settings or both the filter and control settings.

Variant management within the filter bar, merged with the page title

Table

The variant management control can also store control settings like layout, table column visibility, sorting, or grouping independently of the filter settings.

It is either merged with the control title or placed next to it.

If you place the title or variant management control inside a toolbar, apply the following styles:

Set the toolbar height to 3 rem.
Use a transparent toolbar.
Use the title class “sapMH4Fontsize”.

Variant management within the table toolbar

If the table has a separate title, place the title first.

Variant management with table title

Behavior and Interaction

This control allows the user to select, create, update, and delete variants for filter settings and control parameters such as layout, table column visibility, sorting and grouping.

My Views dialog: Selecting a View

Save

Save can only be applied to variants that the user is allowed to save. Otherwise, this button is disabled. Save overwrites the active variant.

Save As

Save As enables the user to save the current filter settings as a new view. The Save As function can also be used to duplicate existing variants for later modification.

Manage

Manage opens the Manage Views dialog that allows the user to update, delete or favorite/unfavorite existing variants.

Selecting a view

Save View dialog

The Save View dialog is for creating new views. Providing a name for the new view is mandatory. Clicking OK saves the new view.

Save View

Manage Views dialog

In the Manage Views dialog, the user can rename, delete, and change properties of existing views.

Users can only modify or delete entries if they have the necessary permissions. By default, variants that a user has created can also be modified and deleted.

Manage Views

Save as Tile

The user can save the currently selected variant as a tile on the launchpad using the Save as Tile action in the Share menu.

In the Save as Tile dialog, the user can define the tile title and subtitle, a description, and the launchpad group in which the tile should appear.

Save as tile via 'Share' button

'Save as Tile' dialog

Guidelines

Save as Tile

Exception: If the variant cannot be referenced directly due to technical limitations, offer the standard tile creation option where filter parameters and settings are only saved within the URL.

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

Responsive Table (guidelines)
Table Toolbar (guidelines)
Filter Bar (guidelines)

Implementation

Variant Management (SAPUI5 samples)
Variant Management (SAPUI5 API reference)

Icon Tab Bar

The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.

There are two key use cases:

You want to let users navigate between different object facets in the object details area.
You want to let users filter lists, and give them the option of calling up the entire list, or only items with a specific attribute.

In both cases, the user switches between tab pages by clicking the respective tab.

Usage

Use the icon tab bar if:

Your business objects need to show multiple facets at the same time.
You want to allow the user to browse through these facets.
You need a prominent or very visual filter on top of a list.
You have clear-cut process steps that need to be visualized.

Do not use the icon tab bar if:

You plan to use only one single tab.

Responsiveness

The icon tab bar stretches horizontally, which often exceeds the available width on small screens. It responds to limited space by offering a scrolling mechanism.

Responsiveness – Text tabs

Responsiveness – Icon tabs

Another option is to display an overflow menu on both sides of the icon tab bar. The use of this overflow behavior depends on whether the order of the tabs is fixed or can be rearranged:

For processes with a fixed order or in the anchor bar of an object page, display an overflow menu on both sides (property: TabsOverflowMode, value: StartAndEnd).
For tabs that can be rearranged, display only one overflow menu on the far right (property: TabsOverflowMode, value: End).

Responsiveness – Overflow on the far right

Layout

The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from. These are described in detail below.

Types

You can use the icon tab bar control to build the following types of tab bars:

Text only
Icon tabs
Tabs as filters
Tabs as process steps

Text Only

The text-only variant is one of the most common types. It allows longer labels, and can also display counters next to the text to indicate the number of items on the tab page.

If you use text-only tabs, make sure that the UpperCase property is disabled and that you enter the labels in title case (for example: Approval Flow).

Types – Text-only without counters

Types – Text-only with inline counters

Counters and Text Tabs

If counters are used, set the property HeaderMode to “Inline” so the counters appear in brackets after the labels.

Do not use the old layout that shows the counters on top of the labels (Headermode = “Standard”).

Counters – Inline layout ('HeaderMode' set to 'Inline')

Don't

Counters – Old layout ('HeaderMode' set to 'Standard')

Icon Tabs

Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.

Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.

Types – Icons with counters

Please note that starting with SAPUI5 version 1.40, you should only use the horizontal type of label (icon and label side by side).

If your labels get truncated, consider using shorter labels or text tabs (without icons), since text tabs cannot get truncated.

Types – Icons with counters and labels

Types – Icon-only

Tabs as Filters

If you build the tab bar as a filter, it can comprise two parts:

An “all” tab on the left (optional)
This tab shows the total number of items, and describes the type of item (for example, 189 Products).
Tabs for specific filters
Use the tab text to indicate the filter attribute.
We strongly recommend showing a counter on every tab.

Types – Filter

Tabs as Process Steps

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

To connect the process steps, you can use the triple-chevron icon () from the SAP icon font (technical name: process). Do not use the triple-chevron icon in the anchor bar of an object page.

If the process steps have a fixed order, set the property TabsOverflowMode to “StartAndEnd” to show an overflow menu on both sides and to keep the order of the tabs intact.

Types – Process

Developer Hint

Test whether your labels and their translations are displayed in full, and do not get truncated.

Hierarchies

The tab bar supports hierarchies, allowing multiple tabs underneath one main tab. This way, you can group several tabs together, with the main tab acting as a headline.

Subtabs

The example on the right shows the main tab Notes with two subtabs, Internal and External, with no specific hierarchy except for their order.

Types – Subtabs

Nested Tabs

Nesting allows deeper hierarchies with indentations to indicate the level of each tab.

By default, the property maxNestingLevel is “0” (zero). To enable nesting, adjust this value to the highest level of nesting that your app allows.

Types – Nested tabs

Behavior and Interaction

Clicking a Tab

To navigate through the views, the user clicks the tabs.

Optional behavior: If the user clicks a tab that is already open, the container collapses. It opens again when the user clicks any tab.

Use the expandable property to specify whether users can collapse the tab container (default = “true”):

Let users collapse the container if there is additional content below the container, and the information inside the container is not always needed.
If there is no content below the tab container, set the expandable property to “false”.

The expandable property controls the initial state of the container. Do not change the default state (“true”).

Changing the Order of Tabs

It is also possible to drag and drop tabs from the tab bar to the overflow menu and vice versa.

If nesting is enabled (property maxNestingLevel > 0), users can choose the level at which they want to drop a tab.

Dragging a tab activates a visual indicator for positioning the tab. For example, dragging tab 8 on top of tab 5 makes tab 8 the child of the now highlighted tab 5 (see image 1).

If the user drags a tab between two other tabs, the indicator shows the level at which level the tab will be nested (see image 2).

Interaction - Tab nesting using drag and drop (1 of 2)

Interaction - Tab nesting using drag and drop (2 of 2)

Guidelines

Do not use this feature for:

Tabs as process steps:
This ensures that consecutive steps do not get mixed up.
Anchor bar navigation:
Sections that are represented in the anchor bar have a fixed order.

Styles

Tab Density

Save vertical space on the page (applies to both text and icon tabs)
Save horizontal space (icon tabs only; this is especially helpful when there are many tabs)
Generally use less space on mobile devices
Reduce noise when there are already more important visual elements on the screen (primarily icon tabs)

The following image shows some types of tabs with their default style (cozy, left) and the reduced density mode (compact, right).

Style – Tab density

Colors

The two different styles (round tabs and text only) are discussed in the Types section. In both cases, you can use semantic colors to give users additional orientation.

Developer Hint

To apply semantic colors to the icons and the text-only tabs, you can use the property sap.ui.core.IconColor.

Example

Styles – Colors

Badge

Icon tab with an attention badge

Badge in Default or Semantic State

You can add a badge to all types of icon tab bar.

The badge inherits the state of its tab (default state or semantic state):

For the default tab state, the default red badge is displayed.
If the tab has a semantic state, the badge inherits the semantic color for the current state.

Don’t mix tabs in the default state with tabs that have a semantic state.

Badge for the default state / semantic state

Badge Interaction

The badge becomes part of the active area of the tab. When the user activates a tab with a badge, the badge disappears. If a new item is added to the tab that is currently open, no badge is shown.

In addition, the badge inherits the interaction of its tab. For example, if a tab is moved using drag and drop, the attention badge moves with it.

Interaction example: Activating a tab with a badge

Overflow Menu

A badge on the chevron icon indicates that a tab within the overflow menu has received new items. The tab in question is indicated by a second badge on the item in the overflow menu.

Badge within overflow menu

Guidelines

Apply the styles as follows:

Icons only: Use this option if you have only 4-5 tabs that can be very clearly identified by their icon. If a short description is needed, use icons and labels.
Text only: Use this option if you have more than 4-5 tabs, or if there are no clear icons to represent the content. The text-only style also allows for longer labels. Set the property HeaderMode to “Inline”.

Counters – Inline layout ('HeaderMode' set to 'Inline')

Don't

Counters – Old layout ('HeaderMode' set to 'Standard')

If you use icon tabs, ensure the following:

The icons clearly identify the content on the tab pages.
Each tab has a unique icon. Do not use the same icon more than once.
The icons are easily distinguishable.
Any icons between tabs (for example, as separators or connectors) are visually very different from the icons on the tabs.
Either all or none of the icons have labels.

Implement the focus as follows:

By default, show the first tab as open. This is the initial setting provided by the control.
Note: Technically, you can also override the initial selection. However, this is not recommended.
Later on, you can show the tab last selected by the user.

Additional guidelines:

Do not display a loading indicator above the tab while the number for the item count is loading.
Handle empty tabs as follows:
- Hide tabs that do not contain any information, and do not allow the user to create content..
- Show empty tabs that allow users to create content, such as notes or attachments.
Only use the tab bars to navigate between tabs. Do not use any other navigation links. For example, do not let users click an item in tab A that takes them to tab B. This type of cross-navigation inside a container is confusing, and cannot be handled by the back navigation.

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

How To Use Semantic Colors

Implementation

Icon Tab Bar (SAPUI5 Samples)
Icon Tab Bar (SAPUI5 API reference)
Icon Tab Bar – Badges (SAPUI5 Samples)

Contextual Filter

Infobar

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, for example on a table or list. 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

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.

Types

The infobar is shown in the following situations:

After a general filter has been applied
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

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

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. For more information, see the responsive table.

Infobar with optional 'Cancel' icon

Behavior and Interaction

Bar Area

Clicking the infobar with a single filter shows the detailed filter selection

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 using the cancel icon.

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 - Non-active state

Properties

The infobar 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 property of the toolbar to “info”.

Resources

Elements and Controls

Select Dialog (guidelines)
Toolbar (guidelines)
View Settings Dialog (guidelines)

Implementation

Table View Settings Dialog (SAPUI5 samples)
Multi Select Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Toolbar (SAPUI5 API reference)

Icon Tab Bar

The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.

There are two key use cases:

You want to let users navigate between different object facets in the object details area.
You want to let users filter lists, and give them the option of calling up the entire list, or only items with a specific attribute.

In both cases, the user switches between tab pages by clicking the respective tab.

Usage

Use the icon tab bar if:

Your business objects need to show multiple facets at the same time.
You want to allow the user to browse through these facets.
You need a prominent or very visual filter on top of a list.
You have clear-cut process steps that need to be visualized.

Do not use the icon tab bar if:

You plan to use only one single tab.

Responsiveness

The icon tab bar stretches horizontally, and soon runs out of space on small screens. It responds to limited space by offering a scrolling mechanism.

Responsiveness – Text tabs

Responsiveness – Icon tabs

When the screen space does not allow to show all tabs on the main tab bar, an overflow appears on the far right, containing all remaining tabs that do not fit on the screen.

Responsiveness – Overflow

Layout

The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from. These are described in detail below.

Types

You can use the icon tab bar control to build the following types of tab bars:

Text only
Icon tabs
Tabs as filters
Tabs as process steps

Text Only

The text-only variant is one of the most common types. It allows longer labels, and can also display counters next to the text to indicate the number of items on the tab page.

If you use text-only tabs, make sure that the UpperCase property is disabled and that you enter the labels in title case (for example: Approval Flow).

Types – Text-only without counters

Types – Text-only with inline counters

Counters and Text Tabs

If counters are used, set the property HeaderMode to “Inline” so the counters appear in brackets after the labels.

Do not use the old layout that shows the counters on top of the labels (Headermode = “Standard”).

Counters – Inline layout ('HeaderMode' set to 'Inline')

Don't

Counters – Old layout ('HeaderMode' set to 'Standard')

Icon Tabs

Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.

Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.

Types – Icons with counters

Please note that starting with SAPUI5 version 1.40, you should only use the horizontal type of label (icon and label side by side).

If your labels get truncated, consider using shorter labels or text tabs (without icons), since text tabs cannot get truncated.

Types – Icons with counters and labels

Types – Icon-only

Tabs as Filters

If you build the tab bar as a filter, it can comprise two parts:

An “all” tab on the left (optional)
This tab shows the total number of items, and describes the type of item (for example, 189 Products).
Tabs for specific filters
Use the tab text to indicate the filter attribute.
We strongly recommend showing a counter on every tab.

Types – Filter

Tabs as Process Steps

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

To connect the steps, use the triple-chevron icon () from the SAP icon font (technical name: process).

Types – Process

Developer Hint

Test whether your labels and their translations are displayed in full, and do not get truncated.

Warning

The overflow behavior changed in SAPUI5 version 1.80. Tabs from the overflow are shown on the main tab bar as long as they are selected. This may disrupt the order of your process and give the impression of a false step order. We are working on a fix for this issue.

Hierarchies

The tab bar supports hierarchies, allowing multiple tabs underneath one main tab. This way, you can group several tabs together, with the main tab acting as a headline.

Subtabs

The example on the right shows the main tab Notes with two subtabs, Internal and External, with no specific hierarchy except for their order.

Types – Subtabs

Nested Tabs

Nesting allows deeper hierarchies with indentations to indicate the level of each tab.

By default, the property maxNestingLevel is “0” (zero). To enable nesting, adjust this value to the highest level of nesting that your app allows.

Types – Nested tabs

Behavior and Interaction

Clicking a Tab

To navigate through the views, the user clicks the tabs.

Optional behavior: If the user clicks a tab that is already open, the container collapses. It opens again when the user clicks any tab.

Use the expandable property to specify whether users can collapse the tab container (default = “true”):

Let users collapse the container if there is additional content below the container, and the information inside the container is not always needed.
If there is no content below the tab container, set the expandable property to “false”.

The expandable property controls the initial state of the container. Do not change the default state (“true”).

Changing the Order of Tabs

It is also possible to drag and drop tabs from the tab bar to the overflow menu and vice versa.

If nesting is enabled (property maxNestingLevel > 0), users can choose the level at which they want to drop a tab.

Dragging a tab activates a visual indicator for positioning the tab. For example, dragging tab 8 on top of tab 5 makes tab 8 the child of the now highlighted tab 5 (see image 1).

If the user drags a tab between two other tabs, the indicator shows the level at which level the tab will be nested (see image 2).

Interaction - Tab nesting using drag and drop (1 of 2)

Interaction - Tab nesting using drag and drop (2 of 2)

Information

Do not use this feature for tabs as process steps to ensure that consecutive steps do not get mixed up.

Styles

Tab Density

Save vertical space on the page (applies to both text and icon tabs)
Save horizontal space (icon tabs only; this is especially helpful when there are many tabs)
Generally use less space on mobile devices
Reduce noise when there are already more important visual elements on the screen (primarily icon tabs)

The following image shows some types of tabs with their default style (cozy, left) and the reduced density mode (compact, right).

Style – Tab density

Colors

The two different styles (round tabs and text only) are discussed in the Types section. In both cases, you can use semantic colors to give users additional orientation.

Developer Hint

To apply semantic colors to the icons and the text-only tabs, you can use the property sap.ui.core.IconColor.

Example

Styles – Colors

Badge

Icon tab with an attention badge

Badge in Default or Semantic State

You can add a badge to all types of icon tab bar.

The badge inherits the state of its tab (default state or semantic state):

For the default tab state, the default red badge is displayed.
If the tab has a semantic state, the badge inherits the semantic color for the current state.

Don’t mix tabs in the default state with tabs that have a semantic state.

Badge for the default state / semantic state

Badge Interaction

The badge becomes part of the active area of the tab. When the user activates a tab with a badge, the badge disappears. If a new item is added to the tab that is currently open, no badge is shown.

In addition, the badge inherits the interaction of its tab. For example, if a tab is moved using drag and drop, the attention badge moves with it.

Interaction example: Activating a tab with a badge

Overflow Menu

If there isn’t enough space to show all the tabs on the main bar, an overflow menu appears on the right, containing all the remaining tabs. A badge on the chevron icon indicates that a tab within the overflow menu received new items. The tab in question is indicated by a second badge on the item in the overflow menu.

Badge within overflow menu

Guidelines

Apply the styles as follows:

Icons only: Use this option if you have only 4-5 tabs that can be very clearly identified by their icon. If a short description is needed, use icons and labels.
Text only: Use this option if you have more than 4-5 tabs, or if there are no clear icons to represent the content. The text-only style also allows for longer labels. Set the property HeaderMode to “Inline”.

Counters – Inline layout ('HeaderMode' set to 'Inline')

Don't

Counters – Old layout ('HeaderMode' set to 'Standard')

If you use icon tabs, ensure the following:

The icons clearly identify the content on the tab pages.
Each tab has a unique icon. Do not use the same icon more than once.
The icons are easily distinguishable.
Any icons between tabs (for example, as separators or connectors) are visually very different from the icons on the tabs.
Either all or none of the icons have labels.

Implement the focus as follows:

By default, show the first tab as open. This is the initial setting provided by the control.
Note: Technically, you can also override the initial selection. However, this is not recommended.
Later on, you can show the tab last selected by the user.

Additional guidelines:

Do not display a loading indicator above the tab while the number for the item count is loading.
Handle empty tabs as follows:
- Hide tabs that do not contain any information, and do not allow the user to create content..
- Show empty tabs that allow users to create content, such as notes or attachments.
Only use the tab bars to navigate between tabs. Do not use any other navigation links. For example, do not let users click an item in tab A that takes them to tab B. This type of cross-navigation inside a container is confusing, and cannot be handled by the back navigation.

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

How To Use Semantic Colors

Implementation

Icon Tab Bar (SAPUI5 Samples)
Icon Tab Bar (SAPUI5 API reference)
Icon Tab Bar – Badges (SAPUI5 Samples)

Smart Filter Bar

Intro

Information

This article is intended as an aid to designers and developers who want to explore the detail configuration options available for the smart filter bar.

The smart filter bar uses annotations to create a filter bar. It’s a wrapper that analyzes a given OData service and renders a filter bar based on the content defined by the service. For example, the OData service determines whether a field is visible on the filter bar, and whether it supports type-ahead and value help. To configure more settings or overwrite the settings from the OData service, the developer can set additional annotations in an external document (metadata.xml).

The developer can use annotation properties in the classes ControlConfiguration and GroupConfiguration to adapt the filter bar for the purposes of the app.

These annotations let you:

Determine the type of control (for example, whether a field is shown as a multi-input field or as a date picker)
Enable the autocomplete suggestions feature
Enable the value help dialog
Overwrite settings from the OData service
Set custom filter groups
Add custom fields
Access all settings for the underlying filter bar

You can also use all the configuration options described here in the smart filter bar for the list report SAP Fiori element.

Warning

Most of the attributes/properties are not dynamic and cannot be changed once the control has been initialized.

Usage

Use the smart filter bar if:

An OData service is available.
You want to develop quickly and efficiently.

Do not use the smart filter bar if:

You need to make extensive changes to the filter bar.

Components

You can use the annotation properties listed below to influence how filters are rendered in the expanded filter bar and in the filter dialog.

Expanded Filter Bar

Properties of the expanded filter bar

1 enableBasicSearch
Defines whether the filter bar includes a basic search. By default, the basic search is not included.

2 FilterRestrictions/NonFilterableProperties
Defines whether a property is available as a filter criterion.

3 FilterRestrictions/RequiredProperties
Defines the filter field as a mandatory filter. Mandatory filters are marked by an asterisk (*).

4 ValueList
Contains annotations that provide information for rendering a value help list that has been set for a property.

5 FilterExpressionType/MultiValue
Defines whether multiple values can be used in a single filter.

6 FilterExpressionType/SingleValue
Restricts the filter to allow only one value entry.

7 LineItem/Label
A short, human-readable text for the filter name.

8 DynamicDateRange
The dynamic date range supports different operators, such as “Today -X / +Y days”. X and Y also support negative values (thus ranges in the past of future can be selected).

8 insertDefaultFilterValue
Inserts a default filter value into the aggregation defaultFilterValues.

9 liveMode
Defines whether the expanded filter bar is shown in live mode (no Go button) or in manual mode. By default, the filter bar is shown in manual mode.

Filter Dialog

Properties of the filter dialog

1 FilterRestrictions/RequiredProperties
Defines the filter field as a mandatory filter. Mandatory filters are marked by an asterisk (*).

2 FieldControlType/Hidden
Defines whether the filter is initially visible on the expanded filter bar.

3 SelectionFields
Defines whether a filter belongs to the basic group. All filters in the basic group are initially visible on the expanded filter bar.

4 FieldGroup
Defines whether a filter field is initially shown on the filter dialog, and which group it belongs to.

5 FilterRestrictions/NonFilterableProperties
Defines whether a property is available as a filter criterion.

6 LineItem/Label
A short, human-readable text for the filter name.

Fiscal Annotations

As an example, the smart filter bar supports fiscal annotations, like i.e. for fiscal period / data / time information. Such annotations guarantee the correct rendering of such values.

Smart filter bar with filters based on fiscal annotations

Recently Used Values

The smart filter bar provides a history of the most recent values entered in smart filter fields.

When the user focuses on a field, the app can display a small number of recently used values. They are shown below the recommended items, which can appear at the same time.
When the dropdown list is opened, all values are shown. When the user starts to type, the recently used values are filtered accordingly.

IN / OUT Parameter

In the smart filter bar, a dropdown or suggestion list can only contain a sub-set of items in case a dependent filter is set (IN parameter). It is also possible that selecting a value in a dropdown or suggestion list fills the current plus additional filter fields (OUT parameter).

Data Types

The smart filter bar analyzes and interprets the metadata provided by the OData service. This allows you to create complex UI entities, and to automatically add fields offered by the OData service to the filter bar as editable input fields. (Note that only fields marked with sap:filterable are added automatically.)

The tables below tell you which input controls are used for the key data types.

General Data Types

DataType	ODataMetadata	Additional Configuration	Edit type	Display type	Notes
*	*		Input	Text
DateTime	–	sap:display-format=”Date”	DatePicker	Text
Decimal	–	Precision=”3″ Scale=”0″	Input	Text
All	–		Input (with VHD)	Text	If a matching ValueList annotation is found, the ValueHelp for the Input is enabled. A ValueHelp Dialog is created automatically, based on the data in the ValueList annotation.
All	–	sap:semantics=”fixed-values” on the ValueList entity	ComboBox	Text	If a matching ValueList annotation is found, and the ValueList entity has the semantics=”fixed-values”, a dropdown list is shown.

Filter Bar-Specific Data Types

Input Type	sap:filter-restriction	display-format	hasValueHelpDialog	controlType	Resulting Control Type
*	*		controlType/filterType is specified		As specified in additional configuration
DateTime	“interval”	“Date”	NA		Date Range Selection
DateTime	“anything other than interval” or empty	“Date”	NA		Date Picker
String	“single-value”		“true” / none		Input Field With Value Help Dialog (with typeAhead according to hasTypeAhead flag)
String	“single-value”		“false”	not specified/input	Input Field (with typeAhead according to hasTypeAhead flag)
String	“single-value”		“false”	dropDownList; hasTypeAhead is not considered here	ComboBox
*	“single-value”				Input Field
String	empty or no filter-restriction		“true” / none		Multi Input Field with Value Help Dialog
String	“multi-value”		“true” / none		If no VL Annotation is found – only show the range selection part
String	“multi-value” / empty		“false”		If no VL Annotation is found – hide the ValueHelpDialog icon
String	“multi-value” / empty		“false”	dropDownList	MultiComboBox
*	“multi-value”				Input Field
*	“interval”		NA		A single Input Field that allows the “-” shortcut notation for intervals

Guidelines

Reduced set of table columns for the tabular suggestion

You have the option to define different columns in the table of the Value Help Dialog and the suggestion list of the Smart Filter Bar.

In the value list annotation, each parameter can be statically annotated as important using the <code>Importance</code> annotation with EnumMember set to High:

<Annotation Term="com.sap.vocabularies.UI.v1.Importance"
EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" />

In the suggestion list only the important parameters are displayed as columns, while in the table of the Value Help Dialog all of the parameters are displayed.

The Importance annotation is optional – if omitted all of the parameters are displayed in both table of the Value Help Dialog and the suggestion list of the Smart Filter Bar.

Formatting option for negative numbers

The OData type “NumericText” together with display-format=”NonNegative” interprets and displays all values containing only “0” (e.g. “0”, “000”) as empty.

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

Filter Bar (guidelines)

Implementation

Smart Filter Bar (SAPUI5 samples)
Smart Filter Bar (SAPUI5 API reference)
Smart Filter Bar Annotations (SAPUI5 API reference)
Filter Bar (SAPUI5 samples)
Filter Bar (SAPUI5 API reference)
UI Development Toolkit (SAPUI5 samples)

Filter Bar

The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).

The smart filter bar is closely related to the filter bar, as it covers the same use cases. The difference is that the smart filter bar uses annotations to create a filter bar.

Filter bar within the dynamic page

Information

The filter bar now supports the dynamic page. Do not use the filter bar in the sap.m.Page for new SAP Fiori apps. For more information on the differences, see the filter bar guideline for version 1.52.

Responsiveness

Because tables appear in many apps, from simple to complex ones, the filter bar needs to run on all form factors. While the main concept of the filter bar remains stable across the devices, its responsive design adapts the control’s behavior to match the ability of each device.

Size S (Smartphones)

Expanded filter bar - Size S

Collapsed filter bar - Size S

Filter dialog - Size S

Size L (Desktop)

Expanded filter bar - Size L

Collapsed filter bar - Size L

Filter dialog - Size L

Layout

Filter Dialog

The filters inside the filter dialog are arranged in a vertical linear layout. If filter groups are maintained, the filters are visually grouped in sections, with the filter group name at the top. A link at the end of each group allows the user to add or remove filters from that group. The link text is Change Filters if at least one filter is activated, indicating that filters can be added or removed. If no filters have been set for the group, the link text is More Filters, indicating that more filters can be added.

The first group is called “Basic” and contains the preset filters that come with the app. A checkbox next to each filter enables the user to show the corresponding filter on the expanded filter bar. If the checkbox is selected, the filter is shown on the expanded filter bar. If the checkbox is not selected, the filter is only visible within the filter dialog. In both cases, the filter is active if a value is entered.

The vertical layout of the filter dialog remains stable across all devices. To ensure a clean grid layout appearance, the size of the widest input field is inherited by all other filters.

Filter dialog (size L)

Expanded Filter Bar

The expanded filter bar arranges the input fields in a simple horizontal linear layout. If the browser’s window size is reduced or the filters exceed the first line, a simple mechanism opens a new line of filters. The height of the expanded filter bar is not limited and adjusts to accommodate the filters that need to be shown. The label is always above the input field. As in the filter dialog, the size of the widest input field is inherited by all other filters. This avoids having unstable and busy-looking grid layouts.

Filter bar (size L) with one row of filters

Filter bar (size L) with more than one row of filters

Filter bar (size S) with vertical filters

Components

Collapsed Filter Bar

The collapsed filter bar takes up very little space, leaving the bulk of the screen to display the actual results. However, the variant selector in the upper left corner is still available for switching between variants. The user can expand or collapse the filter bar by clicking the header. If required by the use case, the filter bar can be expanded by default.

On desktop and tablet devices, the collapsed filter bar shows a summary of the filters currently applied. It shows Filtered By (x):, where “x” stands for the number of applied filters. This is followed by a comma-separated list of the filters currently applied. Up to 5 filters are listed. If more filters have been applied, an ellipsis (…) shows at the end of the string. If no filters have been applied, the summary text is Not Filtered.

Collapsed filter bar

Expanded Filter Bar

Developer Hint

Smart filter bar: See the parameters for configuring the expanded filter bar.

In addition to the collapsed filter bar, the expanded filter bar shows a user-defined filter subset of the currently selected variant.

The Adapt Filters (x) link opens the filter dialog, and allows the user to add filters or hide them. The Go button triggers the filter. The Go button is only shown in manual mode.

Expanded filter bar

Filter Dialog

Developer Hint

Smart filter bar: See the parameters for configuring the filter dialog.

The filter dialog is the central component that shows all filters of the selected variant, allowing the user to add filters to the variant or remove them. Filters are arranged into their respective filter groups. The user can search for a specific filter by name in the search bar at the top.

The footer toolbar at the bottom of the dialog provides the following functions:

Cancel: Closes the dialog and undoes all changes
OK: Executes the selected filter set

The header area of the filter dialog contains a Reset button. This resets the filter to the initial variant values (you can hide this button if it doesn’t fit the app use case). Before the filters are reset, the user gets a warning.

The user can choose to hide filters on the expanded filter bar by deselecting the relevant checkbox next to the filter in the filter dialog (for example, if a filter is rarely edited, or unimportant).

Information

In analytical list page scenarios, the warning for the reset button is not yet available.

Filter dialog

Variant Selector

The variant selector is used to select the current variant, and also provides access to variant management.

Variant selector

Filter/Input Controls

Filter/input controls

When designing the filter bar, pick the simplest input control that works for your use case. Avoid unnecessary complexity in the filter bar.

If there is a predefined list for single or multiple selection, use the select control or combo box control. For temporal information, you can use the date picker or date range selector. To help the user enter a valid value for multi-input fields, you can enable suggestions.

For a comprehensive overview of when to use which input field, see Selection Controls – Overview.

Developer Hint

For development information, see data types for the smart filter bar.

Recommended input fields:

Behavior and Interaction

The filter bar contains the following actions:

Selecting a Variant

The main use case for the filter bar is to select and execute variants that influence the list of items. In this example, the variant applies its filter set automatically. The item list is filtered without the user needing to click Go.

Selecting a Variant

Personalizing the Expanded Filter Bar

Users can hide a filter on the expanded filter bar by deselecting the checkbox next to the relevant filter in the filter dialog. This allows the user to hide filters that are rarely changed from the extended filter bar, giving complex filters a more lightweight appearance.

Personalizing the Expanded Filter Bar

Saving a New Variant

You can save new filter variants in the variant selector.

Once you have changed an existing variant, an asterisk (*) is displayed next to the current variant name, indicating its “dirty state”.

You can either save the adapted variant with the current name (overwrite), or save it under a new name.

Variant Selector

Open the variant selector and choose Save As. Type your desired variant name into the input field and select OK.

Save new variant in variant selector

Guidelines

Default Variant Filters

For all filter bars, provide a set of predefined default filters that come with the app (“Basic” group in the filter dialog). Include filters that are:

Mandatory / crucial to the use case
Frequently used
Vital for reducing the number of items in the list

Users can hide filters in the “Basic” group, but cannot remove them from the filter dialog.

Default variant "Basic"

Default Values

Provide a meaningful default value for as many filters as possible. Meaningful default values depend on your use case.

A default value for date ranges, for example, should reflect the time frame the user would normally apply. App designers need to decide which time frame is appropriate.

Appropriate default values are particularly crucial for filter sets and list reports that operate on large datasets. In this case, consider making certain default filters mandatory to help the user avoid loading very large datasets unnecessarily.

For list reports and overview pages, ensure that mandatory filter fields always have default values. Otherwise, users will see error messages when the page loads.

Filter without default value

Filter with available values

Filter with a default value

Table Filtering and Table Searching

Provide the user with a central location filtering and searching. If you use a filter bar, do not provide filter options or search options for the control below (for example, a table, chart, or list.). Avoiding multiple filter locations also helps to prevent confusing or contradictory entries (for example between the filter bar and a table filter).

Table without filtering option

Don't

Table with filtering option

Initial State

The filter bar can initially be collapsed or expanded, depending on the use case:

Initial State Collapsed

If the app has a default variant that is executed on loading, the table is prefilled, and the user seldom changes the filters, the app can start with a collapsed filter bar.

Initial State Expanded

If the app does not use a default variant and the user has to set a filter to obtain a first result set for the table, start with an expanded filter bar. Also, if a vast number of items are expected, include some mandatory filters with default values. Since the user first has to enter values for these filters, start with an expanded filter bar. If you are in any doubt, start the app with an expanded filter bar.

Note: At least one filter must be defined to begin with. This filter is set within the basic group by app designers. If the use case allows, and depending on the size of the result set, provide a table that is initially filled.

Initial state collapsed

Initial state expanded

Basic Search Field

The basic search field allows the user to filter the results by a given keyword. In contrast to the other input fields, the basic search field has a placeholder text instead of a label.

Note: If you need to provide a search field, use the basic search field. The search field within the table must be deactivated.

Filter bar with basic search field

Live Update / Manual Update

The filter bar is available in two separate modes: Live update mode and manual update mode.

Live Update

In the live update mode, the filter bar reacts instantly to every input change. The result table is updated every time the user changes a filter field or the search field. Therefore, a Go button is not necessary.

The search is triggered with every letter that is entered, starting with the first letter the user types. The table is updated with the results that match all set filters and include the search term.

Manual Update

In the manual update mode, the filter results are only updated when the user clicks Go. A Go button is therefore mandatory in manual update mode. Pressing ENTER on the keyboard also triggers the filter.

Which Mode Should I Use?

The live update mode is more convenient for the user. However, if the user has to configure multiple filters to obtain a useful result set, or if the resulting traffic is expected to be excessively high, consider using the manual update mode instead.

Filter bar in live update mode

Filter bar in manual update mode

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

Smart Filter Bar (guidelines)
Variant Management (guidelines)

Implementation

Filter Bar (SAPUI5 samples)
Filter Bar (SAPUI5 API reference)
Smart Filter Bar (SAPUI5 samples)
Smart Filter Bar (SAPUI5 API reference)
Filter Item (SAPUI5 API reference)
Filter Group Item (SAPUI5 API reference)

Infobar

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

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.

Types

There are three situations in which an infobar is shown:

After a general filter has been applied.
After a contextual filter has been applied.
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

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

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

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. For more information, see contextual filter and responsive table.

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 mandatory filter icon

Behavior and Interaction

Bar Area

Clicking the infobar with a single filter shows the detailed filter selection

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 - 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

Select Dialog (guidelines)
Contextual Filter (guidelines)
Toolbar (guidelines)
View Settings Dialog (guidelines)

Implementation

Table View Settings Dialog (SAPUI5 samples)
Multi Select Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Toolbar (SAPUI5 API reference)

Icon Tab Bar

The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.

There are two key use cases:

You want to let users navigate between different object facets in the object details area.
You want to let users filter lists, and give them the option of calling up the entire list, or only items with a specific attribute.

In both cases, the user switches between tab pages by clicking the respective tab.

Usage

Use the icon tab bar if:

Your business objects need to show multiple facets at the same time.
You want to allow the user to browse through these facets.
You need a prominent or very visual filter on top of a list.
You have clear-cut process steps that need to be visualized.

Do not use the icon tab bar if:

You plan to use only one single tab.

Responsiveness

The icon tab bar stretches horizontally, and soon runs out of space on small screens. It responds to limited space by offering a scrolling mechanism.

Responsiveness – Text tabs

Responsiveness – Icon tabs

When the screen space does not allow to show all tabs on the main tab bar, an overflow appears on the far right, containing all remaining tabs that do not fit on the screen.

Responsiveness – Overflow

Layout

The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from. These are described in detail below.

Types

You can use the icon tab bar control to build the following types of tab bars:

Text only
Icon tabs
Tabs as filters
Tabs as process steps

Text Only

The text-only variant is one of the most common types. It allows longer labels, and can also display counters next to the text to indicate the number of items on the tab page.

If you use text-only tabs, make sure that the UpperCase property is disabled and that you enter the labels in title case (for example: Approval Flow).

Types – Text-only without counters

Types – Text-only with inline counters

Counters and Text Tabs

If counters are used, set the property HeaderMode to “Inline” so the counters appear in brackets after the labels.

Do not use the old layout that shows the counters on top of the labels (Headermode = “Standard”).

Counters – Inline layout ('HeaderMode' set to 'Inline')

Don't

Counters – Old layout ('HeaderMode' set to 'Standard')

Icon Tabs

Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.

Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.

Types – Icons with counters

Please note that starting with SAPUI5 version 1.40, you should only use the horizontal type of label (icon and label side by side).

If your labels get truncated, consider using shorter labels or text tabs (without icons), since text tabs cannot get truncated.

Types – Icons with counters and labels

Types – Icon-only

Tabs as Filters

If you build the tab bar as a filter, it can comprise two parts:

An “all” tab on the left (optional)
This tab shows the total number of items, and describes the type of item (for example, 189 Products).
Tabs for specific filters
Use the tab text to indicate the filter attribute.
We strongly recommend showing a counter on every tab.

Types – Filter

Tabs as Process Steps

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

To connect the steps, use the triple-chevron icon () from the SAP icon font (technical name: process).

Types – Process

Developer Hint

Test whether your labels and their translations are displayed in full, and do not get truncated.

Warning

Hierarchies

The tab bar supports hierarchies, allowing multiple tabs underneath one main tab. This way, you can group several tabs together, with the main tab acting as a headline.

Subtabs

The example on the right shows the main tab Notes with two subtabs, Internal and External, with no specific hierarchy except for their order.

Types – Subtabs

Nested Tabs

Nesting allows deeper hierarchies with indentations to indicate the level of each tab.

By default, the property maxNestingLevel is “0” (zero). To enable nesting, adjust this value to the highest level of nesting that your app allows.

Types – Nested tabs

Behavior and Interaction

Clicking a Tab

To navigate through the views, the user clicks the tabs.

Optional behavior: If the user clicks a tab that is already open, the container collapses. It opens again when the user clicks any tab.

Use the expandable property to specify whether users can collapse the tab container (default = “true”):

Let users collapse the container if there is additional content below the container, and the information inside the container is not always needed.
If there is no content below the tab container, set the expandable property to “false”.

The expandable property controls the initial state of the container. Do not change the default state (“true”).

Changing the Order of Tabs

It is also possible to drag and drop tabs from the tab bar to the overflow menu and vice versa.

If nesting is enabled (property maxNestingLevel > 0), users can choose the level at which they want to drop a tab.

Dragging a tab activates a visual indicator for positioning the tab. For example, dragging tab 8 on top of tab 5 makes tab 8 the child of the now highlighted tab 5 (see image 1).

If the user drags a tab between two other tabs, the indicator shows the level at which level the tab will be nested (see image 2).

Interaction - Tab nesting using drag and drop (1 of 2)

Interaction - Tab nesting using drag and drop (2 of 2)

Information

Do not use this feature for tabs as process steps to ensure that consecutive steps do not get mixed up.

Styles

Tab Density

Save vertical space on the page (applies to both text and icon tabs)
Save horizontal space (icon tabs only; this is especially helpful when there are many tabs)
Generally use less space on mobile devices
Reduce noise when there are already more important visual elements on the screen (primarily icon tabs)

The following image shows some types of tabs with their default style (cozy, left) and the reduced density mode (compact, right).

Style – Tab density

Colors

The two different styles (round tabs and text only) are discussed in the Types section. In both cases, you can use semantic colors to give users additional orientation.

Developer Hint

To apply semantic colors to the icons and the text-only tabs, you can use the property sap.ui.core.IconColor.

Example

Styles – Colors

Guidelines

Apply the styles as follows:

Icons only: Use this option if you have only 4-5 tabs that can be very clearly identified by their icon. If a short description is needed, use icons and labels.
Text only: Use this option if you have more than 4-5 tabs, or if there are no clear icons to represent the content. The text-only style also allows for longer labels. Set the property HeaderMode to “Inline”.

Counters – Inline layout ('HeaderMode' set to 'Inline')

Don't

Counters – Old layout ('HeaderMode' set to 'Standard')

If you use icon tabs, ensure the following:

The icons clearly identify the content on the tab pages.
Each tab has a unique icon. Do not use the same icon more than once.
The icons are easily distinguishable.
Any icons between tabs (for example, as separators or connectors) are visually very different from the icons on the tabs.
Either all or none of the icons have labels.

Implement the focus as follows:

By default, show the first tab as open. This is the initial setting provided by the control.
Note: Technically, you can also override the initial selection. However, this is not recommended.
Later on, you can show the tab last selected by the user.

Additional guidelines:

Do not display a loading indicator above the tab while the number for the item count is loading.
Handle empty tabs as follows:
- Hide tabs that do not contain any information, and do not allow the user to create content..
- Show empty tabs that allow users to create content, such as notes or attachments.
Only use the tab bars to navigate between tabs. Do not use any other navigation links. For example, do not let users click an item in tab A that takes them to tab B. This type of cross-navigation inside a container is confusing, and cannot be handled by the back navigation.

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

How To Use Semantic Colors

Implementation

Icon Tab Bar (SAPUI5 samples)
Icon Tab Bar (SAPUI5 API reference)

Infobar

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

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.

Types

There are three situations in which an infobar is shown:

After a general filter has been applied.
After a contextual filter has been applied.
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

Contextual Filter

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

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

Contextual Filter

The icon is mandatory and represents the current filter criterion.

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

Contextual filter with filter icon

Behavior and Interaction

Bar Area

Clicking the infobar with a single filter shows the detailed filter selection.

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 - Non-active state

Properties

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

Select Dialog (guidelines)
Contextual Filter (guidelines)
Toolbar (guidelines)
View Settings Dialog (guidelines)

Implementation

Table View Settings Dialog (SAPUI5 samples)
Multi Select Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Toolbar (SAPUI5 API reference)

Contextual Filter

The contextual filter allows you to show a prefiltered view of a list, such as a master list.

Warning

Note that this filter prevents the regular filter (which is triggered from the filter bar or table toolbar) from displaying the filter criteria that are currently selected.

Usage

Use the contextual filter if:

You want to show the user a meaningful extract of an otherwise highly complex list.
Your app handles very large object lists, and you need to improve performance.

Do not use the contextual filter if:

You just want to provide a way to filter a list. In this case, use the regular filter instead.

Responsiveness

The contextual filter (sap.m.toolbar) spans the whole width of the list or table it is attached to, while its height remains unchanged. Text inside the bar does not wrap if there is insufficient space, but becomes truncated.

Contextual filter – Responsiveness

Contextual filter with truncated text in a narrow container, such as on a smartphone.
Responsive behavior on wider screens, such as on a tablet or desktop.

Layout

The contextual filter is shown as a bar directly above the master list. It comprises two parts:

The filter value on the left (for example, a customer name).
The icon for the filter criterion on the right (here, the object type “customer”). The icon helps the user to put the filter value into context.

Contextual filter – Layout

Behavior and Interaction

The following example shows a prefiltered master list and explains how to change the filter criterion.

Change Filter

The user opens the app and sees a prefiltered list of objects. The bar on top of the master list indicates that the list is filtered, and which filters have been applied.

When the user clicks the bar, a screen (on phones) or popup (on desktops/tablets) appears for selecting additional filter criteria.

Contextual filter – Change filter setting

Select Filter Criterion

In this use case, the user should not be able to disable the filter because there is no way to reset it.

Other master list functions (such as Search or Refresh) are still available and remain unaffected by the contextual filter.

Once a criterion has been selected, the user is taken back to the master list (on phones) or the popup closes (on desktops/tablets). The list is now filtered by the newly selected criterion.

Contextual filter – Select filter attribute

Guidelines

Do not use the contextual filter in place of the regular filter in the footer bar. The regular filter is much more versatile and can also be deactivated by the user.

Also note that both the contextual filter and the regular filter use the same infobar to visualize the filter criteria. If the contextual filter is being used, the regular filter can no longer be visualized. Although both filters can technically be used in parallel, we strongly advise against having both in one list.

Use an icon that is unique and visually represents the current filter criterion.

Do not use any of the generic filter icons. They may be confused with the user-triggered filters.

Don't

Properties

The contextual filter is not a separate control. To build a contextual filter, you need to use the sap.m.OverflowToolbar control. The filtering itself must be implemented by the app team.

Exceptions

There is one special case where the contextual filter can actually be cancelled by the user. This applies when the contextual filter is used to prefilter the items listed in a select dialog.

This use of the contextual filter conveniently offers users a narrowed-down list based on their previous selection.

(1) Initial situation: The user is about to select an account and a contact.

(2) The user selects “Best Electronics” and then clicks the value help icon in the Contact field.

(3) The value help dialog appears showing a list of contacts. These are prefiltered (using the contextual filter) to show only contacts from “Best Electronics” (the company the user selected previously).

Note that this time the icon in the filter’s toolbar does not show an account icon, but a Remove icon instead. This allows the user to cancel the filter if he or she wants to add a contact that is not associated with the account selected previously.

When the user clicks the Remove icon , the filter is removed and the entire contact list is shown.

Once the user has selected a contact, the dialog closes and the name is added to the relevant field on the main page.

Opening the value help again resets the dialog to its initial state with the filter set to “Best Electronics”.

Contextual Filter in a Select Dialog

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

No links.

Implementation

Overflow Toolbar (active) (SAPUI5 samples)

Visual Filter Bar

Information

The Remove/Close icons shown in this article do not yet reflect the new Remove/Close icon defined in the product standard for UX consistency. We will update this article as soon as the new icon is available in the corresponding controls.

Intro

The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.

The visual filter bar allows users to combine measures with filter values. For example, a “Product” might have the filter value “Product Name” and the measure might typically be “Revenue”, “Cost”, or “Quantity”. If you opt for the measure “Revenue”, the chart would show the “Revenue by Product”, enabling the user to filter the data by choosing a particular product name and its revenue.

Chart visualization increases the joy of use and helps users to see relevant data more quickly. For filtering, the visual filter bar uses all of the three types of interactive chart: bar chart, line chart and donut chart.

Visual filter bar - Size L

Usage

Use the visual filter bar if:

You are using analytical list page floorplan.
Users need to see both the result and the direct impact of their filter settings in a chart representation.
You would like to give users a condensed overview of the data in the dataset.

Do not use the visual filter bar if:

You are not using the analytical list page floorplan.
Users are not interested in seeing the impact or their filter settings directly in a chart representation.
Users are not interested in a condensed overview of the data in the dataset.

Responsiveness

The visual filter bar itself is fully responsive. For overall responsiveness within the analytical list page, see the Analytical List Page article.

Layout

The visual filter bar is a composite control built with other responsive controls, such as the header container and the interactive charts. It is used in the header area of the analytical list page, which incorporates the dynamic page layout.

Collapsed Visual Filter Bar

The collapsed visual filter bar takes up less space, leaving most of the screen for displaying the actual results. However, the variant selector in the upper left corner is still available for switching between variants. The user can expand or collapse the filter bar by clicking the header. If required by the use case, you can expand the filter bar by default.

On desktop and tablet devices, the collapsed filter bar shows a summary of the filters currently applied. The format of the summary text is:

Filtered By (number of filters): <comma-separated list of the filters currently applied>
Example: Filtered By (2): Country/Region, Product

Up to 5 filters are listed. If more filters have been applied, an ellipsis (…) appears at the end of the string. If no filters have been applied, the summary text is Not Filtered.

Expanded Visual Filter Bar

The expanded visual filter bar also shows a user-defined filter subset of the selected variant. The Adapt Filters link opens the visual filter dialog, where the user can add or hide visual filters. The switch button on the top right switches between the visual filter bar and the standard (input-based) filter bar. The Go button triggers the filter. Note that the Go button is only shown in manual update mode.

Structure

In order to achieve filtering through visualization, the visual filter bar uses interactive charts. Currently, three interactive chart types are available: bar chart, line chart, and donut chart. Each chart has a dedicated area for the chart title, the (x) link showing the number of applied filters, and the value help icon . When the user clicks the (x) link, a popover containing the selected filter values appears. The value help icon opens a value help dialog.

Filter Title Area

In addition to the chart title, the filter title area also contains a value help icon with (x) indicator, where “x” stands for the number of applied filters. Clicking the icon opens the value help dialog. The value help dialog can be replaced with the select popover icon

Use the following naming convention for the filter title, using title case: <Measure Name> by <Dimension Name> | <Scale Factor> <Unit of Measure>. For example, Project Costs by Project | K EUR, Sales Volume by Commodity | M PC.

Visual filter bar - Title area

Visual filter bar - Title area with selected filter values

Bar Chart

The interactive bar chart in the visual filter bar can display only three bars. Based on the measure, they can be sorted ascending or descending. This makes it easy to compare the items and see the highest and lowest values.

Visual filter bar - Interactive bar chart

Line Chart

The interactive line chart is used to display variations over a specified period of time. This chart is only used for displaying a time series and can contain only the first or last six time points (for example, last six days, last six months, and so on).

Do not use a line chart to show categories. Instead, use a bar chart.

Visual filter bar - Interactive line chart

Donut Chart

The interactive donut chart is best used to display up to three slices. Use this chart if the exact value of each slice is not needed for filtering.

In the visual filter bar, only the top or bottom two values are shown; the rest are aggregated into the Other section.

Visual filter bar - Interactive donut chart

Visual Filter Selections

Any data point or segment selected in a chart remains selected when the user changes the measure, chart type, or sort order in any of the charts.

If a selected record falls outside the top or bottom three records being displayed, the (x) status above the chart shows the number of selected records.

Developer Hint

Do not bind a single visual filter (chart) to more than one ID. This will lead to an incorrectly derived item count in the (x) link. Define separate visual filters instead. If this split is not desired, create a calculated column (dimension) in the back end to represent this combined ID.

Don't

Don't use a relative format for time

Use titles that give context

Add the year in the title if you display only 4 quarters

Visual Filter Dialog

The filter dialog is launched by clicking the Adapt Filters (number of applied filters) link in the upper right filter area. In the filter dialog for visual filters, the user can choose which filter fields are shown in the visual filter bar.

In this dialog, the user can make the following changes:

Add visual filters
Delete visual filters
Hide visual filters in the visual filter bar
Search for visual filters
Change the sort order of each visual filter
Change the chart type of each visual filter
Switch to other measures in the visual filter display

The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified filter set variant. Save and Save As can be provided.
Cancel: Closes the dialog and undoes all changes.
Restore: Restores the initial variant values. You can hide this button if it does not fit the app use case.
Go: Applies the selected filter set.
Clear (optional): Clears all filters. Only use this button if it fits the app use case.

Visual filter dialog

Visual Filter Configuration

In the filter dialog, users can configure individual visual filters using the icons in the filter title area:

Change the sort order (not supported for line charts)
Switch to a different chart type
Choose between different measures

Visual filter configuration - Sort, chart type, measure

Behavior and Interaction

Unlike micro charts, the charts in the visual filter bar are interactive. If you are using live update mode, selecting a filter value triggers data filtering in the content area. Both single and multiple selection are supported.

Selecting Filters

In the visual filter, you can make a selection by clicking a chart value. To deselect it, you can either click the same value in the chart again, or click the (x) link showing the number of selected filters, such as (1).

Selecting a Filter Value in an Interactive Chart

Any data point selected in a chart remains selected, even if the user selects a data point in another chart. Filter values also react to each other.

If a selected record in a chart falls outside the displayed filter values, the selection is visible in the (x) link above the chart, where (x) represents the number of selected records.

Users can select more filter values with the value help or select popover.

Selecting a Filter Value Using the Value Help

Selecting a Filter Value Using Select Popover

Personalizing the Visual Filter Bar

Add Visual Filter

Users can add more visual filters via the visual filter dialog. The additional filter groups appear below the Basic filter group, which contains the standard filters for the application. While the Basic filter group is always visible, the additional filter groups are initially collapsed.

The More (x) link in the filter group header indicates the number of filters that have not yet been added, for example More (2). Clicking this link opens a dialog for selecting the additional filter. Once a filter has been selected, it displays under the group header in the visual filter dialog, and the user can customize the individual filter settings (sort order, chart type, measure, display in the visual filter bar).

If all filters in a group have already been added in the visual filter dialog, the More (x) link label in the filter group title switches to Change Filters.

Hide Visual Filter

Users can hide a filter by deselecting the checkbox next to the relevant filter in the filter dialog. This allows the user to hide filters that are rarely changed from the extended filter bar, giving complex filters a more lightweight appearance.

Guidelines

Live Update / Manual Update

The visual filter bar is available in two modes: live update and manual update. In both modes the visual filter charts refresh based on the selection.

Live Update

In live update mode, the filter bar reacts instantly to every input change. Because the content area updates automatically whenever the user changes a filter selection, the Go button is not necessary, and is not shown.

Visual filter bar - Live update mode

Manual Update

In manual update mode, the filter results are only updated when the user clicks the Go button that is shown in manual mode. Pressing ENTER on the keyboard also triggers the filter.

Visual filter bar - Manual update mode

Recommendation

In general, use live update mode, which is more convenient for users. However, consider using manual update mode if the user has to configure multiple filters to obtain a useful result set, or if you expect the resulting traffic to be excessively high.

Chart Types

Choosing the right chart type as a representation for a particular filter will not only increase the joy of use but also will convey the right information to the user. Inappropriate chart types can mislead the user during the filtering process.

In the visual filter bar, you can choose between three interactive charts: bar chart, line chart, and donut chart.

Recommendation

If you expect users to be working with a large number of datasets, and your scenario does not depict time periods, consider using a bar chart.
If you want to measure trends and changes over time when filtering, consider using the line chart.
If your scenario requires filtering by parts of a whole and has only a small number of datasets, consider using the donut chart.

Filter Selection

In the visual filter, users can make a selection by clicking a chart value or by using the value help to select data points that are not visible. Depending on the number of available data points, you can use the value help or the select popover.

Recommendation

If your scenario involves filtering 200 or more filter values, consider using the value help. For filtering less than 200 values, we recommend using the select popover.

Scaling Factor

Always use a scaling factor to display values larger than 1000. The scaling factor is usually displayed in the interactive chart header. Do not repeat the scaling factor inside the chart itself.

Recommendation

Due to the limited space inside the chart, we recommend showing a maximum of 3 digits before the decimal point.

Visual filter bar with scaling factor (M)

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

Analytical List Page (guidelines)
Interactive Chart (guidelines)
Interactive Bar Chart (guidelines)
Interactive Donut Chart (guidelines)
Interactive Line Chart (guidelines)
Value Help Dialog (guidelines)
Filter Bar / Smart Filter Bar (guidelines)
Dynamic Page (guidelines)

Implementation

No links.

Token

Usage

Use tokens only in the multi-combo box, multi-input control, or value help dialog.

Components

The tokenizer is an invisible container that can display multiple tokens.

Tokens have the following properties:

They usually contain single text items.
They may also contain key-value pairs, such as John Miller (ID1234567).
They contain a Remove icon, which is invisible if the token is in edit mode.

Tokens with a surrounding tokenizer

Behavior and Interaction

Interacting

Selecting and Deselecting Tokens

Adding Tokens

The user can add tokens to the multi-combo box and multi-input control. New tokens are added in the order in which they are entered.

Information

For information on how to manage leading and trailing white space (blanks) when copying and pasting text into input controls, please see removing leading and trailing white space.

Removing Tokens

The user can instantly remove tokens via the keyboard, or by clicking the Remove icon.

Styles

There are five different styles of tokens: regular, on hover, selected, selected on hover and read-only. These styles correspond to the type of interaction being used.

Regular

On hover

Selected

Read only

Hover selected

Guidelines

The tokenizer can also be used as a tag container.

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

Multi-Combo Box (guidelines)
Multi-Input Field (guidelines)
Value Help Dialog (guidelines)
Combo Box (guidelines)

Implementation

Tokens (SAPUI5 samples)
Tokenizer (SAPUI5 samples)
Tokens (SAPUI5 API reference)
Tokenizer (SAPUI5 API reference)

Variant Management

Intro

Variants store view settings, such as filter settings or control parameters.

The filter settings consist of filter parameters, selection fields, and the layout of filters. They are set within the filter bar.

Control parameters are the sort order, filter and group settings, column visibility, and the layout of a table or chart. They are set within the toolbar of the control.

The variant management control enables the user to load, save, change, and maintain variants.

Information

Note on terminology:

Usage

Use the variant management control if:

The user needs to save and load different filter settings to find the relevant data.
The user needs to save and load different layouts (for example, a table) to display data in different views.
The user needs to save the settings for the whole page, including the filter settings and table layout.

Responsiveness

Size S (Smartphone)

On phones, the My Views dialog for selecting variants, the Manage Views dialog, and the Save View dialog open in full screen mode.

My Views

Manage Views

Save View

Size M (Tablet)

My Views

Manage Views

Save View

Size L (Desktop)

My Views

Manage Views

Save View

Components

Variant management come with several components:

A clickable title with an icon
The My Views dialog for selecting variants
The Manage Views dialog for setting view parameters and deleting views
The Save View dialog for creating a new view

Name of View

The view name is the entry point for opening the My Views, Manage Views, and Save View dialogs.

Selecting a view

My Views Dialog

Default View

Pre-Shipped Standard Views

Favorite Views

Users can mark views as favorites (or unfavorite them) in the Manage Views dialog. If more than 10 favorite views exist, a search option is displayed.

The user can also mark public views as favourites.

Public Views

A public view can be edited by the user who created it and by key users. All other users can only display the public view.

Actions in the My Views Dialog

'My Views' dialog with a few views

'My Views' dialog with more than 10 views and a search option

Manage Views Dialog

In the Manage Views dialog, users can make the following changes:

Mark a view as a favorite
Change the name of a self-created view
Set a view as the default
Apply the view automatically
View the Sharing and Created By information of each view
Delete a self-created view

'Manage Views' dialog

Save View Dialog

The Save View dialog is for creating a new view. For each view, you can make the following settings:

View: Name of the new view (required field)
Set as Default: If checked, the new view is the new default view.
Public: If checked, the new view is available to everyone who has access to the app.
Apply Automatically: If checked, the view is applied immediately whenever it is selected. The user does not need to click the Go button in the filter bar.
We do not recommend checking this option if the selection is likely to cause long loading times.

'Save View' dialog

Layout

The variant management control is merged with the page title (or next to or merged with title of the respective control, such as a table).

Filter Bar (Page Title)

The variant management control is merged with the page title within the page header container, and saves the stored filter settings or both the filter and control settings.

Variant management within the filter bar, merged with the page title

Table

The variant management control can also store control settings like layout, table column visibility, sorting, or grouping independently of the filter settings.

It is either merged with the control title or placed next to it.

If you place the title or variant management control inside a toolbar, apply the following styles:

Set the toolbar height to 3 rem.
Use a transparent toolbar.
Use the title class “sapMH4Fontsize”.

Variant management within the table toolbar

If the table has a separate title, place the title first.

Variant management with table title

Behavior and Interaction

This control allows the user to select, create, update, and delete variants for filter settings and control parameters such as layout, table column visibility, sorting and grouping.

My Views dialog: Selecting a View

Save

Save can only be applied to variants that the user is allowed to save. Otherwise, this button is disabled. Save overwrites the active variant.

Save As

Save As enables the user to save the current filter settings as a new view. The Save As function can also be used to duplicate existing variants for later modification.

Manage

Manage opens the Manage Views dialog that allows the user to update, delete or favorite/unfavorite existing variants.

Selecting a view

Save View dialog

The Save View dialog is for creating new views. Providing a name for the new view is mandatory. Clicking OK saves the new view.

Save View

Manage Views dialog

In the Manage Views dialog, the user can rename, delete, and change properties of existing views.

Users can only modify or delete entries if they have the necessary permissions. By default, variants that a user has created can also be modified and deleted.

Manage Views

Save as Tile

The user can save the currently selected variant as a tile on the launchpad using the Save as Tile action in the Share menu.

In the Save as Tile dialog, the user can define the tile title and subtitle, a description, and the launchpad group in which the tile should appear.

Save as tile via 'Share' button

'Save as Tile' dialog

Guidelines

Save as Tile

Exception: If the variant cannot be referenced directly due to technical limitations, offer the standard tile creation option where filter parameters and settings are only saved within the URL.

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

Responsive Table (guidelines)
Table Toolbar (guidelines)
Filter Bar (guidelines)

Implementation

Variant Management (SAPUI5 samples)
Variant Management (SAPUI5 API reference)

Visual Filter Bar

Visual filter bar - Size L

Usage

Use the visual filter bar if:

You are using analytical list page floorplan.
Users need to see both the result and the direct impact of their filter settings in a chart representation.
You would like to give users a condensed overview of the data in the dataset.

Do not use the visual filter bar if:

You are not using the analytical list page floorplan.
Users are not interested in seeing the impact or their filter settings directly in a chart representation.
Users are not interested in a condensed overview of the data in the dataset.

Responsiveness

The visual filter bar itself is fully responsive. For overall responsiveness within the analytical list page, see the Analytical List Page article.

Layout

Collapsed Visual Filter Bar

On desktop and tablet devices, the collapsed filter bar shows a summary of the filters currently applied. The format of the summary text is:

Filtered By (number of filters): <comma-separated list of the filters currently applied>
Example: Filtered By (2): Country/Region, Product

Up to 5 filters are listed. If more filters have been applied, an ellipsis (…) appears at the end of the string. If no filters have been applied, the summary text is Not Filtered.

Expanded Visual Filter Bar

Structure

Filter Title Area

Visual filter bar - Title area

Visual filter bar - Title area with selected filter values

Bar Chart

Visual filter bar - Interactive bar chart

Line Chart

Do not use a line chart to show categories. Instead, use a bar chart.

Visual filter bar - Interactive line chart

Donut Chart

The interactive donut chart is best used to display up to three slices. Use this chart if the exact value of each slice is not needed for filtering.

In the visual filter bar, only the top or bottom two values are shown; the rest are aggregated into the Other section.

Visual filter bar - Interactive donut chart

Visual Filter Selections

Any data point or segment selected in a chart remains selected when the user changes the measure, chart type, or sort order in any of the charts.

If a selected record falls outside the top or bottom three records being displayed, the (x) status above the chart shows the number of selected records.

Developer Hint

Don't

Don't use a relative format for time

Use titles that give context

Add the year in the title if you display only 4 quarters

Visual Filter Dialog

In this dialog, the user can make the following changes:

Add visual filters
Delete visual filters
Hide visual filters in the visual filter bar
Search for visual filters
Change the sort order of each visual filter
Change the chart type of each visual filter
Switch to other measures in the visual filter display

The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified filter set variant. Save and Save As can be provided.
Cancel: Closes the dialog and undoes all changes.
Restore: Restores the initial variant values. You can hide this button if it does not fit the app use case.
Go: Applies the selected filter set.
Clear (optional): Clears all filters. Only use this button if it fits the app use case.

Visual filter dialog

Visual Filter Configuration

In the filter dialog, users can configure individual visual filters using the icons in the filter title area:

Change the sort order (not supported for line charts)
Switch to a different chart type
Choose between different measures

Visual filter configuration - Sort, chart type, measure

Behavior and Interaction

Selecting Filters

Selecting a Filter Value in an Interactive Chart

Any data point selected in a chart remains selected, even if the user selects a data point in another chart. Filter values also react to each other.

If a selected record in a chart falls outside the displayed filter values, the selection is visible in the (x) link above the chart, where (x) represents the number of selected records.

Users can select more filter values with the value help or select popover.

Selecting a Filter Value Using the Value Help

Selecting a Filter Value Using Select Popover

Personalizing the Visual Filter Bar

Add Visual Filter

If all filters in a group have already been added in the visual filter dialog, the More (x) link label in the filter group title switches to Change Filters.

Hide Visual Filter

Guidelines

Live Update / Manual Update

The visual filter bar is available in two modes: live update and manual update. In both modes the visual filter charts refresh based on the selection.

Live Update

Visual filter bar - Live update mode

Manual Update

In manual update mode, the filter results are only updated when the user clicks the Go button that is shown in manual mode. Pressing ENTER on the keyboard also triggers the filter.

Visual filter bar - Manual update mode

Recommendation

Chart Types

In the visual filter bar, you can choose between three interactive charts: bar chart, line chart, and donut chart.

Recommendation

If you expect users to be working with a large number of datasets, and your scenario does not depict time periods, consider using a bar chart.
If you want to measure trends and changes over time when filtering, consider using the line chart.
If your scenario requires filtering by parts of a whole and has only a small number of datasets, consider using the donut chart.

Filter Selection

Recommendation

If your scenario involves filtering 200 or more filter values, consider using the value help. For filtering less than 200 values, we recommend using the select popover.

Scaling Factor

Always use a scaling factor to display values larger than 1000. The scaling factor is usually displayed in the interactive chart header. Do not repeat the scaling factor inside the chart itself.

Recommendation

Due to the limited space inside the chart, we recommend showing a maximum of 3 digits before the decimal point.

Visual filter bar with scaling factor (M)

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

Analytical List Page (guidelines)
Interactive Chart (guidelines)
Interactive Bar Chart (guidelines)
Interactive Donut Chart (guidelines)
Interactive Line Chart (guidelines)
Value Help Dialog (guidelines)
Filter Bar / Smart Filter Bar (guidelines)
Dynamic Page (guidelines)

Implementation

Development System (snapshot)

Smart Filter Bar

Intro

Information

This article is intended as an aid to designers and developers who want to explore the detail configuration options available for the smart filter bar.

The developer can use annotation properties in the classes [external_only]ControlConfiguration and GroupConfiguration to adapt the filter bar for the purposes of the app.

These annotations let you:

Determine the type of control (for example, whether a field is shown as a multi-input field or as a date picker)
Enable the autocomplete suggestions feature
Enable the value help dialog
Overwrite settings from the OData service
Set custom filter groups
Add custom fields
Access all settings for the underlying filter bar

You can also use all the configuration options described here in the smart filter bar for the list report SAP Fiori element.

Warning

Most of the attributes/properties are not dynamic and cannot be changed once the control has been initialized.

Usage

Use the smart filter bar if:

An OData service is available.
You want to develop quickly and efficiently.

Do not use the smart filter bar if:

You need to make extensive changes to the filter bar.

Components

You can use the annotation properties listed below to influence how filters are rendered in the expanded filter bar and in the filter dialog.

Expanded Filter Bar

Properties for the expanded filter bar

1 enableBasicSearch
Defines whether the filter bar includes a basic search. By default, the basic search is not included.

2 FilterRestrictions/NonFilterableProperties
Defines whether a property is available as a filter criterion.

3 FilterRestrictions/RequiredProperties
Defines the filter field as a mandatory filter. Mandatory filters are marked by an asterisk (*).

4 ValueList
Contains annotations that provide information for rendering a value help list that has been set for a property.

5 FilterExpressionType/MultiValue
Defines whether multiple values can be used in a single filter.

6 FilterExpressionType/SingleValue
Restricts the filter to allow only one value entry.

7 LineItem/Label
A short, human-readable text for the filter name.

8 FilterExpressionType/SingleInterval
Restricts the filter to a specified interval, such as a date interval

8 insertDefaultFilterValue
Inserts a default filter value into the aggregation defaultFilterValues.

9 liveMode
Defines whether the expanded filter bar is shown in live mode (no Go button) or in manual mode. By default, the filter bar is shown in manual mode.

Filter Dialog

Properties on the filter dialog

1 FilterRestrictions/RequiredProperties
Defines the filter field as a mandatory filter. Mandatory filters are marked by an asterisk (*).

2 FieldControlType/Hidden
Defines whether the filter is initially visible on the expanded filter bar.

3 SelectionFields
Defines whether a filter belongs to the basic group. All filters in the basic group are initially visible on the expanded filter bar.

4 FieldGroup
Defines whether a filter field is initially shown on the filter dialog, and which group it belongs to.

5 FilterRestrictions/NonFilterableProperties
Defines whether a property is available as a filter criterion.

6 LineItem/Label
A short, human-readable text for the filter name.

Fiscal annotations

As an example, the smart filter bar supports fiscal annotations, like i.e. for fiscal period / data / time information. Such annotations guarantee the correct rendering of such values.

Smart filter bar with filters based on fiscal annotations

Recently entered values

The smart filter bar provides a history of recently entered values in the smart filter field. When focusing a field, an app can provide a small amount of recently used values. They are shown below the recommended items, which could appear at the same time. All values are shown if the drop-down is opened. Start typing will work like before, where the recently used values are filtered accordingly.

IN / OUT Parameter

In the smart filter bar, a drop-down or suggestion list can only contain a sub-set of items in case a dependent filter is set (IN parameter). It is also possible that selecting a value in a drop-down or suggestion list fills the current plus additional filter fields (OUT parameter).

Data Types

The tables below tell you which input controls are used for the key data types.

General Data Types

DataType	ODataMetadata	Additional Configuration	Edit type	Display type	Notes
*	*		Input	Text
DateTime	–	sap:display-format=”Date”	DatePicker	Text
Decimal	–	Precision=”3″ Scale=”0″	Input	Text
All	–		Input (with VHD)	Text	If a matching ValueList annotation is found, the ValueHelp for the Input is enabled. A ValueHelp Dialog is created automatically, based on the data in the ValueList annotation.
All	–	sap:semantics=”fixed-values” on the ValueList entity	ComboBox	Text	If a matching ValueList annotation is found, and the ValueList entity has the semantics=”fixed-values”, a dropdown list is shown.

Filter Bar-Specific Data Types

Input Type	sap:filter-restriction	display-format	hasValueHelpDialog	controlType	Resulting Control Type
*	*		controlType/filterType is specified		As specified in additional configuration
DateTime	“interval”	“Date”	NA		Date Range Selection
DateTime	“anything other than interval” or empty	“Date”	NA		Date Picker
String	“single-value”		“true” / none		Input Field With Value Help Dialog (with typeAhead according to hasTypeAhead flag)
String	“single-value”		“false”	not specified/input	Input Field (with typeAhead according to hasTypeAhead flag)
String	“single-value”		“false”	dropDownList; hasTypeAhead is not considered here	ComboBox
*	“single-value”				Input Field
String	empty or no filter-restriction		“true” / none		Multi Input Field with Value Help Dialog
String	“multi-value”		“true” / none		If no VL Annotation is found – only show the range selection part
String	“multi-value” / empty		“false”		If no VL Annotation is found – hide the ValueHelpDialog icon
String	“multi-value” / empty		“false”	dropDownList	MultiComboBox
*	“multi-value”				Input Field
*	“interval”		NA		A single Input Field that allows the “-” shortcut notation for intervals

Guidelines

Reduced set of table columns for the tabular suggestion

You have the option to define different columns in the table of the Value Help Dialog and the suggestion list of the Smart Filter Bar.

In the , each parameter can be statically annotated as important using the <code>Importance</code> annotation with EnumMember set to High:

<Annotation Term="com.sap.vocabularies.UI.v1.Importance"
EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" />

In the suggestion list only the important parameters are displayed as columns, while in the table of the Value Help Dialog all of the parameters are displayed.

The Importance annotation is optional – if omitted all of the parameters are displayed in both table of the Value Help Dialog and the suggestion list of the Smart Filter Bar.

Formatting option for negative numbers

A new OData type NumericText improves the display-format=”NonNegative” of numeric fields. All values containing only 0, for example, „0“, „00“, „000“ etc., are interpreted and displayed as empty.

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

Filter Bar (guidelines)

Implementation

Smart Filter Bar (SAPUI5 samples)
Smart Filter Bar (SAPUI5 API reference)
Filter Bar (SAPUI5 samples)
Filter Bar (SAPUI5 API reference)

UI Development Toolkit (SAPUI5 samples)

Icon Tab Bar

The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.

There are two key use cases:

You want to let users navigate between different object facets in the object details area.
You want to let users filter lists, and give them the option of calling up the entire list, or only items with a specific attribute.

In both cases, the user switches between tab pages by clicking the respective tab.

Usage

Use the icon tab bar if:

Your business objects need to show multiple facets at the same time.
You want to allow the user to browse through these facets.
You need a prominent or very visual filter on top of a list.
You have clear-cut process steps that need to be visualized.

Do not use the icon tab bar if:

You plan to use only one single tab.

Responsiveness

The icon tab bar stretches horizontally, and soon runs out of space on small screens. It responds to limited space by offering a scrolling mechanism.

Responsiveness – Text tabs

Responsiveness – Icon tabs

When the screen space does not allow to show all tabs on the main tab bar, an overflow appears on the far right, containing all remaining tabs that do not fit on the screen.

Responsiveness – Overflow

Layout

The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from. These are described in detail below.

Types

You can use the icon tab bar control to build the following types of tab bars:

Text only
Icon tabs
Tabs as filters
Tabs as process steps

Text Only

The text-only variant is one of the most common types. It allows longer labels, and can also display counters next to the text to indicate the number of items on the tab page.

If you use text-only tabs, make sure that the UpperCase property is disabled and that you enter the labels in title case (for example: Approval Flow).

Types – Text-only without counters

Types – Text-only with inline counters

Counters and Text Tabs

If counters are used, set the property HeaderMode to “Inline” so the counters appear in brackets after the labels.

Do not use the old layout that shows the counters on top of the labels (Headermode = “Standard”).

Counters – Inline layout ('HeaderMode' set to 'Inline')

Don't

Counters – Old layout ('HeaderMode' set to 'Standard')

Icon Tabs

Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.

Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.

Types – Icons with counters

Please note that starting with SAPUI5 version 1.40, you should only use the horizontal type of label (icon and label side by side).

If your labels get truncated, consider using shorter labels or text tabs (without icons), since text tabs cannot get truncated.

Types – Icons with counters and labels

Types – Icon-only

Tabs as Filters

If you build the tab bar as a filter, it can comprise two parts:

An “all” tab on the left (optional)
This tab shows the total number of items, and describes the type of item (for example, 189 Products).
Tabs for specific filters
Use the tab text to indicate the filter attribute.
We strongly recommend showing a counter on every tab.

Types – Filter

Tabs as Process Steps

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

To connect the steps, use the triple-chevron icon () from the SAP icon font (technical name: process).

Types – Process

Developer Hint

Test whether your labels and their translations are displayed in full, and do not get truncated.

Hierarchies

The tab bar supports hierarchies, allowing multiple tabs underneath one main tab. This way, you can group several tabs together, with the main tab acting as a headline.

Subtabs

The example on the right shows the main tab Notes with two subtabs, Internal and External, with no specific hierarchy except for their order.

Types – Subtabs

Nested Tabs

Nesting allows deeper hierarchies with indentations to indicate the level of each tab.

Types – Nested Tabs

Behavior and Interaction

Clicking a Tab

To navigate through the views, the user clicks the tabs.

Optional behavior: If the user clicks a tab that is already open, the container collapses. It opens again when the user clicks any tab.

Use the expandable property to specify whether users can collapse the tab container (default = “true”):

Let users collapse the container if there is additional content below the container, and the information inside the container is not always needed.
If there is no content below the tab container, set the expandable property to “false”.

The expandable property controls the initial state of the container. Do not change the default state (“true”).

Changing the Order of Tabs

Applications can allow users to rearrange the tab order when working in a desktop environment (property: enableTabReordering). If this feature is enabled, users can use drag and drop to reorder tabs, either directly on the tab bar or inside the overflow menu. It is also possible to drag and drop tabs from the tab bar to the overflow menu and vice versa.

Please note that this feature is not available for tabs as process steps to ensure that consecutive steps do not get mixed up.

Styles

Tab Density

Save vertical space on the page (applies to both text and icon tabs)
Save horizontal space (icon tabs only; this is especially helpful when there are many tabs)
Generally use less space on mobile devices
Reduce noise when there are already more important visual elements on the screen (primarily icon tabs)

The following image shows some types of tabs with their default style (cozy, left) and the reduced density mode (compact, right).

Style – Tab density

Colors

The two different styles (round tabs and text only) are discussed in the Types section. In both cases, you can use semantic colors to give users additional orientation.

Developer Hint

To apply semantic colors to the icons and the text-only tabs, you can use the property for sap.ui.core.IconColor.

Example

Styles – Colors

Guidelines

Apply the styles as follows:

If you have only a few tabs that can easily be visualized with icons, use the icon-only tabs. If a short description is needed, use icons and labels.
If the content cannot easily be identified by an icon, use the text-only tabs. They also allow for longer labels.
If you are using the icon tab bar in the object view floorplan, use either icon-only or text-only tabs.
Icons only:
Use this option if you have only 4-5 tabs that can be very clearly identified by their icon.
Text only:
Use this option if you have more than 4-5 tabs, or if there are no clear icons to represent the content. Set the property HeaderMode to “Inline”.

Counters – Inline layout ('HeaderMode' set to 'Inline')

Don't

Counters – Old layout ('HeaderMode' set to 'Standard')

If you use icon tabs, ensure the following:

The icons clearly identify the content on the tab pages.
Each tab has a unique icon. Do not use the same icon more than once.
The icons are easily distinguishable.
Any icons between tabs (for example, as separators or connectors) are visually very different from the icons on the tabs.
Either all or none of the icons have labels.

Implement the focus as follows:

By default, show the first tab as open. This is the initial setting provided by the control.
Note: Technically, you can also override the initial selection. However, this is not recommended.
Later on, you can show the tab last selected by the user.

Additional guidelines:

Do not display a loading indicator above the tab while the number for the item count is loading.
Handle empty tabs as follows:
- Hide tabs that do not contain any information, and do not allow the user to create content..
- Show empty tabs that allow users to create content, such as notes or attachments.
Only use the tab bars to navigate between tabs. Do not use any other navigation links. For example, do not let users click an item in tab A that takes them to tab B. This type of cross-navigation inside a container is confusing, and cannot be handled by the back navigation.

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

How To Use Semantic Colors

Implementation

Icon Tab Bar (SAPUI5 samples)
Icon Tab Bar (SAPUI5 API reference)

Filter Bar

Filter bar within the dynamic page

Information

Responsiveness

Size S (Smartphones)

Expanded filter bar (size S)

Collapsed filter bar (size S)

Filter dialog (size S)

Size L (Desktop)

Expanded filter bar (size L)

Collapsed filter bar (size L)

Filter dialog (size L)

Layout

Filter Dialog

The vertical layout of the filter dialog remains stable across all devices. To ensure a clean grid layout appearance, the size of the widest input field is inherited by all other filters.

Filter dialog (size L)

Expanded Filter Bar

Filter bar (size L) with one row of filters

Filter Bar (Size L) with more than one row of filters

Filter bar (size S) with vertical filters

Components

Collapsed Filter Bar

The collapsed filter bar takes up very little space, leaving the bulk of the screen to display the actual results. However, the variant selector in the upper left corner is still available for switching between variants. The user can expand or collapse the filter bar by clicking on the header. If required by the use case, the filter bar can be expanded by default.

Collapsed filter bar

Expanded Filter Bar

Developer Hint

Smart filter bar: See the parameters for configuring the expanded filter bar.

In addition to the collapsed filter bar, the expanded filter bar shows a user-defined filter subset of the currently selected variant.

The Adapt Filters (x) link opens the filter dialog, and allows the user to add filters or hide them. The Go button triggers the filter. The Go button is only shown in manual mode.

Expanded filter bar

Filter Dialog

Developer Hint

Smart filter bar: See the parameters for configuring the filter dialog.

The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified variant filter set (Save and Save As can be provided)
Cancel: Closes the dialog and undoes all changes
Restore: Restores the initial variant values (you can hide this button if it does not fit the app’s use case)
Go: Executes the selected filter set
Clear (optional): Clears all input fields/filters (this button should only be used if it fits the app’s use case)

Filter dialog

Variant Selector

The variant selector is used to select the current variant, and also provides access to variant management.

Variant selector

Filter/Input Controls

Filter/input controls

When designing the filter bar, pick the simplest input control that works for your use case. Avoid unnecessary complexity in the filter bar.

For a comprehensive overview of when to use which input field, see Selection Controls – Overview.

Developer Hint

For development information, see data types for the smart filter bar.

Recommended input fields:

Behavior and Interaction

The filter bar contains the following actions:

Selecting a Variant

Personalizing the Expanded Filter Bar

Adding Filters to a Variant

In the filter dialog the user can access more filters for every filter group. Filters can then be added or removed in a separate dialog. Once a filter has been added or removed, it appears or disappears from the filter dialog. If the user selects the checkbox next to the filter, the filter is displayed on the extended filter bar.

Adding Filters to a Variant

Saving a New Variant

You can save new filter variants either in the variant selector or in the filter dialog.

Once you have changed an existing variant, an asterisk (*) is displayed next to the current variant name, indicating its “dirty state”.

You can either save the adapted variant with the current name (overwrite), or save it under a new name.

Option 1 – Variant Selector

Open the variant selector and choose Save As. Type your desired variant name into the input field and select OK.

Save new variant in variant selector

Option 2 – Filter Dialog

Choose Adapt Filters to open the filter dialog. Choose Save from the footer toolbar and type your desired variant name into the input field. Select OK.

Save new variant in filter dialog

Guidelines

Default Variant Filters

For all filter bars, provide a set of predefined default filters that come with the app (“Basic” group in the filter dialog). Include filters that are:

Mandatory / crucial to the use case
Frequently used
Vital for reducing the number of items in the list

Users can hide filters in the “Basic” group, but cannot remove them from the filter dialog.

Default variant "Basic"

Default Values

Provide a meaningful default value for as many filters as possible. Meaningful default values depend on your use case.

A default value for date ranges, for example, should reflect the time frame the user would normally apply. App designers need to decide which time frame is appropriate.

For list reports and overview pages, ensure that mandatory filter fields always have default values. Otherwise, users will see error messages when the page loads.

Filter without default value

Filter with available values

Filter with a default value

Table Filtering and Table Searching

Table without filtering option

Don't

Table with filtering option

Initial State

The filter bar can initially be collapsed or expanded, depending on the use case:

Initial State Collapsed

If the app has a default variant that is executed on loading, the table is prefilled, and the user seldom changes the filters, the app can start with a collapsed filter bar.

Initial State Expanded

Initial state collapsed

Initial state expanded

Basic Search Field

The basic search field allows the user to filter the results by a given keyword. In contrast to the other input fields, the basic search field has a placeholder text instead of a label.

Note: If you need to provide a search field, use the basic search field. The search field within the table must be deactivated.

Filter bar with basic search field

Live Update / Manual Update

The filter bar is available in two separate modes: Live update mode and manual update mode.

Live Update

The live update mode is the default mode. The filter bar reacts instantly to every input change. The result table is updated every time the user changes a filter field or the search field. Therefore, a Go button is not necessary and is not shown if live update mode is used.

The search is triggered with every letter that is entered, starting with the first letter the user types. The table is updated with the results that match all set filters and include the search term.

Manual Update

In the manual update mode, the filter results are only updated when the user clicks or taps Go. A Go button is therefore mandatory in manual update mode. Pressing ENTER on the keyboard also triggers the filter.

Which Mode Should I Use?

We recommend using live update mode, which is more convenient for the user. However, if the user has to configure multiple filters to obtain a useful result set, or if the resulting traffic is expected to be excessively high, consider using manual update mode instead.

Filter bar in live update mode

Filter bar in manual update mode

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

Variant Management (guidelines)
Smart Filter Bar Annotations (guidelines)

Implementation

Filter Bar (SAPUI5 samples)
Smart Filter Bar (SAPUI5 samples)
Filter Bar (SAPUI5 API reference)
Smart Filter Bar (SAPUI5 API reference)
Variant Management Example (SAPUI5 samples)
Variant Management Example (SAPUI5 API reference)
Filter Item (SAPUI5 API reference)
Filter Group Item (SAPUI5 API reference)

Icon Tab Bar

The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.

There are two key use cases:

You want to let users navigate between different object facets in the object details area.
You want to let users filter lists, and give them the option of calling up the entire list, or only items with a specific attribute.

In both cases, the user switches between tab pages by clicking or tapping the respective tab.

Usage

Use the icon tab bar if:

Your business objects need to show multiple facets at the same time.
You want to allow the user to browse through these facets.
You need a prominent or very visual filter on top of a list.
You have clear-cut process steps that need to be visualized.

Do not use the icon tab bar if:

You plan to use only one single tab.

Responsiveness

The icon tab bar stretches horizontally, and soon runs out of space on small screens. It responds to limited space by offering a scrolling mechanism.

Responsiveness – Text tabs

Responsiveness – Icon tabs

Layout

The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from. These are described in detail below.

Types

You can use the icon tab bar control to build the following types of tab bars:

Text only
Icon tabs
Tabs as filters
Tabs as process steps

Text Only

The text-only variant is one of the most common types. It allows longer labels, and can also display counters next to the text to indicate the number of items on the tab page.

If you use text-only tabs, make sure that the UpperCase property is disabled and that you enter the labels in title case (for example: Approval Flow).

Types – Text-only without counters

Types – Text-only with inline counters

Counters and Text Tabs

If counters are used, set the property HeaderMode to “Inline” so the counters appear in brackets after the labels.

Do not use the old layout that shows the counters on top of the labels (Headermode = “Standard”).

Counters – Inline layout ('HeaderMode' set to 'Inline')

Don't

Counters – Old layout ('HeaderMode' set to 'Standard')

Icon Tabs

Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.

Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.

Types – Icons with counters

Please note that starting with SAPUI5 version 1.40, you should only use the horizontal type of label (icon and label side by side).

If your labels get truncated, consider using shorter labels or text tabs (without icons), since text tabs cannot get truncated.

Types – Icons with counters and labels

Types – Icon-only

Tabs as Filters

If you build the tab bar as a filter, it can comprise two parts:

An “all” tab on the left (optional)
This tab shows the total number of items, and describes the type of item (for example, 189 Products).
Tabs for specific filters
Use the tab text to indicate the filter attribute.
We strongly recommend showing a counter on every tab.

Types – Filter

Tabs as Process Steps

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

To connect the steps, use the triple-chevron icon () from the SAP icon font (technical name: process).

Types – Process

Developer Hint

Test whether your labels and their translations are displayed in full, and do not get truncated.

Behavior and Interaction

Clicking/Tapping on a Tab

To navigate through the views, the user clicks or taps the tabs.

Optional behavior: If the user clicks or taps a tab that’s already open, the container collapses. It opens again when the user clicks any tab.

Use the expandable property to specify whether users can collapse the tab container (default = “true”):

Let users collapse the container if there is additional content below the container, and the information inside the container is not always needed.
If there is no content below the tab container, set the expandable property to “false”.

The expandable property controls the initial state of the container. Do not change the default state (“true”).

Changing the Order of Tabs

Please note that this feature is not available for tabs as process steps to ensure that consecutive steps do not get mixed up.

Interaction – Rearranging tabs

Interaction – Rearranging tabs in the overflow menu

Interaction – Rearranging tabs between bar and overflow menu

Styles

Tab Density

Save vertical space on the page (applies to both text and icon tabs)
Save horizontal space (icon tabs only; this is especially helpful when there are many tabs)
Generally use less space on mobile devices
Reduce noise when there are already more important visual elements on the screen (primarily icon tabs)

The following image shows some types of tabs with their default style (cozy, left) and the reduced density mode (compact, right).

Style – Tab density

Colors

The two different styles (round tabs and text only) are discussed in the Types section. In both cases, you can use semantic colors to give users additional orientation.

Developer Hint

To apply semantic colors to the icons and the text-only tabs, you can use the property for sap.ui.core.IconColor.

Example

Styles – Colors

Guidelines

Apply the styles as follows:

If you have only a few tabs that can easily be visualized with icons, use the icon-only tabs. If a short description is needed, use icons and labels.
If the content cannot easily be identified by an icon, use the text-only tabs. They also allow for longer labels.
If you are using the icon tab bar in the object view floorplan, use either icon-only or text-only tabs.
Icons only:
Use this option if you have only 4-5 tabs that can be very clearly identified by their icon.
Text only:
Use this option if you have more than 4-5 tabs, or if there are no clear icons to represent the content. Set the property HeaderMode to “Inline”.

Counters – Inline layout ('HeaderMode' set to 'Inline')

Don't

Counters – Old layout ('HeaderMode' set to 'Standard')

If you use icon tabs, ensure the following:

The icons clearly identify the content on the tab pages.
Each tab has a unique icon. Do not use the same icon more than once.
The icons are easily distinguishable.
Any icons between tabs (for example, as separators or connectors) are visually very different from the icons on the tabs.
Either all or none of the icons have labels.

Implement the focus as follows:

By default, show the first tab as open. This is the initial setting provided by the control.
Note: Technically, you can also override the initial selection. However, this is not recommended.
Later on, you can show the tab last selected by the user.

Additional guidelines:

Do not display a loading indicator above the tab while the number for the item count is loading.
Handle empty tabs as follows:
- Hide tabs that do not contain any information, and do not allow the user to create content..
- Show empty tabs that allow users to create content, such as notes or attachments.
Only use the tab bars to navigate between tabs. Do not use any other navigation links. For example, do not let users click an item in tab A that takes them to tab B. This type of cross-navigation inside a container is confusing, and cannot be handled by the back navigation.

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

How To Use Semantic Colors

Implementation

Icon Tab Bar (SAPUI5 samples)
Icon Tab Bar (SAPUI5 API reference)

Filter Bar

Filter bar within the dynamic page

Information

Responsiveness

Size S (Smartphones)

Expanded filter bar (size S)

Collapsed filter bar (size S)

Filter dialog (size S)

Size M (Tablet)

Expanded filter bar (size M)

Collapsed filter bar (size M)

Filter dialog (size M)

Size L/XL (Desktops)

Expanded filter bar (size L/XL)

Collapsed filter bar (size L/XL)

Filter dialog (size L/XL)

Layout

Filter Dialog

The vertical layout of the filter dialog remains stable across all devices. To ensure a clean grid layout appearance, the size of the widest input field is inherited by all other filters.

Filter dialog (size L)

Filter dialog (size S)

Expanded Filter Bar

Filter bar (size L) with one row of filters

Filter Bar (Size L) with more than one row of filters

Filter bar (size S) with vertical filters

Components

Collapsed Filter Bar

The collapsed filter bar takes up very little space, leaving the bulk of the screen to display the actual results. However, the variant selector in the upper left corner is still available for switching between variants. The user can expand or collapse the filter bar by clicking on the header. If required by the use case, the filter bar can be expanded by default.

Collapsed filter bar

Expanded Filter Bar

Developer Hint

Smart filter bar: See the parameters for configuring the expanded filter bar.

In addition to the collapsed filter bar, the expanded filter bar shows a user-defined filter subset of the currently selected variant.

The Adapt Filters (x) link opens the filter dialog, and allows the user to add filters or hide them. The Go button triggers the filter. The Go button is only shown in manual mode.

Expanded filter bar

Filter Dialog

Developer Hint

Smart filter bar: See the parameters for configuring the filter dialog.

The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified variant filter set (Save and Save As can be provided)
Cancel: Closes the dialog and undoes all changes
Restore: Restores the initial variant values (you can hide this button if it does not fit the app’s use case)
Go: Executes the selected filter set
Clear (optional): Clears all input fields/filters (this button should only be used if it fits the app’s use case)

Filter dialog

Variant Selector

The variant selector is used to select the current variant, and also provides access to variant management.

Variant selector

Filter/Input Controls

Filter/input controls

When designing the filter bar, pick the simplest input control that works for your use case. Avoid unnecessary complexity in the filter bar.

For a comprehensive overview of when to use which input field, see Selection Controls – Overview.

Developer Hint

For development information, see data types for the smart filter bar.

Recommended input fields:

Behavior and Interaction

The filter bar contains the following actions:

Selecting a Variant

Personalizing the Expanded Filter Bar

Adding Filters to a Variant

Saving a New Variant

You can save new filter variants either in the variant selector or in the filter dialog.

Once you have changed an existing variant, an asterisk (*) is displayed next to the current variant name, indicating its “dirty state”.

You can either save the adapted variant with the current name (overwrite), or save it under a new name.

Option 1 – Variant Selector

Open the variant selector and choose Save As. Type your desired variant name into the input field and select OK.

Save new variant in variant selector

Option 2 – Filter Dialog

Choose Adapt Filters to open the filter dialog. Choose Save from the footer toolbar and type your desired variant name into the input field. Select OK.

Save new variant in filter dialog

Guidelines

Default Variant Filters

For all filter bars, provide a set of predefined default filters that come with the app (“Basic” group in the filter dialog). Include filters that are:

Mandatory / crucial to the use case
Frequently used
Vital for reducing the number of items in the list

Users can hide filters in the “Basic” group, but cannot remove them from the filter dialog.

Default variant "Basic"

Default Values

Provide a meaningful default value for as many filters as possible. Meaningful default values depend on your use case.

A default value for date ranges, for example, should reflect the time frame the user would normally apply. App designers need to decide which time frame is appropriate.

For list reports and overview pages, ensure that mandatory filter fields always have default values. Otherwise, users will see error messages when the page loads.

Filter without default value

Filter with available values

Filter with a default value

Table Filtering and Table Searching

Table without filtering option

Don't

Table with filtering option

Initial State

The filter bar can initially be collapsed or expanded, depending on the use case:

Initial State Collapsed

If the app has a default variant that is executed on loading, the table is prefilled, and the user seldom changes the filters, the app can start with a collapsed filter bar.

Initial State Expanded

Initial state collapsed

Initial state expanded

Basic Search Field

The basic search field allows the user to filter the results by a given keyword. In contrast to the other input fields, the basic search field has a placeholder text instead of a label.

Note: If you need to provide a search field, use the basic search field. The search field within the table must be deactivated.

Filter bar with basic search field

Live Update / Manual Update

The filter bar is available in two separate modes: Live update mode and manual update mode.

Live Update

The search is triggered with every letter that is entered, starting with the first letter the user types. The table is updated with the results that match all set filters and include the search term.

Manual Update

Which Mode Should I Use?

Filter bar in live update mode

Filter bar in manual update mode

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

Variant Management (guidelines)
Smart Filter Bar Annotations (guidelines)

Implementation

Filter Bar (SAPUI5 samples)
Smart Filter Bar (SAPUI5 samples)
Filter Bar (SAPUI5 API reference)
Smart Filter Bar (SAPUI5 API reference)
Variant Management Example (SAPUI5 samples)
Variant Management Example (SAPUI5 API reference)
Filter Item (SAPUI5 API reference)
Filter Group Item (SAPUI5 API reference)

Filter Bar

Filter bar within the dynamic page

Information

Responsiveness

Size S (Smartphones)

Expanded filter bar (size S)

Collapsed filter bar (size S)

Filter dialog (size S)

Size M (Tablet)

Expanded filter bar (size M)

Collapsed filter bar (size M)

Filter dialog (size M)

Size L/XL (Desktops)

Expanded filter bar (size L/XL)

Collapsed filter bar (size L/XL)

Filter dialog (size L/XL)

Layout

Filter Dialog

The vertical layout of the filter dialog remains stable across all devices. To ensure a clean grid layout appearance, the size of the widest input field is inherited by all other filters.

Filter dialog (size L)

Filter dialog (size S)

Expanded Filter Bar

Filter bar (size L) with one row of filters

Filter Bar (Size L) with more than one row of filters

Filter bar (size S) with vertical filters

Components

Collapsed Filter Bar

The collapsed filter bar takes up very little space, leaving the bulk of the screen to display the actual results. However, the variant selector in the upper left corner is still available for switching between variants. The user can expand or collapse the filter bar by clicking on the header. If required by the use case, the filter bar can be expanded by default.

Collapsed filter bar

Expanded Filter Bar

Developer Hint

Smart filter bar: See the parameters for configuring the expanded filter bar.

In addition to the collapsed filter bar, the expanded filter bar shows a user-defined filter subset of the currently selected variant.

The Adapt Filters (x) link opens the filter dialog, and allows the user to add filters or hide them. The Go button triggers the filter. The Go button is only shown in manual mode.

Expanded filter bar

Filter Dialog

Developer Hint

Smart filter bar: See the parameters for configuring the filter dialog.

The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified variant filter set (Save and Save As can be provided)
Cancel: Closes the dialog and undoes all changes
Restore: Restores the initial variant values (you can hide this button if it does not fit the app’s use case)
Go: Executes the selected filter set
Clear (optional): Clears all input fields/filters (this button should only be used if it fits the app’s use case)

Filter dialog

Variant Selector

The variant selector is used to select the current variant, and also provides access to variant management.

Variant selector

Filter/Input Controls

Developer Hint

For development information, see data types for the smart filter bar.

Filter/input controls

Which filter control is used in the filter dialog or the expanded filter bar depends on the use case. Use the value help control if you want to offer an advanced function for selecting single or multiple items either inline (by entering text) or by means of a dialog. If there is a predefined list for single or multiple selection, use the combo box control. For temporal information you can use the date picker or date range selector.

When designing the filter bar, pick the simplest input control that works for your use case. Using more complex controls (like value help) when you don’t actually need them just increases the complexity of the filter bar.

Additionally recommended input fields:

Behavior and Interaction

The filter bar contains the following actions:

Selecting a Variant

Personalizing the Expanded Filter Bar

Adding Filters to a Variant

Saving a New Variant

You can save new filter variants either in the variant selector or in the filter dialog.

Once you have changed an existing variant, an asterisk (*) is displayed next to the current variant name, indicating its “dirty state”.

You can either save the adapted variant with the current name (overwrite), or save it under a new name.

Option 1 – Variant Selector

Open the variant selector and choose Save As. Type your desired variant name into the input field and select OK.

Save new variant in variant selector

Option 2 – Filter Dialog

Choose Adapt Filters to open the filter dialog. Choose Save from the footer toolbar and type your desired variant name into the input field. Select OK.

Save new variant in filter dialog

Guidelines

Default Variant Filters

For all filter bars, provide a set of predefined default filters that come with the app (“Basic” group in the filter dialog). Include filters that are:

Mandatory / crucial to the use case
Frequently used
Vital for reducing the number of items in the list

Users can hide filters in the “Basic” group, but cannot remove them from the filter dialog.

Default variant "Basic"

Default Values

Provide a meaningful default value for as many filters as possible. Meaningful default values depend on your use case.

A default value for date ranges, for example, should reflect the time frame the user would normally apply. App designers need to decide which time frame is appropriate.

Filter without default value

Filter with available values

Filter with a default value

Table Filtering and Table Searching

Table without filtering option

Don't

Table with filtering option

Initial State

The filter bar can initially be collapsed or expanded, depending on the use case:

Initial State Collapsed

If the app has a default variant that is executed on loading, the table is prefilled, and the user seldom changes the filters, the app can start with a collapsed filter bar.

Initial State Expanded

If the app does not use a default variant and the user has to set a filter to obtain a first result set for the table, start with an expanded filter bar. Also, if a vast number of items are expected, include some mandatory filters. Since the user first has to enter values for these filters, start with an expanded filter bar. If you are in any doubt, start the app with an expanded filter bar.

Initial state collapsed

Initial state expanded

Basic Search Field

The basic search field allows the user to filter the results by a given keyword. In contrast to the other input fields, the basic search field has a placeholder text instead of a label.

Note: If you need to provide a search field, use the basic search field. The search field within the table must be deactivated.

Filter bar with basic search field

Live Update / Manual Update

The filter bar is available in two separate modes: Live update mode and manual update mode.

Live Update

The search is triggered with every letter that is entered, starting with the first letter the user types. The table is updated with the results that match all set filters and include the search term.

Manual Update

Which Mode Should I Use?

Filter bar in live update mode

Filter bar in manual update mode

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

Variant Management (guidelines)
Smart Filter Bar Annotations (guidelines)

Implementation

Filter Bar (SAPUI5 samples)
Smart Filter Bar (SAPUI5 samples)
Filter Bar (SAPUI5 API reference)
Smart Filter Bar (SAPUI5 API reference)
Variant Management Example (SAPUI5 samples)
Variant Management Example (SAPUI5 API reference)
Filter Item (SAPUI5 API reference)
Filter Group Item (SAPUI5 API reference)

Filter Bar

Filter bar within the dynamic page

Information

Responsiveness

Size S (Smartphones)

Expanded filter bar (size S)

Collapsed filter bar (size S)

Filter dialog (size S)

Size M (Tablet)

Expanded filter bar (size M)

Collapsed filter bar (size M)

Filter dialog (size M)

Size L/XL (Desktops)

Expanded filter bar (size L/XL)

Collapsed filter bar (size L/XL)

Filter dialog (size L/XL)

Layout

Filter Dialog

The vertical layout of the filter dialog remains stable across all devices. To ensure a clean grid layout appearance, the size of the widest input field is inherited by all other filters.

Filter dialog (size L)

Filter dialog (size S)

Expanded Filter Bar

Filter bar (size L) with one row of filters

Filter Bar (Size L) with more than one row of filters

Filter bar (size S) with vertical filters

Components

Collapsed Filter Bar

The collapsed filter bar takes up very little space, leaving the bulk of the screen to display the actual results. However, the variant selector in the upper left corner is still available for switching between variants. The user can expand or collapse the filter bar by clicking on the header. If required by the use case, the filter bar can be expanded by default.

Collapsed filter bar

Expanded Filter Bar

Developer Hint

Smart filter bar: See the parameters for configuring the expanded filter bar.

In addition to the collapsed filter bar, the expanded filter bar shows a user-defined filter subset of the currently selected variant.

The Adapt Filters (x) link opens the filter dialog, and allows the user to add filters or hide them. The Go button triggers the filter. The Go button is only shown in manual mode.

Expanded filter bar

Filter Dialog

Developer Hint

Smart filter bar: See the parameters for configuring the filter dialog.

The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified variant filter set (Save and Save As can be provided)
Cancel: Closes the dialog and undoes all changes
Restore: Restores the initial variant values (you can hide this button if it does not fit the app’s use case)
Go: Executes the selected filter set
Clear (optional): Clears all input fields/filters (this button should only be used if it fits the app’s use case)

Filter dialog

Variant Selector

The variant selector is used to select the current variant, and also provides access to variant management.

Variant selector

Filter/Input Controls

Developer Hint

For development information, see data types for the smart filter bar.

Filter/input controls

Additionally recommended input fields:

Behavior and Interaction

The filter bar contains the following actions:

Selecting a Variant

Personalizing the Expanded Filter Bar

Adding Filters to a Variant

Saving a New Variant

You can save new filter variants either in the variant selector or in the filter dialog.

Once you have changed an existing variant, an asterisk (*) is displayed next to the current variant name, indicating its “dirty state”.

You can either save the adapted variant with the current name (overwrite), or save it under a new name.

Option 1 – Variant Selector

Open the variant selector and choose Save As. Type your desired variant name into the input field and select OK.

Save new variant in variant selector

Option 2 – Filter Dialog

Choose Adapt Filters to open the filter dialog. Choose Save from the footer toolbar and type your desired variant name into the input field. Select OK.

Save new variant in filter dialog

Guidelines

Default Variant Filters

For all filter bars, provide a set of predefined default filters that come with the app (“Basic” group in the filter dialog). Include filters that are:

Mandatory / crucial to the use case
Frequently used
Vital for reducing the number of items in the list

Users can hide filters in the “Basic” group, but cannot remove them from the filter dialog.

Default variant "Basic"

Default Values

Provide a meaningful default value for as many filters as possible. Meaningful default values depend on your use case.

A default value for date ranges, for example, should reflect the time frame the user would normally apply. App designers need to decide which time frame is appropriate.

Filter without default value

Filter with available values

Filter with a default value

Table Filtering and Table Searching

Table without filtering option

Don't

Table with filtering option

Initial State

The filter bar can initially be collapsed or expanded, depending on the use case:

Initial State Collapsed

If the app has a default variant that is executed on loading, the table is prefilled, and the user seldom changes the filters, the app can start with a collapsed filter bar.

Initial State Expanded

If the app does not use a default variant and the user has to set a filter to obtain a first result set for the table, start with an expanded filter bar. Also, if a vast number of items are expected, include some mandatory filters. Since the user first has to enter values for these filters, start with an expanded filter bar. If you are in any doubt, start the app with an expanded filter bar.

Initial state collapsed

Initial state expanded

Basic Search Field

The basic search field allows the user to filter the results by a given keyword. In contrast to the other input fields, the basic search field has a placeholder text instead of a label.

Note: If you need to provide a search field, use the basic search field. The search field within the table must be deactivated.

Filter bar with basic search field

Live Update / Manual Update

The filter bar is available in two separate modes: Live update mode and manual update mode.

Live Update

The search is triggered with every letter that is entered, starting with the first letter the user types. The table is updated with the results that match all set filters and include the search term.

Manual Update

Which Mode Should I Use?

Filter bar in live update mode

Filter bar in manual update mode

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

Variant Management (guidelines)
Smart Filter Bar Annotations (guidelines)

Implementation

Filter Bar (SAPUI5 samples)
Smart Filter Bar (SAPUI5 samples)
Filter Bar (SAPUI5 API reference)
Smart Filter Bar (SAPUI5 API reference)
Variant Management Example (SAPUI5 samples)
Variant Management Example (SAPUI5 API reference)
Filter Item (SAPUI5 API reference)
Filter Group Item (SAPUI5 API reference)

Info Bar

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

Filter criteria: The info bar indicates the filter criteria that have been applied for a filter or contextual filter. Do not show the info bar if no filter is applied.
Selected items: In a multi-select dialog, the info bar shows the number of selected items.

The info bar 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 info bar for a contextual filter.

Types

There are three situations in which an info bar is shown:

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

General Filter

All applied filters are shown as labels in the info bar.

Info bar after a filter has been applied

Contextual Filter

Info bar after a contextual filter has been applied

Multiselection

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

Info bar after multiselection has been applied

Components

The info bar 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.

Info bar with optional Cancel icon

Contextual Filter

The icon is mandatory and represents the current filter criterion.

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

Contextual filter with filter icon

Behavior and Interaction

Bar Area

When the user clicks or taps 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 info bar with a single filter shows the detailed filter selection.

Clicking the info bar with multiple filters shows the filter categories.

Icon Area

Cancel: The user clicks or taps 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.

Properties

The contextual filter is not a separate control. If you want to build an info bar, you need to use the sap.m.toolbar control. To achieve the info bar 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

Select Dialog (guidelines)
Contextual Filter (guidelines)
Toolbar (guidelines)
View Settings Dialog (guidelines)

Implementation

No links

Visual Filter Bar

The visual filter bar offers a unique way of filtering large data sets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.

Visual filter bar - Size L

Usage

Use the visual filter bar if:

You are using analytical list page floorplan.
Users need to see both the result and the direct impact of their filter settings in a chart representation.
You would like to give users a condensed overview of the data in the dataset.

Do not use the visual filter bar if:

You are not using the analytical list page floorplan.
Users are not interested in seeing the impact or their filter settings directly in a chart representation.
Users are not interested in a condensed overview of the data in the dataset.

Responsiveness and Adaptiveness

The visual filter bar itself is fully responsive. For overall responsiveness within the analytical list page, see the Analytical List Page article.

Layout

Collapsed Visual Filter Bar

The collapsed visual filter bar takes up less space, leaving most of the screen for displaying the actual results. However, the variant selector in the upper left corner is still available for switching between variants. The user can expand or collapse the filter bar by clicking on the header. If required by the use case, you can expand the filter bar by default.

Visual filter bar - Collapsed

On desktop and tablet devices, the collapsed filter bar shows a summary of the filters currently applied. The format of the summary text is:

Filtered By (number of filters): <comma-separated list of the filters currently applied>
Example: Filtered By (2): Country/Region, Product

Up to 5 filters are listed. If more filters have been applied, an ellipsis (…) appears at the end of the string. If no filters have been applied, the summary text is Not Filtered.

Expanded Visual Filter Bar

Visual filter bar - Expanded

Structure

In order to achieve filtering through visualization, the visual filter bar uses interactive charts. Currently, three interactive chart types are available: bar chart, line chart, and donut chart. Each chart has a dedicated area for the chart title, the (x) link showing the number of applied filters, and the value help icon . When the user clicks on the (x) link, a popover containing the selected filter values appears. The value help icon opens a value help dialog.

Visual filter bar with interactive charts

Filter Title Area

In addition to the chart title, the filter title area also contains a value help icon and the (x) link, where “x” stands for the number of applied filters. Clicking this link opens a popover with the selected filter values.

Use the following naming convention for the filter title, using title case: <Measure Name> by <Dimension Name> in <Scale Factor> <Unit of Measure>. For example, Project Costs by Project in K EUR, Sales Volume by Commodity in M PC.

Visual filter bar - Title area

Visual filter bar - Filter title

Bar Chart

Visual filter bar - Interactive bar chart

Line Chart

Do not use a line chart to show categories. Instead, use a bar chart.

Visual filter bar - Interactive line chart

Donut Chart

The interactive donut chart is best used to display up to three slices. Use this chart if the exact value of each slice is not needed for filtering.

In the visual filter bar, only the top or bottom two values are shown; the rest are aggregated into the Other section.

Visual filter bar - Interactive donut chart

Visual Filter Selections

Any data point or segment selected in a chart remains selected when the user changes the measure, chart type, or sort order in any of the charts.

If a selected record falls outside the top or bottom three records being displayed, the (x) status above the chart shows the number of selected records.

Visual fiter bar - Popover with selected values

Developer Hint

Don't

Don't use a relative format for time

Use titles that give context

Add the year in the title if you display only 4 quarters

Visual Filter Dialog

In this dialog, the user can make the following changes:

Add visual filters
Delete visual filters
Hide visual filters in the visual filter bar
Search for visual filters
Change the sort order of each visual filter
Change the chart type of each visual filter
Switch to other measures in the visual filter display

The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified filter set variant. Save and Save As can be provided.
Cancel: Closes the dialog and undoes all changes.
Restore: Restores the initial variant values. You can hide this button if it does not fit the app use case.
Go: Applies the selected filter set.
Clear (optional): Clears all filters. Only use this button if it fits the app use case.

Visual filter dialog

Visual Filter Configuration

In the filter dialog, users can configure individual visual filters using the icons in the filter title area:

Change the sort order (not supported for line charts)
Switch to a different chart type
Choose between different measures

Visual filter configuration - Sort, chart type, measure

Behavior and Interaction

Selecting Filters

In the visual filter, you can make a selection by clicking on a chart value. To deselect it, you can either click on the same value in the chart again, or click the (x) link showing the number of selected filters, such as (1).

Selecting a Filter Value in an Interactive Chart

Any data point selected in a chart remains selected, even if the user selects a data point in another chart. Filter values also react to each other.

If a selected record in a chart falls outside the displayed filter values, the selection is visible in the (x) link above the chart, where (x) represents the number of selected records.

Users can select more filter values with the value help.

Selecting a Filter Value Using the Value Help

Personalizing the Visual Filter Bar

Add Visual Filter

If all filters in a group have already been added in the visual filter dialog, the More (x) link label in the filter group title switches to Change Filters.

Hide Visual Filter

Guidelines

Live Update / Manual Update

The visual filter bar is available in two modes: live update and manual update. In both modes the visual filter charts refresh based on the selection.

Live Update

Visual filter bar - Live update mode

Manual Update

In manual update mode, the filter results are only updated when the user clicks or taps the Go button that is shown in manual mode. Pressing ENTER on the keyboard also triggers the filter.

Visual filter bar - Manual update mode

Recommendation

Chart Types

In the visual filter bar, you can choose between three interactive charts: bar chart, line chart, and donut chart.

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

Analytical List Page (guidelines)
Interactive Chart (guidelines)
Interactive Bar Chart (guidelines)
Interactive Donut Chart (guidelines)
Interactive Line Chart (guidelines)
Value Help Dialog (guidelines)
Filter Bar / Smart Filter Bar (guidelines)
Dynamic Page (guidelines)

Implementation

Development System (snapshot)
Sales Order Analysis (SAP Fiori reference app)

Variant Management

Variants store view settings, such as filter settings or control parameters.

The filter settings consist of filter parameters, selection fields, and the layout of filters. They are set within the filter bar.

Control parameters are the sort order, filter and group settings, column visibility, and the layout of a table or chart. They are set within the toolbar of the control.

The variant management control enables the user to load, save, change, and maintain variants.

Information

Note on terminology:

Usage

Use the variant management control if:

The user needs to save and load different filter settings to find the relevant data.
The user needs to save and load different layouts (for example, a table) to display data in different views.
The user needs to save the settings for the whole page, including the filter settings and table layout.

Responsiveness

Size S (Smartphone)

On phones, the My Views dialog for selecting variants, the Manage Views dialog, and the Save View dialog open in full screen mode.

My Views

Manage Views

Save View

Size M (Tablet)

My Views

Manage Views

Save View

Size L (Desktop)

My Views

Manage Views

Save View

Components

Variant management come with several components:

A clickable title with an icon
The My Views dialog for selecting variants
The Manage Views dialog for setting view parameters and deleting views
The Save View dialog for creating a new view

Name of View

The view name is the entry point for opening the My Views, Manage Views, and Save View dialogs.

Selecting a view

My Views Dialog

Default View

Pre-Shipped Standard Views

Favorite Views

Users can mark views as favorites (or unfavorite them) in the Manage Views dialog. If more than 10 favorite views exist, a search option is displayed.

The user can also mark public views as favourites.

Public Views

A public view can be edited by the user who created it and by key users. All other users can only display the public view.

Actions in the My Views Dialog

'My Views' dialog with a few views

'My Views' dialog with more than 10 views and a search option

Manage Views Dialog

In the Manage Views dialog, users can make the following changes:

Mark a view as a favorite
Change the name of a self-created view
Set a view as the default
Apply the view automatically
View the Sharing and Created By information of each view
Delete a self-created view

'Manage Views' dialog

Save View Dialog

The Save View dialog is for creating a new view. For each view, you can make the following settings:

View: Name of the new view (required field)
Set as Default: If checked, the new view is the new default view.
Public: If checked, the new view is available to everyone who has access to the app.
Apply Automatically: If checked, the view is applied immediately whenever it is selected. The user does not need to click the Go button in the filter bar.
We do not recommend checking this option if the selection is likely to cause long loading times.

'Save View' dialog

Layout

The variant management control is merged with the page title (or next to or merged with title of the respective control, such as a table).

Filter Bar (Page Title)

The variant management control is merged with the page title within the page header container, and saves the stored filter settings or both the filter and control settings.

Variant management within the filter bar, merged with the page title

Table

The variant management control can also store control settings like layout, table column visibility, sorting, or grouping independently of the filter settings.

It is either merged with the control title or placed next to it.

If you place the title or variant management control inside a toolbar, apply the following styles:

Set the toolbar height to 3 rem.
Use a transparent toolbar.
Use the title class “sapMH4Fontsize”.

Variant management within the table toolbar

If the table has a separate title, place the title first.

Variant management with table title

Behavior and Interaction

This control allows the user to select, create, update, and delete variants for filter settings and control parameters such as layout, table column visibility, sorting and grouping.

My Views dialog: Selecting a View

Save

Save can only be applied to variants that the user is allowed to save. Otherwise, this button is disabled. Save overwrites the active variant.

Save As

Save As enables the user to save the current filter settings as a new view. The Save As function can also be used to duplicate existing variants for later modification.

Manage

Manage opens the Manage Views dialog that allows the user to update, delete or favorite/unfavorite existing variants.

Selecting a view

Save View dialog

The Save View dialog is for creating new views. Providing a name for the new view is mandatory. Clicking OK saves the new view.

Save View

Manage Views dialog

In the Manage Views dialog, the user can rename, delete, and change properties of existing views.

Users can only modify or delete entries if they have the necessary permissions. By default, variants that a user has created can also be modified and deleted.

Manage Views

Save as Tile

The user can save the currently selected variant as a tile on the launchpad using the Save as Tile action in the Share menu.

In the Save as Tile dialog, the user can define the tile title and subtitle, a description, and the launchpad group in which the tile should appear.

Save as tile via 'Share' button

'Save as Tile' dialog

Guidelines

Save as Tile

Exception: If the variant cannot be referenced directly due to technical limitations, offer the standard tile creation option where filter parameters and settings are only saved within the URL.

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

Responsive Table (guidelines)
Table Toolbar (guidelines)
Filter Bar (guidelines)

Implementation

Variant Management (SAPUI5 samples)
Variant Management (SAPUI5 API reference)

Icon Tab Bar

The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.

There are two key use cases:

You want to let users navigate between different object facets in the object details area.
You want to let users filter lists, and give them the option of calling up the entire list, or only items with a specific attribute.

In both cases, the user switches between tab pages by clicking or tapping the respective tab.

Usage

Use the icon tab bar if:

Your business objects need to show multiple facets at the same time.
You want to allow the user to browse through these facets.
You need a prominent or very visual filter on top of a list.
You have clear-cut process steps that need to be visualized.

Do not use the icon tab bar if:

You plan to use only one single tab.

Responsiveness

The icon tab bar stretches horizontally, and soon runs out of space on small screens. It responds to limited space by offering a scrolling mechanism.

Responsiveness – Icon tabs

Responsiveness – Text tabs

Layout

The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from. These are described in detail below.

Types

You can use the icon tab bar control to build the following types of tab bars:

Text only
Icon tabs
Tabs as filters
Tabs as process steps

Text Only

The text-only variant is one of the most common types. It allows longer labels, and can also display counters next to the text to indicate the number of items on the tab page.

If you use text-only tabs, make sure that the UpperCase property is disabled and that you enter the labels in title case (for example: Approval Flow).

Types – Text-only without counters

Types – Text-only with inline counters

Counters and Text Tabs

If counters are used, set the property HeaderMode to “Inline” so the counters appear in brackets after the labels.

Do not use the old layout that shows the counters on top of the labels (Headermode = “Standard”).

Counters – Inline layout ('HeaderMode' set to 'Inline')

Don't

Counters – Old layout ('HeaderMode' set to 'Standard')

Icon Tabs

Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.

Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.

Types – Icons with counters

Please note that starting with SAPUI5 version 1.40, you should only use the horizontal type of label (icon and label side by side).

If your labels get truncated, consider using shorter labels or text tabs (without icons), since text tabs cannot get truncated.

Types – Icons with counters and labels

Types – Icon-only

Tabs as Filters

If you build the tab bar as a filter, it can comprise two parts:

An “all” tab on the left (optional)
This tab shows the total number of items, and describes the type of item (for example, 189 Products).
Tabs for specific filters
Use the tab text to indicate the filter attribute.
We strongly recommend showing a counter on every tab.

Types – Filter

Tabs as Process Steps

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

To connect the steps, use the triple-chevron icon () from the SAP icon font (technical name: process).

Types – Process

Developer Hint

Test whether your labels and their translations are displayed in full, and do not get truncated.

Behavior and Interaction

Clicking/Tapping on a Tab

To navigate through the views, the user clicks or taps the tabs.

Optional behavior: If the user clicks or taps a tab that’s already open, the container collapses. It opens again when the user clicks any tab.

Use the expandable property to specify whether users can collapse the tab container (default = “true”):

Let users collapse the container if there is additional content below the container, and the information inside the container is not always needed.
If there is no content below the tab container, set the expandable property to “false”.

The expandable property controls the initial state of the container. Do not change the default state (“true”).

Changing the Order of Tabs

Please note that this feature is not available for tabs as process steps to ensure that consecutive steps do not get mixed up.

Interaction – Rearranging tabs

Interaction – Rearranging tabs in the overflow menu

Interaction – Rearranging tabs between bar and overflow menu

Styles

Tab Density

Save vertical space on the page (applies to both text and icon tabs)
Save horizontal space (icon tabs only; this is especially helpful when there are many tabs)
Generally use less space on mobile devices
Reduce noise when there are already more important visual elements on the screen (primarily icon tabs)

The following image shows some types of tabs with their default style (cozy, left) and the reduced density mode (compact, right).

Style – Tab density

Colors

The two different styles (round tabs and text only) are discussed in the Types section. In both cases, you can use semantic colors to give users additional orientation.

Developer Hint

To apply semantic colors to the icons and the text-only tabs, you can use the property for sap.ui.core.IconColor.

Example

Styles – Colors

Guidelines

Apply the styles as follows:

If you have only a few tabs that can easily be visualized with icons, use the icon-only tabs. If a short description is needed, use icons and labels.
If the content cannot easily be identified by an icon, use the text-only tabs. They also allow for longer labels.
If you are using the icon tab bar in the object view floorplan, use either icon-only or text-only tabs.
Icons only:
Use this option if you have only 4-5 tabs that can be very clearly identified by their icon.
Text only:
Use this option if you have more than 4-5 tabs, or if there are no clear icons to represent the content. Set the property HeaderMode to “Inline”.

Counters – Inline layout ('HeaderMode' set to 'Inline')

Don't

Counters – Old layout ('HeaderMode' set to 'Standard')

If you use icon tabs, ensure the following:

The icons clearly identify the content on the tab pages.
Each tab has a unique icon. Do not use the same icon more than once.
The icons are easily distinguishable.
Any icons between tabs (for example, as separators or connectors) are visually very different from the icons on the tabs.
Either all or none of the icons have labels.

Implement the focus as follows:

By default, show the first tab as open. This is the initial setting provided by the control.
Note: Technically, you can also override the initial selection. However, this is not recommended.
Later on, you can show the tab last selected by the user.

Additional guidelines:

Do not display a loading indicator above the tab while the number for the item count is loading.
Handle empty tabs as follows:
- Hide tabs that do not contain any information, and do not allow the user to create content..
- Show empty tabs that allow users to create content, such as notes or attachments.
Only use the tab bars to navigate between tabs. Do not use any other navigation links. For example, do not let users click an item in tab A that takes them to tab B. This type of cross-navigation inside a container is confusing, and cannot be handled by the back navigation.

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

How To Use Semantic Colors

Implementation

Icon Tab Bar (SAPUI5 samples)
Icon Tab Bar (SAPUI5 API reference)

Filter Bar

Filter bar within the dynamic page

Information

Responsiveness

Size S (Smartphones)

Expanded filter bar (size S)

Collapsed filter bar (size S)

Filter dialog (size S)

Size M (Tablet)

Expanded filter bar (size M)

Collapsed filter bar (size M)

Filter dialog (size M)

Size L/XL (Desktops)

Expanded filter bar (size L/XL)

Collapsed filter bar (size L/XL)

Filter dialog (size L/XL)

Layout

Filter Dialog

The vertical layout of the filter dialog remains stable across all devices. To ensure a clean grid layout appearance, the size of the widest input field is inherited by all other filters.

Filter dialog (size L)

Filter dialog (size S)

Expanded Filter Bar

Filter bar (size L) with one row of filters

Filter Bar (Size L) with more than one row of filters

Filter bar (size S) with vertical filters

Components

Collapsed Filter Bar

The collapsed filter bar takes up very little space, leaving the bulk of the screen to display the actual results. However, the variant selector in the upper left corner is still available for switching between variants. The user can expand or collapse the filter bar by clicking on the header. If required by the use case, the filter bar can be expanded by default.

Collapsed filter bar

Expanded Filter Bar

Developer Hint

Smart filter bar: See the parameters for configuring the expanded filter bar.

In addition to the collapsed filter bar, the expanded filter bar shows a user-defined filter subset of the currently selected variant.

The Adapt Filters (x) link opens the filter dialog, and allows the user to add filters or hide them. The Go button triggers the filter. The Go button is only shown in manual mode.

Expanded filter bar

Filter Dialog

Developer Hint

Smart filter bar: See the parameters for configuring the filter dialog.

The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified variant filter set (Save and Save As can be provided)
Cancel: Closes the dialog and undoes all changes
Restore: Restores the initial variant values (you can hide this button if it does not fit the app’s use case)
Go: Executes the selected filter set
Clear (optional): Clears all input fields/filters (this button should only be used if it fits the app’s use case)

Filter dialog

Variant Selector

The variant selector is used to select the current variant, and also provides access to variant management.

Variant selector

Filter/Input Controls

Developer Hint

For development information, see data types for the smart filter bar.

Filter/input controls

Additionally recommended input fields:

Behavior and Interaction

The filter bar contains the following actions:

Selecting a Variant

Personalizing the Expanded Filter Bar

Adding Filters to a Variant

Saving a New Variant

You can save new filter variants either in the variant selector or in the filter dialog.

Once you have changed an existing variant, an asterisk (*) is displayed next to the current variant name, indicating its “dirty state”.

You can either save the adapted variant with the current name (overwrite), or save it under a new name.

Option 1 – Variant Selector

Open the variant selector and choose Save As. Type your desired variant name into the input field and select OK.

Save new variant in variant selector

Option 2 – Filter Dialog

Choose Adapt Filters to open the filter dialog. Choose Save from the footer toolbar and type your desired variant name into the input field. Select OK.

Save new variant in filter dialog

Guidelines

Default Variant Filters

For all filter bars, provide a set of predefined default filters that come with the app (“Basic” group in the filter dialog). Include filters that are:

Mandatory / crucial to the use case
Frequently used
Vital for reducing the number of items in the list

Users can hide filters in the “Basic” group, but cannot remove them from the filter dialog.

Default variant "Basic"

Default Values

Provide a meaningful default value for as many filters as possible. Meaningful default values depend on your use case.

A default value for date ranges, for example, should reflect the time frame the user would normally apply. App designers need to decide which time frame is appropriate.

Filter without default value

Filter with available values

Filter with a default value

Table Filtering and Table Searching

Table without filtering option

Don't

Table with filtering option

Initial State

The filter bar can initially be collapsed or expanded, depending on the use case:

Initial State Collapsed

If the app has a default variant that is executed on loading, the table is prefilled, and the user seldom changes the filters, the app can start with a collapsed filter bar.

Initial State Expanded

If the app does not use a default variant and the user has to set a filter to obtain a first result set for the table, start with an expanded filter bar. Also, if a vast number of items are expected, include some mandatory filters. Since the user first has to enter values for these filters, start with an expanded filter bar. If you are in any doubt, start the app with an expanded filter bar.

Initial state collapsed

Initial state expanded

Basic Search Field

The basic search field allows the user to filter the results by a given keyword. In contrast to the other input fields, the basic search field has a placeholder text instead of a label.

Note: If you need to provide a search field, use the basic search field. The search field within the table must be deactivated.

Filter bar with basic search field

Manual Update / Live Update

The filter bar is available in two separate modes: manual update mode and live update mode.

Manual Update

With manual update, the filter results are only updated when the user clicks or taps Go. A Go button is therefore mandatory in manual update mode. Pressing enter on the keyboard also triggers the filter.

Live Update

With live update mode, the filter bar reacts instantly to every input change. The result table is updated every time the user changes a filter field or the search field. Therefore, a Go button is not necessary and is not shown if live update mode is used.

Additionally, the search is triggered with every letter that is entered. Starting with the first letter typed in, the table is updated with the results that match all set filters that include the search term.

Which One to Use

Use live update mode by default as it is more convenient for the user. If the user has to configure multiple filters to obtain a useful result set, or if the resulting traffic is expected to be excessively high, consider using manual update mode instead.

Filter bar in manual update mode

Filter bar in live update mode

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

Variant Management (guidelines)
Smart Filter Bar Annotations (guidelines)

Implementation

Filter Bar (SAPUI5 samples)
Smart Filter Bar (SAPUI5 samples)
Filter Bar (SAPUI5 API reference)
Smart Filter Bar (SAPUI5 API reference)
Variant Management Example (SAPUI5 samples)
Variant Management Example (SAPUI5 API reference)
Filter Item (SAPUI5 API reference)
Filter Group Item (SAPUI5 API reference)

Variant Management

Variants store view settings, such as filter settings or control parameters.

The filter settings consist of filter parameters, selection fields, and the layout of filters. They are set within the filter bar.

Control parameters are the sort order, filter and group settings, column visibility, and the layout of a table or chart. They are set within the toolbar of the control.

The variant management control enables the user to load, save, change, and maintain variants.

Information

Note on terminology:

Usage

Use the variant management control if:

The user needs to save and load different filter settings to find the relevant data.
The user needs to save and load different layouts (for example, a table) to display data in different views.
The user needs to save the settings for the whole page, including the filter settings and table layout.

Responsiveness

Size S (Smartphone)

On phones, the My Views dialog for selecting variants, the Manage Views dialog, and the Save View dialog open in full screen mode.

My Views

Manage Views

Save View

Size M (Tablet)

My Views

Manage Views

Save View

Size L (Desktop)

My Views

Manage Views

Save View

Components

Variant management come with several components:

A clickable title with an icon
The My Views dialog for selecting variants
The Manage Views dialog for setting view parameters and deleting views
The Save View dialog for creating a new view

Name of View

The view name is the entry point for opening the My Views, Manage Views, and Save View dialogs.

Selecting a view

My Views Dialog

Default View

Pre-Shipped Standard Views

Favorite Views

Users can mark views as favorites (or unfavorite them) in the Manage Views dialog. If more than 10 favorite views exist, a search option is displayed.

The user can also mark public views as favourites.

Public Views

A public view can be edited by the user who created it and by key users. All other users can only display the public view.

Actions in the My Views Dialog

'My Views' dialog with a few views

'My Views' dialog with more than 10 views and a search option

Manage Views Dialog

In the Manage Views dialog, users can make the following changes:

Mark a view as a favorite
Change the name of a self-created view
Set a view as the default
Apply the view automatically
View the Sharing and Created By information of each view
Delete a self-created view

'Manage Views' dialog

Save View Dialog

The Save View dialog is for creating a new view. For each view, you can make the following settings:

View: Name of the new view (required field)
Set as Default: If checked, the new view is the new default view.
Public: If checked, the new view is available to everyone who has access to the app.
Apply Automatically: If checked, the view is applied immediately whenever it is selected. The user does not need to click the Go button in the filter bar.
We do not recommend checking this option if the selection is likely to cause long loading times.

'Save View' dialog

Layout

The variant management control is merged with the page title (or next to or merged with title of the respective control, such as a table).

Filter Bar (Page Title)

The variant management control is merged with the page title within the page header container, and saves the stored filter settings or both the filter and control settings.

Variant management within the filter bar, merged with the page title

Table

The variant management control can also store control settings like layout, table column visibility, sorting, or grouping independently of the filter settings.

It is either merged with the control title or placed next to it.

If you place the title or variant management control inside a toolbar, apply the following styles:

Set the toolbar height to 3 rem.
Use a transparent toolbar.
Use the title class “sapMH4Fontsize”.

Variant management within the table toolbar

If the table has a separate title, place the title first.

Variant management with table title

Behavior and Interaction

This control allows the user to select, create, update, and delete variants for filter settings and control parameters such as layout, table column visibility, sorting and grouping.

My Views dialog: Selecting a View

Save

Save can only be applied to variants that the user is allowed to save. Otherwise, this button is disabled. Save overwrites the active variant.

Save As

Save As enables the user to save the current filter settings as a new view. The Save As function can also be used to duplicate existing variants for later modification.

Manage

Manage opens the Manage Views dialog that allows the user to update, delete or favorite/unfavorite existing variants.

Selecting a view

Save View dialog

The Save View dialog is for creating new views. Providing a name for the new view is mandatory. Clicking or tapping OK saves the new view.

Save View

Manage Views dialog

In the Manage Views dialog, the user can rename, delete, and change properties of existing views.

Users can only modify or delete entries if they have the necessary permissions. By default, variants that a user has created can also be modified and deleted.

Manage Views

Save as Tile

The user can save the currently selected variant as a tile on the launchpad using the Save as Tile action in the Share menu.

In the Save as Tile dialog, the user can define the tile title and subtitle, a description, and the launchpad group in which the tile should appear.

Save as tile via 'Share' button

'Save as Tile' dialog

Guidelines

Save as Tile

Exception: If the variant cannot be referenced directly due to technical limitations, offer the standard tile creation option where filter parameters and settings are only saved within the URL.

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

Responsive Table (guidelines)
Table Toolbar (guidelines)
Filter Bar (guidelines)

Implementation

Variant Management (SAPUI5 samples)
Variant Management (SAPUI5 API reference)

Token

Usage

Use tokens only in the multi-combo box, multi-input control, or value help dialog.

Components

The tokenizer is an invisible container that can display multiple tokens.

Tokens have the following properties:

They usually contain single text items.
They may also contain key-value pairs, such as John Miller (ID1234567).
They contain a Remove icon , which is invisible if the token is in edit mode.

Tokens with a surrounding tokenizer

Behavior and Interaction

Interacting

Selecting and Deselecting Tokens

Users can select tokens by clicking them, or by using the keyboard. The selected tokens are then indicated. Users can select multiple tokens separately by holding down the CTRL key and selecting the relevant tokens, for example, by clicking them.

Adding Tokens

The user can add tokens to the multi-combo box and multi-input control. New tokens are added in the order in which they are entered.

Information

For information on how to manage leading and treading whitespace (blanks) when copying and pasting text into input controls, please see removing leading and trailing whitespace.

Removing Tokens

The user can instantly remove tokens via the keyboard, or by clicking the Remove icon .

Styles

There are five different styles of tokens: regular, on hover, selected, selected on hover and read-only. These styles correspond to the type of interaction being used.

Regular

On hover

Selected

Read only

Hover selected

Guidelines

The tokenizer can also be used as a tag container.

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

Multi-Combo Box (guidelines)
Multi-Input Field (guidelines)
Value Help Dialog (guidelines)
Combo Box (guidelines)

Implementation

Tokens (SAPUI5 samples)
Tokenizer (SAPUI5 samples)
Tokens (SAPUI5 API reference)
Tokenizer (SAPUI5 API reference)

Filter Bar

Filter bar within the dynamic page

Information

Responsiveness

Size S (Smartphones)

Expanded filter bar (size S)

Collapsed filter bar (size S)

Filter dialog (size S)

Size M (Tablet)

Expanded filter bar (size M)

Collapsed filter bar (size M)

Filter dialog (size M)

Size L/XL (Desktops)

Expanded filter bar (size L/XL)

Collapsed filter bar (size L/XL)

Filter dialog (size L/XL)

Layout

Filter Dialog

The vertical layout of the filter dialog remains stable across all devices. To ensure a clean grid layout appearance, the size of the widest input field is inherited by all other filters.

Filter dialog (size L)

Filter dialog (size S)

Expanded Filter Bar

Filter bar (size L) with one row of filters

Filter Bar (Size L) with more than one row of filters

Filter bar (size S) with vertical filters

Components

Collapsed Filter Bar

The collapsed filter bar takes up very little space, leaving the bulk of the screen to display the actual results. However, the variant selector in the upper left corner is still available for switching between variants. The user can expand or collapse the filter bar by clicking on the header. If required by the use case, the filter bar can be expanded by default.

Collapsed filter bar

Expanded Filter Bar

Developer Hint

Smart filter bar: See the parameters for configuring the expanded filter bar.

In addition to the collapsed filter bar, the expanded filter bar shows a user-defined filter subset of the currently selected variant.

The Adapt Filters (x) link opens the filter dialog, and allows the user to add filters or hide them. The Go button triggers the filter. The Go button is only shown in manual mode.

Expanded filter bar

Filter Dialog

Developer Hint

Smart filter bar: See the parameters for configuring the filter dialog.

The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified variant filter set (Save and Save As can be provided)
Cancel: Closes the dialog and undoes all changes
Restore: Restores the initial variant values (you can hide this button if it does not fit the app’s use case)
Go: Executes the selected filter set
Clear (optional): Clears all input fields/filters (this button should only be used if it fits the app’s use case)

Filter dialog

Variant Selector

The variant selector is used to select the current variant, and also provides access to variant management.

Variant selector

Filter/Input Controls

Developer Hint

For development information, see data types for the smart filter bar.

Filter/input controls

Additionally recommended input fields:

Behavior and Interaction

The filter bar contains the following actions:

Selecting a Variant

Adding Filters to a Variant

Personalizing the Expanded Filter Bar

Guidelines

Default Variant Filters

For all filter bars, provide a set of predefined default filters that come with the app (“Basic” group in the filter dialog). Include filters that are:

Mandatory / crucial to the use case
Frequently used
Vital for reducing the number of items in the list

Users can hide filters in the “Basic” group, but cannot remove them from the filter dialog.

Default variant "Basic"

Default Values

Provide a meaningful default value for as many filters as possible. Meaningful default values depend on your use case.

A default value for date ranges, for example, should reflect the time frame the user would normally apply. App designers need to decide which time frame is appropriate.

Filter without default value

Filter with available values

Filter with a default value

Table Filtering and Table Searching

Table without filtering option

Don't

Table with filtering option

Initial State

The filter bar can initially be collapsed or expanded, depending on the use case:

Initial State Collapsed

If the app has a default variant that is executed on loading, the table is prefilled, and the user seldom changes the filters, the app can start with a collapsed filter bar.

Initial State Expanded

If the app does not use a default variant and the user has to set a filter to obtain a first result set for the table, start with an expanded filter bar. Also, if a vast number of items are expected, include some mandatory filters. Since the user first has to enter values for these filters, start with an expanded filter bar. If you are in any doubt, start the app with an expanded filter bar.

Initial state collapsed

Initial state expanded

Basic Search Field

The basic search field allows the user to filter the results by a given keyword. In contrast to the other input fields, the basic search field has a placeholder text instead of a label.

Note: If you need to provide a search field, use the basic search field. The search field within the table must be deactivated.

Filter bar with basic search field

Manual Update / Live Update

The filter bar is available in two separate modes: manual update mode and live update mode.

Manual Update

Live Update

Which One to Use

Filter bar in manual update mode

Filter bar in live update mode

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

Variant Management (guidelines)
Smart Filter Bar Annotations (guidelines)

Implementation

Filter Bar (SAPUI5 samples)
Smart Filter Bar (SAPUI5 samples)
Filter Bar (SAPUI5 API reference)
Smart Filter Bar (SAPUI5 API reference)
Variant Management Example (SAPUI5 samples)
Variant Management Example (SAPUI5 API reference)
Filter Item (SAPUI5 API reference)
Filter Group Item (SAPUI5 API reference)

Icon Tab Bar

The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.

There are two key use cases:

You want to let users navigate between different object facets in the object details area.
You want to let users filter lists, and give them the option of calling up the entire list, or only items with a specific attribute.

In both cases, the user switches between tab pages by clicking or tapping the respective tab.

Usage

Use the icon tab bar if:

Your business objects need to show multiple facets at the same time.
You want to allow the user to browse through these facets.
You need a prominent or very visual filter on top of a list.
You have clear-cut process steps that need to be visualized.

Do not use the icon tab bar if:

You plan to use only one single tab.

Responsiveness

The icon tab bar stretches horizontally, and soon runs out of space on small screens. It responds to limited space by offering a scrolling mechanism.

Responsiveness – Icon tabs

Responsiveness – Text tabs

Layout

The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from. These are described in detail below.

Types

You can use the icon tab bar control to build the following types of tab bars:

Text only
Icon tabs
Tabs as filters
Tabs as process steps

Text Only

The text-only variant is one of the most common types. It allows longer labels, and can also display counters next to the text to indicate the number of items on the tab page.

If you use text-only tabs, make sure that the UpperCase property is disabled and that you enter the labels in title case (for example: Approval Flow).

Types – Text-only without counters

Types – Text-only with inline counters

Counters and Text Tabs

If counters are used, set the property HeaderMode to “Inline” so the counters appear in brackets after the labels.

Do not use the old layout that shows the counters on top of the labels (Headermode = “Standard”).

Counters – Inline layout ('HeaderMode' set to 'Inline')

Don't

Counters – Old layout ('HeaderMode' set to 'Standard')

Icon Tabs

Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.

Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.

Types – Icons with counters

Please note that starting with SAPUI5 version 1.40, you should only use the horizontal type of label (icon and label side by side).

If your labels get truncated, consider using shorter labels or text tabs (without icons), since text tabs cannot get truncated.

Types – Icons with counters and labels

Types – Icon-only

Tabs as Filters

If you build the tab bar as a filter, it can comprise two parts:

An “all” tab on the left (optional)
This tab shows the total number of items, and describes the type of item (for example, 189 Products).
Tabs for specific filters
Use the tab text to indicate the filter attribute.
We strongly recommend showing a counter on every tab.

Types – Filter

Tabs as Process Steps

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

To connect the steps, use the triple-chevron icon () from the SAP icon font (technical name: process).

Types – Process

Developer Hint

Test whether your labels and their translations are displayed in full, and do not get truncated.

Behavior and Interaction

Clicking/Tapping on a Tab

To navigate through the views, the user clicks or taps the tabs.

Optional behavior: If the user clicks or taps a tab that’s already open, the container collapses. It opens again when the user clicks any tab.

Use the expandable property to specify whether users can collapse the tab container (default = “true”):

Let users collapse the container if there is additional content below the container, and the information inside the container is not always needed.
If there is no content below the tab container, set the expandable property to “false”.

The expandable property controls the initial state of the container. Do not change the default state (“true”).

Changing the Order of Tabs

Please note that this feature is not available for tabs as process steps to ensure that consecutive steps do not get mixed up.

Interaction – Rearranging tabs

Interaction – Rearranging tabs in the overflow menu

Interaction – Rearranging tabs between bar and overflow menu

Styles

Tab Density

Save vertical space on the page (applies to both text and icon tabs)
Save horizontal space (icon tabs only; this is especially helpful when there are many tabs)
Generally use less space on mobile devices
Reduce noise when there are already more important visual elements on the screen (primarily icon tabs)

The following image shows some types of tabs with their default style (cozy, left) and the reduced density mode (compact, right).

Style – Tab density

Colors

The two different styles (round tabs and text only) are discussed in the Types section.

In both cases, you can use colors to give users additional orientation.

Information

Do not use colors for decoration only. Colors should always indicate a status that is relevant to the user.

When using colors, stick to the semantic colors provided by visual design. Do not hard-code color values. Instead, use the CSS extension “Less”.

This example shows a process where one step is indicating an error. Since the other tabs have neutral colors, it is clear that they do not contain errors. Coloring them green to show that they are OK is unnecessary, and would reduce the severity of the red tab.

Styles – Colors

Guidelines

Apply the styles as follows:

If you have only a few tabs that can easily be visualized with icons, use the icon-only tabs. If a short description is needed, use icons and labels.
If the content cannot easily be identified by an icon, use the text-only tabs. They also allow for longer labels.
If you are using the icon tab bar in the object view floorplan, use either icon-only or text-only tabs.
Icons only:
Use this option if you have only 4-5 tabs that can be very clearly identified by their icon.
Text only:
Use this option if you have more than 4-5 tabs, or if there are no clear icons to represent the content. Set the property HeaderMode to “Inline”.

Counters – Inline layout ('HeaderMode' set to 'Inline')

Don't

Counters – Old layout ('HeaderMode' set to 'Standard')

If you use icon tabs, ensure the following:

The icons clearly identify the content on the tab pages.
Each tab has a unique icon. Do not use the same icon more than once.
The icons are easily distinguishable.
Any icons between tabs (for example, as separators or connectors) are visually very different from the icons on the tabs.
Either all or none of the icons have labels.

Implement the focus as follows:

By default, show the first tab as open. This is the initial setting provided by the control.
Note: Technically, you can also override the initial selection. However, this is not recommended.
Later on, you can show the tab last selected by the user.

Additional guidelines:

Do not display a loading indicator above the tab while the number for the item count is loading.
Handle empty tabs as follows:
- Hide tabs that do not contain any information, and do not allow the user to create content..
- Show empty tabs that allow users to create content, such as notes or attachments.
Only use the tab bars to navigate between tabs. Do not use any other navigation links. For example, do not let users click an item in tab A that takes them to tab B. This type of cross-navigation inside a container is confusing, and cannot be handled by the back navigation.

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

No links

Implementation

Icon Tab Bar (SAPUI5 samples)
Icon Tab Bar (SAPUI5 API reference)

Visual Filter Bar

The visual filter bar offers a unique way of filtering large data sets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.

Visual filter bar - Size L

Usage

Use the visual filter bar if:

You are using analytical list page floorplan.
Users need to see both the result and the direct impact of their filter settings in a chart representation.
You would like to give users a condensed overview of the data in the dataset.

Do not use the visual filter bar if:

You are not using the analytical list page floorplan.
Users are not interested in seeing the impact or their filter settings directly in a chart representation.
Users are not interested in a condensed overview of the data in the dataset.

Responsiveness and Adaptiveness

The visual filter bar itself is fully responsive. For overall responsiveness within the analytical list page, see the Analytical List Page article.

Layout

Collapsed Visual Filter Bar

The collapsed visual filter bar takes up less space, leaving most of the screen for displaying the actual results. However, the variant selector in the upper left corner is still available for switching between variants. The user can expand or collapse the filter bar by clicking on the header. If required by the use case, you can expand the filter bar by default.

Visual filter bar - Collapsed

On desktop and tablet devices, the collapsed filter bar shows a summary of the filters currently applied. The format of the summary text is:

Filtered By (number of filters): <comma-separated list of the filters currently applied>
Example: Filtered By (2): Country, Product

Up to 5 filters are listed. If more filters have been applied, an ellipsis (…) appears at the end of the string. If no filters have been applied, the summary text is Not Filtered.

Expanded Visual Filter Bar

Visual filter bar - Expanded

Structure

In order to achieve filtering through visualization, the visual filter bar uses interactive charts. Currently, three interactive chart types are available: bar chart, line chart, and donut chart. Each chart has a dedicated area for the chart title, the (x) link showing the number of applied filters, and the value help icon . When the user clicks on the (x) link, a popover containing the selected filter values appears. The value help icon opens a value help dialog.

Visual filter bar with interactive charts

Filter Title Area

Visual filter bar - Title area

Visual filter bar - Filter title

Bar Chart

Visual filter bar - Interactive bar chart

Line Chart

Do not use a line chart to show categories. Instead, use a bar chart.

Visual filter bar - Interactive line chart

Donut Chart

The interactive donut chart is best used to display up to three slices. Use this chart if the exact value of each slice is not needed for filtering.

In the visual filter bar, only the top or bottom two values are shown; the rest are aggregated into the Other section.

Visual filter bar - Interactive donut chart

Visual Filter Selections

Any data point or segment selected in a chart remains selected when the user changes the measure, chart type, or sort order in any of the charts.

If a selected record falls outside the top or bottom three records being displayed, the (x) status above the chart shows the number of selected records.

Visual fiter bar - Popover with selected values

Developer Hint

Don't

Don't use a relative format for time

Use titles that give context

Add the year in the title if you display only 4 quarters

Visual Filter Dialog

In this dialog, the user can make the following changes:

Add visual filters
Delete visual filters
Hide visual filters in the visual filter bar
Search for visual filters
Change the sort order of each visual filter
Change the chart type of each visual filter
Switch to other measures in the visual filter display

The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified filter set variant. Save and Save As can be provided.
Cancel: Closes the dialog and undoes all changes.
Restore: Restores the initial variant values. You can hide this button if it does not fit the app use case.
Go: Applies the selected filter set.
Clear (optional): Clears all filters. Only use this button if it fits the app use case.

Visual filter dialog

Visual Filter Configuration

In the filter dialog, users can configure individual visual filters using the icons in the filter title area:

Change the sort order (not supported for line charts)
Switch to a different chart type
Choose between different measures

Visual filter configuration - Sort, chart type, measure

Behavior and Interaction

Selecting Filters

Selecting a Filter Value in an Interactive Chart

Any data point selected in a chart remains selected, even if the user selects a data point in another chart. Filter values also react to each other.

If a selected record in a chart falls outside the displayed filter values, the selection is visible in the (x) link above the chart, where (x) represents the number of selected records.

Users can select more filter values with the value help.

Selecting a Filter Value Using the Value Help

Personalizing the Visual Filter Bar

Add Visual Filter

If all filters in a group have already been added in the visual filter dialog, the More (x) link label in the filter group title switches to Change Filters.

Hide Visual Filter

Guidelines

Live Update / Manual Update

The visual filter bar is available in two modes: live update and manual update. In both modes the visual filter charts refresh based on the selection.

Live Update

Visual filter bar - Live update mode

Manual Update

In manual update mode, the filter results are only updated when the user clicks or taps the Go button that is shown in manual mode. Pressing ENTER on the keyboard also triggers the filter.

Visual filter bar - Manual update mode

Recommendation

Chart Types

In the visual filter bar, you can choose between three interactive charts: bar chart, line chart, and donut chart.

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

Analytical List Page (guidelines)
Interactive Chart (guidelines)
Interactive Bar Chart (guidelines)
Interactive Donut Chart (guidelines)
Interactive Line Chart (guidelines)
Value Help Dialog (guidelines)
Filter Bar / Smart Filter Bar (guidelines)
Dynamic Page (guidelines)

Implementation

Development System (snapshot)
Sales Order Analysis (SAP Fiori reference app)

Variant Management

Variants store view settings, such as filter settings or control parameters.

The filter settings consist of filter parameters, selection fields, and the layout of filters. They are set within the filter bar.

Control parameters are the sort order, filter and group settings, column visibility, and the layout of a table or chart. They are set within the toolbar of the control.

The variant management control enables the user to load, save, change, and maintain variants.

Information

Note on terminology:

Usage

Use the variant management control if:

The user needs to save and load different filter settings to find the relevant data.
The user needs to save and load different layouts (for example, a table) to display data in different views.
The user needs to save the settings for the whole page, including the filter settings and table layout.

Responsiveness

Size S (Smartphone)

On phones, the My Views dialog for selecting variants, the Manage Views dialog, and the Save View dialog open in full screen mode.

My Views

Manage Views

Save View

Size M (Tablet)

My Views

Manage Views

Save View

Size L (Desktop)

My Views

Manage Views

Save View

Components

Variant management come with several components:

A clickable title with an icon
The My Views dialog for selecting variants
The Manage Views dialog for setting view parameters and deleting views
The Save View dialog for creating a new view

Name of View

The view name is the entry point for opening the My Views, Manage Views, and Save View dialogs.

Selecting a view

My Views Dialog

Default View

Pre-Shipped Standard Views

Favorite Views

Users can mark views as favorites (or unfavorite them) in the Manage Views dialog. If more than 10 favorite views exist, a search option is displayed.

The user can also mark public views as favourites.

Public Views

A public view can be edited by the user who created it and by key users. All other users can only display the public view.

Actions in the My Views Dialog

'My Views' dialog with a few views

'My Views' dialog with more than 10 views and a search option

Manage Views Dialog

In the Manage Views dialog, users can make the following changes:

Mark a view as a favorite
Change the name of a self-created view
Set a view as the default
Apply the view automatically
View the Sharing and Created By information of each view
Delete a self-created view

'Manage Views' dialog

Save View Dialog

The Save View dialog is for creating a new view. For each view, you can make the following settings:

View: Name of the new view (required field)
Set as Default: If checked, the new view is the new default view.
Public: If checked, the new view is available to everyone who has access to the app.
Apply Automatically: If checked, the view is applied immediately whenever it is selected. The user does not need to click or tap the Go button in the filter bar. This option is typically used if small adjustments need to be made to the filters before the user finally executes the search, or if the selection is likely to cause long loading times.

'Save View' dialog

Layout

The variant management control is merged with the page title (or next to or merged with title of the respective control, such as a table).

Filter Bar (Page Title)

The variant management control is merged with the page title within the page header container, and saves the stored filter settings or both the filter and control settings.

Variant management within the filter bar, merged with the page title

Table

The variant management control can also store control settings like layout, table column visibility, sorting, or grouping independently of the filter settings.

It is either merged with the control title or placed next to it.

If you place the title or variant management control inside a toolbar, apply the following styles:

Set the toolbar height to 3 rem.
Use a transparent toolbar.
Use the title class “sapMH4Fontsize”.

Variant management within the table toolbar

If the table has a separate title, place the title first.

Variant management with table title

Behavior and Interaction

This control allows the user to select, create, update, and delete variants for filter settings and control parameters such as layout, table column visibility, sorting and grouping.

My Views dialog: Selecting a View

Save

Save can only be applied to variants that the user is allowed to save. Otherwise, this button is disabled. Save overwrites the active variant.

Save As

Save As enables the user to save the current filter settings as a new view. The Save As function can also be used to duplicate existing variants for later modification.

Manage

Manage opens the Manage Views dialog that allows the user to update, delete or favorite/unfavorite existing variants.

Selecting a view

Save View dialog

The Save View dialog is for creating new views. Providing a name for the new view is mandatory. Clicking or tapping OK saves the new view.

Save View

Manage Views dialog

In the Manage Views dialog, the user can rename, delete, and change properties of existing views.

Users can only modify or delete entries if they have the necessary permissions. By default, variants that a user has created can also be modified and deleted.

Manage Views

Save as Tile

The user can save the currently selected variant as a tile on the launchpad using the Save as Tile action in the Share menu.

In the Save as Tile dialog, the user can define the tile title and subtitle, a description, and the launchpad group in which the tile should appear.

Save as tile via 'Share' button

'Save as Tile' dialog

Guidelines

Save as Tile

If the variant has been modified but not yet saved (“dirty state”), ensure that the variant is saved before the tile is created.

Exception: If the variant cannot be referenced directly due to technical limitations, offer the standard tile creation option where filter parameters and settings are only saved within the URL.

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

Responsive Table (guidelines)
Table Toolbar (guidelines)
Filter Bar (guidelines)

Implementation

Variant Management (SAPUI5 samples)
Variant Management (SAPUI5 API reference)

Contextual Filter

The contextual filter allows you to show a prefiltered view of a list, such as a master list.

Warning

Note that this filter prevents the regular filter (which is triggered from the filter bar or table toolbar) from displaying the filter criteria that are currently selected.

Usage

Use the contextual filter if:

You want to show the user a meaningful extract of an otherwise highly complex list.
Your app handles very large object lists, and you need to improve performance.

Do not use the contextual filter if:

You just want to provide a way to filter a list. In this case, use the regular filter instead.

Responsiveness

Contextual filter – Responsiveness

Contextual filter with truncated text in a narrow container, such as on a smartphone.
Responsive behavior on wider screens, such as on a tablet or desktop.

Layout

The contextual filter is shown as a bar directly above the master list. It comprises two parts:

The filter value on the left (for example, a customer name).
The icon for the filter criterion on the right (here, the object type “customer”). The icon helps the user to put the filter value into context.

Contextual filter – Layout

Behavior and Interaction

The following example shows a prefiltered master list and explains how to change the filter criterion.

Change Filter

The user opens the app and sees a prefiltered list of objects. The bar on top of the master list indicates that the list is filtered, and which filters have been applied.

When the user clicks the bar, a screen (on phones) or popup (on desktops/tablets) appears for selecting additional filter criteria.

Contextual filter – Change filter setting

Select Filter Criterion

In this use case, the user should not be able to disable the filter because there is no way to reset it.

Other master list functions (such as Search or Refresh) are still available and remain unaffected by the contextual filter.

Once a criterion has been selected, the user is taken back to the master list (on phones) or the popup closes (on desktops/tablets). The list is now filtered by the newly selected criterion.

Contextual filter – Select filter attribute

Guidelines

Do not use the contextual filter in place of the regular filter in the footer bar. The regular filter is much more versatile and can also be deactivated by the user.

Use an icon that is unique and visually represents the current filter criterion.

Do not use any of the generic filter icons. They may be confused with the user-triggered filters.

Don't

Properties

The contextual filter is not a separate control. To build a contextual filter, you need to use the sap.m.OverflowToolbar control. The filtering itself must be implemented by the app team.

Exceptions

There is one special case where the contextual filter can actually be cancelled by the user. This applies when the contextual filter is used to prefilter the items listed in a select dialog.

This use of the contextual filter conveniently offers users a narrowed-down list based on their previous selection.

(1) Initial situation: The user is about to select an account and a contact.

(2) The user selects “Best Electronics” and then clicks the value help icon in the Contact field.

When the user clicks the Remove icon , the filter is removed and the entire contact list is shown.

Once the user has selected a contact, the dialog closes and the name is added to the relevant field on the main page.

Opening the value help again resets the dialog to its initial state with the filter set to “Best Electronics”.

Contextual Filter in a Select Dialog

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

No links.

Implementation

Overflow Toolbar (active) (SAPUI5 samples)

Smart Filter Bar Annotations

Warning

This guideline was written for release 1.52 and is no longer updated. For the latest design guidelines on the filter bar, see Filter Bar.

Background:
As of guideline release 1.54, the SAP Fiori Design Guidelines contain only general guidelines for all implementations. These guidelines also apply for implementations using smart controls. You can still use the smart filter bar, but the exact features will no longer be updated in the design guidelines.

Intro

Information

This article is intended as an aid to designers and developers who want to explore the detail configuration options available for the smart filter bar.

The smart filter bar is a wrapper that analyzes a given OData service and renders a filter bar based on the content defined by the service. For example, the OData service determines whether a field is visible on the filter bar, and whether it supports type-ahead and value help. To configure more settings or overwrite the settings from the OData service, the developer can set additional annotations in an external document (metadata.xml).

Developers can use annotation properties in the classes [external_only]ControlConfiguration and GroupConfiguration to adapt the filter bar for the purposes of the app.

These annotations let you:

Determine the type of control (for example, whether a field is shown as a multi-input field or as a date picker)
Enable the autocomplete suggestions feature
Enable the value help dialog
Overwrite settings from the OData service
Set custom filter groups
Add custom fields
Access all settings for the underlying filter bar

You can also use all the configuration options described here in the smart filter bar for the list report SAP Fiori element.

Warning

Most of the attributes/properties are not dynamic and cannot be changed once the control has been initialized.

Usage

Use the smart filter bar if:

An OData service is available.
You want to develop quickly and efficiently.

Do not use the smart filter bar if:

You need to make extensive changes to the filter bar.

Components

You can use the annotation properties listed below to influence how filters are rendered in the expanded filter bar and in the filter dialog.

Expanded Filter Bar

Smart filter bar - Properties for the expanded filter bar

1 enableBasicSearch

Defines whether the filter bar includes a basic search. By default, the basic search is not included.

2 FilterRestrictions/NonFilterableProperties

Defines whether a property is available as a filter criterion.

3 FilterRestrictions/RequiredProperties

Defines the filter field as a mandatory filter. Mandatory filters are marked by an asterisk (*).

4 ValueList

Contains annotations that provide information for rendering a value help list that has been set for a property.

5 FilterExpressionType/MultiValue

Defines whether multiple values can be used in a single filter.

6 FilterExpressionType/SingleValue

Restricts the filter to allow only one value entry.

7 LineItem/Label

A short, human-readable text for the filter name.

8 FilterExpressionType/SingleInterval

Restricts the filter to a specified interval, such as a date interval.

8 insertDefaultFilterValue

Inserts a default filter value into the aggregation defaultFilterValues.

9 liveMode

Defines whether the expanded filter bar is shown in live mode (no Go button) or in manual mode. By default, the filter bar is shown in manual mode.

Filter Dialog

1 FilterRestrictions/RequiredProperties

Defines the filter field as a mandatory filter. Mandatory filters are marked by an asterisk (*).

2 FieldControlType/Hidden

Defines whether the filter is initially visible on the expanded filter bar.

3 SelectionFields

Defines whether a filter belongs to the basic group. All filters in the basic group are initially visible on the expanded filter bar.

4 FieldGroup

Defines whether a filter field is initially shown on the filter dialog, and which group it belongs to.

5 FilterRestrictions/NonFilterableProperties

Defines whether a property is available as a filter criterion.

6 LineItem/Label

A short, human-readable text for the filter name.

SmartFilterBar Properties on the Filter Dialog

Data Types

The smart filter bar analyzes and interprets the metadata provided by the OData service. This allows you to create complex UI entities, and to automatically add fields offered by the OData service to the filter bar as editable input fields. (Note that only fields marked with sap:filterable are added automatically.)

The tables below tell you which input controls are used for the key data types.

General Data Types

DataType ODataMetadata Additional Configuration Edit type Display type Notes

* * Input Text

DateTime – sap:display-format=”Date” DatePicker Text

Decimal – Precision=”3″ Scale=”0″ Input Text

All – Input (with VHD) Text If a matching ValueList annotation is found, the ValueHelp for the Input is enabled.
A ValueHelp Dialog is created automatically, based on the data in the ValueList annotation.

All –
sap:semantics=”fixed-values” on the ValueList entity
ComboBox Text If a matching ValueList annotation is found, and the ValueList entity has the semantics=”fixed-values”, a dropdown list is shown.

Filter Bar-Specific Data Types

Input Type sap:filter-restriction display-format hasValueHelpDialog controlType Resulting Control Type

* * controlType/filterType is specified As specified in additional configuration

DateTime “interval” “Date” NA Date Range Selection

DateTime “anything other than interval” or empty “Date” NA Date Picker

String “single-value” “true” / none Input Field With Value Help Dialog
(with typeAhead according to hasTypeAhead flag)

String “single-value” “false” not specified/input Input Field
(with typeAhead according to hasTypeAhead flag)

String “single-value” “false” dropDownList; hasTypeAhead is not considered here ComboBox

* “single-value” Input Field

String empty or no filter-restriction “true” / none Multi Input Field with Value Help Dialog

String “multi-value” “true” / none If no VL Annotation is found – only show the range selection part

String “multi-value” / empty “false” If no VL Annotation is found – hide the ValueHelpDialog icon

String “multi-value” / empty “false” dropDownList MultiComboBox

* “multi-value” Input Field

* “interval” NA A single Input Field that allows the “-” shortcut notation for intervals

Properties

FilterBar

Filter Bar Properties

persistencyKey
Data type: string
Key used to access personalization data.

advancedMode
Data type: boolean
The advanced mode overwrites the standard behavior and is used in the value help scenario.
Default value is false.

expandAdvancedArea
Data type: boolean
Defines whether the advanced area is expanded when the filter bar is used within the value help dialog.
Default value is false.

searchEnabled
Data type: boolean
Enables/disables the Search button in advanced mode.
Default value is true.

filterBarExpanded
Data type: boolean
Shows/hides the expanded filter bar.
Default value is true.

considerGroupTitle
Data type: boolean
If this property is set, the label for filters is prefixed with the group title.
Default value is false.

showClearButton
Data type: boolean
Handles visibility of the Clear button on the Filters dialog.
Default value is false.

showRestoreButton
Data type: boolean
Handles visibility of the Restore button on the Filters dialog.
Default value is true.

showGoOnFB
Data type: boolean
Handles visibility of the Go button on the filter bar.
Default value is true.

showRestoreOnFB
Data type: boolean
Handles visibility of the Restore button on the filter bar.
Default value is false.

showClearOnFB
Data type: boolean
Handles visibility of the Clear button on the filter bar.
Default value is false.

showGoButton
Data type: boolean
Handles visibility of the Go button on the filter bar.

deltaVariantMode
Data type: boolean
Stores the delta as compared to the standard variant.
Default value is true.

filterContainerWidth
Data type: string
Sets the width of the filter container.
Default value is 12rem.

useToolbar
Data type: boolean
Determines what design should be used. Default is the design with the toolbar. In mobile scenarios this property is ignored – the design with the toolbar is always used.
Default value is true.

header
Data type: string
Specifies the header text that is shown in the toolbar on the first position. This property is ignored, when useToolbar is set to false.

showFilterConfiguration
Data type: boolean
Handles visibility of the Filters button on the filter bar.
Default value is true.

Smart Filter Bar

Smart Filter Bar Properties

entitySet
Data type: string
The OData entity set whose metadata is used to create the SmartFilterBar. Note: Changing this value after the SmartFilterBar is initialized (initialize event was fired) has no effect.

basicSearchFieldName
Data type: string
Name of the field that has to be the focus of the basic search. This is only relevant for SmartFilterBar in combination with ValueHelpDialog.

enableBasicSearch
Data type: boolean
Enables the basic search field in the SmartFilterBar control. This must only be enabled for entities that support such search behavior.
Default value is false.

liveMode
Data type: boolean
Defines the live mode. The live mode only operates on non-phone scenarios.
Default value is false.

showMessages
Data type: boolean
If set to false, any errors that occur during the search will not be displayed in a message box.
Default value is true.

considerAnalyticalParameters
Data type: boolean
Indicates if the analytical parameters (SelectionVariant) must be taken into consideration.
Default value is false.

Smart Filter Bar Annotations

FilterRestrictions/NonFilterableProperties
Defines whether a Property can be used for filtering data.

FieldGroup
Defines a group for a filter field.

TextArrangement
Describes the arrangement of a code value and its text.

FieldControlType/Hidden
Defines whether the filter is visible.

ValueList
Contains annotations that provide information for rendering a ValueHelpList that has been set for a Property.

Label
A short, human-readable text for the filter name.

LineItem/Label
A short, human-readable text suitable for the filter name.

FilterRestrictions/RequiredProperties
Defines the filter field as mandatory filter.

FilterExpressionType/MultiValue
Defines whether multiple values can be used in a single filter.

FilterExpressionType/SingleValue
Restricts the filter to allow only one value entry.

FilterExpressionType/SingleInterval
Restricts the filter to a specified interval, such as a date interval.

SelectionFields
Defines whether certain fields should be initially visible in the SmartFilterBar control.

Control Configuration

Control Configuration Properties

key
The key property corresponds to the field name from the OData service metadata document.
Default value is string

groupId
The groupId can be used to move a field from one group to another. The groupId corresponds to the EntityName from the OData metadata. It is also possible to move a field from the advanced area to the basic area by specifying the groupId _BASIC.
Default value is string

label
You can use this property to overwrite the label of a filter field in the SmartFilterBar.
Default value is string

visible
Data type: boolean
You can use this flag to hide fields from the OData metadata.
Default value is true

hasValueHelpDialog
Data type: boolean
Specifies whether a value help dialog is available or not.
Default value is true

controlType
Data type: sap.ui.comp.smartfilterbar.ControlType
The SmartFilterBar calculates which kind of control will be used for a filter field, based on multiple OData attributes and annotations. You can use this property to overwrite the OData metadata.
Default value is auto

filterType
Data type: sap.ui.comp.smartfilterbar.FilterType
The filter type specifies whether the filter field is for a single value, multiple values, or an interval. The filter type calculated by the SmartFilterBar is based on the OData metadata. You can use this property to configure the filter type manually.
Default value is auto

index
Data type: int
You can use the zero-based index to specify the initial order of fields (without any variants).
Default value is -1

Control Configuration Properties

hasTypeAhead
Data type: boolean
You can use this property to enable the TypeAhead service. Note that TypeAhead does not work with all controls (for example, it is not supported for the DropDownListbox).
Default value is true

mandatory
Data type: sap.ui.comp.smartfilterbar.MandatoryType
You can use this property to overwrite the mandatory state of a filter field. This property can only be set during initialization. Changes at runtime will be ignored.
Default value is auto

width
Default value is string
The width of the filter field in a CSS compatible format. The width can be set only once during initialization. Changes at runtime will not be reflected. The width is not applied to custom controls.

visibleInAdvancedArea
Data type: boolean
If set to true, this field will be added to the advanced area (aka. Dynamic Selection) by default.
Default value is false

preventInitialDataFetchInValueHelpDialog
Data type: boolean
If value help annotations are available for this filter field, you can prevent the the table in the value help dialog for this field from being filled with the initial data fetch.
Default value is true

displayBehaviour
Data type: sap.ui.comp.smartfilterbar.DisplayBehaviour
The displayBehaviour specifies how to display the content on certain controls. For example: DescriptionOnly for Combobox (DropDown text), Description and ID for MultiInput (token text)
Default value is auto

conditionType
Data type: any
The condition Type class name to use for this filter item. Implementation should derive from sap.ui.comp.config.condition.Type.

Group Configuration

Group Configuration Properties

key
Data type: string
The key property shall correspond to the name EntityTypeName from the OData service $metadata document.

index
Data type: any
Zero-based integer index. The index can be used to specify the order of groups. If no index is specified, the order defined by the OData metadata will be used.
Default value is undefined

label
Data type: any
You can use this property to overwrite the label of a group in the advanced area of the SmartFilterBar.
Default value is undefined

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

Filter Bar/ Smart Filter Bar (guidelines)

Implementation

Smart Filter Bar (SAPUI5 samples)

Smart Filter Bar (SAPUI5 API reference)

UI Development Toolkit (SAPUI5 samples)

Icon Tab Bar

The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.

There are two key use cases:

You want to let users navigate between different object facets in the object details area.

You want to let users filter lists, and give them the option of calling up the entire list, or only items with a specific attribute.

In both cases, the user switches between tab pages by clicking or tapping the respective tab.

Usage

Use the icon tab bar if:

Your business objects need to show multiple facets at the same time.

You want to allow the user to browse through these facets.

You need a prominent or very visual filter on top of a list.

You have clear-cut process steps that need to be visualized.

Do not use the icon tab bar if:

You plan to use only one single tab.

Responsiveness

The icon tab bar stretches horizontally, and soon runs out of space on small screens. It responds to limited space by offering a scrolling mechanism.

Responsiveness – Icon tabs
Responsiveness – Text tabs

Layout

The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from. These are described in detail below.

Types

You can use the icon tab bar control to build the following types of tab bars:

Text only

Icon tabs

Tabs as filters

Tabs as process steps

Text Only

The text-only variant is one of the most common types. It allows longer labels, and can also display counters next to the text to indicate the number of items on the tab page.

Unlike all other tab variants, the labels do not get truncated. The full text is always shown. As a result, you need to ensure that your labels do not become too long. They should still be easy to read on smaller screens.

If you use text-only tabs, make sure that the UpperCase property is disabled and that you enter the labels in title case (for example: Approval Flow).

Types – Text-only without counters
Types – Text-only with inline counters

Counters and Text Tabs

If counters are used, set the property HeaderMode to “Inline” so the counters appear in brackets after the labels.

Do not use the old layout that shows the counters on top of the labels (Headermode = “Standard”).

Do
Counters – Inline layout ('HeaderMode' set to 'Inline')
Don't
Counters – Old layout ('HeaderMode' set to 'Standard')

Icon Tabs

Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.

Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.

Types – Icons with counters

Please note that starting with SAPUI5 version 1.40, you should only use the horizontal type of label (icon and label side by side).

If your labels get truncated, consider using shorter labels or text tabs (without icons), since text tabs cannot get truncated.

Types – Icons with counters and labels
Types – Icon-only

Tabs as Filters

If you build the tab bar as a filter, it can comprise two parts:

An “all” tab on the left (optional)
This tab shows the total number of items, and describes the type of item (for example, 189 Products).

Tabs for specific filters
Use the tab text to indicate the filter attribute.
We strongly recommend showing a counter on every tab.

Types – Filter

Tabs as Process Steps

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

To connect the steps, use the triple-chevron icon () from the SAP icon font (technical name: process).

Types – Process

Developer Hint
When using icons with labels, add a comment in the properties file to make editors and translators aware that space is limited.
Example: Label for icon tab on detail screen. Max 14-16 characters (depending on character width).

Test whether your labels and their translations are displayed in full, and do not get truncated.

Behavior and Interaction

Clicking/Tapping on a Tab

To navigate through the views, the user clicks or taps the tabs.

Optional behavior: If the user clicks or taps a tab that’s already open, the container collapses. It opens again when the user clicks any tab.

Use the expandable property to specify whether users can collapse the tab container (default = “true”):

Let users collapse the container if there is additional content below the container, and the information inside the container is not always needed.

If there is no content below the tab container, set the expandable property to “false”.

The expandable property controls the initial state of the container. Do not change the default state (“true”).

Changing the Order of Tabs

Applications can allow users to rearrange the tab order when working in a desktop environment (property: enableTabReordering). If this feature is enabled, users can use drag and drop to reorder tabs, either directly on the tab bar or inside the overflow menu.

Please note that this feature is not available for tabs as process steps to ensure that consecutive steps do not get mixed up.

Interaction – Rearranging tabs

Interaction – Rearranging tabs in the overflow menu

Styles

The two different styles (round tabs and text only) are discussed in the Types section.

In both cases, you can use colors to give users additional orientation.

Information
Do not use colors for decoration only. Colors should always indicate a status that is relevant to the user.

When using colors, stick to the semantic colors provided by visual design. Do not hard-code color values. Instead, use the CSS extension “Less”.
Only use semantic colors if it is important for users to know that they need to take action (for example, to indicate errors or critical situations requiring action). Otherwise, use the neutral default colors.

This example shows a process where one step is indicating an error. Since the other tabs have neutral colors, it is clear that they do not contain errors. Coloring them green to show that they are OK is unnecessary, and would reduce the severity of the red tab.

Styles – Colors

Guidelines

Apply the styles as follows:

If you have only a few tabs that can easily be visualized with icons, use the icon-only tabs. If a short description is needed, use icons and labels.

If the content cannot easily be identified by an icon, use the text-only tabs. They also allow for longer labels.

If you are using the icon tab bar in the object view floorplan, use either icon-only or text-only tabs.
Icons only:
Use this option if you have only 4-5 tabs that can be very clearly identified by their icon.
Text only:
Use this option if you have more than 4-5 tabs, or if there are no clear icons to represent the content. Set the property HeaderMode to “Inline”.

Do
Counters – Inline layout ('HeaderMode' set to 'Inline')

Don't
Counters – Old layout ('HeaderMode' set to 'Standard')

If you use icon tabs, ensure the following:

The icons clearly identify the content on the tab pages.

Each tab has a unique icon. Do not use the same icon more than once.

The icons are easily distinguishable.

Any icons between tabs (for example, as separators or connectors) are visually very different from the icons on the tabs.

Either all or none of the icons have labels.

Implement the focus as follows:

By default, show the first tab as open. This is the initial setting provided by the control.
Note: Technically, you can also override the initial selection. However, this is not recommended.

Later on, you can show the tab last selected by the user.

Additional guidelines:

Do not display a loading indicator above the tab while the number for the item count is loading.

Handle empty tabs as follows:

Hide tabs that do not contain any information, and do not allow the user to create content..

Show empty tabs that allow users to create content, such as notes or attachments.

Only use the tab bars to navigate between tabs. Do not use any other navigation links. For example, do not let users click an item in tab A that takes them to tab B. This type of cross-navigation inside a container is confusing, and cannot be handled by the back navigation.

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

No links

Implementation

Icon Tab Bar (SAPUI5 samples)

Icon Tab Bar (SAPUI5 API reference)

Filter Bar / Smart Filter Bar

The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).

Information
From a UX point of view, the filter bar and the smart filter bar work in the same way even though they are generated differently. The filter bar is configured by app developers, while the smart filter bar is generated from data services and provides a variety of automatic functions. This article contains information about both filter bars.

Dynamic Page vs. sap.m.Page

The appearance of the filter bar depends on the environment: sap.m.page or dynamic page. You can switch to the correct environment with the useToolbar parameter.

Filter bar in the sap.m.page
(useToolbar: true)

Filter bar within sap.m.page

The sap.m.page itself does not have the ability to expand and collapse the filter area. This capability comes with the filter bar.

The filter bar has a title area that contains the title, variant management (optional), the search field, and the buttons. The buttons include a Show Filter Bar / Hide Filter Bar button.

Filter bar within the dynamic page
(useToolbar: false ; default)

Filterbar within the dynamic page

The dynamic page has the ability to expand and collapse the filter area, so this feature no longer needs to be provided by the filter bar. In this case, the title area belongs to the dynamic page, and not to the filter bar. As a result, the search field shows as the first filter field, and there is no Show Filter Bar / Hide Filter Bar button.

Responsiveness

Because tables appear in many apps, from simple to complex ones, the filter bar needs to run on all form factors. While the main concept of the filter bar remains stable across the devices, its responsive design adapts the control’s behavior to match the ability of each device.

Size S (Smartphones)

Expanded filter bar (size S)
Collapsed filter bar (size S)
Filter dialog (size S)

Size M (Tablet)

Expanded filter bar (size M)
Collapsed filter bar (size M)
Filter dialog (size M)

Size L/XL (Desktops)

Expanded filter bar (size L/XL)
Collapsed filter bar (size L/XL)
Filter dialog (size L/XL)

Layout

Filter Dialog

The filters inside the filter dialog are arranged in a vertical linear layout. If filter groups are maintained, the filters are visually grouped in sections, with the filter group name at the top. A link at the end of each group allows the user to add or remove filters from that group. The link text is Change Filters if at least one filter is activated, indicating that filters can be added or removed. If no filters have been set for the group, the link text is More Filters, indicating that more filters can be added.

The first group is called “Basic” and contains the preset filters that come with the app. A checkbox next to each filter enables the user to show the corresponding filter on the expanded filter bar. If the checkbox is selected, the filter is shown on the expanded filter bar. If the checkbox is not selected, the filter is only visible within the filter dialog. In both cases, the filter is active if a value is entered.

The vertical layout of the filter dialog remains stable across all devices. To ensure a clean grid layout appearance, the size of the widest input field is inherited by all other filters.

Filter dialog (size L)
Filter dialog (size S)

Expanded Filter Bar

The expanded filter bar arranges the input fields in a simple horizontal linear layout. If the browser’s window size is reduced or the filters exceed the first line, a simple mechanism opens a new line of filters. The height of the expanded filter bar is not limited and adjusts to accommodate the filters that need to be shown. The label is always above the input field. As in the filter dialog, the size of the widest input field is inherited by all other filters. This avoids having unstable and busy-looking grid layouts.

Filter bar (size L) with one row of filters
Filter Bar (Size L) with more than one row of filters
Filter bar (size S) with vertical filters

Components

Collapsed Filter Bar

The collapsed filter bar takes up very little space, leaving the bulk of the screen to display the actual results. However, the variant selector in the upper left corner is still available for switching between variants. The user can expand or collapse the filter bar by clicking on the header. If required by the use case, the filter bar can be expanded by default.

On desktop and tablet devices, the collapsed filter bar shows a summary of the filters currently applied. It shows Filtered By (x):, where “x” stands for the number of applied filters. This is followed by a comma-separated list of the filters currently applied. Up to 5 filters are listed. If more filters have been applied, an ellipsis (…) shows at the end of the string. If no filters have been applied, the summary text is Filtered By: None.

Collapsed filter bar

Expanded Filter Bar

Developer Hint
Smart filter bar: See the parameters for configuring the expanded filter bar.

In addition to the collapsed filter bar, the expanded filter bar shows a user-defined filter subset of the currently selected variant.

The Adapt Filters (x) link opens the filter dialog, and allows the user to add filters or hide them. The Go button triggers the filter. The Go button is only shown in manual mode.

Expanded filter bar

Filter Dialog

Developer Hint
Smart filter bar: See the parameters for configuring the filter dialog.

The filter dialog is the central component that shows all filters of the selected variant, allowing the user to add filters to the variant or remove them. Filters are arranged into their respective filter groups. The user can search for a specific filter by name in the search bar at the top.

The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified variant filter set (Save and Save As can be provided)

Cancel: Closes the dialog and undoes all changes

Restore: Restores the initial variant values (you can hide this button if it does not fit the app’s use case)

Go: Executes the selected filter set

Clear (optional): Clears all input fields/filters (this button should only be used if it fits the app’s use case)

The user can choose to hide filters on the expanded filter bar by deselecting the relevant checkbox next to the filter in the filter dialog (for example, if a filter is rarely edited, or unimportant).

Filter dialog

Variant Selector

The variant selector is used to select the current variant, and also provides access to variant management.

Variant selector

Filter/Input Controls

Developer Hint
For development information, see data types for the smart filter bar.
Filter/input controls

Which filter control is used in the filter dialog or the expanded filter bar depends on the use case. Use the value help control if you want to offer an advanced function for selecting single or multiple items either inline (by entering text) or by means of a dialog. If there is a predefined list for single or multiple selection, use the combo box control. For temporal information you can use the date picker or date range selector.

Additionally recommended input fields:

Input

Select

Combo box

Multi-combo box

Multi-input

Value help

Date picker

Date range selection

Date/time picker

Rating Indicator

Behavior and Interaction

The filter bar contains the following actions:

Select a Variant

The main use case for the filter bar is to select and execute variants that influence the list of items. In this example, the variant applies its filter set automatically. The item list is filtered without the user needing to click Go.

Adding Filters to a Variant

In the filter dialog the user can access more filters for every filter group. Filters can then be added or removed in a separate dialog. Once a filter has been added or removed, it appears or disappears from the filter dialog. If the user selects the checkbox next to the filter, the filter is displayed on the extended filter bar.

Personalizing the Expanded Filter Bar

Users can hide a filter on the expanded filter bar by deselecting the checkbox next to the relevant filter in the filter dialog. This allows the user to hide filters that are rarely changed from the extended filter bar, giving complex filters a more lightweight appearance.

Guidelines

Default Variant Filters

For all filter bars, provide a set of predefined default filters that come with the app (“Basic” group in the filter dialog). Include filters that are:

Mandatory / crucial to the use case

Frequently used

Vital for reducing the number of items in the list

Users can hide filters in the “Basic” group, but cannot remove them from the filter dialog.

Default variant "Basic"

Default Values

Provide a meaningful default value for as many filters as possible. Meaningful default values depend on your use case.

A default value for date ranges, for example, should reflect the time frame the user would normally apply. App designers need to decide which time frame is appropriate.

Appropriate default values are particularly crucial for filter sets and list reports that operate on large datasets. In this case, consider making certain default filters mandatory to help the user avoid loading very large datasets unnecessarily.

Filter without default value
Filter with available Values
Filter with a default value

Table Filtering and Table Searching

Provide the user with a central location filtering and searching. If you use a filter bar, do not provide filter options or search options for the control below (for example, a table, chart, or list.). Avoiding multiple filter locations also helps to prevent confusing or contradictory entries (for example between the filter bar and a table filter).

Do
Table without filtering option
Don't
Table with filtering option

Initial State

The filter bar can initially be collapsed or expanded, depending on the use case:

Initial State Collapsed

If the app has a default variant that is executed on loading, the table is prefilled, and the user seldom changes the filters, the app can start with a collapsed filter bar.

Initial State Expanded

If the app does not use a default variant and the user has to set a filter to obtain a first result set for the table, start with an expanded filter bar. Also, if a vast number of items are expected, include some mandatory filters. Since the user first has to enter values for these filters, start with an expanded filter bar. If you are in any doubt, start the app with an expanded filter bar.

Note: At least one filter must be defined to begin with. This filter is set within the basic group by app designers. If the use case allows, and depending on the size of the result set, provide a table that is initially filled.

Initial state collapsed
Initial state expanded

Basic Search Field

The basic search field allows the user to filter the results by a given keyword. In contrast to the other input fields, the basic search field has a placeholder text instead of a label.

Note: If you need to provide a search field, use the basic search field. The search field within the table must be deactivated.

Filter bar with basic search field

Manual Update/Live Update

The filter bar is available in two separate modes: manual update mode and live update mode.

Manual Update

With manual update, the filter results are only updated when the user clicks or taps Go. A Go button is therefore mandatory in manual update mode. Pressing enter on the keyboard also triggers the filter.

Live Update

With live update mode, the filter bar reacts instantly to every input change. The result table is updated every time the user changes a filter field or the search field. Therefore, a Go button is not necessary and is not shown if live update mode is used.

Additionally, the search is triggered with every letter that is entered. Starting with the first letter typed in, the table is updated with the results that match all set filters that include the search term.

Which One to Use

Use live update mode by default as it is more convenient for the user. If the user has to configure multiple filters to obtain a useful result set, or if the resulting traffic is expected to be excessively high, consider using manual update mode instead.

Filter bar in manual update mode
Filter bar in live update mode

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

Variant Management (guidelines)

Smart Filter Bar Annotations (guidelines)

Implementation

Filter Bar (SAPUI5 samples)

Smart Filter Bar (SAPUI5 samples)

Filter Bar (SAPUI5 API reference)

Smart Filter Bar (SAPUI5 API reference)

Variant Management Example (SAPUI5 samples)

Variant Management Example (SAPUI5 API reference)

Filter Item (SAPUI5 API reference)

Filter Group Item (SAPUI5 API reference)

Visual Filter Bar

The visual filter bar offers a unique way of filtering large data sets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.

The visual filter bar allows users to combine measures with filter values. For example, a “Product” might have the filter value “Product Name” and the measure might typically be “Revenue”, “Cost”, or “Quantity”. If you opt for the measure “Revenue”, the chart would show the “Revenue by Product”, enabling the user to filter the data by choosing a particular product name and its revenue.

Chart visualization increases the joy of use and helps users to see relevant data more quickly. For filtering, the visual filter bar uses all of the three types of interactive chart: bar chart, line chart and donut chart.

Visual filter bar - Size L

Usage

Use the visual filter bar if:

You are using analytical list page floorplan.

Users need to see both the result and the direct impact of their filter settings in a chart representation.

You would like to give users a condensed overview of the data in the dataset.

Do not use the visual filter bar if:

You are not using the analytical list page floorplan.

Users are not interested in seeing the impact or their filter settings directly in a chart representation.

Users are not interested in a condensed overview of the data in the dataset.

Responsiveness and Adaptiveness

The visual filter bar is responsive from size M upwards on desktop devices (based the responsiveness of the Analytical List Page floorplan).

Layout

The visual filter bar is a composite control built with other responsive controls, such as the header container and the interactive charts. It is used in the header area of the analytical list page, which incorporates the dynamic page layout.

Collapsed Visual Filter Bar

The collapsed visual filter bar takes up less space, leaving most of the screen for displaying the actual results. However, the variant selector in the upper left corner is still available for switching between variants. The user can expand or collapse the filter bar by clicking on the header. If required by the use case, you can expand the filter bar by default.

Visual filter bar - Collapsed

The collapsed filter bar shows a summary of the filters currently applied. The format of the summary text is:

Filtered By (number of filters): <comma-separated list of the filters currently applied>
Example: Filtered By (2): Country, Product

Up to 5 filters are listed. If more filters have been applied, an ellipsis (…) appears at the end of the string. If no filters have been applied, the summary text is Not Filtered.

Expanded Visual Filter Bar

The expanded visual filter bar also shows a user-defined filter subset of the selected variant. The Adapt Filters link opens the visual filter dialog, where the user can add or hide visual filters. The switch button on the top right switches between the visual filter bar and the standard (input-based) filter bar. The Go button triggers the filter. Note that the Go button is only shown in manual update mode.

Visual filter bar - Expanded

Structure

In order to achieve filtering through visualization, the visual filter bar uses interactive charts. Currently, three interactive chart types are available: bar chart, line chart, and donut chart. Each chart has a dedicated area for the chart title, the (x) link showing the number of applied filters, and the value help icon . When the user clicks on the (x) link, a popover containing the selected filter values appears. The value help icon opens a value help dialog.

Visual filter bar with interactive charts

Filter Title Area

In addition to the chart title, the filter title area also contains a value help icon and the (x) link, where “x” stands for the number of applied filters. Clicking this link opens a popover with the selected filter values.

Use the following naming convention for the filter title, using title case: <Measure Name> by <Dimension Name> in <Scale Factor> <Unit of Measure>. For example, Project Costs by Project in K EUR, Sales Volume by Commodity in M PC.

Visual filter bar - Title area
Visual filter bar - Filter title

Bar Chart

The interactive bar chart in the visual filter bar can display only three bars. Based on the measure, they can be sorted ascending or descending. This makes it easy to compare the items and see the highest and lowest values.

Visual filter bar - Interactive bar chart

Line Chart

The interactive line chart is used to display variations over a specified period of time. This chart is only used for displaying a time series and can contain only the first or last six time points (for example, last six days, last six months, and so on).

Do not use a line chart to show categories. Instead, use a bar chart.

Visual filter bar - Interactive line chart

Donut Chart

The interactive donut chart is best used to display up to three slices. Use this chart if the exact value of each slice is not needed for filtering.

In the visual filter bar, only the top or bottom two values are shown; the rest are aggregated into the Other section.

Visual filter bar - Interactive donut chart

Visual Filter Selections

Any data point or segment selected in a chart remains selected when the user changes the measure, chart type, or sort order in any of the charts.

If a selected record falls outside the top or bottom three records being displayed, the (x) status above the chart shows the number of selected records.

Visual fiter bar - Popover with selected values
Developer Hint

Do not bind a single visual filter (chart) to more than one ID. This will lead to an incorrectly derived item count in the (x) link. Define separate visual filters instead. If this split is not desired, create a calculated column (dimension) in the back end to represent this combined ID.

Don't
Don't use a relative format for time

Do
Use titles that give context

Do
Add the year in the title if you display only 4 quarters

Visual Filter Dialog

The filter dialog is launched by clicking the Adapt Filters (number of applied filters) link in the upper right filter area. In the filter dialog for visual filters, the user can choose which filter fields are shown in the visual filter bar.

In this dialog, the user can make the following changes:

Add visual filters

Delete visual filters

Hide visual filters in the visual filter bar

Search for visual filters

Change the sort order of each visual filter

Change the chart type of each visual filter

Switch to other measures in the visual filter display

The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified filter set variant. Save and Save As can be provided.

Cancel: Closes the dialog and undoes all changes.

Restore: Restores the initial variant values. You can hide this button if it does not fit the app use case.

Go: Applies the selected filter set.

Clear (optional): Clears all filters. Only use this button if it fits the app use case.

Visual filter dialog

Visual Filter Configuration

In the filter dialog, users can configure individual visual filters using the icons in the filter title area:

Change the sort order (not supported for line charts)

Switch to a different chart type

Choose between different measures

Visual filter configuration - Sort, chart type, measure

Behavior and Interaction

Unlike micro charts, the charts in the visual filter bar are interactive. If you are using live update mode, selecting a filter value triggers data filtering in the content area. Both single and multiple selection are supported.

Selecting Filters

In the visual filter, you can make a selection by clicking on a chart value. To deselect it, you can either click on the same value in the chart again, or click the (x) link showing the number of selected filters, such as (1).

Selecting a Filter Value in an Interactive Chart

Any data point selected in a chart remains selected, even if the user selects a data point in another chart. Filter values also react to each other.

If a selected record in a chart falls outside the displayed filter values, the selection is visible in the (x) link above the chart, where (x) represents the number of selected records.

Users can select more filter values with the value help.

Selecting a Filter Value Using the Value Help

Personalizing the Visual Filter Bar

Add Visual Filter

Users can add more visual filters via the visual filter dialog. The additional filter groups appear below the Basic filter group, which contains the standard filters for the application. While the Basic filter group is always visible, the additional filter groups are initially collapsed.

The More (x) link in the filter group header indicates the number of filters that have not yet been added, for example More (2). Clicking this link opens a dialog for selecting the additional filter. Once a filter has been selected, it displays under the group header in the visual filter dialog, and the user can customize the individual filter settings (sort order, chart type, measure, display in the visual filter bar).

If all filters in a group have already been added in the visual filter dialog, the More (x) link label in the filter group title switches to Change Filters.

Hide Visual Filter

Users can hide a filter by deselecting the checkbox next to the relevant filter in the filter dialog. This allows the user to hide filters that are rarely changed from the extended filter bar, giving complex filters a more lightweight appearance.

Guidelines

Live Update / Manual Update

The visual filter bar is available in two modes: live update and manual update. In both modes the visual filter charts refresh based on the selection.

Live Update

In live update mode, the filter bar reacts instantly to every input change. Because the content area updates automatically whenever the user changes a filter selection, the Go button is not necessary, and is not shown.

Visual filter bar - Live update mode

Manual Update

In manual update mode, the filter results are only updated when the user clicks or taps the Go button that is shown in manual mode. Pressing ENTER on the keyboard also triggers the filter.

Visual filter bar - Manual update mode

Recommendation

In general, use live update mode, which is more convenient for users. However, consider using manual update mode if the user has to configure multiple filters to obtain a useful result set, or if you expect the resulting traffic to be excessively high.

Chart Types

Choosing the right chart type as a representation for a particular filter will not only increase the joy of use but also will convey the right information to the user. Inappropriate chart types can mislead the user during the filtering process.

In the visual filter bar, you can choose between three interactive charts: bar chart, line chart and donut chart.

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

Analytical List Page (guidelines)

Interactive Chart (guidelines)

Interactive Bar Chart (guidelines)

Interactive Donut Chart (guidelines)

Interactive Line Chart (guidelines)

Value Help Dialog (guidelines)

Filter Bar / Smart Filter Bar (guidelines)

Dynamic Page (guidelines)

Implementation

Development System (snapshot)

Sales Order Analysis (SAP Fiori reference app)

Visual Filter Bar

The visual filter bar offers a unique way of filtering large data sets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.

The visual filter bar allows users to combine measures with filter values. For example, a “Product” might have the filter value “Product Name” and the measure might typically be “Revenue”, “Cost”, or “Quantity”. If you opt for the measure “Revenue”, the chart would show the “Revenue by Product”, enabling the user to filter the data by choosing a particular product name and its revenue.

Chart visualization increases the joy of use and helps users to see relevant data more quickly. For filtering, the visual filter bar uses all of the three types of interactive chart: bar chart, line chart and donut chart.

Visual filter bar - Size L

Usage

Use the visual filter bar if:

You are using analytical list page floorplan.

Users need to see both the result and the direct impact of their filter settings in a chart representation.

You would like to give users a condensed overview of the data in the dataset.

Do not use the visual filter bar if:

You are not using the analytical list page floorplan.

Users are not interested in seeing the impact or their filter settings directly in a chart representation.

Users are not interested in a condensed overview of the data in the dataset.

Responsiveness and Adaptiveness

The visual filter bar only supports desktop devices.

Layout

The visual filter bar is a composite control built with other responsive controls, such as the header container and the interactive charts. It is used in the header area of the analytical list page, which incorporates the dynamic page layout.

Collapsed Visual Filter Bar

The collapsed visual filter bar takes up less space, leaving most of the screen for displaying the actual results. However, the variant selector in the upper left corner is still available for switching between variants. The user can expand or collapse the filter bar by clicking on the header. If required by the use case, you can expand the filter bar by default.

Visual filter bar - Collapsed

The collapsed filter bar shows a summary of the filters currently applied. The format of the summary text is:

Filtered By (number of filters): <comma-separated list of the filters currently applied>
Example: Filtered By (2): Country, Product

Up to 5 filters are listed. If more filters have been applied, an ellipsis (…) appears at the end of the string. If no filters have been applied, the summary text is Filtered By: None.

Expanded Visual Filter Bar

The expanded visual filter bar also shows a user-defined filter subset of the selected variant. The Filters link opens the visual filter dialog, where the user can add or hide visual filters. The switch button on the top right switches between the visual filter bar and the standard (input-based) filter bar. The Go button triggers the filter. Note that the Go button is only shown in manual update mode.

Visual filter bar - Expanded

Structure

In order to achieve filtering through visualization, the visual filter bar uses interactive charts. Currently, three interactive chart types are available: bar chart, line chart, and donut chart. Each chart has a dedicated area for the chart title, the Selected (x) link, and the value help icon . When the user clicks on the Selected (x) link, a popover containing the selected filter values appears. The value help icon opens a value help dialog.

Visual filter bar with interactive charts

Filter Title Area

In addition to the chart title, the filter title area also contains a value help icon and a Selected (x) link, where “x” stands for the number of applied filters. Clicking this link opens a popover with the selected filter values.

Use the following naming convention for the filter title, using title case: <Measure Name> by <Dimension Name> in <Scale Factor> <Unit of Measure>. For example, Project Costs by Project in K EUR, Sales Volume by Commodity in M PC.

Visual filter bar - Title area
Visual filter bar - Filter title

Bar Chart

The interactive bar chart in the visual filter bar can display only three bars. Based on the measure, they can be sorted ascending or descending. This makes it easy to compare the items and see the highest and lowest values.

Visual filter bar - Interactive bar chart

Line Chart

The interactive line chart is used to display variations over a specified period of time. This chart is only used for displaying a time series and can contain only the first or last six time points (for example, last six days, last six months, and so on).

Do not use a line chart to show categories. Instead, use a bar chart.

Visual filter bar - Interactive line chart

Donut Chart

The interactive donut chart is best used to display up to three slices. Use this chart if the exact value of each slice is not needed for filtering.

In the visual filter bar, only the top or bottom two values are shown; the rest are aggregated into the Other section.

Visual filter bar - Interactive donut chart

Visual Filter Selections

Any data point or segment selected in a chart remains selected when the user changes the measure, chart type, or sort order in any of the charts.

If a selected record falls outside the top or bottom three records being displayed, the Selected (x) status above the chart shows the number of selected records.

Visual filter bar - Popover with selected values
Developer Hint

Do not bind a single visual filter (chart) to more than one ID. This will lead to an incorrectly derived item count in the Selected (x) link. Define separate visual filters instead. If this split is not desired, create a calculated column (dimension) in the back end to represent this combined ID.

Visual Filter Dialog

In the filter dialog, users can can choose which filter fields are displayed in the filter bar. The dialog is opened by clicking the Filters (x) button in the page title area.

The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified filter set variant. Save and Save As can be provided.

Cancel: Closes the dialog and undoes all changes.

Restore: Restores the initial variant values. You can hide this button if it does not fit the app use case.

Go: Applies the selected filter set.

Clear (optional): Clears all filters. Only use this button if it fits the app use case.

To hide filters on the expanded filter bar, the user can deselect the relevant checkbox next to the filter in the filter dialog. This can be useful for filters that are rarely edited or unimportant.

Visual filter dialog

Visual Filter Configuration

In the filter dialog, users can configure individual visual filters using the icons in the filter title area:

Change the sort order (not supported for line charts)

Switch to a different chart type

Choose between different measures

Visual filter configuration - Sort, chart type, measure

Behavior and Interaction

Unlike micro charts, the charts in the visual filter bar are interactive. If you are using live update mode, selecting a filter value triggers data filtering in the content area. Both single and multiple selection are supported.

Selecting Filters

In the visual filter, you can make a selection by clicking on a chart value. To deselect it, you can either click on the same value in the chart again, or click the Selected (x) link showing the number of selected filters, such as Selected (1).

Selecting a Filter Value in an Interactive Chart

Any data point selected in a chart remains selected, even if the user selects a data point in another chart. Filter values also react to each other.

If a selected record in a chart falls outside the displayed filter values, the selection is visible in the (x) Selected link above the chart, where (x) represents the number of selected records.

Users can select more filter values with the value help.

Selecting a Filter Value Using the Value Help

Personalizing the Visual Filter Bar

Add Visual Filter

Users can add more visual filters via the visual filter dialog. The additional filter groups appear below the Basic filter group, which contains the standard filters for the application. While the Basic filter group is always visible, the additional filter groups might initially be collapsed, depending on the initial view defined by the app team.

The More (x) link in the filter group header indicates the number of filters that have not yet been added, for example More (2). Clicking this link opens a dialog for selecting the additional filter. Once a filter has been selected, it displays under the group header in the visual filter dialog, and the user can customize the individual filter settings (sort order, chart type, measure, display in the visual filter bar).

If all filters in a group have already been added in the visual filter dialog, the More (x) link label in the filter group title switches to Change Filters.

Hide Visual Filter

Users can hide a filter by deselecting the checkbox next to the relevant filter in the filter dialog. This allows the user to hide filters that are rarely changed from the extended filter bar, giving complex filters a more lightweight appearance.

Guidelines

Live Update / Manual Update

The visual filter bar is available in two modes: live update and manual update. In both modes the visual filter charts refresh based on the selection.

Live Update

In live update mode, the filter bar reacts instantly to every input change. Because the content area updates automatically whenever the user changes a filter selection, the Go button is not necessary, and is not shown.

Visual filter bar - Live update mode

Manual Update

In manual update mode, the filter results are only updated when the user clicks or taps the Go button that is shown in manual mode. Pressing ENTER on the keyboard also triggers the filter.

Visual filter bar - Manual update mode

Recommendation

In general, use live update mode, which is more convenient for users. However, consider using manual update mode if the user has to configure multiple filters to obtain a useful result set, or if you expect the resulting traffic to be excessively high.

Chart Types

Choosing the right chart type as a representation for a particular filter will not only increase the joy of use but also will convey the right information to the user. Inappropriate chart types can mislead the user during the filtering process.

In the visual filter bar, you can choose between three interactive charts: bar chart, line chart and donut chart.

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

Analytical List Page (guidelines)

Interactive Chart (guidelines)

Interactive Bar Chart (guidelines)

Interactive Donut Chart (guidelines)

Interactive Line Chart (guidelines)

Value Help Dialog (guidelines)

Filter Bar / Smart Filter Bar (guidelines)

Dynamic Page (guidelines)

Implementation

No links.

Visual Filter Bar

The visual filter bar offers a unique way of filtering large data sets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.

The visual filter bar allows users to combine measures with filter values. For example, a “Product” might have the filter value “Product Name” and the measure might typically be “Revenue”, “Cost”, or “Quantity”. If you opt for the measure “Revenue”, the chart would show the “Revenue by Product”, enabling the user to filter the data by choosing a particular product name and its revenue.

Chart visualization increases the joy of use and helps users to see relevant data more quickly. For filtering, the visual filter bar uses all of the three types of interactive chart: bar chart, line chart and donut chart.

Visual filter bar - Size L

Usage

Use the visual filter bar if:

You are using analytical list page floorplan.

Users need to see both the result and the direct impact of their filter settings in a chart representation.

You would like to give users a condensed overview of the data in the dataset.

Do not use the visual filter bar if:

You are not using the analytical list page floorplan.

Users are not interested in seeing the impact or their filter settings directly in a chart representation.

Users are not interested in a condensed overview of the data in the dataset.

Responsiveness and Adaptiveness

The visual filter bar itself is fully responsive. For overall responsiveness within the analytical list page, see the Analytical List Page article.

Layout

The visual filter bar is a composite control built with other responsive controls, such as the header container and the interactive charts. It is used in the header area of the analytical list page, which incorporates the dynamic page layout.

Collapsed Visual Filter Bar

The collapsed visual filter bar takes up less space, leaving most of the screen for displaying the actual results. However, the variant selector in the upper left corner is still available for switching between variants. The user can expand or collapse the filter bar by clicking on the header. If required by the use case, you can expand the filter bar by default.

Visual filter bar - Collapsed

On desktop and tablet devices, the collapsed filter bar shows a summary of the filters currently applied. The format of the summary text is:

Filtered By (number of filters): <comma-separated list of the filters currently applied>
Example: Filtered By (2): Country, Product

Up to 5 filters are listed. If more filters have been applied, an ellipsis (…) appears at the end of the string. If no filters have been applied, the summary text is Not Filtered.

Expanded Visual Filter Bar

The expanded visual filter bar also shows a user-defined filter subset of the selected variant. The Adapt Filters link opens the visual filter dialog, where the user can add or hide visual filters. The switch button on the top right switches between the visual filter bar and the standard (input-based) filter bar. The Go button triggers the filter. Note that the Go button is only shown in manual update mode.

Visual filter bar - Expanded

Structure

In order to achieve filtering through visualization, the visual filter bar uses interactive charts. Currently, three interactive chart types are available: bar chart, line chart, and donut chart. Each chart has a dedicated area for the chart title, the (x) link showing the number of applied filters, and the value help icon . When the user clicks on the (x) link, a popover containing the selected filter values appears. The value help icon opens a value help dialog.

Visual filter bar with interactive charts

Filter Title Area

In addition to the chart title, the filter title area also contains a value help icon and the (x) link, where “x” stands for the number of applied filters. Clicking this link opens a popover with the selected filter values.

Use the following naming convention for the filter title, using title case: <Measure Name> by <Dimension Name> in <Scale Factor> <Unit of Measure>. For example, Project Costs by Project in K EUR, Sales Volume by Commodity in M PC.

Visual filter bar - Title area
Visual filter bar - Filter title

Bar Chart

The interactive bar chart in the visual filter bar can display only three bars. Based on the measure, they can be sorted ascending or descending. This makes it easy to compare the items and see the highest and lowest values.

Visual filter bar - Interactive bar chart

Line Chart

The interactive line chart is used to display variations over a specified period of time. This chart is only used for displaying a time series and can contain only the first or last six time points (for example, last six days, last six months, and so on).

Do not use a line chart to show categories. Instead, use a bar chart.

Visual filter bar - Interactive line chart

Donut Chart

The interactive donut chart is best used to display up to three slices. Use this chart if the exact value of each slice is not needed for filtering.

In the visual filter bar, only the top or bottom two values are shown; the rest are aggregated into the Other section.

Visual filter bar - Interactive donut chart

Visual Filter Selections

Any data point or segment selected in a chart remains selected when the user changes the measure, chart type, or sort order in any of the charts.

If a selected record falls outside the top or bottom three records being displayed, the (x) status above the chart shows the number of selected records.

Visual fiter bar - Popover with selected values
Developer Hint

Do not bind a single visual filter (chart) to more than one ID. This will lead to an incorrectly derived item count in the (x) link. Define separate visual filters instead. If this split is not desired, create a calculated column (dimension) in the back end to represent this combined ID.

Don't
Don't use a relative format for time

Do
Use titles that give context

Do
Add the year in the title if you display only 4 quarters

Visual Filter Dialog

The filter dialog is launched by clicking the Adapt Filters (number of applied filters) link in the upper right filter area. In the filter dialog for visual filters, the user can choose which filter fields are shown in the visual filter bar.

In this dialog, the user can make the following changes:

Add visual filters

Delete visual filters

Hide visual filters in the visual filter bar

Search for visual filters

Change the sort order of each visual filter

Change the chart type of each visual filter

Switch to other measures in the visual filter display

The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified filter set variant. Save and Save As can be provided.

Cancel: Closes the dialog and undoes all changes.

Restore: Restores the initial variant values. You can hide this button if it does not fit the app use case.

Go: Applies the selected filter set.

Clear (optional): Clears all filters. Only use this button if it fits the app use case.

Visual filter dialog

Visual Filter Configuration

In the filter dialog, users can configure individual visual filters using the icons in the filter title area:

Change the sort order (not supported for line charts)

Switch to a different chart type

Choose between different measures

Visual filter configuration - Sort, chart type, measure

Behavior and Interaction

Unlike micro charts, the charts in the visual filter bar are interactive. If you are using live update mode, selecting a filter value triggers data filtering in the content area. Both single and multiple selection are supported.

Selecting Filters

In the visual filter, you can make a selection by clicking on a chart value. To deselect it, you can either click on the same value in the chart again, or click the (x) link showing the number of selected filters, such as (1).

Selecting a Filter Value in an Interactive Chart

Any data point selected in a chart remains selected, even if the user selects a data point in another chart. Filter values also react to each other.

If a selected record in a chart falls outside the displayed filter values, the selection is visible in the (x) link above the chart, where (x) represents the number of selected records.

Users can select more filter values with the value help.

Selecting a Filter Value Using the Value Help

Personalizing the Visual Filter Bar

Add Visual Filter

Users can add more visual filters via the visual filter dialog. The additional filter groups appear below the Basic filter group, which contains the standard filters for the application. While the Basic filter group is always visible, the additional filter groups are initially collapsed.

The More (x) link in the filter group header indicates the number of filters that have not yet been added, for example More (2). Clicking this link opens a dialog for selecting the additional filter. Once a filter has been selected, it displays under the group header in the visual filter dialog, and the user can customize the individual filter settings (sort order, chart type, measure, display in the visual filter bar).

If all filters in a group have already been added in the visual filter dialog, the More (x) link label in the filter group title switches to Change Filters.

Hide Visual Filter

Users can hide a filter by deselecting the checkbox next to the relevant filter in the filter dialog. This allows the user to hide filters that are rarely changed from the extended filter bar, giving complex filters a more lightweight appearance.

Guidelines

Live Update / Manual Update

The visual filter bar is available in two modes: live update and manual update. In both modes the visual filter charts refresh based on the selection.

Live Update

In live update mode, the filter bar reacts instantly to every input change. Because the content area updates automatically whenever the user changes a filter selection, the Go button is not necessary, and is not shown.

Visual filter bar - Live update mode

Manual Update

In manual update mode, the filter results are only updated when the user clicks or taps the Go button that is shown in manual mode. Pressing ENTER on the keyboard also triggers the filter.

Visual filter bar - Manual update mode

Recommendation

In general, use live update mode, which is more convenient for users. However, consider using manual update mode if the user has to configure multiple filters to obtain a useful result set, or if you expect the resulting traffic to be excessively high.

Chart Types

Choosing the right chart type as a representation for a particular filter will not only increase the joy of use but also will convey the right information to the user. Inappropriate chart types can mislead the user during the filtering process.

In the visual filter bar, you can choose between three interactive charts: bar chart, line chart and donut chart.

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

Analytical List Page (guidelines)

Interactive Chart (guidelines)

Interactive Bar Chart (guidelines)

Interactive Donut Chart (guidelines)

Interactive Line Chart (guidelines)

Value Help Dialog (guidelines)

Filter Bar / Smart Filter Bar (guidelines)

Dynamic Page (guidelines)

Implementation

Development System (snapshot)

Sales Order Analysis (SAP Fiori reference app)

Variant Management

Variants store filter settings which have been defined within the filter bar. The filter settings consist of filter parameters, selection fields and a layout. This control enables the user to load, save, and change variants. In some cases, the table settings are also saved within a variant.

In the context of tables, this control is used to save, manage, and load table settings which include layout, column visibility, sorting, and grouping.

Smart variant management saves both filter settings and table layouts. It creates a page variant that includes all the controls. The button is located within the page header bar, and no secondary management is possible on table level.

Usage

Use the variant management control if:

The user needs to save and load different filter settings to find the relevant data.

The user needs to save and load different layouts (for example, a table) to display data in different views.

Use smart variant management if the user needs to save the page, including the filter settings and table layout.

Responsiveness

Size S (Smartphone)

Variant selection, manage dialog, and save dialog are opened in full screen.

Variant selection
Manage variants
Save variant

Size M (Tablet)

Variant selection
Manage variants
Save variant

Size L (Desktop)

Variant selection
Manage variants
Save variant

Layout

The variant management control is used within the filter bar (next to the page title) and the table toolbar (next to the table title).

Filter Bar

The variant management control is located next to the page title within the page header container and saves the stored filter settings or both filter and table settings.

Variant management within filter bar next to the page title

Table

The variant management control can also store table settings (layout, column visibility, sorting, or grouping) independently of the filter settings.

It is placed as the first item within the table toolbar.

If a title or the variant management control is placed inside a toolbar, you need to apply the following styles:

The toolbar height must be set to 3 rem.

The toolbar design must be transparent.

The title must have the class “sapMH4Fontsize”.

Variant management within table toolbar

If the table has a separate title, place the title first.

Variant management with table title

Behavior and Interaction

This control allows the user to select, create, update, and delete variants within the filter bar. In the context of a table, this is the table configuration (layout, column visibility, sorting, and grouping).

Selecting a Variant

The control label displays the active variant. When the user selects it, a popover displays all available variants. The currently active variant is highlighted. To load another variant, the user simply selects one from the list.

Variants that have been modified but not saved are marked with an asterisk (*).

Selecting a variant

If more than 10 variants exist, a search option is displayed.

Select variant – Search option

The standard variant is the minimum set of variants which is delivered by SAP and cannot be modified or deleted.

Save

Save can only be applied to variants that the user is allowed to save. Otherwise, this button is disabled. Save overwrites the active variant.

Save As

Save As enables the user to save the current filter settings as a new variant. The Save As function can also be used to duplicate existing variants for later modification.

Manage

This opens a new dialog which allows the user to update and delete existing variants.

Creating a Variant – “Save As” Variant

The following options can be set:

Set as Default

The variant that is set to default is selected when the user launches the app.

Execute on Select

If this option is active, the variant is executed immediately. The user does not need to click or tap the ‘Go’ button. This option is often used if small filter changes need to be made before the user finally executes the search.

Save As

Share

The user can set the Share option to make a variant available to other users.

All variants that are shared by users or delivered by SAP, partners, or key users are available within the manage list and the selection list.

Create As Tile

A tile with the same label as the variant is created on the home page.

You can hide the options Execute on Select and Create as Tile by configuring the control correspondingly.

Information
Note that you must still create the tile even if you select the Create as Tile flag.

Managing Variants – Update/Delete Variant

Within the manage dialog, the user can rename, delete, and change properties of existing variants.

Users can only modify or delete entries if they have the necessary permissions. By default, variants which have been created by the user can also be modified and deleted. Users can also modify and delete entries from other users. This is currently a limitation.

Based on the configuration of the variant management control, the following column can be hidden or shown:

Execute on Select. (If this control is used in the context of tables, Execute on Select is hidden.)

Add to Favorites

The popover only shows the variants that were added as favorites in the Manage Variants dialog. If the user creates a variant, it is selected by default, along with the standard SAP variants. To prevent overcrowding the popover with public variants that are not relevant for the user, shared variants created by other users are not selected.

Manage

Guidelines

In the context of variants, we recommend that you directly reference the variant with the tile. Use the name of the variant as the tile title. Map this as a preset title that cannot be edited by the user. In this case, whenever the variant is updated, the tile is updated accordingly.

Enable the option Create as Tile within the Save As dialog if your use case generally requires a tile to be created immediately after the Save As action. In some scenarios, such as MRP, variants and their respective tiles are created on a weekly basis and then removed.

If the variant has been modified but not yet saved (“dirty state”), ensure that the variant is saved before the tile is created.

Exception

If the variant cannot be referenced directly due to technical limitations, offer the standard tile creation option where only filter parameters and settings are saved within the URL. Do not offer the Create as Tile option within the Save As dialog.

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

Responsive Table (guidelines)

Table Toolbar (guidelines)

Filter Bar (guidelines)

Implementation

Variant Management (SAPUI5 samples)

Variant Management (SAPUI5 API reference)

Variant Management

Variants store view settings, such as filter settings or control parameters.

The filter settings consist of filter parameters, selection fields, and the layout of filters. They are set within the filter bar.

Control parameters are the sort order, filter and group settings, column visibility, and the layout of a table or chart. They are set within the toolbar of the control.

The variant management control enables the user to load, save, change, and maintain variants.

The smart variant management control saves both filter and control parameters in one page variant. It creates a page variant that includes all settings of the page content. The control is merged with the page title. Note that page variants cannot be combined with variants for other controls.

Information
Note on terminology:

On the user interface, we now call variants “views”, which is better understood by end users. To describe the SAPUI5 controls, however, we still speak of “variants” and “variant management”.

Usage

Use the variant management control if:

The user needs to save and load different filter settings to find the relevant data.

The user needs to save and load different layouts (for example, a table) to display data in different views.

The user needs to save the settings for the whole page, including the filter settings and table layout. In this case, use the smart variant management control.

Responsiveness

Size S (Smartphone)

On phones, the My Views dialog for selecting variants, the Manage Views dialog, and the Save View dialog open in full screen mode.

Variant selection
Manage variants
Save variant

Size M (Tablet)

Variant selection
Manage variants
Save variant

Size L (Desktop)

Variant selection
Manage variants
Save variant

Layout

The variant management control is merged with the page title (or next to or merged with title of the respective control, such as a table).

Filter Bar (Page Title)

The variant management control is merged with the page title within the page header container, and saves the stored filter settings or both the filter and control settings.

Variant management within the filter bar, merged with the page title

Table

The variant management control can also store control settings like layout, table column visibility, sorting, or grouping independently of the filter settings.

It is either merged with the control title or placed next to it.

If you place the title or variant management control inside a toolbar, apply the following styles:

Set the toolbar height to 3 rem.

Use a transparent toolbar.

Use the title class “sapMH4Fontsize”.

Variant management within the table toolbar

If the table has a separate title, place the title first.

Variant management with table title

Behavior and Interaction

This control allows the user to select, create, update, and delete variants for filter settings and control parameters such as layout, table column visibility, sorting and grouping.

Selecting a Variant

The page title displays the active variant. Clicking the title dropdown opens a popover that displays all available variants. The currently active variant is highlighted. To load another variant, the user simply selects one from the list.

Variants that have been modified but not saved are marked with an asterisk(*) on the page title.

Selecting a variant

If more than 10 variants exist, a search option is displayed.

Select variant – Search option

The standard variant is the minimum set of filters delivered by SAP, and cannot be modified or deleted.

Save

Save can only be applied to variants that the user is allowed to save. Otherwise, this button is disabled. Save overwrites the active variant.

Save As

Save As enables the user to save the current filter settings as a new variant. The Save As function can also be used to duplicate existing variants for later modification.

Manage

Manage opens a dialog that allows the user to update, delete or favorite/unfavorite existing variants.

Saving & Creating a Variant

The following options can be set:

Set as Default

The variant that is set to default is selected when the user launches the app.

Apply Automatically

If this option is active, the variant is executed immediately when selected. The user does not need to click or tap the Go button. This option is often used if small filter changes need to be made before the user finally executes the search, or if the selection is likely to cause long loading times.

Public

Setting a variant to Public makes it available to other users. A variant can be set to Public by individual users, key users, SAP (default delivery), or partners.

All variants that are set to Public are available within the Manage Views dialog. Users can favorite variants from the pool to add them to their My Views popover, or unfavorite variants to remove them.

Note that variants users create themselves are favorited automatically, while variants created by other users are unfavorited by default.

Save As

Save as Tile

The user can save the currently selected variant as a tile on the launchpad using the Save as Tile action in the Share menu.

In the Save as Tile dialog, the user can define the tile title and subtitle, a description, and the launchpad group in which the tile should appear.

Save as tile via 'Share' button
'Save as Tile' dialog

Managing Variants

In the Manage Views dialog, the user can rename, delete, and change properties of existing variants.

Users can only modify or delete entries if they have the necessary permissions. By default, variants that a user has created can also be modified and deleted.

Users cannot modify and delete variants created by other users.
Exception: Key users can also change and delete variants created by others.

Add to Favorites

The My Views popover only shows the variants selected as favorites in the Manage Views dialog. If the user creates a variant, it is selected by default, along with the standard SAP variants. Public variants created by other users are not marked as favorites. This prevents the popover from becoming overcrowded with public variants that are not relevant for the user.

Manage

Guidelines

Save as Tile:

Use the name of a variant as the title of the application tile. Map this as a preset title that cannot be edited by the user. In this case, whenever the variant is updated, the tile is updated accordingly.

If the variant has been modified but not yet saved (“dirty state”), ensure that the variant is saved before the tile is created.

Exception: If the variant cannot be referenced directly due to technical limitations, offer the standard tile creation option where filter parameters and settings are only saved within the URL.

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

Responsive Table (guidelines)

Table Toolbar (guidelines)

Filter Bar (guidelines)

Implementation

Variant Management (SAPUI5 samples)

Variant Management (SAPUI5 API reference)

Variant Management

Variants store filter settings which have been defined within the filter bar. The filter settings consist of filter parameters, selection fields and a layout. This control enables the user to load, save, and change variants. In some cases, the table settings are also saved within a variant.

In the context of tables, this control is used to save, manage, and load table settings which include layout, column visibility, sorting, and grouping.

Smart variant management saves both filter settings and table layouts. It creates a page variant that includes all the controls. The button is located within the page header bar, and no secondary management is possible on table level.

Usage

Use the variant management control if:

The user needs to save and load different filter settings to find the relevant data.

The user needs to save and load different layouts (for example, a table) to display data in different views.

Use smart variant management if the user needs to save the page including the filter settings and table layout.

Responsiveness

Size S (Smartphone)

Variant selection, manage dialog, and save dialog are opened in full screen.

Variant selection
Manage variants
Save variant

Size M (Tablet)

Variant selection
Manage variants
Save variant

Size L (Desktop)

Variant selection
Manage variants
Save variant

Layout

The variant management control is used within the filter bar (next to the page title) and the table toolbar (next to the table title).

Filter Bar

The variant management control is located next to the page title within the page header container and saves the stored filter settings or both filter and table settings.

Variant management within filter bar next to the page title

Table

The variant management control can also store table settings (layout, column visibility, sorting, or grouping) independently of the filter settings.

It is placed as the first item within the table toolbar.

If a title or the variant management control is placed inside a toolbar, you need to apply the following styles:

The toolbar height must be set to 3 rem.

The toolbar design must be transparent.

The title must have the class “sapMH4Fontsize”.

Variant management within table toolbar

If the table has a separate title, place the title first.

Variant management with table title

Behavior and Interaction

This control allows the user to select, create, update, and delete variants within the filter bar. In the context of a table, this is the table configuration (layout, column visibility, sorting, and grouping).

Selecting a Variant

The control label displays the active variant. When the user selects it, a popover displays all available variants. The currently active variant is highlighted. To load another variant, the user simply selects one from the list.

Variants that have been modified but not saved are marked with an asterisk (*).

Selecting a variant

If more than 10 variants exist, a search option is displayed.

Select variant – Search option

The standard variant is the minimum set of variants which is delivered by SAP and cannot be modified or deleted.

Save

Save can only be applied to variants that the user is allowed to save. Otherwise, this button is disabled. Save overwrites the active variant.

Save As

Save As enables the user to save the current filter settings as a new variant. The Save As function can also be used to duplicate existing variants for later modification.

Manage

This opens a new dialog which allows the user to update and delete existing variants.

Creating – “Save As” Variant

The following options can be set:

Set as Default

The variant that is set to default is selected when the user launches the app.

Execute on Select

If this option is active, the variant is executed immediately. The user does not need to click or tap the ‘Go’ button. This option is often used if small filter changes need to be made before the user finally executes the search.

Save As

Share

The user can set the Share option to make a variant available to other users.

All variants that are shared by users or delivered by SAP, partners, or key users are available within the manage list and the selection list.

Create As Tile

A tile with the same label as the variant is created on the home page.

You can hide the options Execute on Select and Create as Tile by configuring the control correspondingly.

Information
Note that the you must still create the tile even if you select the Create as Tile flag.

Managing – Update/Delete Variant

Within the manage dialog, the user can rename, delete, and change properties of existing variants.

Users can only modify or delete entries if they have the necessary permissions. By default, variants which have been created by the user can also be modified and deleted. Users can also modify and delete entries from other users. This is currently a limitation.

Based on the configuration of the variant management control, the following column can be hidden or shown:

Execute on Select. (If this control is used in the context of tables, Execute on Select is hidden.)

Manage

Guidelines

In the context of variants, we recommend that you directly reference the variant with the tile. Use the name of the variant as the tile title. Map this as a preset title that cannot be edited by the user. In this case, whenever the variant is updated, the tile is updated accordingly.

Enable the option Create as Tile within the Save As dialog if your use case generally requires a tile to be created immediately after the Save As action. In some scenarios, such as MRP, variants and their respective tiles are created on a weekly basis and then removed.

If the variant has been modified but not yet saved (“dirty state”), ensure that the variant is saved before the tile is created.

Exception

If the variant cannot be referenced directly due to technical limitations, offer the standard tile creation option where only filter parameters and settings are saved within the URL. Do not offer the Create as Tile option within the Save As dialog.

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

Responsive Table (guidelines)

Table Toolbar (guidelines)

Filter Bar (guidelines)

Implementation

Variant Management (SAPUI5 samples)

Variant Management (SAPUI5 API reference)

Filter Bar / Smart Filter Bar

The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).

Information
From a UX point of view, the filter bar and the smart filter bar work in the same way even though they are generated differently. The filter bar is configured by app developers, while the smart filter bar is generated from data services and provides a variety of automatic functions. This article contains information about both filter bars.

Responsiveness

Because tables appear in many apps, from simple to complex ones, the filter bar needs to run on all form factors. While the main concept of the filter bar remains stable across the devices, its responsive design adapts the control’s behavior to match the ability of each device.

Size S (Smartphones)

Expanded filter bar (size S)
Collapsed filter bar (size S)
Filter dialog (size S)

Size M (Tablet)

Expanded filter bar (size M)
Collapsed filter bar (size M)
Filter dialog (size M)

Size L/XL (Desktops)

Expanded filter bar (size L/XL)
Collapsed filter bar (size L/XL)
Filter dialog (size L/XL)

Layout

Filter Dialog

The filters inside the filter dialog are arranged in a vertical linear layout. If filter groups are maintained, the filters are visually grouped in sections, with the filter group name at the top. A link at the end of each group allows the user to add or remove filters from that group. The link text is Change Filters if at least one filter is activated, indicating that filters can be added or removed. If no filters have been set for the group, the link text is More Filters, indicating that more filters can be added.

The first group is called “Basic” and contains the preset filters that come with the app. A checkbox next to each filter enables the user to show the corresponding filter on the expanded filter bar. If the checkbox is selected, the filter is shown on the expanded filter bar. If the checkbox is not selected, the filter is only visible within the filter dialog. In both cases, the filter is active if a value is entered.

The vertical layout of the filter dialog remains stable across all devices. To ensure a clean grid layout appearance, the size of the widest input field is inherited by all other filters.

Filter dialog (size L)
Filter dialog (size S)

Expanded Filter Bar

The expanded filter bar arranges the input fields in a simple horizontal linear layout. If the browser’s window size is reduced or the filters exceed the first line, a simple mechanism opens a new line of filters. The height of the expanded filter bar is not limited and adjusts to accommodate the filters that need to be shown. The label is always above the input field. As in the filter dialog, the size of the widest input field is inherited by all other filters. This avoids having unstable and busy-looking grid layouts.

Filter bar (size L) with one row of filters
Filter Bar (Size L) with more than one row of filters
Filter bar (size S) with vertical filters

Components

Collapsed Filter Bar

The collapsed filter bar takes up very little space, leaving the bulk of the screen to display the actual results. However, the variant selector in the upper left corner is still available for switching between variants. The user can expand or collapse the filter bar by clicking on the header. If required by the use case, the filter bar can be expanded by default.

On desktop and tablet devices, the collapsed filter bar shows a summary of the filters currently applied. It shows Filtered By (x):, where “x” stands for the number of applied filters. This is followed by a comma-separated list of the filters currently applied. Up to 5 filters are listed. If more filters have been applied, an ellipsis (…) shows at the end of the string. If no filters have been applied, the summary text is Filtered By: None.

Collapsed filter bar

Expanded Filter Bar

Developer Hint
Smart filter bar: See the parameters for configuring the expanded filter bar.

In addition to the collapsed filter bar, the expanded filter bar shows a user-defined filter subset of the currently selected variant.

The Adapt Filters (x) link opens the filter dialog, and allows the user to add filters or hide them. The Go button triggers the filter. The Go button is only shown in manual mode.

Expanded filter bar

Filter Dialog

Developer Hint
Smart filter bar: See the parameters for configuring the filter dialog.

The filter dialog is the central component that shows all filters of the selected variant, allowing the user to add filters to the variant or remove them. Filters are arranged into their respective filter groups. The user can search for a specific filter by name in the search bar at the top.

The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified variant filter set (Save and Save As can be provided)

Cancel: Closes the dialog and undoes all changes

Restore: Restores the initial variant values (you can hide this button if it does not fit the app’s use case)

Go: Executes the selected filter set

Clear (optional): Clears all input fields/filters (this button should only be used if it fits the app’s use case)

The user can choose to hide filters on the expanded filter bar by deselecting the relevant checkbox next to the filter in the filter dialog (for example, if a filter is rarely edited, or unimportant).

Filter dialog

Variant Selector

The variant selector is used to select the current variant, and also provides access to variant management.

Variant selector

Filter/Input Controls

Developer Hint
For development information, see data types for the smart filter bar.
Filter/input controls

Which filter control is used in the filter dialog or the expanded filter bar depends on the use case. Use the value help control if you want to offer an advanced function for selecting single or multiple items either inline (by entering text) or by means of a dialog. If there is a predefined list for single or multiple selection, use the combo box control. For temporal information you can use the date picker or date range selector.

Additionally recommended input fields:

Input

Select

Combo box

Multi-combo box

Multi-input

Value help

Date picker

Date range selection

Date/time picker

Rating Indicator

Behavior and Interaction

The filter bar contains the following actions:

Select a Variant

The main use case for the filter bar is to select and execute variants that influence the list of items. In this example, the variant applies its filter set automatically. The item list is filtered without the user needing to click Go.

Adding Filters to a Variant

In the filter dialog the user can access more filters for every filter group. Filters can then be added or removed in a separate dialog. Once a filter has been added or removed, it appears or disappears from the filter dialog. If the user selects the checkbox next to the filter, the filter is displayed on the extended filter bar.

Personalizing the Expanded Filter Bar

Users can hide a filter on the expanded filter bar by deselecting the checkbox next to the relevant filter in the filter dialog. This allows the user to hide filters that are rarely changed from the extended filter bar, giving complex filters a more lightweight appearance.

Guidelines

Default Variant Filters

For all filter bars, provide a set of predefined default filters that come with the app (“Basic” group in the filter dialog). Include filters that are:

Mandatory / crucial to the use case

Frequently used

Vital for reducing the number of items in the list

Users can hide filters in the “Basic” group, but cannot remove them from the filter dialog.

Default variant "Basic"

Default Values

Provide a meaningful default value for as many filters as possible. Meaningful default values depend on your use case.

A default value for date ranges, for example, should reflect the time frame the user would normally apply. App designers need to decide which time frame is appropriate.

Appropriate default values are particularly crucial for filter sets and list reports that operate on large datasets. In this case, consider making certain default filters mandatory to help the user avoid loading very large datasets unnecessarily.

Filter without default value
Filter with available Values
Filter with a default value

Table Filtering and Table Searching

Provide the user with a central location filtering and searching. If you use a filter bar, do not provide filter options or search options for the control below (for example, a table, chart, or list.). Avoiding multiple filter locations also helps to prevent confusing or contradictory entries (for example between the filter bar and a table filter).

Do
Table without filtering option
Don't
Table with filtering option

Initial State

The filter bar can initially be collapsed or expanded, depending on the use case:

Initial State Collapsed

If the app has a default variant that is executed on loading, the table is prefilled, and the user seldom changes the filters, the app can start with a collapsed filter bar.

Initial State Expanded

If the app does not use a default variant and the user has to set a filter to obtain a first result set for the table, start with an expanded filter bar. Also, if a vast number of items are expected, include some mandatory filters. Since the user first has to enter values for these filters, start with an expanded filter bar. If you are in any doubt, start the app with an expanded filter bar.

Note: At least one filter must be defined to begin with. This filter is set within the basic group by app designers. If the use case allows, and depending on the size of the result set, provide a table that is initially filled.

Initial state collapsed
Initial state expanded

Basic Search Field

The basic search field allows the user to filter the results by a given keyword. In contrast to the other input fields, the basic search field has a placeholder text instead of a label.

Note: If you need to provide a search field, use the basic search field. The search field within the table must be deactivated.

Filter bar with basic search field

Manual Update/Live Update

The filter bar is available in two separate modes: manual update mode and live update mode.

Manual Update

With manual update, the filter results are only updated when the user clicks or taps Go. A Go button is therefore mandatory in manual update mode. Pressing enter on the keyboard also triggers the filter.

Live Update

With live update mode, the filter bar reacts instantly to every input change. The result table is updated every time the user changes a filter field or the search field. Therefore, a Go button is not necessary and is not shown if live update mode is used.

Additionally, the search is triggered with every letter that is entered. Starting with the first letter typed in, the table is updated with the results that match all set filters that include the search term.

Which One to Use

Use live update mode by default as it is more convenient for the user. If the user has to configure multiple filters to obtain a useful result set, or if the resulting traffic is expected to be excessively high, consider using manual update mode instead.

Filter bar in manual update mode
Filter bar in live update mode

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

Variant Management (guidelines)

Smart Filter Bar Annotations (guidelines)

Implementation

Filter Bar (SAPUI5 samples)

Smart Filter Bar (SAPUI5 samples)

Filter Bar (SAPUI5 API reference)

Smart Filter Bar (SAPUI5 API reference)

Variant Management Example (SAPUI5 samples)

Variant Management Example (SAPUI5 API reference)

Filter Item (SAPUI5 API reference)

Filter Group Item (SAPUI5 API reference)

Smart Filter Bar Annotations

Information
This article is intended as an aid to designers and developers who want to explore the detail configuration options available for the smart filter bar.

The smart filter bar is a wrapper that analyzes a given OData service and renders a filter bar based on the content defined by the service. For example, the OData service determines whether a field is visible on the filter bar, and whether it supports type-ahead and value help. To configure more settings or overwrite the settings from the OData service, the developer can set additional annotations in an external document (metadata.xml).

Developers can use annotation properties in the classes [external_only]ControlConfiguration and GroupConfiguration to adapt the filter bar for the purposes of the app.

These annotations let you:

Determine the type of control (for example, whether a field is shown as a multi-input field or as a date picker)

Enable the autocomplete suggestions feature

Enable the value help dialog

Overwrite settings from the OData service

Set custom filter groups

Add custom fields

Access all settings for the underlying filter bar

You can also use all the configuration options described here in the smart filter bar for the list report SAP Fiori element.

Warning
Most of the attributes/properties are not dynamic and cannot be changed once the control has been initialized.

Usage

Use the smart filter bar if:

An OData service is available.

You want to develop quickly and efficiently.

Do not use the smart filter bar if:

You need to make extensive changes to the filter bar.

Components

You can use the annotation properties listed below to influence how filters are rendered in the expanded filter bar and in the filter dialog.

Expanded Filter Bar

Smart filter bar - Properties for the expanded filter bar

1 enableBasicSearch

Defines whether the filter bar includes a basic search. By default, the basic search is not included.

2 FilterRestrictions/NonFilterableProperties

Defines whether a property is available as a filter criterion.

3 FilterRestrictions/RequiredProperties

Defines the filter field as a mandatory filter. Mandatory filters are marked by an asterisk (*).

4 ValueList

Contains annotations that provide information for rendering a value help list that has been set for a property.

5 FilterExpressionType/MultiValue

Defines whether multiple values can be used in a single filter.

6 FilterExpressionType/SingleValue

Restricts the filter to allow only one value entry.

7 LineItem/Label

A short, human-readable text for the filter name.

8 FilterExpressionType/SingleInterval

Restricts the filter to a specified interval, such as a date interval.

8 insertDefaultFilterValue

Inserts a default filter value into the aggregation defaultFilterValues.

9 liveMode

Defines whether the expanded filter bar is shown in live mode (no Go button) or in manual mode. By default, the filter bar is shown in manual mode.

Filter Dialog

1 FilterRestrictions/RequiredProperties

Defines the filter field as a mandatory filter. Mandatory filters are marked by an asterisk (*).

2 FieldControlType/Hidden

Defines whether the filter is initially visible on the expanded filter bar.

3 SelectionFields

Defines whether a filter belongs to the basic group. All filters in the basic group are initially visible on the expanded filter bar.

4 FieldGroup

Defines whether a filter field is initially shown on the filter dialog, and which group it belongs to.

5 FilterRestrictions/NonFilterableProperties

Defines whether a property is available as a filter criterion.

6 LineItem/Label

A short, human-readable text for the filter name.

SmartFilterBar Properties on the Filter Dialog

Data Types

The smart filter bar analyzes and interprets the metadata provided by the OData service. This allows you to create complex UI entities, and to automatically add fields offered by the OData service to the filter bar as editable input fields. (Note that only fields marked with sap:filterable are added automatically.)

The tables below tell you which input controls are used for the key data types.

General Data Types

DataType ODataMetadata Additional Configuration Edit type Display type Notes

* * Input Text

DateTime – sap:display-format=”Date” DatePicker Text

Decimal – Precision=”3″ Scale=”0″ Input Text

All – Input (with VHD) Text If a matching ValueList annotation is found, the ValueHelp for the Input is enabled.
A ValueHelp Dialog is created automatically, based on the data in the ValueList annotation.

All –
sap:semantics=”fixed-values” on the ValueList entity
ComboBox Text If a matching ValueList annotation is found, and the ValueList entity has the semantics=”fixed-values”, a dropdown list is shown.

Filter Bar-Specific Data Types

Input Type sap:filter-restriction display-format hasValueHelpDialog controlType Resulting Control Type

* * controlType/filterType is specified As specified in additional configuration

DateTime “interval” “Date” NA Date Range Selection

DateTime “anything other than interval” or empty “Date” NA Date Picker

String “single-value” “true” / none Input Field With Value Help Dialog
(with typeAhead according to hasTypeAhead flag)

String “single-value” “false” not specified/input Input Field
(with typeAhead according to hasTypeAhead flag)

String “single-value” “false” dropDownList; hasTypeAhead is not considered here ComboBox

* “single-value” Input Field

String empty or no filter-restriction “true” / none Multi Input Field with Value Help Dialog

String “multi-value” “true” / none If no VL Annotation is found – only show the range selection part

String “multi-value” / empty “false” If no VL Annotation is found – hide the ValueHelpDialog icon

String “multi-value” / empty “false” dropDownList MultiComboBox

* “multi-value” Input Field

* “interval” NA A single Input Field that allows the “-” shortcut notation for intervals

Properties

FilterBar

Filter Bar Properties

persistencyKey
Data type: string
Key used to access personalization data.

advancedMode
Data type: boolean
The advanced mode overwrites the standard behavior and is used in the value help scenario.
Default value is false.

expandAdvancedArea
Data type: boolean
Defines whether the advanced area is expanded when the filter bar is used within the value help dialog.
Default value is false.

searchEnabled
Data type: boolean
Enables/disables the Search button in advanced mode.
Default value is true.

filterBarExpanded
Data type: boolean
Shows/hides the expanded filter bar.
Default value is true.

considerGroupTitle
Data type: boolean
If this property is set, the label for filters is prefixed with the group title.
Default value is false.

showClearButton
Data type: boolean
Handles visibility of the Clear button on the Filters dialog.
Default value is false.

showRestoreButton
Data type: boolean
Handles visibility of the Restore button on the Filters dialog.
Default value is true.

showGoOnFB
Data type: boolean
Handles visibility of the Go button on the filter bar.
Default value is true.

showRestoreOnFB
Data type: boolean
Handles visibility of the Restore button on the filter bar.
Default value is false.

showClearOnFB
Data type: boolean
Handles visibility of the Clear button on the filter bar.
Default value is false.

showGoButton
Data type: boolean
Handles visibility of the Go button on the filter bar.

deltaVariantMode
Data type: boolean
Stores the delta as compared to the standard variant.
Default value is true.

filterContainerWidth
Data type: string
Sets the width of the filter container.
Default value is 12rem.

useToolbar
Data type: boolean
Determines what design should be used. Default is the design with the toolbar. In mobile scenarios this property is ignored – the design with the toolbar is always used.
Default value is true.

header
Data type: string
Specifies the header text that is shown in the toolbar on the first position. This property is ignored, when useToolbar is set to false.

showFilterConfiguration
Data type: boolean
Handles visibility of the Filters button on the filter bar.
Default value is true.

Smart Filter Bar

Smart Filter Bar Properties

entitySet
Data type: string
The OData entity set whose metadata is used to create the SmartFilterBar. Note: Changing this value after the SmartFilterBar is initialized (initialize event was fired) has no effect.

basicSearchFieldName
Data type: string
Name of the field that has to be the focus of the basic search. This is only relevant for SmartFilterBar in combination with ValueHelpDialog.

enableBasicSearch
Data type: boolean
Enables the basic search field in the SmartFilterBar control. This must only be enabled for entities that support such search behavior.
Default value is false.

liveMode
Data type: boolean
Defines the live mode. The live mode only operates on non-phone scenarios.
Default value is false.

showMessages
Data type: boolean
If set to false, any errors that occur during the search will not be displayed in a message box.
Default value is true.

considerAnalyticalParameters
Data type: boolean
Indicates if the analytical parameters (SelectionVariant) must be taken into consideration.
Default value is false.

Smart Filter Bar Annotations

FilterRestrictions/NonFilterableProperties
Defines whether a Property can be used for filtering data.

FieldGroup
Defines a group for a filter field.

TextArrangement
Describes the arrangement of a code value and its text.

FieldControlType/Hidden
Defines whether the filter is visible.

ValueList
Contains annotations that provide information for rendering a ValueHelpList that has been set for a Property.

Label
A short, human-readable text for the filter name.

LineItem/Label
A short, human-readable text suitable for the filter name.

FilterRestrictions/RequiredProperties
Defines the filter field as mandatory filter.

FilterExpressionType/MultiValue
Defines whether multiple values can be used in a single filter.

FilterExpressionType/SingleValue
Restricts the filter to allow only one value entry.

FilterExpressionType/SingleInterval
Restricts the filter to a specified interval, such as a date interval.

SelectionFields
Defines whether certain fields should be initially visible in the SmartFilterBar control.

Control Configuration

Control Configuration Properties

key
The key property corresponds to the field name from the OData service metadata document.
Default value is string

groupId
The groupId can be used to move a field from one group to another. The groupId corresponds to the EntityName from the OData metadata. It is also possible to move a field from the advanced area to the basic area by specifying the groupId _BASIC.
Default value is string

label
You can use this property to overwrite the label of a filter field in the SmartFilterBar.
Default value is string

visible
Data type: boolean
You can use this flag to hide fields from the OData metadata.
Default value is true

hasValueHelpDialog
Data type: boolean
Specifies whether a value help dialog is available or not.
Default value is true

controlType
Data type: sap.ui.comp.smartfilterbar.ControlType
The SmartFilterBar calculates which kind of control will be used for a filter field, based on multiple OData attributes and annotations. You can use this property to overwrite the OData metadata.
Default value is auto

filterType
Data type: sap.ui.comp.smartfilterbar.FilterType
The filter type specifies whether the filter field is for a single value, multiple values, or an interval. The filter type calculated by the SmartFilterBar is based on the OData metadata. You can use this property to configure the filter type manually.
Default value is auto

index
Data type: int
You can use the zero-based index to specify the initial order of fields (without any variants).
Default value is -1

Control Configuration Properties

hasTypeAhead
Data type: boolean
You can use this property to enable the TypeAhead service. Note that TypeAhead does not work with all controls (for example, it is not supported for the DropDownListbox).
Default value is true

mandatory
Data type: sap.ui.comp.smartfilterbar.MandatoryType
You can use this property to overwrite the mandatory state of a filter field. This property can only be set during initialization. Changes at runtime will be ignored.
Default value is auto

width
Default value is string
The width of the filter field in a CSS compatible format. The width can be set only once during initialization. Changes at runtime will not be reflected. The width is not applied to custom controls.

visibleInAdvancedArea
Data type: boolean
If set to true, this field will be added to the advanced area (aka. Dynamic Selection) by default.
Default value is false

preventInitialDataFetchInValueHelpDialog
Data type: boolean
If value help annotations are available for this filter field, you can prevent the the table in the value help dialog for this field from being filled with the initial data fetch.
Default value is true

displayBehaviour
Data type: sap.ui.comp.smartfilterbar.DisplayBehaviour
The displayBehaviour specifies how to display the content on certain controls. For example: DescriptionOnly for Combobox (DropDown text), Description and ID for MultiInput (token text)
Default value is auto

conditionType
Data type: any
The condition Type class name to use for this filter item. Implementation should derive from sap.ui.comp.config.condition.Type.

Group Configuration

Group Configuration Properties

key
Data type: string
The key property shall correspond to the name EntityTypeName from the OData service $metadata document.

index
Data type: any
Zero-based integer index. The index can be used to specify the order of groups. If no index is specified, the order defined by the OData metadata will be used.
Default value is undefined

label
Data type: any
You can use this property to overwrite the label of a group in the advanced area of the SmartFilterBar.
Default value is undefined

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

Filter Bar/ Smart Filter Bar (guidelines)

Implementation

Smart Filter Bar (SAPUI5 samples)

Smart Filter Bar (SAPUI5 API reference)

UI Development Toolkit (SAPUI5 samples)

Variant Management

Variants store filter settings which have been defined within the filter bar. The filter settings consist of filter parameters, selection fields and a layout. This control enables the user to load, save, and change variants. In some cases, the table settings are also saved within a variant.

In the context of tables, this control is used to save, manage, and load table settings which include layout, column visibility, sorting, and grouping.

Smart variant management saves both filter settings and table layouts. It creates a page variant that includes all the controls. The button is located within the page header bar, and no secondary management is possible on table level.

Usage

Use the variant management control if:

The user needs to save and load different filter settings to find the relevant data.

The user needs to save and load different layouts (for example, a table) to display data in different views.

Use smart variant management if the user needs to save the page including the filter settings and table layout.

Responsiveness

Size S (Smartphone)

Variant selection, manage dialog, and save dialog are opened in full screen.

Variant selection
Manage variants
Save variant

Size M (Tablet)

Variant selection
Manage variants
Save variant

Size L (Desktop)

Variant selection
Manage variants
Save variant

Layout

The variant management control is used within the filter bar (next to the page title) and the table toolbar (next to the table title).

Filter Bar

The variant management control is located next to the page title within the page header container and saves the stored filter settings or both filter and table settings.

Variant management within filter bar next to the page title

Table

The variant management control can also store table settings (layout, column visibility, sorting, or grouping) independently of the filter settings.

It is placed as the first item within the table toolbar.

If a title or the variant management control is placed inside a toolbar, you need to apply the following styles:

The toolbar height must be set to 3 rem.

The toolbar design must be transparent.

The title must have the class “sapMH4Fontsize”.

Variant management within table toolbar

If the table has a separate title, place the title first.

Variant management with table title

Behavior and Interaction

This control allows the user to select, create, update, and delete variants within the filter bar. In the context of a table, this is the table configuration (layout, column visibility, sorting, and grouping).

Selecting a Variant

The control label displays the active variant. When the user selects it, a popover displays all available variants. The currently active variant is highlighted. To load another variant, the user simply selects one from the list.

Variants that have been modified but not saved are marked with an asterisk (*).

Selecting a variant

If more than 10 variants exist, a search option is displayed.

Select variant – Search option

The standard variant is the minimum set of variants which is delivered by SAP and cannot be modified or deleted.

Save

Save can only be applied to variants that the user is allowed to save. Otherwise, this button is disabled. Save overwrites the active variant.

Save As

Save As enables the user to save the current filter settings as a new variant. The Save As function can also be used to duplicate existing variants for later modification.

Manage

This opens a new dialog which allows the user to update and delete existing variants.

Creating – “Save As” Variant

The following options can be set:

Set as Default

The variant that is set to default is selected when the user launches the app.

Execute on Select

If this option is active, the variant is executed immediately. The user does not need to click or tap the ‘Go’ button. This option is often used if small filter changes need to be made before the user finally executes the search.

Save As

Share

The user can set the Share option to make a variant available to other users.

All variants that are shared by users or delivered by SAP, partners, or key users are available within the manage list and the selection list.

Create As Tile

A tile with the same label as the variant is created on the home page.

You can hide the options Execute on Select and Create as Tile by configuring the control correspondingly.

Information
Note that you must still create the tile even if you select the Create as Tile flag.

Managing – Update/Delete Variant

Within the manage dialog, the user can rename, delete, and change properties of existing variants.

Users can only modify or delete entries if they have the necessary permissions. By default, variants which have been created by the user can also be modified and deleted. Users can also modify and delete entries from other users. This is currently a limitation.

Based on the configuration of the variant management control, the following column can be hidden or shown:

Execute on Select. (If this control is used in the context of tables, Execute on Select is hidden.)

Manage

Guidelines

In the context of variants, we recommend that you directly reference the variant with the tile. Use the name of the variant as the tile title. Map this as a preset title that cannot be edited by the user. In this case, whenever the variant is updated, the tile is updated accordingly.

Enable the option Create as Tile within the Save As dialog if your use case generally requires a tile to be created immediately after the Save As action. In some scenarios, such as MRP, variants and their respective tiles are created on a weekly basis and then removed.

If the variant has been modified but not yet saved (“dirty state”), ensure that the variant is saved before the tile is created.

Exception

If the variant cannot be referenced directly due to technical limitations, offer the standard tile creation option where only filter parameters and settings are saved within the URL. Do not offer the Create as Tile option within the Save As dialog.

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

Responsive Table (guidelines)

Table Toolbar (guidelines)

Filter Bar (guidelines)

Implementation

Variant Management (SAPUI5 samples)

Variant Management (SAPUI5 API reference)

Icon Tab Bar

The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.

There are two key use cases:

You want to let users navigate between different object facets in the object details area.

You want to let users filter lists, and give them the option of calling up the entire list, or only items with a specific attribute.

In both cases, the user switches between tab pages by clicking or tapping the respective tab.

Usage

Use the icon tab bar if:

Your business objects need to show many facets at the same time.

You want to allow the user to browse through these facets.

You need a prominent or very visual filter on top of a list.

You have clear-cut process steps that need to be visualized.

Do not use the icon tab bar if:

An object type has only one tab in the entire app.
In this case, we recommend removing the icon tab bar and placing the content on the same level as the object header. To replace the tab label, add a headline with the same text (for example, Information).

Responsiveness

The icon tab bar stretches horizontally, and soon runs out of space on small screens. It responds to limited space by offering a scrolling mechanism.

Responsiveness - Icon tabs
Responsiveness - Text tabs

Layout

The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from. These are described in detail below.

Types

You can use the icon tab bar control to build the following types of tab bars:

Text only

Icon tabs

Tabs as filters

Tabs as process steps

Text Only

The text-only variant is one of the most common types. It allows longer labels, and can also display counters above the text to indicate the number of items on the tab page.

Unlike all other tab variants, the labels do not get truncated. The full text is always shown. As a result, you need to ensure that your labels do not become too long. They should still be easy to read on smaller screens.

If you use text-only tabs, make sure that the property UpperCase is disabled and that you enter the labels in title case (Example: Approval Flow).

Types ─ Text-only without counters
Types ─ Text-only with inline counters

Counters and Text Tabs

If counters are used, set the property HeaderMode to Inline so the counters appear in brackets after the labels.

Please do not use the old layout that shows the counters on top of the labels (Headermode = Standard).

Do
Counters – Inline Layout ('HeaderMode' set to 'Inline')
Don't
Counters – Old Layout ('HeaderMode' set to 'Standard')

Icon Tabs

Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.

Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.

Types - Icons with counters

Please note that starting with SAPUI5 version 1.40, you should only use the horizontal type of label (icon and label side by side).

If your labels get truncated, consider using shorter labels or text tabs (without icons), as text tabs cannot get truncated.

Types - Icons with counters and labels
Types - Icon-only

Tabs as Filters

If you build the tab bar as a filter, it can comprise two parts:

An “all” tab on the left (optional)
This tab shows the total number of items, and describes the type of item (for example, 189 Products).

Tabs for specific filters
Use the tab text to indicate the filter attribute.
We strongly recommend showing a counter on every tab.

Types - Filter

Tabs as Process Steps

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

To connect the steps, use the triple-chevron icon () from the SAP icon font (technical name: process).

Types - Process

Developer Hint
When using icons with labels, add a comment in the properties file to make editors and translators aware that space is limited.
Example: Label for icon tab on detail screen. Max 14-16 characters (depending on character width).

Test whether your labels and their translations are displayed in full, and do not get truncated.

Behavior and Interaction

Clicking/Tapping on Tab

To navigate through the views, the user clicks or taps the tabs.

Optional behavior: If the user clicks or taps a tab that’s already open, the container collapses. It opens again when the user clicks any tab.

Use the “expandable” property to specify whether users can collapse the tab container (default = true):

Let users collapse the container if there is additional content below the container, and the information inside the container is not always needed.

If there is no content below the tab container, set the “expandable” property to false.

The “expandable” property controls the initial state of the container. Do not change the default state (true).

Styles

The two different styles (round tabs and text only) are discussed in the Types section.

In both cases, you can use colors to give users additional orientation.

Information
Do not use colors for decoration only. Colors should always indicate a status that is relevant to the user.

When using colors, stick to the semantic colors provided by visual design. Do not hard-code color values. Instead, use the CSS extension “Less”.
Only use semantic colors if it is important for users to know that they need to take action (for example, to indicate errors or critical situations requiring action). Otherwise, use the neutral default colors.

This example shows a process where one step is indicating an error. Since the other tabs have neutral colors, it is clear that they do not contain errors. Coloring them green to show that they are OK is unnecessary, and would reduce the severity of the red tab.

Styles - Colors

Guidelines

Apply the styles as follows:

If you have only a few tabs that can easily be visualized with icons, use the icon-only tabs. If a short description is needed, use icons and labels.

If the content cannot easily be identified by an icon, use the text-only tabs. They also allow for longer labels.

If you are using the icon tab bar in the object view floorplan, use either icon-only or text-only tabs.
Icons only:
Use this option if you have only 4–5 tabs that can be very clearly identified by their icon.
Text only:
Use this option if you have more than 4–5 tabs, or if there are no clear icons to represent the content. Set the property HeaderMode to Inline.

Do
Counters – Inline Layout ('HeaderMode' set to 'Inline')

Don't
Counters – Old Layout ('HeaderMode' set to 'Standard')

If you use icon tabs, ensure the following:

The icons clearly identify the content on the tab pages.

Each tab has a unique icon. Do not use the same icon more than once.

The icons are easily distinguishable.

Any icons between tabs (for example, as separators or connectors) are visually very different from the icons on the tabs.

Either all or none of the icons have labels.

Implement the focus as follows:

By default, show the first tab as open. This is the initial setting provided by the control.
Note: Technically, you can also override the initial selection. However, this is not recommended.

Later on, you can show the tab last selected by the user.

Additional guidelines:

Do not display a loading indicator above the tab while the number for the item count is loading.

Handle empty tabs as follows:

Hide tabs that do not contain any information, and do not allow the user to create content..

Show empty tabs that allow users to create content, such as notes or attachments.

Only use the tab bars to navigate between tabs. Do not use any other navigation links. For example, do not let users click an item in tab A that takes them to tab B.
This type of cross-navigation inside a container is confusing, and cannot be handled by the back navigation.

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

No links

Implementation

Icon Tab Bar (SAPUI5 samples)

Icon Tab Bar (SAPUI5 API reference)

Token

Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.

Token

Usage

Use tokens only in the multi-combo box, multi-input control, or value help dialog.

Components

The tokenizer is an invisible container that can display multiple tokens.

Tokens have the following properties:

They usually contain single text items.

They may also contain key-value pairs, such as John Miller (ID1234567).

They contain a Remove icon , which is invisible if the token is in edit mode.

Tokens with a surrounding tokenizer

Behavior and Interaction

Interacting

Users can interact with tokens using a mouse, keyboard, and/or touch input. In size L (desktop) only, hovering with the mouse over the token produces a tooltip with the entire content of the token (on a maximum of two lines).

Selecting and Deselecting Tokens

Users can select tokens by clicking or tapping them, or by using the keyboard. The selected tokens are then indicated. Users can select multiple tokens separately by holding down the CTRL key and selecting the relevant tokens, for example, by clicking them.

The user can select a series of tokens by placing the cursor in an initial position (which can also be a token), holding down the SHIFT key, and clicking or tapping a new position. The tokens between these two cursor positions are then selected.

To replace a token, the user selects it and enters new characters.

Adding Tokens

The user can add tokens to the multi-combo box and multi-input control. New tokens are added in the order in which they are entered.

Information
For information on how to manage leading and treading whitespace (blanks) when copying and pasting text into input controls, please see removing leading and trailing whitespace.

Removing Tokens

The user can instantly remove tokens via the keyboard, or by clicking or tapping the Remove icon .

Styles

There are five different styles of tokens: regular, on hover, selected, selected on hover and read-only. These styles correspond to the type of interaction being used.

Regular

On hover

Selected

Read only

Hover selected

Guidelines

The tokenizer can also be used as a tag container.

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

Multi-Combo Box (guidelines)

Multi-Input Field (guidelines)

Value Help Dialog (guidelines)

Combo Box (guidelines)

Implementation

Tokens (SAPUI5 samples)

Tokenizer (SAPUI5 samples)

Tokens (SAPUI5 API reference)

Tokenizer (SAPUI5 API reference)

Info Bar

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

Filter criteria: The info bar indicates the filter criteria that have been applied for a filter or contextual filter. Do not show the info bar if no filter is applied.

Selected items: In a multi-select dialog, the info bar shows the number of selected items.

Info bar 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 info bar for a contextual filter.

Types

There are three situations in which an info bar is shown:

After a general filter has been applied.

After a contextual filter has been applied.

After the user has selected multiple items in a select dialog.

General Filter

All applied filters are shown as labels in the info bar.

Info bar 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.

Info bar after a contextual filter has been applied

Multiselection

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

Info bar after multiselection has been applied

Components

The info bar 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.

Info bar 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

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 or taps 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 info bar with a single filter shows the detailed filter selection.
Clicking the info bar with multiple filters shows the filter categories.

Icon Area

Cancel: The user clicks or taps 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.

Properties

The contextual filter is not a separate control. If you want to build an info bar, you need to use the sap.m.toolbar control. To achieve the info bar 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

Select Dialog (guidelines)

Contextual Filter (guidelines)

Toolbar (guidelines)

View Settings Dialog (guidelines)

Implementation

No links

Filter Bar / Smart Filter Bar

The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).

Information
From a UX point of view, the filter bar and the smart filter bar work in the same way even though they are generated differently. The filter bar is configured by app developers, while the smart filter bar is generated from data services and provides a variety of automatic functions. This article contains information about both filter bars.

Responsiveness

Because tables appear in many apps, from simple to complex ones, the filter bar needs to run on all form factors. While the main concept of the filter bar remains stable across the devices, its responsive design adapts the control’s behavior to match the ability of each device.

Size S (Smartphones)

Expanded filter bar (size S)

Collapsed filter bar (size S)

Filter dialog (size S)

Size M (Tablet)

Expanded filter bar (size M)

Collapsed filter bar (size M)

Filter dialog (size M)

Size L/XL (Desktops)

Expanded filter bar (size L/XL)

Collapsed filter bar (size L/XL)

Filter dialog (size L/XL)

Layout

Filter Dialog

The filters inside the filter dialog are arranged in a vertical linear layout. If filter groups are maintained, the filters are visually grouped in sections, with the filter group name at the top. A link at the end of each group allows the user to add or remove filters from that group. The link text is Change Filters if at least one filter is activated, indicating that filters can be added or removed. If no filters have been set for the group, the link text is More Filters, indicating that more filters can be added.

The first group is called “Basic” and contains the preset filters that come with the app. A checkbox next to each filter enables the user to show the corresponding filter on the expanded filter bar. If the checkbox is selected, the filter is shown on the expanded filter bar. If the checkbox is not selected, the filter is only visible within the filter dialog. In both cases, the filter is active if a value is entered.

The vertical layout of the filter dialog remains stable across all devices. To ensure a clean grid layout appearance, the size of the widest input field is inherited by all other filters.

Filter dialog (size L)

Filter dialog (size S)

Expanded Filter Bar

The expanded filter bar arranges the input fields in a simple horizontal linear layout. If the browser’s window size is reduced or the filters exceed the first line, a simple mechanism opens a new line of filters. The height of the expanded filter bar is not limited and adjusts to accommodate the filters that need to be shown. The label is always above the input field. As in the filter dialog, the size of the widest input field is inherited by all other filters. This avoids having unstable and busy-looking grid layouts.

Filter bar (size L) with one row of filters
Filter Bar (Size L) with more than one row of filters
Filter bar (size S) with vertical filters

Components

Collapsed Filter Bar

The collapsed filter bar takes up very little space, leaving the bulk of the screen to display the actual results. However, the variant selector in the upper left corner is still available for switching between variants. The user can expand or collapse the filter bar by clicking on the header. If required by the use case, the filter bar can be expanded by default.

On desktop and tablet devices, the collapsed filter bar shows a summary of the filters currently applied. It shows Filtered By (x):, where “x” stands for the number of applied filters. This is followed by a comma-separated list of the filters currently applied. Up to 5 filters are listed. If more filters have been applied, an ellipsis (…) shows at the end of the string. If no filters have been applied, the summary text is Filtered By: None.

Collapsed filter bar

Expanded Filter Bar

Developer Hint
Smart filter bar: See the parameters for configuring the expanded filter bar.

In addition to the collapsed filter bar, the expanded filter bar shows a user-defined filter subset of the currently selected variant.

The Adapt Filters (x) link opens the filter dialog, and allows the user to add filters or hide them. The Go button triggers the filter. The Go button is only shown in manual mode.

Expanded filter bar

Filter Dialog

Developer Hint
Smart filter bar: See the parameters for configuring the filter dialog.

The filter dialog is the central component that shows all filters of the selected variant, allowing the user to add filters to the variant or remove them. Filters are arranged into their respective filter groups. The user can search for a specific filter by name in the search bar at the top.

The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified variant filter set (Save and Save As can be provided)

Cancel: Closes the dialog and undoes all changes

Restore: Restores the initial variant values (you can hide this button if it does not fit the app’s use case)

Go: Executes the selected filter set

Clear (optional): Clears all input fields/filters (this button should only be used if it fits the app’s use case)

The user can choose to hide filters on the expanded filter bar by deselecting the relevant checkbox next to the filter in the filter dialog (for example, if a filter is rarely edited, or unimportant).

Filter dialog

Variant Selector

The variant selector is used to select the current variant, and also provides access to variant management.

Variant selector

Filter/Input Controls

Developer Hint
For development information, see data types for the smart filter bar.

Filter/input controls

Which filter control is used in the filter dialog or the expanded filter bar depends on the use case. Use the value help control if you want to offer an advanced function for selecting single or multiple items either inline (by entering text) or by means of a dialog. If there is a predefined list for single or multiple selection, use the combo box control. For temporal information you can use the date picker or date range selector.

Additionally recommended input fields:

Input

Select

Combo box

Multi-combo box

Multi-input

Value help

Date picker

Date range selection

Date/time picker

Rating Indicator

Behavior and Interaction

The filter bar contains the following actions:

Select a Variant

The main use case for the filter bar is to select and execute variants that influence the list of items. In this example, the variant applies its filter set automatically. The item list is filtered without the user needing to click Go.

Adding Filters to a Variant

In the filter dialog the user can access more filters for every filter group. Filters can then be added or removed in a separate dialog. Once a filter has been added or removed, it appears or disappears from the filter dialog. If the user selects the checkbox next to the filter, the filter is displayed on the extended filter bar.

Personalizing the Expanded Filter Bar

Users can hide a filter on the expanded filter bar by deselecting the checkbox next to the relevant filter in the filter dialog. This allows the user to hide filters that are rarely changed from the extended filter bar, giving complex filters a more lightweight appearance.

Guidelines

Default Variant Filters

For all filter bars, provide a set of predefined default filters that come with the app (“Basic” group in the filter dialog). Include filters that are:

Mandatory / crucial to the use case

Frequently used

Vital for reducing the number of items in the list

Users can hide filters in the “Basic” group, but cannot remove them from the filter dialog.

Default variant "Basic"

Default Values

Provide a meaningful default value for as many filters as possible. Meaningful default values depend on your use case.

A default value for date ranges, for example, should reflect the time frame the user would normally apply. App designers need to decide which time frame is appropriate.

Appropriate default values are particularly crucial for filter sets and list reports that operate on large data sets. In this case, consider making certain default filters mandatory to help the user avoid loading very large datasets unnecessarily.

Filter without default value
Filter with available Values
Filter with a default value

Table Filtering and Table Searching

Provide the user with a central location filtering and searching. If you use a filter bar, do not provide filter options or search options for the control below (for example, a table, chart, or list.). Avoiding multiple filter locations also helps to prevent confusing or contradictory entries (for example between the filter bar and a table filter).

Do
Table without filtering option

Don't
Table with filtering option

Initial State

The filter bar can initially be collapsed or expanded, depending on the use case:

Initial State Collapsed

If the app has a default variant that is executed on loading, the table is prefilled, and the user seldom changes the filters, the app can start with a collapsed filter bar.

Initial State Expanded

If the app does not use a default variant and the user has to set a filter to obtain a first result set for the table, start with an expanded filter bar. Also, if a vast number of items are expected, include some mandatory filters. Since the user first has to enter values for these filters, start with an expanded filter bar. If you are in any doubt, start the app with an expanded filter bar.

Note: At least one filter must be defined to begin with. This filter is set within the basic group by app designers. If the use case allows, and depending on the size of the result set, provide a table that is initially filled.

Initial state collapsed
Initial state expanded

Basic Search Field

The basic search field allows the user to filter the results by a given keyword. In contrast to the other input fields, the basic search field has a placeholder text instead of a label.

Note: If you need to provide a search field, use the basic search field. The search field within the table must be deactivated.

Filter bar with basic search field

Manual Update/Live Update

The filter bar is available in two separate modes: manual update mode and live update mode.

Manual Update

With manual update, the filter results are only updated when the user clicks or taps Go. A Go button is therefore mandatory in manual update mode. Pressing enter on the keyboard also triggers the filter.

Live Update

With live update mode, the filter bar reacts instantly to every input change. The result table is updated every time the user changes a filter field or the search field. Therefore, a Go button is not necessary and is not shown if live update mode is used.

Additionally, the search is triggered with every letter that is entered. Starting with the first letter typed in, the table is updated with the results that match all set filters that include the search term.

Which One to Use

Use live update mode by default as it is more convenient for the user. If the user has to configure multiple filters to obtain a useful result set, or if the resulting traffic is expected to be excessively high, consider using manual update mode instead.

Information
On mobile devices, only the Go button and manual mode are available.

Filter bar in manual update mode
Filter bar in live update mode

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

Variant Management (guidelines)

Smart Filter Bar Annotations (guidelines)

Implementation

Filter Bar (SAPUI5 samples)

Smart Filter Bar (SAPUI5 samples)

Filter Bar (SAPUI5 API reference)

Smart Filter Bar (SAPUI5 API reference)

Variant Management Example (SAPUI5 samples)

Variant Management Example (SAPUI5 API reference)

Filter Item (SAPUI5 API reference)

Filter Group Item (SAPUI5 API reference)

Filter Bar / Smart Filter Bar

The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).

Information
From a UX point of view, the filter bar and the smart filter bar work in the same way even though they are generated differently. The filter bar is configured by app developers, while the smart filter bar is generated from data services and provides a variety of automatic functions. This article contains information about both filter bars.

Responsiveness

Because tables appear in many apps, from simple to complex ones, the filter bar needs to be able to run on all form factors. While the main concept of the filter bar remains stable across the devices, its responsive design adapts the control’s behavior to match the ability of each device. The desktop mode (XL/L) and tablet mode (M) provide a special optimization (expanded filter bar) to make use of the desktop’s additional screen real estate.

Size S (Smartphones)

Filter bar (size S)

Filter dialog (size S)

Size M (Tablet)

Filter bar

Filter dialog (size M)

Size L/XL (Desktops)

Collapsed filter bar (size L/XL)

Filter dialog (size L/XL)

Expanded filter bar (size L/XL)

Layout

Filter Dialog

The filters inside the filter dialog are arranged in a vertical linear layout. If filter groups are maintained, the filters are visually grouped in sections with the filter group name at the top. The vertical layout of the filter dialog remains stable across all devices. To ensure a clean grid layout appearance, the size of the widest input field is inherited by all other filters.

Filters dialog

Expanded Filter Bar (Desktop and Tablet Only)

The expanded filter bar arranges the input fields in a simple horizontal linear layout. If the browser’s window size is reduced or the filters exceed the first line, a simple mechanism opens a new line of filters. The height of the expanded filter bar is not limited and adjusts to accommodate the filters that need to be shown. The label is always above the input field. As in the filter dialog, the size of the widest input field is inherited by all other filters. This avoids having unstable and busy-looking grid layouts.

Expanded filter bar (desktop only)
Expanded filter bar (desktop only)

Components

Collapsed Filter Bar

The collapsed filter bar takes up very little space, leaving the bulk of the screen to display the actual results. However, the variant selector in the upper left corner is still available for switching between variants. On the right side, the user can expand or collapse the filter bar (Show Filter Bar), open the filter dialog to view all filters for the selected variant (Filters (x), where “x” stands for the number of active filters), and execute the current filter set by clicking the Go button. The collapsed filter bar is available across all devices. If required by the use case, the filter bar can be expanded by default.

Collapsed filter bar

Expanded Filter Bar

Developer Hint
Smart filter bar: See the parameters for configuring the expanded filter bar.

In addition to the collapsed filter bar, the expanded filter bar shows a user-defined filter subset of the currently selected variant. The expand mechanism is only available on desktop devices.

Expanded filter bar

Filter Dialog

Developer Hint
Smart filter bar: See the parameters for configuring the filter dialog.

The filter dialog is the central component that shows all filters of the selected variant, allowing the user to add filters to the variant or remove then. Filters are arranged into their respective filter groups. The user can search for a specific filter by name by using the search bar at the top. Inside the filter dialog, a variant selector is available to quickly switch between variants (you can hide the variant selector if it does not fit the app’s use case). The variant name also indicates if a variant has been modified. The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified variant filter set (Save and Save As can be provided).

Cancel: Closes the dialog and undoes all changes.
Note: Due to technical challenges, a Close button appears instead of the Cancel button. As an interim solution, the Close button only closes the dialog, but does not undo any changes.

Clear: Clears all input fields/filters (you can hide this button if it does not fit the app’s use case).

Restore: Restores the initial variant values (you can hide this button if it does not fit the app’s use case).

Go: Executes the selected filter set.

On desktops, the user can add filters to the expanded filter bar by selecting the relevant checkbox next to the filter (for example, frequently-edited or important filters).

Filter dialog

Variant Selector

The variant selector is used to select the current variant, and also provides access to variant management.

Variant selector

Filter/Input Controls

Developer Hint
For development information, see data types for the smart filter bar.

Filter/input controls

Which filter control is used in the filter dialog or the expanded filter bar depends on the use case. Use the value help control if you want to offer an advanced function for selecting single or multiple items either inline (by entering text) or by means of a dialog. If there is a predefined list for single or multiple selection, use the combo box control. For temporal information you can use the date picker or date range selector.

Additionally recommended input fields:

Input

Select

Combo box

Multi-combo box

Multi-input

Value help

Date picker

Date range selection

Date time input

Behavior and Interaction

The filter bar contains the following actions:

Selecting a Variant

The main use case for the filter bar is to select and execute variants that influence the list of items. In this example, the variant applies its filter set automatically. The item list is filtered without the user needing to click Go.

Adding Filters to a Variant

In the filter dialog the user can access more filters for every filter group. Filters can then be added or removed in a separate dialog. Once a filter has been added or removed, it appears or disappears from the filter dialog. Furthermore, the variant indicates its modified state with the variant selector. Note: Adding a filter to the variant (as shown) does not automatically add the new filter to the personalized expanded filter bar.

Personalize Expanded Filter Bar

Users can hide a filter on the expanded filter bar by deselecting the checkbox next to the relevant filter in the filter dialog. This allows the user to hide filters that are rarely changed from the extended filter bar, giving complex filters a more lightweight appearance.

Note: The expanded filter bar is only available on desktops.

Guidelines

Default Variant Filters

Only important and frequently used filters should be selected for the app-defined initial filter subset hosted inside the expanded filter bar. Which filter should be added to the expanded filter bar generally depends on the use case and the user’s personal preference.

Default variant

Table Filtering and Table Searching

Because the filters of the filter bar and the filter option of the table can contain confusing or even contradictory entries, you must deactivate the filter option of the table.

Do
Table without filtering option

Don't
Table with filtering option

Initial State

The filter bar can initially be collapsed or expanded, depending on the use case:

Initial State Collapsed

If the app has a default variant that is executed on loading, the table is prefilled, and the user seldom changes the filters, the app can start with a collapsed filter bar.

Initial State Expanded

If the app does not use a default variant and the user has to set a filter to obtain a first result set for the table, start with an expanded filter bar. Also, if a vast number of items are expected, include some mandatory filters. Since the user first has to enter values for these filters, start with an expanded filter bar. If you are in any doubt, start the app with an expanded filter bar.

Note: At least one filter must be defined to begin with. This filter is set within the basic group by app designers. If the use case allows, and depending on the size of the result set, provide a table that is initially filled.

Initial state collapsed
Initial state expanded

Basic Search Field

The basic search field allows the user to filter the results by a given keyword. In contrast to the other input fields, the basic search field is located next to the variant management. If the filter bar is collapsed, the basic search field is the only input that is still visible. The basic search field is the only one that cannot be excluded from the filter bar via the filter dialog.

Note: If you need to provide a search field, use the basic search field. The search field within the table must be deactivated.

Basic search field – Filter bar expanded
Basic search field – Filter bar collapsed

Manual Update/Live Update

The filter bar is available in two separate modes: manual update mode and live update mode.

Manual Update

With manual update, the filter results are only updated when the user clicks or taps Go. A Go button is therefore essential in manual update mode. If a search field is used, it is only triggered by the Go button, and not instantly.

Live Update

With live update mode, the filter bar reacts instantly to every input change. The result table is updated every time the user changes a filter field or the search field. Therefore, a Go button is not necessary and is not shown if live update mode is used.

Additionally, the search is triggered with every letter that is entered. Starting with the first letter typed in, the table is updated with the results that match all set filters that include the search term.

Which One to Use

Use live update mode by default as it is more convenient for the user. If the user has to configure multiple filters to obtain a useful result set, or if the resulting traffic is expected to be excessively high, consider using manual update mode instead.

Filter bar in manual update mode
Filter bar in live update mode

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

Variant Management (guidelines)

Smart Filter Bar Annotations (guidelines)

Implementation

Filter Bar (SAPUI5 samples)

Smart Filter Bar (SAPUI5 samples)

Filter Bar (SAPUI5 API reference)

Smart Filter Bar (SAPUI5 API reference)

Variant Management Example (SAPUI5 samples)

Variant Management Example (SAPUI5 API reference)

Filter Item (SAPUI5 API reference)

Filter Group Item (SAPUI5 API reference)

Filter Bar / Smart Filter Bar

The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).

Information
From a UX point of view, the filter bar and the smart filter bar work in the same way even though they are generated differently. The filter bar is configured by app developers, while the smart filter bar is generated from data services and provides a variety of automatic functions. This article contains information about both filter bars.

Responsiveness

Because tables appear in many apps, from simple to complex ones, the filter bar needs to be able to run on all form factors. While the main concept of the filter bar remains stable across the devices, its responsive design adapts the control’s behavior to match the ability of each device. The desktop mode (XL/L) and tablet mode (M) provide a special optimization (expanded filter bar) to make use of the desktop’s additional screen real estate.

Size S (Smartphones)

Filter bar (size S)

Filter dialog (size S)

Size M (Tablet)

Filter bar

Filter dialog (size M)

Size L/XL (Desktops)

Collapsed filter bar (size L/XL)

Filter dialog (size L/XL)

Expanded filter bar (size L/XL)

Layout

Filter Dialog

The filters inside the filter dialog are arranged in a vertical linear layout. If filter groups are maintained, the filters are visually grouped in sections with the filter group name at the top. The vertical layout of the filter dialog remains stable across all devices. To ensure a clean grid layout appearance, the size of the widest input field is inherited by all other filters.

Filters dialog

Expanded Filter Bar (Desktop and Tablet Only)

The expanded filter bar arranges the input fields in a simple horizontal linear layout. If the browser’s window size is reduced or the filters exceed the first line, a simple mechanism opens a new line of filters. The height of the expanded filter bar is not limited and adjusts to accommodate the filters that need to be shown. The label is always above the input field. As in the filter dialog, the size of the widest input field is inherited by all other filters. This avoids having unstable and busy-looking grid layouts.

Expanded filter bar (desktop only)
Expanded filter bar (desktop only)

Components

Collapsed Filter Bar

The collapsed filter bar takes up very little space, leaving the bulk of the screen to display the actual results. However, the variant selector in the upper left corner is still available for switching between variants. On the right side, the user can expand or collapse the filter bar (Show Filter Bar), open the filter dialog to view all filters for the selected variant (Filters (x), where “x” stands for the number of active filters), and execute the current filter set by clicking the Go button. The collapsed filter bar is available across all devices. If required by the use case, the filter bar can be expanded by default.

Collapsed filter bar

Expanded Filter Bar

Developer Hint
Smart filter bar: See the parameters for configuring the expanded filter bar.

In addition to the collapsed filter bar, the expanded filter bar shows a user-defined filter subset of the currently selected variant. The expand mechanism is only available on desktop devices.

Expanded filter bar

Filter Dialog

Developer Hint
Smart filter bar: See the parameters for configuring the filter dialog.

The filter dialog is the central component that shows all filters of the selected variant, allowing the user to add filters to the variant or remove then. Filters are arranged into their respective filter groups. The user can search for a specific filter by name by using the search bar at the top. Inside the filter dialog, a variant selector is available to quickly switch between variants (you can hide the variant selector if it does not fit the app’s use case). The variant name also indicates if a variant has been modified. The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified variant filter set (Save and Save As can be provided).

Cancel: Closes the dialog and undoes all changes.
Note: Due to technical challenges, a Close button appears instead of the Cancel button. As an interim solution, the Close button only closes the dialog, but does not undo any changes.

Clear: Clears all input fields/filters (you can hide this button if it does not fit the app’s use case).

Restore: Restores the initial variant values (you can hide this button if it does not fit the app’s use case).

Go: Executes the selected filter set.

On desktops, the user can add filters to the expanded filter bar by selecting the relevant checkbox next to the filter (for example, frequently-edited or important filters).

Filter dialog

Variant Selector

The variant selector is used to select the current variant, and also provides access to variant management.

Variant selector

Filter/Input Controls

Developer Hint
For development information, see data types for the smart filter bar.

Filter/input controls

Which filter control is used in the filter dialog or the expanded filter bar depends on the use case. Use the value help control if you want to offer an advanced function for selecting single or multiple items either inline (by entering text) or by means of a dialog. If there is a predefined list for single or multiple selection, use the combo box control. For temporal information you can use the date picker or date range selector.

Additionally recommended input fields:

Input

Select

Combo box

Multi-combo box

Multi-input

Value help

Date picker

Date range selection

Date time input

Behavior and Interaction

The filter bar contains the following actions:

Selecting a Variant

The main use case for the filter bar is to select and execute variants that influence the list of items. In this example, the variant applies its filter set automatically. The item list is filtered without the user needing to click Go.

Adding Filters to a Variant

In the filter dialog the user can access more filters for every filter group. Filters can then be added or removed in a separate dialog. Once a filter has been added or removed, it appears or disappears from the filter dialog. Furthermore, the variant indicates its modified state with the variant selector. Note: Adding a filter to the variant (as shown) does not automatically add the new filter to the personalized expanded filter bar.

Personalize Expanded Filter Bar

Users can hide a filter on the expanded filter bar by deselecting the checkbox next to the relevant filter in the filter dialog. This allows the user to hide filters that are rarely changed from the extended filter bar, giving complex filters a more lightweight appearance.

Note: The expanded filter bar is only available on desktops.

Guidelines

Default Variant Filters

Only important and frequently used filters should be selected for the app-defined initial filter subset hosted inside the expanded filter bar. Which filter should be added to the expanded filter bar generally depends on the use case and the user’s personal preference.

Default variant

Table Filtering and Table Searching

Because the filters of the filter bar and the filter option of the table can contain confusing or even contradictory entries, you must deactivate the filter option of the table.

Do
Table without filtering option

Don't
Table with filtering option

Initial State

The filter bar can initially be collapsed or expanded, depending on the use case:

Initial State Collapsed

If the app has a default variant that is executed on loading, the table is prefilled, and the user seldom changes the filters, the app can start with a collapsed filter bar.

Initial State Expanded

If the app does not use a default variant and the user has to set a filter to obtain a first result set for the table, start with an expanded filter bar. Also, if a vast number of items are expected, include some mandatory filters. Since the user first has to enter values for these filters, start with an expanded filter bar. If you are in any doubt, start the app with an expanded filter bar.

Note: At least one filter must be defined to begin with. This filter is set within the basic group by app designers. If the use case allows, and depending on the size of the result set, provide a table that is initially filled.

Initial state collapsed
Initial state expanded

Basic Search Field

The basic search field allows the user to filter the results by a given keyword. In contrast to the other input fields, the basic search field is located next to the variant management. If the filter bar is collapsed, the basic search field is the only input that is still visible. The basic search field is the only one that cannot be excluded from the filter bar via the filter dialog.

Note: If you need to provide a search field, use the basic search field. The search field within the table must be deactivated.

Basic search field – Filter bar expanded
Basic search field – Filter bar collapsed

Manual Update/Live Update

The filter bar is available in two separate modes: manual update mode and live update mode.

Manual Update

With manual update, the filter results are only updated when the user clicks or taps Go. A Go button is therefore essential in manual update mode. If a search field is used, it is only triggered by the Go button, and not instantly.

Live Update

With live update mode, the filter bar reacts instantly to every input change. The result table is updated every time the user changes a filter field or the search field. Therefore, a Go button is not necessary and is not shown if live update mode is used.

Additionally, the search is triggered with every letter that is entered. Starting with the first letter typed in, the table is updated with the results that match all set filters that include the search term.

Which One to Use

Use live update mode by default as it is more convenient for the user. If the user has to configure multiple filters to obtain a useful result set, or if the resulting traffic is expected to be excessively high, consider using manual update mode instead.

Filter bar in manual update mode
Filter bar in live update mode

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

Variant Management (guidelines)

Smart Filter Bar Annotations (guidelines)

Implementation

Filter Bar (SAPUI5 samples)

Smart Filter Bar (SAPUI5 samples)

Filter Bar (SAPUI5 API reference)

Smart Filter Bar (SAPUI5 API reference)

Variant Management Example (SAPUI5 samples)

Variant Management Example (SAPUI5 API reference)

Filter Item (SAPUI5 API reference)

Filter Group Item (SAPUI5 API reference)

Filter Bar / Smart Filter Bar

The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).

Information
From a UX point of view, the filter bar and the smart filter bar work in the same way even though they are generated differently. The filter bar is configured by app developers, while the smart filter bar is generated from data services and provides a variety of automatic functions. This article contains information about both filter bars.

Responsiveness

Because tables appear in many apps, from simple to complex ones, the filter bar needs to be able to run on all form factors. While the main concept of the filter bar remains stable across the devices, its responsive design adapts the control’s behavior to match the ability of each device. The desktop mode (XL/L) and tablet mode (M) provide a special optimization (expanded filter bar) to make use of the desktop’s additional screen real estate.

Size S (Smartphones)

Filter bar (size S)

Filter dialog (size S)

Size M (Tablet)

Filter bar

Filter dialog (size M)

Size L/XL (Desktops)

Collapsed filter bar (size L/XL)

Filter dialog (size L/XL)

Expanded filter bar (size L/XL)

Layout

Filter Dialog

The filters inside the filter dialog are arranged in a vertical linear layout. If filter groups are maintained, the filters are visually grouped in sections with the filter group name at the top. The vertical layout of the filter dialog remains stable across all devices. To ensure a clean grid layout appearance, the size of the widest input field is inherited by all other filters.

Filters dialog

Expanded Filter Bar (Desktop and Tablet Only)

The expanded filter bar arranges the input fields in a simple horizontal linear layout. If the browser’s window size is reduced or the filters exceed the first line, a simple mechanism opens a new line of filters. The height of the expanded filter bar is not limited and adjusts to accommodate the filters that need to be shown. The label is always above the input field. As in the filter dialog, the size of the widest input field is inherited by all other filters. This avoids having unstable and busy-looking grid layouts.

Expanded filter bar (desktop only)
Expanded filter bar (desktop only)

Components

Collapsed Filter Bar

The collapsed filter bar takes up very little space, leaving the bulk of the screen to display the actual results. However, the variant selector in the upper left corner is still available for switching between variants. On the right side, the user can expand or collapse the filter bar (Show Filter Bar), open the filter dialog to view all filters for the selected variant (Filters (x), where “x” stands for the number of active filters), and execute the current filter set by clicking the Go button. The collapsed filter bar is available across all devices. If required by the use case, the filter bar can be expanded by default.

Collapsed filter bar

Expanded Filter Bar

Developer Hint
Smart filter bar: See the parameters for configuring the expanded filter bar.

In addition to the collapsed filter bar, the expanded filter bar shows a user-defined filter subset of the currently selected variant. The expand mechanism is only available on desktop devices.

Expanded filter bar

Filter Dialog

Developer Hint
Smart filter bar: See the parameters for configuring the filter dialog.

The filter dialog is the central component that shows all filters of the selected variant, allowing the user to add filters to the variant or remove then. Filters are arranged into their respective filter groups. The user can search for a specific filter by name by using the search bar at the top. Inside the filter dialog, a variant selector is available to quickly switch between variants (you can hide the variant selector if it does not fit the app’s use case). The variant name also indicates if a variant has been modified. The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified variant filter set (Save and Save As can be provided).

Cancel: Closes the dialog and undoes all changes.
Note: Due to technical challenges, a Close button appears instead of the Cancel button. As an interim solution, the Close button only closes the dialog, but does not undo any changes.

Clear: Clears all input fields/filters (you can hide this button if it does not fit the app’s use case).

Restore: Restores the initial variant values (you can hide this button if it does not fit the app’s use case).

Go: Executes the selected filter set.

On desktops, the user can add filters to the expanded filter bar by selecting the relevant checkbox next to the filter (for example, frequently-edited or important filters).

Filter dialog

Variant Selector

The variant selector is used to select the current variant, and also provides access to variant management.

Variant selector

Filter/Input Controls

Developer Hint
For development information, see data types for the smart filter bar.

Filter/input controls

Which filter control is used in the filter dialog or the expanded filter bar depends on the use case. Use the value help control if you want to offer an advanced function for selecting single or multiple items either inline (by entering text) or by means of a dialog. If there is a predefined list for single or multiple selection, use the combo box control. For temporal information you can use the date picker or date range selector.

Additionally recommended input fields:

Input

Select

Combo box

Multi-combo box

Multi-input

Value help

Date picker

Date range selection

Date time input

Behavior and Interaction

The filter bar contains the following actions:

Selecting a Variant

The main use case for the filter bar is to select and execute variants that influence the list of items. In this example, the variant applies its filter set automatically. The item list is filtered without the user needing to click Go.

Adding Filters to a Variant

In the filter dialog the user can access more filters for every filter group. Filters can then be added or removed in a separate dialog. Once a filter has been added or removed, it appears or disappears from the filter dialog. Furthermore, the variant indicates its modified state with the variant selector. Note: Adding a filter to the variant (as shown) does not automatically add the new filter to the personalized expanded filter bar.

Personalize Expanded Filter Bar

Users can hide a filter on the expanded filter bar by deselecting the checkbox next to the relevant filter in the filter dialog. This allows the user to hide filters that are rarely changed from the extended filter bar, giving complex filters a more lightweight appearance.

Note: The expanded filter bar is only available on desktops.

Guidelines

Default Variant Filters

Only important and frequently used filters should be selected for the app-defined initial filter subset hosted inside the expanded filter bar. Which filter should be added to the expanded filter bar generally depends on the use case and the user’s personal preference.

Default variant

Table Filtering and Table Searching

Because the filters of the filter bar and the filter option of the table can contain confusing or even contradictory entries, you must deactivate the filter option of the table.

Do
Table without filtering option

Don't
Table with filtering option

Initial State

The filter bar can initially be collapsed or expanded, depending on the use case:

Initial State Collapsed

If the app has a default variant that is executed on loading, the table is prefilled, and the user seldom changes the filters, the app can start with a collapsed filter bar.

Initial State Expanded

If the app does not use a default variant and the user has to set a filter to obtain a first result set for the table, start with an expanded filter bar. Also, if a vast number of items are expected, include some mandatory filters. Since the user first has to enter values for these filters, start with an expanded filter bar. If you are in any doubt, start the app with an expanded filter bar.

Note: At least one filter must be defined to begin with. This filter is set within the basic group by app designers. If the use case allows, and depending on the size of the result set, provide a table that is initially filled.

Initial state collapsed
Initial state expanded

Basic Search Field

The basic search field allows the user to filter the results by a given keyword. In contrast to the other input fields, the basic search field is located next to the variant management. If the filter bar is collapsed, the basic search field is the only input that is still visible. The basic search field is the only one that cannot be excluded from the filter bar via the filter dialog.

Note: If you need to provide a search field, use the basic search field. The search field within the table must be deactivated.

Basic search field – Filter bar expanded
Basic search field – Filter bar collapsed

Manual Update/Live Update

The filter bar is available in two separate modes: manual update mode and live update mode.

Manual Update

With manual update, the filter results are only updated when the user clicks or taps Go. A Go button is therefore essential in manual update mode. If a search field is used, it is only triggered by the Go button, and not instantly.

Live Update

With live update mode, the filter bar reacts instantly to every input change. The result table is updated every time the user changes a filter field or the search field. Therefore, a Go button is not necessary and is not shown if live update mode is used.

Additionally, the search is triggered with every letter that is entered. Starting with the first letter typed in, the table is updated with the results that match all set filters that include the search term.

Which One to Use

Use live update mode by default as it is more convenient for the user. If the user has to configure multiple filters to obtain a useful result set, or if the resulting traffic is expected to be excessively high, consider using manual update mode instead.

Filter bar in manual update mode
Filter bar in live update mode

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

Variant Management (guidelines)

Implementation

Filter Bar (SAPUI5 samples)

Smart Filter Bar (SAPUI5 samples)

Filter Bar (SAPUI5 API reference)

Smart Filter Bar (SAPUI5 API reference)

Variant Management Example (SAPUI5 samples)

Variant Management Example (SAPUI5 API reference)

Filter Item (SAPUI5 API reference)

Filter Group Item (SAPUI5 API reference)

Filter Bar / Smart Filter Bar

The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).

Information
From a UX point of view, the filter bar and the smart filter bar work in the same way even though they are generated differently. The filter bar is configured by app developers, while the smart filter bar is generated from data services and provides a variety of automatic functions. This article contains information about both filter bars.

Responsiveness

Because tables appear in many apps, from simple to complex ones, the filter bar needs to be able to run on all form factors. While the main concept of the filter bar remains stable across the devices, its responsive design adapts the control’s behavior to match the ability of each device. The desktop mode (XL/L) and tablet mode (M) provide a special optimization (expanded filter bar) to make use of the desktop’s additional screen real estate.

Size S (Smartphones)

Filter bar (size S)

Filter dialog (size S)

Size M (Tablet)

Filter bar (size M)

Filter dialog (size M)

Size L/XL (Desktops)

Collapsed filter bar (size L/XL)

Filter dialog (size L/XL)

Expanded filter bar (size L/XL)

Layout

Filter Dialog

The filters inside the filter dialog are arranged in a vertical linear layout. If filter groups are maintained, the filters are visually grouped in sections with the filter group name at the top. The vertical layout of the filter dialog remains stable across all devices. To ensure a clean grid layout appearance, the size of the widest input field is inherited by all other filters.

Filters dialog

Expanded Filter Bar (Desktop and Tablet Only)

The expanded filter bar arranges the input fields in a simple horizontal linear layout. If the browser’s window size is reduced or the filters exceed the first line, a simple mechanism opens a new line of filters. The height of the expanded filter bar is not limited and adjusts to accommodate the filters that need to be shown. The label is always above the input field. As in the filter dialog, the size of the widest input field is inherited by all other filters. This avoids having unstable and busy-looking grid layouts.

Expanded filter bar (desktop only)
Expanded filter bar (desktop only)

Components

Collapsed Filter Bar

The collapsed filter bar takes up very little space, leaving the bulk of the screen to display the actual results. However, the variant selector in the upper left corner is still available for switching between variants. On the right side, the user can expand or collapse the filter bar (Show Filter Bar), open the filter dialog to view all filters for the selected variant (Filters (x), where “x” stands for the number of active filters), and execute the current filter set by clicking the Go button. The collapsed filter bar is available across all devices. If required by the use case, the filter bar can be expanded by default.

Collapsed filter bar

Expanded Filter Bar

In addition to the collapsed filter bar, the expanded filter bar shows a user-defined filter subset of the currently selected variant. The expand mechanism is only available on desktop devices.

Expanded filter bar

Filter Dialog

The filter dialog is the central component that shows all filters of the selected variant, allowing the user to add filters to the variant or remove then. Filters are arranged into their respective filter groups. The user can search for a specific filter by name by using the search bar at the top. Inside the filter dialog, a variant selector is available to quickly switch between variants (you can hide the variant selector if it does not fit the app’s use case). The variant name also indicates if a variant has been modified. The footer toolbar at the bottom of the dialog provides the following functions:

Save: Saves your modified variant filter set (Save and Save As can be provided).

Cancel: Closes the dialog and undoes all changes.
Note: Due to technical challenges, a Close button appears instead of the Cancel button. As an interim solution, the Close button only closes the dialog, but does not undo any changes.

Clear: Clears all input fields/filters (you can hide this button if it does not fit the app’s use case).

Restore: Restores the initial variant values (you can hide this button if it does not fit the app’s use case).

Go: Executes the selected filter set.

On desktops, the user can add filters to the expanded filter bar by selecting the relevant checkbox next to the filter (for example, frequently-edited or important filters).

Filter dialog

Variant Selector

The variant selector is used to select the current variant, and also provides access to variant management.

Variant selector

Filter/Input Controls

Filter/input controls

Which filter control is used in the filter dialog or the expanded filter bar depends on the use case. Use the value help control if you want to offer an advanced function for selecting single or multiple items either inline (by entering text) or by means of a dialog. If there is a predefined list for single or multiple selection, use the combo box control. For temporal information you can use the date picker or date range selector.

Additionally recommended input fields:

Input

Select

Combo box

Multi-combo box

Multi-input

Value help

Date picker

Date range selection

Date time input

Behavior and Interaction

The filter bar contains the following actions:

Selecting a Variant

The main use case for the filter bar is to select and execute variants that influence the list of items. In this example, the variant applies its filter set automatically. The item list is filtered without the user needing to click Go.

Adding Filters to a Variant

In the filter dialog the user can access more filters for every filter group. Filters can then be added or removed in a separate dialog. Once a filter has been added or removed, it appears or disappears from the filter dialog. Furthermore, the variant indicates its modified state with the variant selector. Note: Adding a filter to the variant (as shown) does not automatically add the new filter to the personalized expanded filter bar.

Personalize Expanded Filter Bar

Users can hide a filter on the expanded filter bar by deselecting the checkbox next to the relevant filter in the filter dialog. This allows the user to hide filters that are rarely changed from the extended filter bar, giving complex filters a more lightweight appearance.

Note: The expanded filter bar is only available on desktops.

Guidelines

Default Variant Filters

Only important and frequently used filters should be selected for the app-defined initial filter subset hosted inside the expanded filter bar. Which filter should be added to the expanded filter bar generally depends on the use case and the user’s personal preference.

Default variant

Table Filtering and Table Searching

Because the filters of the filter bar and the filter option of the table can contain confusing or even contradictory entries, you must deactivate the filter option of the table.

Do
Table without filtering option

Don't
Table with filtering option

Initial State

The filter bar can initially be collapsed or expanded, depending on the use case:

Initial State Collapsed

If the app has a default variant that is executed on loading, the table is prefilled, and the user seldom changes the filters, the app can start with a collapsed filter bar.

Initial State Expanded

If the app does not use a default variant and the user has to set a filter to obtain a first result set for the table, start with an expanded filter bar. Also, if a vast number of items are expected, include some mandatory filters. Since the user first has to enter values for these filters, start with an expanded filter bar. If you are in any doubt, start the app with an expanded filter bar.

Note: At least one filter must be defined to begin with. This filter is set within the basic group by app designers. If the use case allows, and depending on the size of the result set, provide a table that is initially filled.

Initial state collapsed
Initial state expanded

Basic Search Field

The basic search field allows the user to filter the results by a given keyword. In contrast to the other input fields, the basic search field is located next to the variant management. If the filter bar is collapsed, the basic search field is the only input that is still visible. The basic search field is the only one that cannot be excluded from the filter bar via the filter dialog.

Note: If you need to provide a search field, use the basic search field. The search field within the table must be deactivated.

Basic search field – Filter bar expanded
Basic search field – Filter bar collapsed

Manual Update/Live Update

The filter bar is available in two separate modes: manual update mode and live update mode.

Manual Update

With manual update, the filter results are only updated when the user clicks or taps Go. A Go button is therefore essential in manual update mode. If a search field is used, it is only triggered by the Go button, and not instantly.

Live Update

With live update mode, the filter bar reacts instantly to every input change. The result table is updated every time the user changes a filter field or the search field. Therefore, a Go button is not necessary and is not shown if live update mode is used.

Additionally, the search is triggered with every letter that is entered. Starting with the first letter typed in, the table is updated with the results that match all set filters that include the search term.

Which One to Use

Use live update mode by default as it is more convenient for the user. If the user has to configure multiple filters to obtain a useful result set, or if the resulting traffic is expected to be excessively high, consider using manual update mode instead.

Filter bar in manual update mode
Filter bar in live update mode

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

Variant Management (guidelines)

Implementation

Filter Bar (SAPUI5 samples)

Smart Filter Bar (SAPUI5 samples)

Filter Bar (SAPUI5 API reference)

Smart Filter Bar (SAPUI5 API reference)

Variant Management Example (SAPUI5 samples)

Variant Management Example (SAPUI5 API reference)

Filter Item (SAPUI5 API reference)

Filter Group Item (SAPUI5 API reference)

Variant Management

Variants store filter settings which have been defined within the filter bar. The filter settings consist of filter parameters, selection fields and a layout. This control enables the user to load, save, and change variants. In some cases, the table settings are also saved within a variant.

In the context of tables, this control is used to save, manage, and load table settings which include layout, column visibility, sorting, and grouping.

Smart variant management saves both filter settings and table layouts. It creates a page variant that includes all the controls. The button is located within the page header bar, and no secondary management is possible on table level.

Usage

Use the variant management control if:

The user needs to save and load different filter settings to find the relevant data.

The user needs to save and load different layouts (for example, a table) to display data in different views.

Use smart variant management if the user needs to save the page including the filter settings and table layout.

Responsiveness

Smartphone (S Size)

Variant selection, manage dialog, and save dialog are opened in full screen.

Variant selection
Manage Variants
Save Variant

Tablet (M Size)

Variant selection
Manage Variants
Save Variant

Desktop (L Size)

Variant selection
Manage Variants
Save Variant

Layout

The variant management control is used within the filter bar (next to the page title) and the table toolbar (next to the table title).

Filter Bar

The variant management control is located next to the page title within the page header container and saves the stored filter settings or both filter and table settings.

Variant management within filter bar next to the page title

Table

The variant management control can also store table settings (layout, column visibility, sorting, or grouping) independently of the filter settings.

It is placed as the first item within the table toolbar.

If a title or the variant management control is placed inside a toolbar, you need to apply the following styles:

The toolbar height must be set to 3 rem.

The toolbar design must be transparent.

The title must have the class “sapMH4Fontsize”.

Variant management within table toolbar

If the table has a separate title, place the title first.

Variant management with table title

Behavior and Interaction

This control allows the user to select, create, update, and delete variants within the filter bar. In the context of a table, this is the table configuration (layout, column visibility, sorting, and grouping).

Selecting a Variant

The control label displays the active variant. When the user selects it, a popover displays all available variants. The currently active variant is highlighted. To load another variant, the user simply selects one from the list.

Variants that have been modified but not saved are marked with an asterisk (*).

Selecting a variant

If more than 10 variants exist, a search option is displayed.

Select variant – Search option

The standard variant is the minimum set of variants which is delivered by SAP and cannot be modified or deleted.

Save

Save can only be applied to variants that the user is allowed to save. Otherwise, this button is disabled. Save overwrites the active variant.

Save As

Save As enables the user to save the current filter settings as a new variant. The Save As function can also be used to duplicate existing variants for later modification.

Manage

This opens a new dialog which allows the user to update and delete existing variants.

Creating – “Save As” Variant

The following options can be set:

Set as Default

The variant that is set to default is selected when the user launches the app.

Execute on Select

If this option is active, the variant is executed immediately. The user does not need to click or tap the ‘Go’ button. This option is often used if small filter changes need to be made before the user finally executes the search.

Save As

Share

The user can set the Share option to make a variant available to other users.

All variants that are shared by users or delivered by SAP, partners, or key users are available within the manage list and the selection list.

Create As Tile

A tile with the same label as the variant is created on the home page.

You can hide the options Execute on Select and Create as Tile by configuring the control correspondingly.

Information
Note that the you must still create the tile even if you select the Create as Tile flag.

Managing – Update/Delete Variant

Within the manage dialog, the user can rename, delete, and change properties of existing variants.

Users can only modify or delete entries if they have the necessary permissions. By default, variants which have been created by the user can also be modified and deleted. Users can also modify and delete entries from other users. This is currently a limitation.

Based on the configuration of the variant management control, the following column can be hidden or shown:

Execute on Select. (If this control is used in the context of tables, Execute on Select is hidden.)

Manage

Guidelines

In the context of variants, we recommend that you directly reference the variant with the tile. Use the name of the variant as the tile title. Map this as a preset title that cannot be edited by the user. In this case, whenever the variant is updated, the tile is updated accordingly.

Enable the option Create as Tile within the Save As dialog if your use case generally requires a tile to be created immediately after the Save As action. In some scenarios, such as MRP, variants and their respective tiles are created on a weekly basis and then removed.

If the variant has been modified but not yet saved (“dirty state”), ensure that the variant is saved before the tile is created.

Exception

If the variant cannot be referenced directly due to technical limitations, offer the standard tile creation option where only filter parameters and settings are saved within the URL. Do not offer the Create as Tile option within the Save As dialog.

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

Responsive Table (guidelines)

Table Toolbar (guidelines)

Filter Bar (guidelines)

Implementation

Variant Management (SAPUI5 samples)

Variant Management (SAPUI5 API reference)

Variant Management

Variants store filter settings which have been defined within the filter bar. The filter settings consist of filter parameters, selection fields and a layout. This control enables the user to load, save, and change variants. In some cases, the table settings are also saved within a variant.

In the context of tables, this control is used to save, manage, and load table settings which include layout, column visibility, sorting, and grouping.

Smart variant management saves both filter settings and table layouts. It creates a page variant that includes all the controls. The button is located within the page header bar, and no secondary management is possible on table level.

Usage

Use the variant management control if:

The user needs to save and load different filter settings to find the relevant data.

The user needs to save and load different layouts (for example, a table) to display data in different views.

Use smart variant management if the user needs to save the page including the filter settings and table layout.

Responsiveness

Smartphone (S Size)

Variant selection, manage dialog, and save dialog are opened in full screen.

Variant selection
Manage Variants
Save Variant

Tablet (M Size)

Variant selection
Manage Variants
Save Variant

Desktop (L Size)

Variant selection
Manage Variants
Save Variant

Layout

The variant management control is used within the filter bar and table. The layout differs depending where it is used.

Filter Bar

Variant management can be enabled within the filter bar.

Within filter bar

Variant management is also available within the filter dialog.

Filter dialog

Table

You can use the variant management control if you need to store table settings (layout, column visibility, sorting, or grouping) independently of the filter settings. The following examples illustrate where this control should be placed.

Always place this control as the first item within the table toolbar.

If a title or the variant management control is placed inside a toolbar, you need to apply the following styles:

The toolbar height must be set to 3 rem.

The toolbar design must be transparent.

The title must have the class “sapMH4Fontsize”.

Variant management within table toolbar

If the table has a separate title, place the title first.

Variant management with table title

Behavior and Interaction

This control allows the user to select, create, update, and delete variants within the filter bar. In the context of a table, this is the table configuration (layout, column visibility, sorting, and grouping).

Selecting a Variant

The control label displays the active variant. When the user selects it, a popover displays all available variants. The currently active variant is highlighted. To load another variant, the user simply selects one from the list.

Variants that have been modified but not saved are marked with an asterisk (*).

Selecting a variant

If more than 10 variants exist, a search option is displayed.

Select variant – Search option

The standard variant is the minimum set of variants which is delivered by SAP and cannot be modified or deleted.

Save

Save can only be applied to variants that the user is allowed to save. Otherwise, this button is disabled. Save overwrites the active variant.

Save As

Save As enables the user to save the current filter settings as a new variant. The Save As function can also be used to duplicate existing variants for later modification.

Manage

This opens a new dialog which allows the user to update and delete existing variants.

Creating – “Save As” Variant

The following options can be set:

Use as Default

The variant that is set to default is selected when the user launches the app.

Execute on Select

If this option is active, the variant is executed immediately. The user does not need to click or tap the search button. This option is often used if small filter changes need to be made before the user finally executes the search.

Save As

Share

The user can set the Share option to make a variant available to other users.

All variants that are shared by users or delivered by SAP, partners, or key users are available within the manage list and the selection list.

Create As Tile

A tile with the same label as the variant is created on the home page.

You can hide the options Execute on Select and Create as Tile by configuring the control correspondingly.

Information
Note that the you must still create the tile even if you select the Create as Tile flag.

Managing – Update/Delete Variant

Within the manage dialog, the user can rename, delete, and change properties of existing variants.

Users can only modify or delete entries if they have the necessary permissions. By default, variants which have been created by the user can also be modified and deleted. Users can also modify and delete entries from other users. This is currently a limitation.

Based on the configuration of the variant management control, the following column can be hidden or shown:

Execute on Select. (If this control is used in the context of tables, Execute on Select is hidden.)

Manage

Guidelines

In the context of variants, we recommend that you directly reference the variant with the tile. Use the name of the variant as the tile title. Map this as a preset title that cannot be edited by the user. In this case, whenever the variant is updated, the tile is updated accordingly.

Enable the option Create as Tile within the Save As dialog if your use case generally requires a tile to be created immediately after the Save As action. In some scenarios, such as MRP, variants and their respective tiles are created on a weekly basis and then removed.

If the variant has been modified but not yet saved (“dirty state”), ensure that the variant is saved before the tile is created.

Exception

If the variant cannot be referenced directly due to technical limitations, offer the standard tile creation option where only filter parameters and settings are saved within the URL. Do not offer the Create as Tile option within the Save As dialog.

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

Responsive Table (guidelines)

Table Toolbar (guidelines)

Filter Bar (guidelines)

Implementation

Variant Management (SAPUI5 samples)

Variant Management (SAPUI5 API reference)

Variant Management

Variants store filter settings which have been defined within the filter bar. The filter settings consist of selection fields, filter parameters, and a layout. This control enables the user to load, save, and change variants. In some cases, the table settings are also implicitly saved within the variant.

In the context of tables, this control is used to save, manage, and load table settings which include layout, column visibility, sorting, and grouping.

Usage

Use the variant management control if:

The user needs to save and load different filter settings to find the relevant data.

The user needs to save and load different layouts (for example, a table) to display data in different views.

Responsiveness

Smartphone (S Size)

Variant selection, manage dialog, and save dialog are opened in full screen.

Variant selection
Manage Variants
Save Variant

Tablet (M Size)

Variant selection
Manage Variants
Save Variant

Desktop (L Size)

Variant selection
Manage Variants
Save Variant

Layout

The variant management control is used within the filter bar and table. The layout differs depending where it is used.

Filter Bar

Variant management can be enabled within the filter bar.

Within filter bar

Variant management is also available within the filter dialog.

Filter dialog

Table

You can use the variant management control if you need to store table settings (layout, column visibility, sorting, or grouping) independently of the filter settings. The following examples illustrate where this control should be placed.

Always place this control as the first item within the table toolbar.

If a title or the variant management control is placed inside a toolbar, you need to apply the following styles:

The toolbar height must be set to 3 rem.

The toolbar design must be transparent.

The title must have the class “sapMH4Fontsize”.

Variant management within table toolbar

If the table has a separate title, place the title first.

Variant management with table title

Behavior and Interaction

This control allows the user to select, create, update, and delete variants within the filter bar. In the context of a table, this is the table configuration (layout, column visibility, sorting, and grouping).

Selecting a Variant

The control label displays the active variant. When the user selects it, a popover displays all available variants. The currently active variant is highlighted. To load another variant, the user simply selects one from the list.

Variants that have been modified but not saved are marked with an asterisk (*).

Selecting a variant

If more than 10 variants exist, a search option is displayed.

Select variant – Search option

The standard variant is the minimum set of variants which is delivered by SAP and cannot be modified or deleted.

Save

Save can only be applied to variants that the user is allowed to save. Otherwise, this button is disabled. Save overwrites the active variant.

Save As

Save As enables the user to save the current filter settings as a new variant. The Save As function can also be used to duplicate existing variants for later modification.

Manage

This opens a new dialog which allows the user to update and delete existing variants.

Creating – “Save As” Variant

The following options can be set:

Use as Default

The variant that is set to default is selected when the user launches the app.

Execute on Select

If this option is active, the variant is executed immediately. The user does not need to click or tap the search button. This option is often used if small filter changes need to be made before the user finally executes the search.

Save As

Share

The user can set the Share option to make a variant available to other users.

All variants that are shared by users or delivered by SAP, partners, or key users are available within the manage list and the selection list.

Create As Tile

A tile with the same label as the variant is created on the home page.

You can hide the options Execute on Select and Create as Tile by configuring the control correspondingly.

Information
Note that the you must still create the tile even if you select the Create as Tile flag.

Managing – Update/Delete Variant

Within the manage dialog, the user can rename, delete, and change properties of existing variants.

Users can only modify or delete entries if they have the necessary permissions. By default, variants which have been created by the user can also be modified and deleted. Users can also modify and delete entries from other users. This is currently a limitation.

Based on the configuration of the variant management control, the following column can be hidden or shown:

Execute on Select. (If this control is used in the context of tables, Execute on Select is hidden.)

Manage

Guidelines

In the context of variants, we recommend that you directly reference the variant with the tile. Use the name of the variant as the tile title. Map this as a preset title that cannot be edited by the user. In this case, whenever the variant is updated, the tile is updated accordingly.

Enable the option Create as Tile within the Save As dialog if your use case generally requires a tile to be created immediately after the Save As action. In some scenarios, such as MRP, variants and their respective tiles are created on a weekly basis and then removed.

If the variant has been modified but not yet saved (“dirty state”), ensure that the variant is saved before the tile is created.

Exception

If the variant cannot be referenced directly due to technical limitations, offer the standard tile creation option where only filter parameters and settings are saved within the URL. Do not offer the Create as Tile option within the Save As dialog.

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

Responsive Table (guidelines)

Table Toolbar (guidelines)

Filter Bar (guidelines)

Implementation

Variant Management (SAPUI5 samples)

Variant Management (SAPUI5 API reference)

Variant Management

Variants store filter settings which have been defined within the filter bar. The filter settings consist of selection fields, filter parameters, and a layout. This control enables the user to load, save, and change variants. In some cases, the table settings are also implicitly saved within the variant.

In the context of tables, this control is used to save, manage, and load table settings which include layout, column visibility, sorting, and grouping.

Usage

Use the variant management control if:

The user needs to save and load different filter settings to find the relevant data.

The user needs to save and load different layouts (for example, a table) to display data in different views.

Responsiveness

Smartphone (S Size)

Variant selection, manage dialog, and save dialog are opened in full screen.

Variant selection
Manage Variants
Save Variant

Tablet (M Size)

Variant selection
Manage Variants
Save Variant

Desktop (L Size)

Variant selection
Manage Variants
Save Variant

Layout

The variant management control is used within the filter bar and table. The layout differs depending where it is used.

Filter Bar

Variant management can be enabled within the filter bar.

Within filter bar

Variant management is also available within the filter dialog.

Filter dialog

Table

You can use the variant management control if you need to store table settings (layout, column visibility, sorting, or grouping) independently of the filter settings. The following examples illustrate where this control should be placed.

Always place this control as the first item within the table toolbar.

If a title or the variant management control is placed inside a toolbar, you need to apply the following styles:

The toolbar height must be set to 3 rem.

The toolbar design must be transparent.

The title must have the class “sapMH4Fontsize”.

Variant management within table toolbar

If the table has a separate title, place the title first.

Variant management with table title

Behavior and Interaction

This control allows the user to select, create, update, and delete variants within the filter bar. In the context of a table, this is the table configuration (layout, column visibility, sorting, and grouping).

Selecting a Variant

The control label displays the active variant. When the user selects it, a popover displays all available variants. The currently active variant is highlighted. To load another variant, the user simply selects one from the list.

Variants that have been modified but not saved are marked with an asterisk (*).

Selecting a variant

If more than 10 variants exist, a search option is displayed.

Select variant – Search option

The standard variant is the minimum set of variants which is delivered by SAP and cannot be modified or deleted.

Save

Save can only be applied to variants that the user is allowed to save. Otherwise, this button is disabled. Save overwrites the active variant.

Save As

Save As enables the user to save the current filter settings as a new variant. The Save As function can also be used to duplicate existing variants for later modification.

Manage

This opens a new dialog which allows the user to update and delete existing variants.

Creating – “Save As” Variant

The following options can be set:

Use as Default

The variant that is set to default is selected when the user launches the app.

Execute on Select

If this option is active, the variant is executed immediately. The user does not need to click or tap the search button. This option is often used if small filter changes need to be made before the user finally executes the search.

Save As

Share

The user can set the Share option to make a variant available to other users.

All variants that are shared by users or delivered by SAP, partners, or key users are available within the manage list and the selection list.

Create As Tile

A tile with the same label as the variant is created on the home page.

You can hide the options Execute on Select and Create as Tile by configuring the control correspondingly.

Information
Note that the you must still create the tile even if you select the Create as Tile flag.

Managing – Update/Delete Variant

Within the manage dialog, the user can rename, delete, and change properties of existing variants.

Users can only modify or delete entries if they have the necessary permissions. By default, variants which have been created by the user can also be modified and deleted. Users can also modify and delete entries from other users. This is currently a limitation.

Based on the configuration of the variant management control, the following column can be hidden or shown:

Execute on Select. (If this control is used in the context of tables, Execute on Select is hidden.)

Manage

Guidelines

In the context of variants, we recommend that you directly reference the variant with the tile. Use the name of the variant as the tile title. Map this as a preset title that cannot be edited by the user. In this case, whenever the variant is updated, the tile is updated accordingly.

Enable the option Create as Tile within the Save As dialog if your use case generally requires a tile to be created immediately after the Save As action. In some scenarios, such as MRP, variants and their respective tiles are created on a weekly basis and then removed.

If the variant has been modified but not yet saved (“dirty state”), ensure that the variant is saved before the tile is created.

Exception

If the variant cannot be referenced directly due to technical limitations, offer the standard tile creation option where only filter parameters and settings are saved within the URL. Do not offer the Create as Tile option within the Save As dialog.

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

Responsive Table (guidelines)

Table Toolbar (guidelines)

Filter Bar (guidelines)

Implementation

Variant Management (SAPUI5 samples)

Variant Management (SAPUI5 API reference)

Contextual Filter

The contextual filter allows you to show a prefiltered view of a list, such as a master list.

Warning
Note that this filter prevents the regular filter (which the user triggers from the footer bar) from displaying the filter criteria that are currently selected.

Usage

Use the contextual filter if:

You want to show the user a meaningful extract of an otherwise highly complex list.

You need to improve the performance if your app handles very large object lists.

Do not use the contextual filter if:

You just want to provide a way to filter a list. In this case, use the regular filter instead.

Responsiveness

The contextual filter (sap.m.toolbar) spans the whole width of the list or table it is attached to, while its height remains unchanged. Text inside the bar does not wrap if there is insufficient space, but becomes truncated.

Contextual filter – Responsiveness

Contextual filter with truncated text in a narrow container, such as on a smartphone.

Responsive behavior in wider spaces.

Layout

The contextual filter is shown as a bar directly above the master list. It comprises two parts:

The filter value on the left (for example, a customer name).

The icon for the filter criterion on the right (here, the object type “customer”). The icon helps the user to put the filter value into context.

Contextual filter – Layout

Behavior and Interaction

The following example shows a prefiltered master list and explains how to change the filter criterion.

Change Filter

The user opens the app and sees a prefiltered list of objects. The bar on top of the master list indicates that the list is filtered and by which criteria.

When the user clicks or taps the bar, a screen (on phones) or popup (on desktops/tablets) appears on which the user can select another criterion.

Contextual filter – Change filter setting

Select Filter Criterion

In this use case, the user should not be able to disable the filter because there is no way to reset it.

Other master list functions (such as Search or Refresh) are still available and remain unaffected by the contextual filter.

Once a criterion has been selected, the user is taken back to the master list (on phones) or the popup closes (on desktops/tablets). The list is now filtered by the newly selected criterion.

Contextual filter – Select filter attribute

Guidelines

Do not use the contextual filter in place of the regular filter in the footer bar. The regular filter is much more versatile and can also be deactivated by the user.

Also note that the contextual and the regular filter both use the same bar to visualize the filter criteria. If the contextual filter is being used, the regular filter can no longer be visualized. Although both filters can technically be used in parallel, we highly recommend that you avoid having both in one list.

Use an icon that is unique and visually represents the current filter criterion.

Do

Do not use any of the generic filter icons because they may be confused with the user-triggered filters.

Don't

Properties

The contextual filter is not a separate control. To build a contextual filter, you need to use the sap.m.OverflowToolbar control. The filtering itself must be carried out by the app.

Exceptions

There is one exception when the contextual filter can actually be cancelled by the user. In this special case, the contextual filter is used to prefilter the listed items in a select dialog.

This use of the contextual filter conveniently offers users a narrowed down list based on their previous selection.

(1) Initial situation: The user is about to select an account and a contact.

(2) The user selects “Best Electronics” and then clicks or taps the value help icon in the Contact field.

(3) The value help dialog appears showing a list of contacts. These are prefiltered (using the contextual filter) to show only contacts from “Best Electronics” (the company the user selected previously).

Note that this time the icon in the filter’s toolbar does not show an account icon, but a Remove icon instead. This allows the user to cancel the filter if he or she wants to add a contact that is not associated with the account selected previously.

When the user clicks or taps the Remove icon , the filter is removed and the entire contact list is shown.

Once the user has selected a contact, the dialog closes and the name is added to the relevant field on the main page.

Opening the value help again resets the dialog to its initial state with the filter set to “Best Electronics”.

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

No links

Implementation

Overflow Toolbar (active) (SAPUI5 samples)

Contextual Filter

The contextual filter allows you to show a prefiltered view of a list, such as a master list.

Warning
Note that this filter prevents the regular filter (which the user triggers from the footer bar) from displaying the filter criteria that are currently selected.

Usage

Use the contextual filter if:

You want to show the user a meaningful extract of an otherwise highly complex list.

You need to improve the performance if your app handles very large object lists.

Do not use the contextual filter if:

You just want to provide a way to filter a list. In this case, use the regular filter instead.

Responsiveness

The contextual filter (sap.m.toolbar) spans the whole width of the list or table it is attached to, while its height remains unchanged. Text inside the bar does not wrap if there is insufficient space, but becomes truncated.

Contextual filter – Responsiveness

Contextual filter with truncated text in a narrow container, such as on a smartphone.

Responsive behavior in wider spaces.

Layout

The contextual filter is shown as a bar directly above the master list. It comprises two parts:

The filter value on the left (for example, a customer name).

The icon for the filter criterion on the right (here, the object type “customer”). The icon helps the user to put the filter value into context.

Contextual filter – Layout

Behavior and Interaction

The following example shows a prefiltered master list and explains how to change the filter criterion.

Change Filter

The user opens the app and sees a prefiltered list of objects. The bar on top of the master list indicates that the list is filtered and by which criteria.

When the user clicks or taps the bar, a screen (on phones) or popup (on desktops/tablets) appears on which the user can select another criterion.

Select Filter Criterion

In this use case, the user should not be able to disable the filter because there is no way to reset it.

Other master list functions (such as Search or Refresh) are still available and remain unaffected by the contextual filter.

Once a criterion has been selected, the user is taken back to the master list (on phones) or the popup closes (on desktops/tablets). The list is now filtered by the newly selected criterion.

Guidelines

Do not use the contextual filter in place of the regular filter in the footer bar. The regular filter is much more versatile and can also be deactivated by the user.

Also note that the contextual and the regular filter both use the same bar to visualize the filter criteria. If the contextual filter is being used, the regular filter can no longer be visualized. Although both filters can technically be used in parallel, we highly recommend that you avoid having both in one list.

Use an icon that is unique and visually represents the current filter criterion.

Do

Do not use any of the generic filter icons because they may be confused with the user-triggered filters.

Don't

Properties

The contextual filter is not a separate control. To build a contextual filter, you need to use the sap.m.OverflowToolbar control. The filtering itself must be carried out by the app.

Exceptions

There is one exception when the contextual filter can actually be cancelled by the user. In this special case, the contextual filter is used to prefilter the listed items in a select dialog.

This use of the contextual filter conveniently offers users a narrowed down list based on their previous selection.

(1) Initial situation: The user is about to select an account and a contact.

(2) The user selects “Best Electronics” and then clicks or taps the value help icon in the Contact field.

(3) The value help dialog appears showing a list of contacts. These are prefiltered (using the contextual filter) to show only contacts from “Best Electronics” (the company the user selected previously).

Note that this time the icon in the filter’s toolbar does not show an account icon, but a Remove icon instead. This allows the user to cancel the filter if he or she wants to add a contact that is not associated with the account selected previously.

When the user clicks or taps the Remove icon , the filter is removed and the entire contact list is shown.

Once the user has selected a contact, the dialog closes and the name is added to the relevant field on the main page.

Opening the value help again resets the dialog to its initial state with the filter set to “Best Electronics”.

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

No links

Implementation

Overflow Toolbar (active) (SAPUI5 samples)

Icon Tab Bar

The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.

There are two key use cases:

You want to let users navigate between different object facets in the object details area.

You want to let users filter lists, and give them the option of calling up the entire list, or only items with a specific attribute.

In both cases, the user switches between tab pages by clicking or tapping the respective tab.

Usage

Use the icon tab bar if:

Your business objects need to show many facets at the same time.

You want to allow the user to browse through these facets.

You need a prominent or very visual filter on top of a list.

You have clear-cut process steps that need to be visualized.

Do not use the icon tab bar if:

An object type has only one tab in the entire app.
In this case, we recommend removing the icon tab bar and placing the content on the same level as the object header. To replace the tab label, add a headline with the same text (for example, Information).

Responsiveness

The icon tab bar stretches horizontally, and soon runs out of space on small screens. It responds to limited space by offering a scrolling mechanism.

Responsiveness - Icon tabs

Responsiveness - Text tabs

Layout

The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from. These are described in detail below.

Types

You can use the icon tab bar control to build the following types of tab bars:

Text only

Icon tabs

Tabs as filters

Tabs as process steps

Text Only

The text-only variant is one of the most common types. It allows longer labels, and can also display counters above the text to indicate the number of items on the tab page.

Unlike all other tab variants, the labels do not get truncated. The full text is always shown. As a result, you need to ensure that your labels do not become too long. They should still be easy to read on smaller screens.

If you use text-only tabs, make sure that the property UpperCase is disabled and that you enter the labels in title case (Example: Approval Flow).

Types ─ Text-only without counters
Types ─ Text-only with inline counters

Counters and Text Tabs

If counters are used, set the property HeaderMode to Inline so the counters appear in brackets after the labels.

Please do not use the old layout that shows the counters on top of the labels (Headermode = Standard).

Do
Counters – Inline Layout ('HeaderMode' set to 'Inline')
Don't
Counters – Old Layout ('HeaderMode' set to 'Standard')

Icon Tabs

Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.

Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.

Please note that starting with SAPUI5 version 1.40, you should only use the horizontal type of label (icon and label side by side).

If your labels get truncated, consider using shorter labels or text tabs (without icons), as text tabs cannot get truncated.

Types - Icons with counters
Types - Icons with counters and labels
Types - Icon-only

Tabs as Filters

If you build the tab bar as a filter, it can comprise two parts:

An “all” tab on the left (optional)
This tab shows the total number of items, and describes the type of item (for example, 189 Products).

Tabs for specific filters
Use the tab text to indicate the filter attribute.
We strongly recommend showing a counter on every tab.

Types - Filter

Tabs as Process Steps

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

To connect the steps, use the triple-chevron icon () from the SAP icon font (technical name: process).

Types - Process

Developer Hint
When using icons with labels, add a comment in the properties file to make editors and translators aware that space is limited.
Example: Label for icon tab on detail screen. Max 14-16 characters (depending on character width).

Test whether your labels and their translations are displayed in full, and do not get truncated.

Behavior and Interaction

Clicking/Tapping on Tab

To navigate through the views, the user clicks or taps the tabs.

Optional behavior: If the user clicks or taps a tab that’s already open, the container collapses. It opens again when the user clicks any tab.

Use the “expandable” property to specify whether users can collapse the tab container (default = true):

Let users collapse the container if there is additional content below the container, and the information inside the container is not always needed.

If there is no content below the tab container, set the “expandable” property to false.

The “expandable” property controls the initial state of the container. Do not change the default state (true).

Styles

The two different styles (round tabs and text only) are discussed in the Types section.

In both cases, you can use colors to give users additional orientation.

Information
Do not use colors for decoration only. Colors should always indicate a status that is relevant to the user.

When using colors, stick to the semantic colors provided by visual design. Do not hard-code color values. Instead, use the CSS extension “Less”.
Only use semantic colors if it is important for users to know that they need to take action (for example, to indicate errors or critical situations requiring action). Otherwise, use the neutral default colors.

This example shows a process where one step is indicating an error. Since the other tabs have neutral colors, it is clear that they do not contain errors. Coloring them green to show that they are OK is unnecessary, and would reduce the severity of the red tab.

Styles - Colors

Guidelines

Apply the styles as follows:

If you have only a few tabs that can easily be visualized with icons, use the icon-only tabs. If a short description is needed, use icons and labels.

If the content cannot easily be identified by an icon, use the text-only tabs. They also allow for longer labels.

If you are using the icon tab bar in the object view floorplan, use either icon-only or text-only tabs.
Icons only:
Use this option if you have only 4–5 tabs that can be very clearly identified by their icon.
Text only:
Use this option if you have more than 4–5 tabs, or if there are no clear icons to represent the content. Set the property HeaderMode to Inline.

Do
Counters – Inline Layout ('HeaderMode' set to 'Inline')

Don't
Counters – Old Layout ('HeaderMode' set to 'Standard')

If you use icon tabs, ensure the following:

The icons clearly identify the content on the tab pages.

Each tab has a unique icon. Do not use the same icon more than once.

The icons are easily distinguishable.

Any icons between tabs (for example, as separators or connectors) are visually very different from the icons on the tabs.

Either all or none of the icons have labels.

Implement the focus as follows:

By default, show the first tab as open. This is the initial setting provided by the control.
Note: Technically, you can also override the initial selection. However, this is not recommended.

Later on, you can show the tab last selected by the user.

Additional guidelines:

Do not display a loading indicator above the tab while the number for the item count is loading.

Handle empty tabs as follows:

Hide tabs that do not contain any information, and do not allow the user to create content..

Show empty tabs that allow users to create content, such as notes or attachments.

Only use the tab bars to navigate between tabs. Do not use any other navigation links. For example, do not let users click an item in tab A that takes them to tab B.
This type of cross-navigation inside a container is confusing, and cannot be handled by the back navigation.

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

No links

Implementation

Icon Tab Bar (SAPUI5 samples)

Icon Tab Bar (SAPUI5 API reference)

Icon Tab Bar

The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.

There are two key use cases:

You want to let users navigate between different object facets in the object details area.

You want to let users filter lists, and give them the option of calling up the entire list, or only items with a specific attribute.

In both cases, the user switches between tab pages by clicking or tapping the respective tab.

Usage

Use the icon tab bar if:

Your business objects need to show many facets at the same time.

You want to allow the user to browse through these facets.

You need a prominent or very visual filter on top of a list.

You have clear-cut process steps that need to be visualized.

Do not use the icon tab bar if:

An object type has only one tab in the entire app.
In this case, we recommend removing the icon tab bar and placing the content on the same level as the object header. To replace the tab label, add a headline with the same text (for example, Information).

Responsiveness

The icon tab bar stretches horizontally, and soon runs out of space on small screens. It responds to limited space by offering a scrolling mechanism.

Icon tab bar - Size S

Icon tab bar - Size M
Icon tab bar - Size L/XL

Layout

The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from. These are described in detail below.

Types

You can use the icon tab bar control to build the following types of tab bars:

Text only

Icon tabs

Tabs as filters

Tabs as process steps

Text Only

The text-only variant is one of the most common types. It allows longer labels, and can also display counters above the text to indicate the number of items on the tab page.

Unlike all other tab variants, the labels do not get truncated. The full text is always shown. As a result, you need to ensure that your labels are not too long. They should still be easy to read on smaller screens.

If you use text-only tabs, make sure to put the titles in UPPERCASE LETTERS.

Icon tab bar – Types – Text and counters
Icon tab bar – Types – Text only

Icon Tabs

Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.

Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.

Please note that labels under the tabs do not wrap. Texts that exceed the width of the tab are truncated.

If you need longer labels, put the labels next to the tabs. If they are still truncated, use shorter labels or text-only tabs.

Icon tab bar – Types – Icons and labels (vertical)
Icon tab bar – Types – Icons and labels (horizontal)
Icon tab bar – Types – Icons only

Tabs as Filters

If you build the tab bar as a filter, it can contain two parts:

An “all” tab on the left (optional)
This tab shows the total number of items, and describes the type of item (for example, 14 Products).

Tabs for specific filters
Use the tab text to indicate the filter attribute.
We strongly recommend showing a counter on every tab.

Icon tab bar – Types – Filter

Tabs as Process Steps

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

To connect the steps, use the triple-chevron icon () from the SAP icon font (technical name: process).

Icon tab bar – Types – Process

Developer Hint
When using icons with labels, add a comment in the properties file to make editors and translators aware that space is limited.
Example: Label for icon tab on detail screen. Max 14-16 characters (depending on character width).

Test whether your labels and their translations are displayed in full, and do not get truncated.

Behavior and Interaction

Clicking/Tapping on Tab

To navigate through the views, the user clicks or taps the tabs.

Optional behavior: If the user clicks or taps a tab that’s already open, the container collapses. It opens again when the user clicks any tab.

Use the “expandable” property to specify whether users can collapse the tab container (default = true):

Let users collapse the container if there is additional content below the container, and the information inside the container is not always needed.

If there is no content below the tab container, set the “expandable” property to false.

The “expandable” property controls the initial state of the container. Do not change the default state (true).

Styles

The two different styles (round tabs and text only) are discussed in the Types section.

In both cases, you can use colors to give users additional orientation.

Information
Do not use colors for decoration only. Colors should always indicate a status that is relevant to the user.

When using colors, stick to the semantic colors provided by visual design. Do not hard-code color values. Instead, use the CSS extension “Less”.
Only use semantic colors if it is important for users to know that they need to take action (for example, to indicate errors or critical situations requiring action). Otherwise, use the neutral default colors.

This example shows a process where one step is indicating an error. Since the other tabs have neutral colors, it is clear that they do not contain errors. Coloring them green to show that they are OK is unnecessary, and would reduce the severity of the red tab.

Styles – Colors

Guidelines

Apply the styles as follows:

If you have only a few tabs that can easily be visualized with icons, use the icon-only tabs. If a short description is needed, use icons and labels.

If the content cannot easily be identified by an icon, use the text-only tabs. They also allow for longer labels.

If you are using the icon tab bar in the object view floorplan, use either icon-only or text-only tabs.
Icons only:
Use this option if you have only 4–5 tabs that can be very clearly identified by their icon.
Text only:
Use this option if you have more than 4–5 tabs, or if there are no clear icons to represent the content.

If you use icon tabs, ensure the following:

The icons clearly identify the content on the tab pages.

Each tab has a unique icon. Do not use the same icon more than once.

The icons are easily distinguishable.

Any icons between tabs (for example, as separators or connectors) are visually very different from the icons on the tabs.

Either all or none of the icons have labels.

Implement the focus as follows:

By default, show the first tab as open. This is the initial setting provided by the control.
Note: Technically, you can also override the initial selection. However, this is not recommended.

Later on, you can show the tab last selected by the user.

Additional guidelines:

Do not display a loading indicator above the tab while the number for the item count is loading.

Handle empty tabs as follows:

Hide tabs that do not contain any information, and do not allow the user to create content..

Show empty tabs that allow users to create content, such as notes or attachments.

Only use the tab bars to navigate between tabs. Do not use any other navigation links. For example, do not let users click an item in tab A that takes them to tab B.
This type of cross-navigation inside a container is confusing, and cannot be handled by the back navigation.

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

No links

Implementation

Icon Tab Bar (SAPUI5 samples)

Icon Tab Bar (SAPUI5 API reference)

Icon Tab Bar

The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.

There are two key use cases:

You want to let users navigate between different object facets in the object details area.

You want to let users filter lists, and give them the option of calling up the entire list, or only items with a specific attribute.

In both cases, the user switches between tab pages by clicking or tapping the respective tab.

Usage

Use the icon tab bar if:

Your business objects need to show many facets at the same time.

You want to allow the user to browse through these facets.

You need a prominent or very visual filter on top of a list.

You have clear-cut process steps that need to be visualized.

Do not use the icon tab bar if:

An object type has only one tab in the entire app.
In this case, we recommend removing the icon tab bar and placing the content on the same level as the object header. To replace the tab label, add a headline with the same text (for example, Information).

Responsiveness

The icon tab bar stretches horizontally, and soon runs out of space on small screens. It responds to limited space by offering a scrolling mechanism.

Icon tab bar - Size S

Icon tab bar - Size M
Icon tab bar - Size L/XL

Layout

The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from. These are described in detail below.

Types

You can use the icon tab bar control to build the following types of tab bars:

Text only

Icon tabs

Tabs as filters

Tabs as process steps

Text Only

The text-only variant is one of the most common types. It allows longer labels, and can also display counters above the text to indicate the number of items on the tab page.

Unlike all other tab variants, the labels do not get truncated. The full text is always shown. As a result, you need to ensure that your labels are not too long. They should still be easy to read on smaller screens.

If you use text-only tabs, make sure to put the titles in UPPERCASE LETTERS.

Icon tab bar – Types – Text and counters
Icon tab bar – Types – Text only

Icon Tabs

Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.

Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.

Please note that labels under the tabs do not wrap. Texts that exceed the width of the tab are truncated.

If you need longer labels, put the labels next to the tabs. If they are still truncated, use shorter labels or text-only tabs.

Icon tab bar – Types – Icons and labels (vertical)
Icon tab bar – Types – Icons and labels (horizontal)
Icon tab bar – Types – Icons only

Tabs as Filters

If you build the tab bar as a filter, it can contain two parts:

An “all” tab on the left (optional)
This tab shows the total number of items, and describes the type of item (for example, 14 Products).

Tabs for specific filters
Use the tab text to indicate the filter attribute.
We strongly recommend showing a counter on every tab.

Icon tab bar – Types – Filter

Tabs as Process Steps

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

To connect the steps, use the triple-chevron icon () from the SAP icon font (technical name: process).

Icon tab bar – Types – Process

Developer Hint
When using icons with labels, add a comment in the properties file to make editors and translators aware that space is limited.
Example: Label for icon tab on detail screen. Max 14-16 characters (depending on character width).

Test whether your labels and their translations are displayed in full, and do not get truncated.

Behavior and Interaction

Clicking/Tapping on Tab

To navigate through the views, the user clicks or taps the tabs.

Optional behavior: If the user clicks or taps a tab that’s already open, the container collapses. It opens again when the user clicks any tab.

Use the “expandable” property to specify whether users can collapse the tab container (default = true):

Let users collapse the container if there is additional content below the container, and the information inside the container is not always needed.

If there is no content below the tab container, set the “expandable” property to false.

The “expandable” property controls the initial state of the container. Do not change the default state (true).

Styles

The two different styles (round tabs and text only) are discussed in the Types section.

In both cases, you can use colors to give users additional orientation.

Information
Do not use colors for decoration only. Colors should always indicate a status that is relevant to the user.

When using colors, stick to the semantic colors provided by visual design. Do not hard-code color values. Instead, use the CSS extension “Less”.
Only use semantic colors if it is important for users to know that they need to take action (for example, to indicate errors or critical situations requiring action). Otherwise, use the neutral default colors.

This example shows a process where one step is indicating an error. Since the other tabs have neutral colors, it is clear that they do not contain errors. Coloring them green to show that they are OK is unnecessary, and would reduce the severity of the red tab.

Styles – Colors

Guidelines

Apply the styles as follows:

If you have only a few tabs that can easily be visualized with icons, use the icon-only tabs. If a short description is needed, use icons and labels.

If the content cannot easily be identified by an icon, use the text-only tabs. They also allow for longer labels.

If you are using the icon tab bar in the object view floorplan, use either icon-only or text-only tabs.
Icons only:
Use this option if you have only 4–5 tabs that can be very clearly identified by their icon.
Text only:
Use this option if you have more than 4–5 tabs, or if there are no clear icons to represent the content.

If you use icon tabs, ensure the following:

The icons clearly identify the content on the tab pages.

Each tab has a unique icon. Do not use the same icon more than once.

The icons are easily distinguishable.

Any icons between tabs (for example, as separators or connectors) are visually very different from the icons on the tabs.

Either all or none of the icons have labels.

Implement the focus as follows:

By default, show the first tab as open. This is the initial setting provided by the control.
Note: Technically, you can also override the initial selection. However, this is not recommended.

Later on, you can show the tab last selected by the user.

Additional guidelines:

Do not display a loading indicator above the tab while the number for the item count is loading.

Handle empty tabs as follows:

Hide tabs that do not contain any information, and do not allow the user to create content..

Show empty tabs that allow users to create content, such as notes or attachments.

Only use the tab bars to navigate between tabs. Do not use any other navigation links. For example, do not let users click an item in tab A that takes them to tab B.
This type of cross-navigation inside a container is confusing, and cannot be handled by the back navigation.

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

No links

Implementation

Icon Tab Bar (SAPUI5 samples)

Icon Tab Bar (SAPUI5 API reference)

Icon Tab Bar

The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.

There are two key use cases:

You want to let users navigate between different object facets in the object details area.

You want to let users filter lists, and give them the option of calling up the entire list, or only items with a specific attribute.

In both cases, the user switches between tab pages by clicking or tapping the respective tab.

Usage

Use the icon tab bar if:

Your business objects need to show many facets at the same time.

You want to allow the user to browse through these facets.

You need a prominent or very visual filter on top of a list.

You have clear-cut process steps that need to be visualized.

Do not use the icon tab bar if:

An object type has only one tab in the entire app.
In this case, we recommend removing the icon tab bar and placing the content on the same level as the object header. To replace the tab label, add a headline with the same text (for example, Information).

Responsiveness

The icon tab bar stretches horizontally, and soon runs out of space on small screens. It responds to limited space by offering a scrolling mechanism.

Icon tab bar - Size S

Icon tab bar - Size M
Icon tab bar - Size L/XL

Layout

The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from. These are described in detail below.

Types

You can use the icon tab bar control to build the following types of tab bars:

Text only

Icon tabs

Tabs as filters

Tabs as process steps

Text Only

The text-only variant is one of the most common types. It allows longer labels, and can show counters above the text to indicate the number of items on the tab page.

If you use text-only tabs, make sure to put the titles in UPPER CASE LETTERS.

Icon tab bar - Types - Text and counters
Icon tab bar - Types - Text only

Icon Tabs

Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.

Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.

Please note that labels under the tabs do not wrap. Texts that exceed the width of the tab are truncated.

If you need longer labels, put the labels next to the tabs. If they are still truncated, use shorter labels or text-only tabs.

Icon tab bar – Types – Icons and labels (vertical)
Icon tab bar – Types – Icons and labels (horizontal)
Icon tab bar – Types – Icons only

Tabs as Filters

If you build the tab bar as a filter, it can contain two parts:

An “all” tab on the left (optional)
This tab shows the total number of items, and describes the type of item (for example, 14 Products).

Tabs for specific filters
Use the tab text to indicate the filter attribute.
We strongly recommend showing a counter on every tab.

Icon tab bar – Types – Filter

Tabs as Process Steps

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

To connect the steps, use the triple-chevron icon () from the SAP icon font (technical name: process).

Icon tab bar – Types – Process

Developer Hint
When using icons with labels, add a comment in the properties file to make editors and translators aware that space is limited.
Example: Label for icon tab on detail screen. Max 14-16 characters (depending on character width).

Test whether your labels and their translations are displayed in full, and do not get truncated.

Behavior and Interaction

Clicking/Tapping on Tab

To navigate through the views, the user clicks or taps the tabs.

Optional behavior: If the user clicks or taps a tab that’s already open, the container collapses. It opens again when the user clicks any tab.

Use the “expandable” property to specify whether users can collapse the tab container (default = true):

Let users collapse the container if there is additional content below the container, and the information inside the container is not always needed.

If there is no content below the tab container, set the “expandable” property to false.

The “expandable” property controls the initial state of the container. Do not change the default state (true).

Styles

The two different styles (round tabs and text only) are discussed in the Types section.

In both cases, you can use colors to give users additional orientation.

Information
Do not use colors for decoration only. Colors should always indicate a status that is relevant to the user.

When using colors, stick to the semantic colors provided by visual design. Do not hard-code color values. Instead, use the CSS extension “Less”.
Only use semantic colors if it is important for users to know that they need to take action (for example, to indicate errors or critical situations requiring action). Otherwise, use the neutral default colors.

This example shows a process where one step is indicating an error. Since the other tabs have neutral colors, it is clear that they do not contain errors. Coloring them green to show that they are OK is unnecessary, and would reduce the severity of the red tab.

Styles – Colors

Guidelines

Apply the styles as follows:

If you have only a few tabs that can easily be visualized with icons, use the icon-only tabs. If a short description is needed, use icons and labels.

If the content cannot easily be identified by an icon, use the text-only tabs. They also allow for longer labels.

If you are using the icon tab bar in the object view floorplan, use either icon-only or text-only tabs.
Icons only:
Use this option if you have only 4–5 tabs that can be very clearly identified by their icon.
Text only:
Use this option if you have more than 4–5 tabs, or if there are no clear icons to represent the content.

If you use icon tabs, ensure the following:

The icons clearly identify the content on the tab pages.

Each tab has a unique icon. Do not use the same icon more than once.

The icons are easily distinguishable.

Any icons between tabs (for example, as separators or connectors) are visually very different from the icons on the tabs.

Either all or none of the icons have labels.

Implement the focus as follows:

By default, show the first tab as open. This is the initial setting provided by the control.
Note: Technically, you can also override the initial selection. However, this is not recommended.

Later on, you can show the tab last selected by the user.

Additional guidelines:

Do not display a loading indicator above the tab while the number for the item count is loading.

Handle empty tabs as follows:

Hide tabs that do not contain any information, and do not allow the user to create content..

Show empty tabs that allow users to create content, such as notes or attachments.

Only use the tab bars to navigate between tabs. Do not use any other navigation links. For example, do not let users click an item in tab A that takes them to tab B.
This type of cross-navigation inside a container is confusing, and cannot be handled by the back navigation.

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

No links

Implementation

Icon Tab Bar (SAPUI5 samples)

Icon Tab Bar (SAPUI5 API reference)

Token

Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.

Token

Usage

Use tokens only in the multi-combo box, multi-input control, or value help dialog.

Components

The tokenizer is an invisible container that can display multiple tokens.

Tokens have the following properties:

They usually contain single text items.

They may also contain key-value pairs, such as John Miller (ID1234567).

They contain a Remove icon , which is invisible if the token is in edit mode.

Tokens with a surrounding tokenizer

Behavior and Interaction

Interacting

Users can interact with tokens using a mouse, keyboard, and/or touch input. In size L (desktop) only, hovering with the mouse over the token produces a tooltip with the entire content of the token (on a maximum of two lines).

Selecting and Deselecting Tokens

Users can select tokens by clicking or tapping them, or by using the keyboard. The selected tokens are then indicated. Users can select multiple tokens separately by holding down the CTRL key and selecting the relevant tokens, for example, by clicking them.

The user can select a series of tokens by placing the cursor in an initial position (which can also be a token), holding down the SHIFT key, and clicking or tapping a new position. The tokens between these two cursor positions are then selected.

To replace a token, the user selects it and enters new characters.

Adding Tokens

The user can add tokens to the multi-combo box and multi-input control. New tokens are added in the order in which they are entered.

Information
For information on how to manage leading and treading whitespace (blanks) when copying and pasting text into input controls, please see removing leading and trailing whitespace.

Removing Tokens

The user can instantly remove tokens via the keyboard, or by clicking or tapping the Remove icon .

Styles

There are three different styles of tokens: regular, on hover, and selected. These styles correspond to the type of interaction being used.

Regular

On hover

Selected

Read only

Hover selected

Guidelines

The tokenizer can also be used as a tag container.

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

Multi-Combo Box (guidelines)

Multi-Input Field (guidelines)

Value Help Dialog (guidelines)

Combo Box (guidelines)

Implementation

Tokens (SAPUI5 samples)

Tokenizer (SAPUI5 samples)

Tokens (SAPUI5 API reference)

Tokenizer (SAPUI5 API reference)

Token

Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.

Token

Usage

Use tokens only in the multi-combo box, multi-input control, or value help dialog.

Components

The tokenizer is an invisible container that can display multiple tokens.

Tokens have the following properties:

They usually contain single text items.

They may also contain key-value pairs, such as John Miller (ID1234567).

They contain a Remove icon , which is invisible if the token is in edit mode.

Tokens with a surrounding tokenizer

Behavior and Interaction

Interacting

Users can interact with tokens using a mouse, keyboard, and/or touch input. In size L (desktop) only, hovering with the mouse over the token produces a tooltip with the entire content of the token (on a maximum of two lines).

Selecting and Deselecting Tokens

Users can select tokens by clicking or tapping them, or by using the keyboard. The selected tokens are then indicated. Users can select multiple tokens separately by holding down the CTRL key and selecting the relevant tokens, for example, by clicking them.

The user can select a series of tokens by placing the cursor in an initial position (which can also be a token), holding down the SHIFT key, and clicking or tapping a new position. The tokens between these two cursor positions are then selected.

To replace a token, the user selects it and enters new characters.

Adding Tokens

The user can add tokens to the multi-combo box and multi-input control. New tokens are added in the order in which they are entered.

Information
For information on how to manage leading and treading whitespace (blanks) when copying and pasting text into input controls, please see removing leading and trailing whitespace.

Removing Tokens

The user can instantly remove tokens via the keyboard, or by clicking or tapping the Remove icon .

Styles

There are three different styles of tokens: regular, on hover, and selected. These styles correspond to the type of interaction being used.

Regular

On hover

Selected

Guidelines

The tokenizer can also be used as a tag container.

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

Multi-Combo Box (guidelines)

Multi-Input Field (guidelines)

Value Help Dialog (guidelines)

Combo Box (guidelines)

Implementation

Tokens (SAPUI5 samples)

Tokenizer (SAPUI5 samples)

Tokens (SAPUI5 API reference)

Tokenizer (SAPUI5 API reference)

Token

Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.

Token

Usage

Use tokens only in the multi-combo box, multi-input control, or value help dialog.

Components

The tokenizer is an invisible container that can display multiple tokens.

Tokens have the following properties:

They usually contain single text items.

They may also contain key-value pairs, such as John Miller (ID1234567).

They contain a Remove icon , which is invisible if the token is in edit mode.

Tokens with a surrounding tokenizer

Behavior and Interaction

Interacting

Users can interact with tokens using a mouse, keyboard, and/or touch input. In size L (desktop) only, hovering with the mouse over the token produces a tooltip with the entire content of the token (on a maximum of two lines).

Selecting and Deselecting Tokens

Users can select tokens by clicking or tapping them, or by using the keyboard. The selected tokens are then indicated. Users can select multiple tokens separately by holding down the CTRL key and selecting the relevant tokens, for example, by clicking them.

The user can select a series of tokens by placing the cursor in an initial position (which can also be a token), holding down the SHIFT key, and clicking or tapping a new position. The tokens between these two cursor positions are then selected.

To replace a token, the user selects it and enters new characters.

Adding Tokens

The user can add tokens to the multi-combo box and multi-input control. New tokens are added in the order in which they are entered.

Removing Tokens

The user can instantly remove tokens via the keyboard, or by clicking or tapping the Remove icon .

Styles

There are three different styles of tokens: regular, on hover, and selected. These styles correspond to the type of interaction being used.

Regular

On hover

Selected

Guidelines

The tokenizer can also be used as a tag container.

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

Multi-Combo Box (guidelines)

Multi-Input Field (guidelines)

Value Help Dialog (guidelines)

Combo Box (guidelines)

Implementation

Tokens (SAPUI5 samples)

Tokenizer (SAPUI5 samples)

Tokens (SAPUI5 API reference)

Tokenizer (SAPUI5 API reference)

Infobar

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.

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 format. Text inside the bar is truncated if there is not enough space.

Text is truncated on a small screen. Example shows infobar for contextual filter.

Types

There are three situations in which an infobar is shown:

After a general filter has been applied.

After a contextual filter has been applied.

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

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

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

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

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

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 or taps 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 multiple filters shows the filter categories.

Icon Area

Cancel: The user clicks or taps 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.

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

Select Dialog (guidelines)

Contextual Filter (guidelines)

Toolbar (guidelines)

View Settings Dialog (guidelines)

Implementation

No links

Smart Filter Bar Annotations

Information
This article is intended as an aid to designers and developers who want to explore the detail configuration options available for the smart filter bar.

The smart filter bar is a wrapper that analyzes a given OData service and renders a filter bar based on the content defined by the service. For example, the OData service determines whether a field is visible on the filter bar, and whether it supports type-ahead and value help. To configure more settings or overwrite the settings from the OData service, the developer can set additional annotations in an external document (metadata.xml).

Developers can use annotation properties in the classes [external_only]ControlConfiguration and GroupConfiguration to adapt the filter bar for the purposes of the app.

These annotations let you:

Determine the type of control (for example, whether a field is shown as a multi-input field or as a date picker)

Enable the autocomplete suggestions feature

Enable the value help dialog

Overwrite settings from the OData service

Set custom filter groups

Add custom fields

Access all settings for the underlying filter bar

You can also use all the configuration options described here in the smart filter bar for the list report (SAP Fiori Elements).

Warning
Most of the attributes/properties are not dynamic and cannot be changed once the control has been initialized.

Usage

Use the smart filter bar if:

An OData service is available.

You want to develop quickly and efficiently.

Do not use the smart filter bar if:

You need to make extensive changes to the filter bar.

Components

You can use the annotation properties listed below to influence how filters are rendered in the expanded filter bar and in the filter dialog.

Expanded Filter Bar

Smart filter bar - Properties for the expanded filter bar

1 enableBasicSearch

Defines whether the filter bar includes a basic search. By default, the basic search is not included.

2 FilterRestrictions/NonFilterableProperties

Defines whether a property is available as a filter criterion.

3 FilterRestrictions/RequiredProperties

Defines the filter field as a mandatory filter. Mandatory filters are marked by an asterisk (*).

4 ValueList

Contains annotations that provide information for rendering a value help list that has been set for a property.

5 FilterExpressionType/MultiValue

Defines whether multiple values can be used in a single filter.

6 FilterExpressionType/SingleValue

Restricts the filter to allow only one value entry.

7 LineItem/Label

A short, human-readable text for the filter name.

8 FilterExpressionType/SingleInterval

Restricts the filter to a specified interval, such as a date interval.

8 insertDefaultFilterValue

Inserts a default filter value into the aggregation defaultFilterValues.

9 liveMode

Defines whether the expanded filter bar is shown in live mode (no Go button) or in manual mode. By default, the filter bar is shown in manual mode.

Filter Dialog

1 FilterRestrictions/RequiredProperties

Defines the filter field as a mandatory filter. Mandatory filters are marked by an asterisk (*).

2 FieldControlType/Hidden

Defines whether the filter is initially visible on the expanded filter bar.

3 SelectionFields

Defines whether a filter belongs to the basic group. All filters in the basic group are initially visible on the expanded filter bar.

4 FieldGroup

Defines whether a filter field is initially shown on the filter dialog, and which group it belongs to.

5 FilterRestrictions/NonFilterableProperties

Defines whether a property is available as a filter criterion.

6 LineItem/Label

A short, human-readable text for the filter name.

SmartFilterBar Properties on the Filter Dialog

Data Types

The smart filter bar analyzes and interprets the metadata provided by the OData service. This allows you to create complex UI entities, and to automatically add fields offered by the OData service to the filter bar as editable input fields. (Note that only fields marked with sap:filterable are added automatically.)

The tables below tell you which input controls are used for the key data types.

General Data Types

DataType ODataMetadata Additional Configuration Edit type Display type Notes

* * Input Text

DateTime – sap:display-format=”Date” DatePicker Text

Decimal – Precision=”3″ Scale=”0″ Input Text

All – Input (with VHD) Text If a matching ValueList annotation is found, the ValueHelp for the Input is enabled.
A ValueHelp Dialog is created automatically, based on the data in the ValueList annotation.

All –
sap:semantics=”fixed-values” on the ValueList entity
ComboBox Text If a matching ValueList annotation is found, and the ValueList entity has the semantics=”fixed-values”, a dropdown list is shown.

Filter Bar-Specific Data Types

Input Type sap:filter-restriction display-format hasValueHelpDialog controlType Resulting Control Type

* * controlType/filterType is specified As specified in additional configuration

DateTime “interval” “Date” NA Date Range Selection

DateTime “anything other than interval” or empty “Date” NA Date Picker

String “single-value” “true” / none Input Field With Value Help Dialog
(with typeAhead according to hasTypeAhead flag)

String “single-value” “false” not specified/input Input Field
(with typeAhead according to hasTypeAhead flag)

String “single-value” “false” dropDownList; hasTypeAhead is not considered here ComboBox

* “single-value” Input Field

String empty or no filter-restriction “true” / none Multi Input Field with Value Help Dialog

String “multi-value” “true” / none If no VL Annotation is found – only show the range selection part

String “multi-value” / empty “false” If no VL Annotation is found – hide the ValueHelpDialog icon

String “multi-value” / empty “false” dropDownList MultiComboBox

* “multi-value” Input Field

* “interval” NA A single Input Field that allows the “-” shortcut notation for intervals

Properties

FilterBar

Filter Bar Properties

persistencyKey
Data type: string
Key used to access personalization data.

advancedMode
Data type: boolean
The advanced mode overwrites the standard behavior and is used in the value help scenario.
Default value is false.

expandAdvancedArea
Data type: boolean
Defines whether the advanced area is expanded when the filter bar is used within the value help dialog.
Default value is false.

searchEnabled
Data type: boolean
Enables/disables the Search button in advanced mode.
Default value is true.

filterBarExpanded
Data type: boolean
Shows/hides the expanded filter bar.
Default value is true.

considerGroupTitle
Data type: boolean
If this property is set, the label for filters is prefixed with the group title.
Default value is false.

showClearButton
Data type: boolean
Handles visibility of the Clear button on the Filters dialog.
Default value is false.

showRestoreButton
Data type: boolean
Handles visibility of the Restore button on the Filters dialog.
Default value is true.

showGoOnFB
Data type: boolean
Handles visibility of the Go button on the filter bar.
Default value is true.

showRestoreOnFB
Data type: boolean
Handles visibility of the Restore button on the filter bar.
Default value is false.

showClearOnFB
Data type: boolean
Handles visibility of the Clear button on the filter bar.
Default value is false.

showGoButton
Data type: boolean
Handles visibility of the Go button on the filter bar.

deltaVariantMode
Data type: boolean
Stores the delta as compared to the standard variant.
Default value is true.

filterContainerWidth
Data type: string
Sets the width of the filter container.
Default value is 12rem.

useToolbar
Data type: boolean
Determines what design should be used. Default is the design with the toolbar. In mobile scenarios this property is ignored – the design with the toolbar is always used.
Default value is true.

header
Data type: string
Specifies the header text that is shown in the toolbar on the first position. This property is ignored, when useToolbar is set to false.

showFilterConfiguration
Data type: boolean
Handles visibility of the Filters button on the filter bar.
Default value is true.

Smart Filter Bar

Smart Filter Bar Properties

entitySet
Data type: string
The OData entity set whose metadata is used to create the SmartFilterBar. Note: Changing this value after the SmartFilterBar is initialized (initialize event was fired) has no effect.

basicSearchFieldName
Data type: string
Name of the field that has to be the focus of the basic search. This is only relevant for SmartFilterBar in combination with ValueHelpDialog.

enableBasicSearch
Data type: boolean
Enables the basic search field in the SmartFilterBar control. This must only be enabled for entities that support such search behavior.
Default value is false.

liveMode
Data type: boolean
Defines the live mode. The live mode only operates on non-phone scenarios.
Default value is false.

showMessages
Data type: boolean
If set to false, any errors that occur during the search will not be displayed in a message box.
Default value is true.

considerAnalyticalParameters
Data type: boolean
Indicates if the analytical parameters (SelectionVariant) must be taken into consideration.
Default value is false.

Smart Filter Bar Annotations

FilterRestrictions/NonFilterableProperties
Defines whether a Property can be used for filtering data.

FieldGroup
Defines a group for a filter field.

TextArrangement
Describes the arrangement of a code value and its text.

FieldControlType/Hidden
Defines whether the filter is visible.

ValueList
Contains annotations that provide information for rendering a ValueHelpList that has been set for a Property.

Label
A short, human-readable text for the filter name.

LineItem/Label
A short, human-readable text suitable for the filter name.

FilterRestrictions/RequiredProperties
Defines the filter field as mandatory filter.

FilterExpressionType/MultiValue
Defines whether multiple values can be used in a single filter.

FilterExpressionType/SingleValue
Restricts the filter to allow only one value entry.

FilterExpressionType/SingleInterval
Restricts the filter to a specified interval, such as a date interval.

SelectionFields
Defines whether certain fields should be initially visible in the SmartFilterBar control.

Control Configuration

Control Configuration Properties

key
The key property corresponds to the field name from the OData service metadata document.
Default value is string

groupId
The groupId can be used to move a field from one group to another. The groupId corresponds to the EntityName from the OData metadata. It is also possible to move a field from the advanced area to the basic area by specifying the groupId _BASIC.
Default value is string

label
You can use this property to overwrite the label of a filter field in the SmartFilterBar.
Default value is string

visible
Data type: boolean
You can use this flag to hide fields from the OData metadata.
Default value is true

hasValueHelpDialog
Data type: boolean
Specifies whether a value help dialog is available or not.
Default value is true

controlType
Data type: sap.ui.comp.smartfilterbar.ControlType
The SmartFilterBar calculates which kind of control will be used for a filter field, based on multiple OData attributes and annotations. You can use this property to overwrite the OData metadata.
Default value is auto

filterType
Data type: sap.ui.comp.smartfilterbar.FilterType
The filter type specifies whether the filter field is for a single value, multiple values, or an interval. The filter type calculated by the SmartFilterBar is based on the OData metadata. You can use this property to configure the filter type manually.
Default value is auto

index
Data type: int
You can use the zero-based index to specify the initial order of fields (without any variants).
Default value is -1

Control Configuration Properties

hasTypeAhead
Data type: boolean
You can use this property to enable the TypeAhead service. Note that TypeAhead does not work with all controls (for example, it is not supported for the DropDownListbox).
Default value is true

mandatory
Data type: sap.ui.comp.smartfilterbar.MandatoryType
You can use this property to overwrite the mandatory state of a filter field. This property can only be set during initialization. Changes at runtime will be ignored.
Default value is auto

width
Default value is string
The width of the filter field in a CSS compatible format. The width can be set only once during initialization. Changes at runtime will not be reflected. The width is not applied to custom controls.

visibleInAdvancedArea
Data type: boolean
If set to true, this field will be added to the advanced area (aka. Dynamic Selection) by default.
Default value is false

preventInitialDataFetchInValueHelpDialog
Data type: boolean
If value help annotations are available for this filter field, you can prevent the the table in the value help dialog for this field from being filled with the initial data fetch.
Default value is true

displayBehaviour
Data type: sap.ui.comp.smartfilterbar.DisplayBehaviour
The displayBehaviour specifies how to display the content on certain controls. For example: DescriptionOnly for Combobox (DropDown text), Description and ID for MultiInput (token text)
Default value is auto

conditionType
Data type: any
The condition Type class name to use for this filter item. Implementation should derive from sap.ui.comp.config.condition.Type.

Group Configuration

Group Configuration Properties

key
Data type: string
The key property shall correspond to the name EntityTypeName from the OData service $metadata document.

index
Data type: any
Zero-based integer index. The index can be used to specify the order of groups. If no index is specified, the order defined by the OData metadata will be used.
Default value is undefined

label
Data type: any
You can use this property to overwrite the label of a group in the advanced area of the SmartFilterBar.
Default value is undefined

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

Filter Bar/ Smart Filter Bar (guidelines)

Implementation

Smart Filter Bar (SAPUI5 samples)

Smart Filter Bar (SAPUI5 API reference)

UI Development Toolkit (SAPUI5 samples)

Smart Filter Bar Annotations