Components

The cloud file browser is composed of the following controls embedded in a dialog:

A file share select field
A file name field (export mode only)
Breadcrumb navigation
A New Folder button (export mode only)
A responsive table with files and folders
The finalizing and Cancel actions

Cloud file browser components

Iconography

Spreadsheet (Microsoft Excel, Google Sheets, CSV…)
Tooltip: Spreadsheet
sap-icon://excel-attachment
Text Document (Microsoft Word, Google Docs, RTF…)
Tooltip: Document
sap-icon://doc-attachment
Presentation (Microsoft Powerpoint, Google Slides…)
Tooltip: Presentation
sap-icon://ppt-attachment
Portable Document Format (PDF)
Tooltip: PDF
sap-icon://ppt-attachment
Plain Text
Tooltip: Text File
sap-icon://attachment-text-file
HTML File
Tooltip: HTML File
sap-icon://attachment-html
Image File, Photo
Tooltip: Image File
sap-icon://attachment-photo
Audio File
Tooltip: Audio File
sap-icon://attachment-audio
Video File
Tooltip: Video File
sap-icon://attachment-video
Archive (ZIP, RAR…)
Tooltip: Archive
sap-icon://attachment-zip-file
Unknown Format
Tooltip: File
sap-icon://document
Folder
Tooltip: Folder
sap-icon://folder-full
Locked Folder
Tooltip: Files can’t be exported to this folder.
sap-icon://locked

Cloud file browser icons

Behavior and Interaction

Export

When a data file is exported to the cloud, in the Export As dialog, the Destination field is set to the value Cloud and the finalizing action Export To… opens the cloud file browser.

Export as dialog and cloud file browser

The spreadsheet or data file can be exported in various file types according to the client’s configuration and the remote file share type. For example, CSV, Google Sheets, or Microsoft Excel.

For more details, see: Export to Spreadsheet.

Accessibility

The initial focus is placed in the File Name field.

Users can trigger the primary action while the focus is inside other controls in the dialog by using one of the following key combinations:

Enter
Ctrl + Enter (Windows)
Cmd + Enter (Mac)

Update / Overwrite a file

To update an existing file, users can select the file in the list and export the new version.

The version history stores all older versions of the file.

The user is free to change the exported file name via the File Name field. According to the file share rules, if the user enters unauthorized characters, the field changes the error state accordingly.

More details about field states.

For error prevention, the cloud file browser should display only the files of the type that has been chosen in the Export As dialog.

After the user has chosen the file format in the Export As dialog, they cannot change it via the file browser. Instead, they need to cancel the file browser and return to the settings dialog.

Cloud file browser with file selected

Depending on the file type, a Warning may inform the users that the file already exists and request user confirmation of the export.

It also informs users that older versions of the file are available in the version history.

Warning message for file update

Create a Folder

The user can create a folder with the New Folder button or the keyboard shortcut Ctrl+B.

The folder is created when the users move the focus away from the Name input field or press the Enter key.

After the folder is created, provide a message toast to confirm the creation and open the new folder automatically.

Message text: The new folder was created.

Folder creation

Locked Folders

Users can browse locked folders, but cannot export files to them. In such cases, the Locked icon replaces the Folder icon and the Export button remains disabled.

For more details, check Iconography.

Cloud file browser with locked folder

Import

The cloud file browser allows users to import files from the cloud to an SAP instance.

The Upload button is disabled until a file is selected for import.

Accessibility

The initial focus is placed on the first selectable item in the list.

The primary action can be triggered by a keyboard shortcut. For more details, see Export: Accessiblity.

Import mode

Loading Data

Use the busy indicator to cover the table space during the initial content loading.

If there are too many items to load, a limited number of items is loaded and more items load when the scroll hits the bottom of the list. The busy indicator shows at the bottom of the list.

Busy indicator

Empty States

Use illustrated messages when the following cases arise:

No file share found

The default file share doesn’t load or there is no available file share.

Headline: No File Share found
Description: Try reloading the file browser. If that doesn’t help, contact your administrator.
Illustration: ErrorScreen

Disable New Folder and primary actions.
Provide a Reload button that attempts to reconnect to the file share.

Folder fails to load

Headline: Unable to load the folder
Description: Try reloading the file browser. If that doesn’t help, contact your administrator.

Disable New Folder and primary actions.

Empty folder

Headline: There are no files yet
Description: When there are, you’ll see them here.
Illustration: SearchFolder

The user doesn’t have permission to access the file share

Headline: Permission Denied
Description: You cannot access this file share. To get access, contact your administrator.

Disable New Folder and primary actions.

Empty state - No file share

Empty state - Empty folder

Last Selected Location

When leaving the cloud file browser, the last selected folder and file share are remembered so the user can access it directly when coming back to the cloud file browser.

If the last selected file share is unavailable, an illustrated message shows in the cloud file browser (more details in Empty States).

If that last selected folder is inaccessible, the user is taken to the default location without warning.

Column sorting

The sorted column and the sort order is remembered when the user leaves the cloud file browser.

Responsiveness

The cloud file browser embedded components (responsive table, toolbar, form) respond to the browser size according to their individual specifications.

Mobile (size S)

Mobile (size S) with 200% zoom

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

Export to Spreadsheet
Dialog
Responsive Table
Form Field Validation

Implementation

Export to Spreadsheet (SAPUI5 samples)
Export to Spreadsheet (SAPUI5 API reference)
Cloud File Browser (or Cloud File Picker) (SAPUI5 samples)

Color Picker

The color picker allows users to choose any color and provides different input options for selecting colors.

Color picker

When to Use

Use the color picker:

To let users select any color freely.

Don't

Don’t use the color picker:

If you want to let users select one color from a predefined set of colors. Use the color palette instead.
If you want to let users select one color from a predefined set of colors, with the additional option of defining their own colors. Use the color palette popover instead.
For placement directly on a page. Always offer the picker in a popover or dialog.

Anatomy

Color picker container: Indicates lightness and saturation.
Sliders:
1. Modifies the hue
2. Modifies the transparency (“alpha channel”)
Color comparison fields: Display the current color (left) and the new color setting (right).
Hex input: Field for entering and displaying the color as a hexadecimal value.
Color mode panel: RGB(A) inputs.

Anatomy of the color picker

Behavior and Interaction

Mouse/touch: Users select a combination of saturation and lightness in the color picker box (click and drag). Hue and alpha values are selected with sliders.
Keyboard: The tab key is used to set the focus on the sliders and input fields. Values are entered using the corresponding input controls. The sliders react on arrow keys, Page Up/Down keys, as well as on Home and End keys. The color picker box is not keyboard-enabled.

Responsive Behavior

The color picker supports cozy and compact content densities.

Intro

The value help dialog is a UI pattern that helps the user search and select single and multiple values. The user can also define conditions.

The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.

Clicking the value help icon opens the value help dialog

Usage

Use the value help dialog if:

The user is searching within a dataset that contains more than 1,000 items.
The user needs to use different attributes to find an object (such as city, company name, and so on).
The user needs to define conditions, such as ranges and exclusions.

Do not use the value help dialog if:

There is a simpler control that fits the use case. Always start with the least complex control. For example, use the select control if the user needs to select only one item from a short list.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Value help dialog - Sizes L and XL

Value help dialog - Size M

Value help dialog - Size S

Components

The value help dialog contains the following components:

1) Header
2) Icon tab bar / list control (phone)
3) Search template (optional)
4) Basic search
5) Go button
6) Result list
7) Selected items and conditions
8) Footer toolbar
9) Filters
10) Area for defining conditions, such as ranges and exclusions

Components of the Value Help Dialog

Header (1)

The header bar contains the dialog title. See the Guidelines section below.

Icon Tab Bar / List Control (Phone) (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem), Search and Select, and Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Search and Select and the Define Conditions tab.
Both controls have a counter in the title that indicates the number of items/conditions selected.

Search Template (3)

Search templates allow the user to display different or additional fields in the filter area and result list. Depending on the use case, the user can switch between the different search templates in order to use different fields when searching. For example, the search template “Customer (by Company Code)” displays the additional field “Company Code” in the filter area and result list.

Basic Search (4)

The basic search finds all results that are somehow related to the input. For example, the search term “A” returns all the results containing the letter “A”.

Always offer the basic search in the value help dialog. Position the basic search to the right of the search template control. If there is no search template control, left-align the basic search.

Go Button (5)

The Go button triggers the search and filters the result list.

Result List (6)

The result list is populated on initial load by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly. Only the entered (or modified) value is transferred to the basic search. Type-ahead suggestions are ignored. The search is triggered automatically when the dialog opens.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the result list.

Selected Items and Conditions (7)

The selected items and conditions are displayed in a tokenizer (see Token for more information). Each selected item or condition is displayed as one token.

There is no longer a visual difference between included and excluded items and conditions. They are now differentiated using operators (see Using the Filters).

Footer Toolbar (8)

The footer bar offers the OK and Cancel buttons.

Filters (9)

The filter area offers a filter field for each column in the result list. In some cases, there can be specific filter fields that do not have a corresponding column on the UI. These fields typically come from the back-end service. Initially, the filter area is hidden.

Value help dialog - Filters

For the basic search with filters, the filter bar (sap.ui.comp.filterbar.FilterBar) is implemented in advanced mode. Advanced mode differs from the basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields are added automatically to the filter area.
There is a toggle button to show and hide the filters.
In each of the filter fields, users can use operators like “between” or “lower than” to define conditions.

Always hide the filter area in the value help dialog by default. Only show the filter area by default if the basic search can’t be provided.

Note that the value help icon of the Product ID field in the current value help dialog will open only the Define Conditions screen. The full value help dialog is not shown in order to prevent endless loops. For example, the value help icon of the Product Name or Category field in the value help for a Product field will navigate directly to the Define Conditions: Product screen.

Using the Filters

Users can enter operators (such as “=“) to define the conditions directly within the field without opening the Define Conditions tab.

Operator	Input Notation	Example
between	value…value	000…100
equal to	=value	=0001
contains	value	1
starts with	value*	001*
ends with	*value	*5
less than	<value	<100
less than or equal to	<=value	<=200
greater than	>value	>0300
greater than or equal to	>=value	>=0500
not between	!(value…value)	!(000…100)
not equal to	!(=value)	!(=0)
does not contain	!(value)	!(1)
does not start with	!(value*)	!(001*)
does not end with	!(*value)	!(*5)
not less than	!(<value)	!(<100)
not less than or equal to	!(<=value)	!(<=200)
not greater than	!(>value)	!(>0300)
not greater than or equal to	!(>=value)	!(>=0500)
empty	<empty>	<empty>
not empty	!(<empty>)	!(<empty>)

Note:

Depending on the underlying field, the operators may be labeled differently in the Define Conditions area. This doesn’t affect the input notation, which is based on the operator logic and remains constant.

Example: Operators for Date Fields

Operator Label	Input Notation
before	<value
before or on	<=value
after	>value
after or on	>=value

Users must use the following notation to get results:

Using an operator to filter the result list

Area for Defining Conditions (10)

In the Define Conditions tab, you can use the following operators to define single and multiple conditions:

between
equal to
contains
starts with
ends with
less than
less than or equal to
greater than
greater than or equal to
empty
not between
not equal to
does not contains
does not start with
does not end with
not less than
not less than or equal to
not greater than
not greater than or equal to
not empty

For convenience, the operators are grouped into two categories: Include and Exclude.

For Boolean attributes, where only two values are available, the operator dropdown in the condition panel is disabled. Users can pick one of the values from the combo box.

You can also use a combo box if the possible values for a condition are fixed. Users can then choose the value they need from the list.

Each condition is displayed as a token in the Selected Items and Conditions tokenizer.

Information

The operator dropdown list may not contain all the operators listed above. The type of field value determines which operators are available.

The type of field value also determines how the operators are labeled. For example, if the field is a date field, the operator labels “less than” and “greater than” change to “before” and “after”.

Developer Hint

For information on how to manage white space characters (blanks) when users copy and paste text into input controls, see Removing Leading and Trailing White Space.

'Define Conditions' - List of operators

Defining a condition for a Boolean attribute

Behavior and Interaction

Basic Search and Filters

The basic search (mandatory) and filters (optional) are triggered by clicking the Go button. The search results are shown in the result list.
If data was already entered in input field from which the user triggered the value help, this data is transferred to the basic search and the results are then filtered accordingly.
The basic search performs a search across all fields that are displayed in the filter area and the result list.

Selecting Items and Defining Conditions

Depending on your use case, the value help dialog can offer different selection options:

Select a single item
Define a single condition
Select multiple items
Define multiple conditions
Select multiple items and define multiple conditions

Users open the value help dialog by clicking the value help icon in the input field. The next steps depend on the use case and form factor (smartphone or desktop/tablet).

The different use cases are described in the sections below.

Select a Single Item (Smartphone)

Tapping the value help icon opens the dialog. As soon as an item is selected, the value help dialog closes automatically.

Single item selection on a smartphone

Select a Single Item (Desktop/Tablet)

Clicking the value help icon opens the value help dialog for single selection. The icon tab bar and the Selected Items and Conditions are hidden. As soon as an item is selected, the value help dialog closes automatically.

Single item selection on a desktop/tablet device

Define a Single Condition (Smartphone)

Tapping the value help icon opens the Define Condition tab. Users define a condition by choosing the relevant operator and entering the value or values in the corresponding input field(s).

In this example, we have defined a range.

Defining a single condition on a smartphone

Define a Single Condition (Desktop/Tablet)

Clicking the value help icon opens the Define Condition tab. Users define a condition by choosing the relevant operator and entering the value or values in the corresponding input field(s).

In this example, we have defined a range.

Defining a single condition (desktop/tablet)

Select Multiple Items and Define Multiple Conditions (Smartphone)

Tapping the value help icon displays the start dialog.

The Search and Select tab is used to select multiple items.
The Define Conditions tab is used to define multiple conditions.
The counters in the titles of both tabs represent the number of selected items/defined conditions.

All selected items and conditions are added as tokens to the Selected Items and Conditions (n) field at the bottom of the start dialog. The counter n indicates the combined number of items selected and conditions defined.

Start dialog

Selecting multiple items on a smartphone

Defining multiple conditions (smartphone)

Filters on a smartphone

Select Multiple Items and Define Multiple Conditions (Desktop/Tablet)

Clicking the value help icon displays the icon tab bar with the Search and Select and Define Conditions tabs.

The Search and Select tab is used to select multiple items
The Define Conditions tab is used to define multiple conditions.

All selected items and conditions are added as tokens to the Selected Items and Conditions (n) field at the bottom of the dialog. The counter n indicates the combined number of items selected and conditions defined.

Selecting multiple items and conditions on a desktop

Define Multiple Conditions (Smartphone)

Tapping the value help icon opens the start dialog with the Define Conditions tab.

The selected values are added as tokens to the Selected Conditions at the bottom of the start dialog.

Start dialog

Defining multiple conditions on a smartphone

Define Multiple Conditions (Desktop/Tablet)

Clicking the value help icon opens the Define Conditions tab.

The selected values are added as tokens to the Selected Conditions at the bottom of the start dialog.

Defining multiple conditions on a desktop

Copying and Pasting Multiple Values

The area for defining conditions allows the user to enter multiple values at once (copied from the clipboard).

Users can paste more than one value into the value input field. In this case, the condition row repeats with the previously selected condition and shows one value per row.

If there is no vertical space for the conditions, vertical scrolling is added to the top of the dialog.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Start dialog: [Object] (for example, Company)
Search and Select Dialog: Search and Select
Filters dialog: Show Filters
Define single condition: Define Condition
Define multiple conditions: Define Conditions

For tablet and desktop devices:

Selection of multiple items combined with selection of multiple conditions: [Object] (for example, Company)
Single item selection: Select: [Object] (for example, Select: Company)
Define single condition: Define Condition: [Object] (for example, Define Condition: Company)
Define multiple conditions: Define Conditions: [Object] (for example, Define Conditions: Company)

Filtering

If necessary, also provide value help for fields offered in the filters. However, do not provide the full value help dialog for the ID and description fields of the business object that is being selected. For these two fields, make sure that the value help icon opens only the Define Conditions screen.

For example, in a value help dialog for selecting the customer, do not offer full value help for the Customer ID and Customer Name fields. Instead, try to use the value help in combination with a helpful suggestion.

Constant Parameters

You can use constant parameters to pre-filter suggestion lists, dropdowns, and the value help results list. Users can’t change these parameters.

Do not show parameters with constant values as filterable fields in the filter bar of the value help dialog or in the result table columns. Constant values should not be visible to users in any way.

Intro

The value help dialog is a UI pattern that helps the user search and select single and multiple values. The user can also define conditions.

The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.

Clicking the value help icon opens the value help dialog

Usage

Use the value help dialog if:

The user is searching within a dataset that contains more than 1,000 items.
The user needs to use different attributes to find an object (such as city, company name, and so on).
The user needs to define conditions, such as ranges and exclusions.

Do not use the value help dialog if:

There is a simpler control that fits the use case. Always start with the least complex control. For example, use the select control if the user needs to select only one item from a short list.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Value help dialog - Sizes L and XL

Value help dialog - Size M

Value help dialog - Size S

Components

The value help dialog contains the following components:

Components of the Value Help Dialog

Header (1)

The header bar contains the dialog title. See the Guidelines section below.

Icon Tab Bar / List Control (Phone) (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem), Search and Select, and Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Search and Select and the Define Conditions tab.
Both controls have a counter in the title that indicates the number of items/conditions selected.

Search Template (3)

Basic Search (4)

The basic search finds all results that are somehow related to the input. For example, the search term “A” returns all the results containing the letter “A”.

Always offer the basic search in the value help dialog. Position the basic search to the right of the search template control. If there is no search template control, left-align the basic search.

Go Button (5)

The Go button triggers the search and filters the result list.

Result List (6)

The result list is populated on initial load by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly. Only the entered (or modified) value is transferred to the basic search. Type-ahead suggestions are ignored. The search is triggered automatically when the dialog opens.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the result list.

Selected Items and Conditions (7)

The selected items and conditions are displayed in a tokenizer (see Token for more information). Each selected item or condition is displayed as one token.

There is no longer a visual difference between included and excluded items and conditions. They are now differentiated using operators (see Using the Filters).

Footer Toolbar (8)

The footer bar offers the OK and Cancel buttons.

Filters (9)

Value help dialog - Filters

For the basic search with filters, the filter bar (sap.ui.comp.filterbar.FilterBar) is implemented in advanced mode. Advanced mode differs from the basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields are added automatically to the filter area.
There is a toggle button to show and hide the filters.
In each of the filter fields, users can use operators like “between” or “lower than” to define conditions.

Always hide the filter area in the value help dialog by default. Only show the filter area by default if the basic search can’t be provided.

Using the Filters

Users can enter operators (such as “=“) to define the conditions directly within the field without opening the Define Conditions tab.

Users must use the following notation to get results:

Operator	Input Notation	Example
between	value…value	000…100
equal to	=value	=0001
contains	value	1
starts with	value*	001*
ends with	*value	*5
less than	<value	<100
less than or equal to	<=value	<=200
greater than	>value	>0300
greater than or equal to	>=value	>=0500
not between	!(value…value)	!(000…100)
not equal to	!(=value)	!(=0)
does not contain	!(value)	!(1)
does not start with	!(value*)	!(001*)
does not end with	!(*value)	!(*5)
not less than	!(<value)	!(<100)
not less than or equal to	!(<=value)	!(<=200)
not greater than	!(>value)	!(>0300)
not greater than or equal to	!(>=value)	!(>=0500)
empty	<empty>	<empty>
not empty	!(<empty>)	!(<empty>)

Using an operator to filter the result list

Area for Defining Conditions (10)

In the Define Conditions tab, you can use the following operators to define single and multiple conditions:

between
equal to
contains
starts with
ends with
less than
less than or equal to
greater than
greater than or equal to
empty
not between
not equal to
does not contains
does not start with
does not end with
not less than
not less than or equal to
not greater than
not greater than or equal to
not empty

For convenience, the operators are grouped into two categories: Include and Exclude.

For Boolean attributes, where only two values are available, the operator drop-down in the condition panel is disabled. Users can pick one of the values from the combo box.

You can also use a combo box if the possible values for a condition are fixed. Users can then choose the value they need from the list.

Each condition is displayed as a token in the Selected Items and Conditions tokenizer.

Information

The operator dropdown list may not contain all the operators listed above. The type of field value determines which operators are available.

Developer Hint

For information on how to manage white space characters (blanks) when users copy and paste text into input controls, see Removing Leading and Trailing White Space.

'Define Conditions' - List of operators

Defining a condition for a Boolean attribute

Behavior and Interaction

Basic Search and Filters

The basic search (mandatory) and filters (optional) are triggered by clicking the Go button. The search results are shown in the result list.
If data was already entered in input field from which the user triggered the value help, this data is transferred to the basic search and the results are then filtered accordingly.
The basic search performs a search across all fields that are displayed in the filter area and the result list.

Selecting Items and Defining Conditions

Depending on your use case, the value help dialog can offer different selection options:

Select a single item
Define a single condition
Select multiple items
Define multiple conditions
Select multiple items and define multiple conditions

Users open the value help dialog by clicking the value help icon in the input field. The next steps depend on the use case and form factor (smartphone or desktop/tablet).

The different use cases are described in the sections below.

Select a Single Item (Smartphone)

Tapping the value help icon opens the dialog. As soon as an item is selected, the value help dialog closes automatically.

Single item selection on a smartphone

Select a Single Item (Desktop/Tablet)

Single item selection on a desktop/tablet device

Define a Single Condition (Smartphone)

Tapping the value help icon opens the Define Condition tab. Users define a condition by choosing the relevant operator and entering the value or values in the corresponding input field(s).

In this example, we have defined a range.

Defining a single condition on a smartphone

Define a Single Condition (Desktop/Tablet)

Clicking the value help icon opens the Define Condition tab. Users define a condition by choosing the relevant operator and entering the value or values in the corresponding input field(s).

In this example, we have defined a range.

Defining a single condition (desktop/tablet)

Select Multiple Items and Define Multiple Conditions (Smartphone)

Tapping the value help icon displays the start dialog.

The Search and Select tab is used to select multiple items.
The Define Conditions tab is used to define multiple conditions.
The counters in the titles of both tabs represent the number of selected items/defined conditions.

Start dialog

Selecting multiple items on a smartphone

Defining multiple conditions (smartphone)

Filters on a smartphone

Select Multiple Items and Define Multiple Conditions (Desktop/Tablet)

Clicking the value help icon displays the icon tab bar with the Search and Select and Define Conditions tabs.

The Search and Select tab is used to select multiple items
The Define Conditions tab is used to define multiple conditions.

Selecting multiple items and conditions on a desktop

Define Multiple Conditions (Smartphone)

Tapping the value help icon opens the start dialog with the Define Conditions tab.

The selected values are added as tokens to the Selected Conditions at the bottom of the start dialog.

Start dialog

Defining multiple conditions on a smartphone

Define Multiple Conditions (Desktop/Tablet)

Clicking the value help icon opens the Define Conditions tab.

The selected values are added as tokens to the Selected Conditions at the bottom of the start dialog.

Defining multiple conditions on a desktop

Copying and Pasting Multiple Values

The area for defining conditions allows the user to enter multiple values at once (copied from the clipboard).

Users can paste more than one value into the value input field. In this case, the condition row repeats with the previously selected condition and shows one value per row.

If there is no vertical space for the conditions, vertical scrolling is added to the top of the dialog.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Start dialog: [Object] (for example, Company)
Search and Select Dialog: Search and Select
Filters dialog: Show Filters
Define single condition: Define Condition
Define multiple conditions: Define Conditions

For tablet and desktop devices:

Selection of multiple items combined with selection of multiple conditions: [Object] (for example, Company)
Single item selection: Select: [Object] (for example, Select: Company)
Define single condition: Define Condition: [Object] (for example, Define Condition: Company)
Define multiple conditions: Define Conditions: [Object] (for example, Define Conditions: Company)

Filtering

Constant Parameters

You can use constant parameters to pre-filter suggestion lists, drop-downs, and the value help results list. Users can’t change these parameters.

Do not show parameters with constant values as filterable fields in the filter bar of the value help dialog or in the result table columns. Constant values should not be visible to users in any way.

Usage

Use the quick view if:

You want to display a concise overview of an object.
You want to display information about, for example, an employee or a company.
You can split your information into groups (for example, contact details and company information).

Do not use the quick view if:

You want to provide information in a way other than displaying it in groups.
You want to display complex information about an object.

Responsiveness

The quick view is based on the popover. It therefore inherits the same basic properties from it and provides the same responsiveness. For more information, see popover.

Layout

Generic Quick View

The figure on the right shows how the content is structured within the quick view. At the top of the content area, you can display an avatar next to the title and subtitle. Additionally, groups and fields are used to structure the information. When a field is empty, the “–” character shows.

You can use the fallbackIcon property to define a backup icon. This icon is displayed if the initial avatar can’t be loaded.

Example of a generic quick view

Quick View Examples

You can create your own quick view element or, as with the two examples below show, there are also basic structures for displaying employee and company information in a quick view.

Example: Employee quick view

Example: Company quick view

Behavior and Interaction

The quick view is based on the popover. It therefore inherits the same basic properties from it and provides the same interaction. For more information, see popover.

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

Popover (guidelines)

Implementation

Quick View (SAPUI5 samples)
Quick View (SAPUI5 API reference)

Message Box

The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.

Formulate messages in plain language (no code), describe the issue precisely, and suggest a constructive solution. Always help your user to recognize, diagnose, and recover from messages. Bear in mind that no message is always preferable to even a good message. When you design your apps, aim to prevent problems from occurring in the first place.

Developer Hint

You can create a message box using the sap.m.MessageBox control or by using the sap.m.Dialog control with the type Message.

Usage

Use the message box if:

You want to display non-field-related messages.
You want to interrupt the user while he or she performs an action.
You want to display error, warning, success, confirmation, or information messages.
You need to interrupt the user for some other reason.
You need the user to acknowledge the message.
You need the user to make a decision.

Do not use the message box if:

You want to display a short success message. (Use a toast instead. For more information, see Message Toast.)
You can show the message directly in a form field.

Responsiveness

The sap.m.MessageBox control has the same responsive behavior as the sap.m.Dialog control. The message box should only be opened in modal mode. Its basic width is 25 rem. For more information, see Dialog.

Types

The following categories of messages are available:

Error
Warning
Success
Information
Confirmation

Error Message

Error messages can be triggered after the user has entered incorrect data or a system error has occurred. They should interrupt the user by displaying a dialog. A final action such as Submit cannot be carried out until the user has rectified the error.

Control: sap.m.MessageBox
Icon: sap-icon://message-error
Title: Error
Stretch: False (no full screen on all devices)

Error message with one action

Error message with two actions

Text guidelines for an error message:

Do not just describe the problem; tell the user how to resolve it.
In the short text, speak the language of the end user. Do not include system or configuration details.
If the solution is more involved or technical, add a long text.
Do not repeat the short text in the long text. They both appear together on the screen.

Warning Message

Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios.

Control: sap.m.MessageBox
Icon: sap-icon://alert
Title: Warning
Stretch: False (no full screen on all devices)

Use cases for warnings

a) No decision required: Formulate the message as a statement.
Button(s): OK

Warning message with 'OK' button

b) Decision to continue required: Formulate the message as a statement.

Button(s): OK, Cancel

Warning message with 'OK' and 'Cancel' buttons

c) Specific decision required, with one action

Use a relevant action button. The message may also be formulated as a question.
Button(s): Leave Page, Cancel

Warning message with action and 'Cancel' buttons

Success Message

Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message.

Guidelines

You should generally use a message toast (sap.m.MessageToast) to display success messages.

Only use a message box for success messages in exceptional cases.
Example: A success message contains key information that users must be able to copy.

Control: sap.m.MessageBox
Icon: sap-icon://message-success
Title: Success
Stretch: False (no full screen on all devices)
Button(s): OK

Success message

Information Message

Information messages provide information the user needs to acknowledge, but which does not involve a decision. The message provides information that is useful and relevant, but never critical.

Control: sap.m.MessageBox
Icon: sap-icon://message-information
Title: Information
Stretch: False (no full screen on all devices)

Button(s): OK

Information message

Confirmation Message

Confirmation messages prompt users to confirm an action that they have triggered. The title of the message box already includes the action that has to be confirmed, such as an intended deletion or an approval.

Control: sap.m.MessageBox
Icon: sap-icon://question-mark
Title: (such as “Approve”, “Reject”, or “Delete”)
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message

Confirmation Message with “Note” Section

Developer Hint

The image belows shows a “Note” section which allows the user to add notes, for example in a “Reject” process. This feature is not provided by the sap.m.MessageBox. Instead, you can use a normal sap.m.Dialog and place those controls inside the confirmation message.

Confirmation messages prompt users to confirm an action that they have triggered. The title of the message box already includes the action that needs to be confirmed, such as an intended deletion or an approval.

Control: sap.m.Dialog
Type: Message
Icon: sap-icon://question-mark
Title: Such as “Approve” or “Reject”
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message with note

Confirmation for “Delete”

If the user clicks Delete, display a “Delete” dialog that confirms the delete action.

Control: sap.m.MessageBox
Icon: sap-icon://alert
Title: Delete
Stretch: False (no full screen on all devices)

Button(s): Delete, Cancel

Use cases for delete confirmation messages in object page and list reports

a) No context is available. For example, neither the ID nor the description of the business object are available at the time of deletion.
Body text: Delete this <object>?

Confirmation for 'Delete' action

b) The ID of the object is available.
Body text: Delete <object> <object ID>?

Confirmation for 'Delete' action with object ID

c) The object ID and description are both available at the time of deletion.
Body text: Delete <object> <object ID> “<object description>”?

Confirmation for 'Delete' action with object ID and description

Deleting several objects

If more than one object is being deleted, do not display the object ID and description.
Body text: Delete the <n = optional> selected <objects>?

Confirmation for 'Delete' action with several objects

Developer Hint

The default text in SAP Fiori elements will be slightly different, usually using the default term “object” to designate the item to be deleted. When using SAP Fiori elements, replace “object” with the correct business object name. For more information, see Introduction to SAP Fiori Elements – Adjustments.

Components

The message box contains the following sections and options:

Title: Title text appears in the message box header.

Content: This area contains the actual content of the message box.

Footer with actions: The footer can contain one or more buttons. We recommend limiting the number to two: A primary action and a negative path action.

Example of a message box structure

Show Details button

The message displayed for the user should provide sufficient information to ensure that the user knows what has happened. A message box without an explicit details section should be sufficient. Therefore, the Show Details link is only shown if detailed information is available that differs from the message text and is important for the user.

If details are available, the application has three options to display the text. Text can be displayed as:

Plain
Formatted
The original code format

Message details - Plain text

Message details - Formatted text

Message details with code excerpt

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

Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message Box (SAPUI5 samples)
Message Box (SAPUI5 API reference)

Select Dialog

The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.

A more enhanced dialog for single selection and multiselection is the value help dialog as it offers range selection and excluding functions.

Usage

Use the select dialog if:

Users need to select one or more entries from a comprehensive list that contains multiple attributes or values.

Do not use the select dialog if:

Users need to pick one item from a predefined set of options that contains one attribute or value only such as languages. In this case, consider using the combo box or select instead.
Your use case requires more enhanced functionalities such as a selection based on ranges. For the selection of values, consider using the value help dialog instead.
Your use case requires tabs, filters, or an Add New functionality in the select dialog. In this case, use a standard dialog instead.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The display of the select control depends on the device. On phones, the selection list takes up the whole screen. On desktop and tablet devices it appears as a popover.

Size S

Single select dialog in full screen on smartphone

Multi-select dialog in full screen on smartphone

Size M

Single select dialog on tablet

Multi-select dialog on tablet

Size L

Single select dialog on desktop

Multi-select dialog on desktop

Components

Dialog Header

You need to set the title of the dialog header (1). We recommend the following form:

Single selection

Select

Example: Select Product

Multi-selection

Select

Example: Select Products

Search

The first element in the dialog is a standard search field (2).

Info Toolbar

The info toolbar (3) is only available in multi-selection mode. It shows the number of selected items in the following form:

Selected :

Example: Selected Products: 2

Content

The content area (4) can be filled with any list content inherited from the list item base, such as standard list items, display list items, and feed list items. You can set the content to be displayed as grouped.

Button Toolbar

The button toolbar (5) contains two buttons: Select and Cancel. Select takes over the selection, while Cancel resets the selection to the state it was in when the dialog was opened.

Components of the select dialog. Left: single select, right: multi-select

Behavior and Interaction

The select dialog can be called from any control. The most common trigger is an input field with a selection icon, also known as a “value help field”, or F4. Alternative triggers are buttons or icons, which add items to an existing list.

Single Select

Once users select an entry, the select dialog is closed and the selected entry is taken over. If applicable, the entry is displayed in the field from which the dialog was triggered.

Multi-Select

In the multi-select version of the select dialog, checkboxes are provided for choosing multiple entries. The selection is taken over when the user chooses Select. Cancel closes the dialog without taking over the selected values. An infobar indicates the number of selected items.

Search

The user can search items.

Resize and Drag Dialog

You can make the select dialog resizable and draggable by setting the corresponding properties (also called resizable and draggable) to “true”.

A resizable dialog makes sense if the items inside have long names or descriptions.

A draggable dialog allows users to see the app content behind the dialog.

Guidelines

Both features are optional. However, even if you only need one, always set both of them to “true” to ensure consistency.

Guidelines

List Options

If you need to indicate that none of the selection options are selected, or you need to allow users to not select an option, offer an appropriate option, such as (Not Selected) or (No Values Selected). Show this option in parentheses and place it at the beginning of the list.

Single selection list with '(Not Selected)' option

Examples:

(Not Selected)

(Not Assigned)

(No Product Selected)

(None)

When using the select dialog for selecting filters: If you need to indicate that all items apply as filter options, provide All as an option and place it at the beginning of the list.

Filter list with 'All' option (no filters set)

Search Behavior

Two types of search behavior are available:

(1) A live search, also known as “search-as-you-type” (property: liveChange), which is triggered by each character that the user enters or deletes.

(2) A manual search, which is triggered explicitly after the user enters text in the search field and clicks the Search icon or presses the ENTER key.

Although app developers need to decide themselves which search to use, we recommend implementing the live search whenever possible. Use the manual search only if the amount of data is too large and your app would otherwise run into performance issues. For more information, check out the article on search.

Reset/Remember Selections

By default, the selection is reset when the dialog is closed. This allows users to make a new selection when they reopen the dialog and makes sense when users need to add multiple items to a table.

Selection is reset after the dialog is closed

However, if your use case requires selections in a dialog to be remembered so that the user can make corrections, you can set the rememberSelections function in the select dialog to “true”. When users exit the dialog by clicking Cancel, the selection is then restored to the state it was in when the dialog was opened.

Selection is remembered after the dialog is reopened

This also works in single-select dialogs. There, if users click the remembered item again, the dialog closes and they do not have to explicitly click Cancel.

Infobar

In multi-selection mode, an infobar shows the number of selected items. Use the following format:

Selected: [Number of selected items]
Example: Selected: 2

Note that the infobar is not “sticky”. When the user scrolls down the list, the infobar scrolls off the screen.

Infobar States

The infobar has two states – active and non-active (non-clickable). For more information see Infobar States.

Infobar - Active state

Infobar - Non-active state

“Clear” Button

The Clear button allows users to clear all the selected items. By default, the button is not shown. To display the button, set the showClearButton property to “true”.

Select dialog with 'Clear' button

Content

By default, the select dialog comes with a growing feature (property: growing = “true”). We recommend disabling the growing feature and setting this property to “false”. This ensures that all items in the table are loaded at once, and that the “Items selected” count, the search, and select/deselect features all work properly.

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

Combo Box (guidelines)
Select (guidelines)
Value Help (guidelines)
Search (guidelines)

Implementation

Select Dialog (SAPUI5 samples)
Select Dialog (SAPUI5 API reference)

Popover

The popover displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such as fields, tables, images, and charts. It can also include actions in the footer.

Note: The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering. Check first whether the quick view is appropriate for your use case.

Usage

Use a popover if:

You need to define your own structure.
You want to show UI elements that are not available with the quick view.

Do not use a popover if:

The quick view is more appropriate for your use case.
The objects are in the list in a list-detail layout (in this case, the details are shown in the details area).

Responsiveness

The popover can be used in the following ways:

Responsive and adaptive: sap.m.ResponsivePopover
Shows a dialog on smartphones (to be closed with an X) and a popover on a tablet or desktop.
Non-responsive: sap.m.Popover
Always shows a popover. Only use a non-responsive popover if it has very little content. On smartphones, the popover should not use more than a third of the phone’s real estate.

Layout

Structure of Popover

The header and footer are generally optional. The other elements are as follows:

Back (1) – optional
Needs to be implemented if the user can trigger further popovers. Always show popovers in place. Never place them on top of each other.

Title (2)
We recommend that you show an app-specific title for accessibility reasons. If you do not show a title, use the invisible text control (sap.ui.core.InvisibleText) to set a text for screen reader support.

Close function (3)
This feature closes the dialog. It is available for smartphones only and is set automatically (sap.m.ResponsivePopover).

Content (4)
Ensure that the content has a basic design and shows only the most important information. We recommend the following:

Use no more than two groups.
Limit the total number of fields to eight.
Use single-column tables.
Use micro charts.

Actions (5) – optional

Popover – General structure

Popover – Example

Placement Types

The placement type defines how the popover will be positioned on the screen in relation to its trigger. The default placement is “Right”: the popover appears to the right of the object it relates to.

If you set the placement type to “Auto”, the position of the popover in relation to the reference control is determined automatically, depending on the available space.

Popover with default placement type - Right

Developer Hint

More information on the different placement types can be found here.

Modal Mode

The popover in modal mode opens in a modal window, which blocks the whole screen and attracts the user’s attention.

Use the modal mode only if you want to prompt the user to make a decision or confirm an action. Ensure that the user can close the popover, either by offering an action button in the footer or a Close button in the header.

Popover – Modal

Behavior and Interaction

Opening a Popover

The user opens a popover by clicking an object represented by a text link or an icon. To improve accessibility, we recommend using texts, such as the name or ID of an object.

Closing a Popover

The popover is closed when the user clicks outside the popover or selects an action within the popover.

Guidelines

Show status information as text fields in a content group. You can use semantic text colors.
You can define a height for the popover. If the content exceeds the height, a scrollbar is displayed.

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

Quick View (guidelines)

Implementation

Popover (SAPUI5 samples)

Responsive Popover (SAPUI5 samples)

Dialog

The dialog control (sap.m.Dialog) interrupts the current app process to prompt the user for information or for a response. It forces a decision or a confirmation that needs to be signed off by the user.

Usage

Use the dialog if:

You want to display complex content (that is not a floorplan), but don’t want the user to navigate away from the current page.
You want to display an additional step or process that needs to be confirmed by a user action.
You want to enable the user to create an object with a small number of fields.

Do not use the dialog if:

You want to display a simple message. Use the message box instead.
You just want to confirm a successful action.
You do not want to interrupt the user.
You want to enable users to create an object with a large number of fields. Use an object page instead.
You want to display a floorplan. Floorplans are not meant to be displayed inside a dialog.

Responsiveness

The dialog provides different behavior on a smartphone than on a tablet or desktop. We distinguish between “cozy” and “compact” dialogs. For more information, see content density.

The buttons in the toolbar are aligned differently on the various devices. On a smartphone, they extend across the entire footer toolbar, but on a tablet or desktop device, they are right-aligned.

Size S (Smartphone)

Full Screen Dialog

We recommend displaying dialogs in S size in full screen mode to help users focus on the content of the dialog (property stretch = “true”). The toolbar containing the actions is positioned at the bottom of the dialog.

Position of the Action Buttons

On smartphones, a dialog can have one or two actions, which are located in the footer and right-aligned.

Full screen dialog - Size S

When to Open Full Screen or Modal

Always display message dialogs as modals. There is no need to display a simple message in a full screen dialog. If you want to display a simple message, use the message box instead.

If you use standard dialogs, such as value help, open them in full screen mode to help the user can focus on the content of the message. The dialog control offers a stretch property for full screen behavior.

Size M (Tablet)

By default, the dialog can have up to two action buttons in the footer. The action buttons in the toolbar are right-aligned. Use cozy mode on tablet devices.

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Size L (Desktop)

By default, the dialog can have one or two actions. The action buttons on a desktop device are right-aligned. Use compact mode to ensure that the padding and margins are optimized for desktop devices.

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Dialog in compact mode - Size L

Layout

Position on the Screen

The dialog is positioned in the center of the screen. It opens in a modal window to ensure that it attracts the user’s attention when it displays emergency states.

On a smartphone, the stretch property allows you to achieve full screen behavior.

Behavior and Interaction

Navigation in a Dialog

You can let users navigate to another page within the dialog. On the second page, an arrow at the top of the dialog allows users to navigate back to the first page.

Navigation pattern list - Size L

Navigation pattern details - Size L

Resizable

You can let users change the size of the dialog (property resizable = “true). The resizable indicator then shows in the bottom-right corner of the dialog.

Resizable indicator in the bottom right-hand corner - Size L

Draggable

By clicking and holding on the heading, users can drag the dialog to another position (property draggable = “true”).

Dialog can be moved by dragging the title - Size L

Messaging Within a Dialog

If your dialog contains a scrollable form, use a message popover to help visualize any issues that are hidden when scrolling.

Warning

Don’t use a message popover in small dialogs where the popover might obscure form fields that are in focus.

DIalog with message popover

Editing and Saving Content

If a dialog is used for editing, keep it simple. If you need more a large number of editable fields, consider other solutions instead, such as navigation to a details page.

The data in the dialog is only saved when the user clicks Create or Save. Use form field validation within the dialog to make users aware of any errors.

The data in the dialog is lost if the page is refreshed during the editing process (also in the draft scenario), or if the user chooses Cancel.

Highlighted form fields in a dialog - Size S

Types

Standard Dialog

Use the standard dialog unless you need one of the specialized dialogs below. The standard dialog has a header with a grey background, and no icon.

Other Types of Dialogs

Personalization dialog
Select dialog
Table select dialog
Value help dialog
View settings dialog
Busy dialog

Message Box

The message box is a special type of dialog that is used to display messages quickly. For each type of message, you can decide when to use a dialog. Use the message toast (sap.m.MessageToast) for success messages. For more information, see Message Box.

Components

The dialog contains the following sections and options:

Title: The title text appears in the dialog header. By default, the title is left aligned.

Subheader (optional): Subheaders appear below the main header. Since the subheader is not part of the content area, it is not scrollable.

Content: This area contains the actual content of the dialog.

Footer with actions: The footer can contain up to two buttons (optional). If no buttons are defined, the default Close button is shown.

Example of a dialog structure (Cozy)

Emphasized Buttons in a Dialog

Always use an emphasized button for the the standard action. Emphasizing the main action in the dialog toolbar helps users to focus on the most likely choice. This saves users time and gives new users a sense of orientation.

Never use an emphasized button for Cancel.

Emphasized button in the dialog footer

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

Toolbar (guidelines)

Implementation

Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Message Box (SAPUI5 samples)
Toolbar (SAPUI5 API reference)
Dialog (SAPUI5 API reference)

Message Box

Developer Hint

You can create a message box using the sap.m.MessageBox control or by using the sap.m.Dialog control with the type Message.

Usage

Use the message box if:

You want to display non-field-related messages.
You want to interrupt the user while he or she performs an action.
You want to display error, warning, success, confirmation, or information messages.
You need to interrupt the user for some other reason.
You need the user to acknowledge the message.
You need the user to make a decision.

Do not use the message box if:

You want to display a short success message. (Use a toast instead. For more information, see message toast.)
You can show the message directly in a form field.

Responsiveness

The sap.m.MessageBox control has the same responsive behavior as the sap.m.Dialog control. The message box should only be opened in modal mode. Its basic width is 25 em. For more information, see dialog.

Types

The following categories of messages are available:

Error
Warning
Success
Information
Confirmation

Error Message

Control: sap.m.MessageBox
Icon: sap-icon://message-error
Title: Error
Stretch: False (no full screen on all devices)

Error message with one action

Error message with two actions

Text guidelines for an error message:

Do not just describe the problem; tell the user how to resolve it.
In the short text, speak the language of the end user. Do not include system or configuration details.
If the solution is more involved or technical, add a long text.
Do not repeat the short text in the long text. They both appear together on the screen.

Warning Message

Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios.

Control: sap.m.MessageBox
Icon: sap-icon://alert
Title: Warning
Stretch: False (no full screen on all devices)

Use cases for warnings

a) No decision required: Formulate the message as a statement.
Button(s): OK

Warning message with 'OK' button

b) Decision to continue required: Formulate the message as a statement.

Button(s): OK, Cancel

Warning message with 'OK' and 'Cancel' buttons

c) Specific decision required, with one action

Use a relevant action button. The message may also be formulated as a question.
Button(s): Leave Page, Cancel

Warning message with action and 'Cancel' buttons

Success Message

Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message.

Guidelines

You should generally use a message toast (sap.m.MessageToast) to display success messages.

Only use a message box for success messages in exceptional cases.
Example: A success message contains key information that users must be able to copy.

Control: sap.m.MessageBox
Icon: sap-icon://message-success
Title: Success
Stretch: False (no full screen on all devices)
Button(s): OK

Success message

Information Message

Information messages provide information the user needs to acknowledge, but which does not involve a decision. The message provides information that is useful and relevant, but never critical.

Control: sap.m.MessageBox
Icon: sap-icon://message-information
Title: Information
Stretch: False (no full screen on all devices)

Button(s): OK

Information message

Confirmation Message

Control: sap.m.MessageBox
Icon: sap-icon://question-mark
Title: (such as “Approve”, “Reject”, or “Delete”)
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message

Confirmation Message with “Note” Section

Developer Hint

Control: sap.m.Dialog
Type: Message
Icon: sap-icon://question-mark
Title: Such as “Approve” or “Reject”
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message with note

Confirmation for “Delete”

If the user clicks Delete, display a “Delete” dialog that confirms the delete action.

Control: sap.m.MessageBox
Icon: sap-icon://alert
Title: Delete
Stretch: False (no full screen on all devices)

Button(s): Delete, Cancel

Use cases for delete confirmation messages in object page and list reports

a) No context is available. For example, neither the ID nor the description of the business object are available at the time of deletion.
Body text: Delete this <object>?

Confirmation for 'Delete' action

b) The ID of the object is available.
Body text: Delete <object> <object ID>?

Confirmation for 'Delete' action with object ID

c) The object ID and description are both available at the time of deletion.
Body text: Delete <object> <object ID> “<object description>”?

Confirmation for 'Delete' action with object ID and description

Deleting several objects

If more than one object is being deleted, do not display the object ID and description.
Body text: Delete the <n = optional> selected <objects>?

Confirmation for 'Delete' action with several objects

Developer Hint

Components

The message box contains the following sections and options:

Title: Title text appears in the message box header.

Content: This area contains the actual content of the message box.

Footer with actions: The footer can contain one or more buttons. We recommend limiting the number to two: A primary action and a negative path action.

Example of a message box structure

Show Details button

If details are available, the application has three options to display the text. Text can be displayed as:

Plain
Formatted
The original code format

Message details - Plain text

Message details - Formatted text

Message details with code excerpt

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

Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message Box (SAPUI5 samples)
Message Box (SAPUI5 API reference)

Message Box

Usage

Use the message box if:

You want to display non-field-related messages.
You want to interrupt the user while he or she performs an action.
You want to display error, warning, success, confirmation, or information messages.
You need to interrupt the user for some other reason.
You need the user to acknowledge the message.
You need the user to make a decision.

Do not use the message box if:

You want to display a short success message. (Use a toast instead. For more information, see message toast.)
You can show the message directly in a form field.

Responsiveness

Types

The following categories of messages are available:

Error
Warning
Success
Information
Confirmation

Error Message

Control: sap.m.MessageBox
Icon: sap-icon://message-error
Title: Error
Stretch: False (no full screen on all devices)

Error message with one action

Error message with two actions

Text guidelines for an error message:

Do not just describe the problem; tell the user how to resolve it.
In the short text, speak the language of the end user. Do not include system or configuration details.
If the solution is more involved or technical, add a long text.
Do not repeat the short text in the long text. They both appear together on the screen.

Warning Message

Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios.

Control: sap.m.MessageBox
Icon: sap-icon://alert
Title: Warning
Stretch: False (no full screen on all devices)

Use cases for warnings

a) No decision required: Formulate the message as a statement.
Button(s): OK

Warning message with 'OK' button

b) Decision to continue required: Formulate the message as a statement.

Button(s): OK, Cancel

Warning message with 'OK' and 'Cancel' buttons

c) Specific decision required, with one action

Use a relevant action button. The message may also be formulated as a question.
Button(s): Leave Page, Cancel

Warning message with action and 'Cancel' buttons

Success Message

Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message.

Guidelines

You should generally use a message toast (sap.m.MessageToast) to display success messages.

Only use a message box for success messages in exceptional cases.
Example: A success message contains key information that users must be able to copy.

Control: sap.m.MessageBox
Icon: sap-icon://message-success
Title: Success
Stretch: False (no full screen on all devices)
Button(s): OK

Success message

Information Message

Information messages provide information the user needs to acknowledge, but which does not involve a decision. The message provides information that is useful and relevant, but never critical.

Control: sap.m.MessageBox
Icon: sap-icon://message-information
Title: Information
Stretch: False (no full screen on all devices)

Button(s): OK

Information message

Confirmation Message

Control: sap.m.MessageBox
Icon: sap-icon://question-mark
Title: (such as “Approve”, “Reject”, or “Delete”)
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message

Confirmation Message with “Note” Section

Warning

Control: sap.m.Dialog
Type: Message
Icon: sap-icon://question-mark
Title: Such as “Approve” or “Reject”
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message with note

Confirmation for “Delete”

If the user clicks Delete, display a “Delete” dialog that confirms the delete action.

Control: sap.m.MessageBox
Icon: sap-icon://alert
Title: Delete
Stretch: False (no full screen on all devices)

Button(s): Delete, Cancel

Use cases for delete confirmation messages in object page and list reports

a) No context is available. For example, neither the ID nor the description of the business object are available at the time of deletion.
Body text: Delete this <object>?

Confirmation for 'Delete' action

b) The ID of the object is available.
Body text: Delete <object> <object ID>?

Confirmation for 'Delete' action with object ID

c) The object ID and description are both available at the time of deletion.
Body text: Delete <object> <object ID> “<object description>”?

Confirmation for 'Delete' action with object ID and description

Deleting several objects

If more than one object is being deleted, do not display the object ID and description.
Body text: Delete the <n = optional> selected <objects>?

Confirmation for 'Delete' action with several objects

Developer Hint

Components

The message box contains the following sections and options:

Title: Title text appears in the message box header.

Content: This area contains the actual content of the message box.

Footer with actions: Although the message box allows more than two buttons, we recommend limiting the number to two. Available button types are primary and negative path actions. If you require other button types, use sap.m.Dialog instead. If no buttons are defined, the default Close button is shown.

Example of a message box structure

Show Details button

If details are available, the application has three options to display the text. Text can be displayed as:

Plain
Formatted
The original code format

Message details - Plain text

Message details - Formatted text

Message details with code excerpt

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

Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message Box (SAPUI5 samples)
Message Box (SAPUI5 API reference)

Message Popover

The message popover control can display multiple messages of different types in one list. For example, it might show several messages related to entries in a form, or messages triggered by a finalizing action, such as Save.

The message popover is used in conjunction with a technical message manager, which populates the message list. If an error occurs at a validation point, the corresponding message is added to message popover automatically, without interrupting the user.

Users can browse messages by type and navigate to the message details. In some cases, they can also jump directly from the message to the affected field on the UI.

Message popover

When to Use

Use the message popover if:

You want to display multiple messages to the user.
You do not want to interrupt users while they are performing an action.
Form fields are hidden when scrolling and issues may not be visible otherwise.

Do not use the message popover if:

You need to interrupt the user. In this case, use a message box.
(Typically, interrupting the user is only necessary for technical problems, such as network errors and connection issues.)
You are using a small dialog. Showing a message popover would obscure important information, such as form fields that are in focus. In this case, rely on highlighting and inline messages to show issues with content fields. For more information, see Input Field.

Components

(1) Filter bar
(2) Short description
(3) Subtitle
(4) Section/subsection on the UI
(5) Message button
(6) Navigation to message details
(7) Counter for aggregated messages

Components of the message popover

Filter Bar

Initially, the filter bar shows all the different message types in the list (1).

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success, and information).

List

Short Description (2)

A simple and helpful short message text. It’s the same message as the one attached to the UI control where the issue occurred.

Subtitle (3)

You can use the subtitle to give your message an identifier. If the message relates to a specific field, show the label of the field where the error occurred. Based on the subtitle, the user should be able to identify the corresponding UI control on the UI (for example, the input field in a form).

When issues are in a table, the subtitle area can contain the identifiers of the row and column containing the issue (see Messaging for Tables).

Section/Subsection (4)

Messages in the list are grouped by the section and subsection on the UI. This helps the user to find the part of the UI that triggered the message.

Usually, the grouping reflects the hierarchy of the page. However, some messages relate to issues that do not belong to a particular field on a page, but result from an action. In this case, the group title is as follows:

Last Action: <Action Label> (Example: Last Action: Save)
Last Action (fallback solution)

When issues are in a table, the group header can contain the table name, along with title of the page section (see Messaging for Tables).

'Last Action' group in the message list

Navigation to Message Details (6)

If message details are provided, the message popover automatically provides a chevron on the right-hand side for navigating to the message details page.

If the popover contains only one message that also has message details, the message details page is displayed by default (see Behavior and Interaction).

Aggregated Messages (7)

If you want to aggregate messages, you can use the counter property of each list item.

The message popover only provides the counter property. The aggregation itself must be implemented by the app team.
When 2 or more messages are aggregated, the message short text cannot be a link because there would be multiple targets.

Message Button

If there are messages to display, the message button indicates the most critical message status in the list (5).

For example, if the list contains error messages, the message button inherits the error icon and semantic color. If the most critical message in the list is a warning, the message button shows the warning icon and corresponding semantic color, and so on.

In addition, the button contains a count indicating the number of messages of the most critical type.

Message button types - Error, warning, success, information

If there are no messages to display, there is no message button. In this case, the footer toolbar contains only the “normal” actions for the task.

Message Details

The message details page shows:

The message short text (1).
A more detailed message text to explain the issue and propose a solution (2).
An optional link to more information, such as app documentation (3).

Details page of the message popover

Messaging for Tables

The message popover includes information for locating issues in tables.

The group header contains the section name and table name (1). If the issue appears in a specific view, the group header also contains the view name.
The subtitle shows the identifiers of the row and column containing the issue (2).
- If the row or column is currently hidden (for example, by table personalization), a “Hidden” text is shown.
- If the field doesn’t show in the table itself but is part of a sub-object, only the row identifier is displayed (3).

Message popover displaying messages for a table

Behavior and Interaction

When Does the Message Popover Open?

Form Field Validation

If one or more errors occur when the user fills out a form, the message button appears, indicating the message type of the most critical message. The message popover does not open automatically. For more information on the different validation points, see Form Field Validation.

Form field validation behavior

Finalizing Actions

If the user activates a finalizing action (such as Create, Save, or Submit), the message popover opens automatically to inform the user about the errors on the UI that need to be resolved first.

Message popover triggered by a finalizing 'Save' action

If the popover contains only one message that also has message details, the message details page is displayed by default.

Message popover detailed view triggered by a finalizing 'Save' action

Navigation to Message Details

If the message provides a long text from the back-end system, the user can navigate to the message details. There, the user will typically find more information and help.

Navigation to message details

Navigation to the Relevant Field

In-Page Navigation

The navigation link takes users directly to the field on the UI that triggered the message. This can be a field in the visible area, a field somewhere else on the same page, or a field on another tab or screen.

Guidelines

Always add a navigation link, where possible.

Developer Hint

Set the navigation link with the activeTitlePress event. This allows users to click the message text in both the first and second page of the message popover.

Navigation from the message text to a field on the UI

Navigation to a Sub-Object or an External Page

Some errors are not visible on the page where the message popover is. They can be located on a sub-object page (an item of a table, for instance), or have a dependency in an external application.

If that’s the case, the navigation link leads to the target page with focus on the affected field.

If possible, provide a breadcrumb navigation on the target page. Also make sure that the back button of the shell bar leads back to the page where the message popover was.

Navigtion from the message text to a sub-object page

Responsiveness

Size S (Smartphone)

On smartphones, the message popover is automatically shown in full screen mode.

Full screen message popover on a smartphone

Top Tips

Whenever possible, provide a navigation link from the message to the relevant field on the UI.
Use the message subtitle to indicate the field label.
In forms, also highlight the individual fields, and change their value state according to the type of message. For more information, see Form Field Validation.

Usage

Use the dialog if:

You want to display complex content (that is not a floorplan), but don’t want the user to navigate away from the current page.
You want to display an additional step or process that needs to be confirmed by a user action.
You want to enable the user to create an object with a small number of fields (up to 8 fields).

Do not use the dialog if:

You want to display a simple message. Use the message box instead.
You just want to confirm a successful action.
You do not want to interrupt the user.
You want to enable users to create an object with more than 8 fields. Use an object page instead.
You want to display a floorplan. Floorplans are not meant to be displayed inside a dialog.

Responsiveness

The dialog provides different behavior on a smartphone than on a tablet or desktop. We distinguish between “cozy” and “compact” dialogs. For more information, see content density.

The buttons in the toolbar are aligned differently on the various devices. On a smartphone, they extend across the entire footer toolbar, but on a tablet or desktop device, they are right-aligned.

Size S (Smartphone)

Full Screen Dialog

Position of the Action Buttons

On smartphones, a dialog can have one or two actions, which are located in the footer and right-aligned.

Full screen dialog - Size S

When to Open Full Screen or Modal

Always display message dialogs as modals. There is no need to display a simple message in a full screen dialog. If you want to display a simple message, use the message box instead.

Size M (Tablet)

By default, the dialog can have up to two action buttons in the footer. The action buttons in the toolbar are right-aligned. Use cozy mode on tablet devices.

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Size L (Desktop)

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Dialog in compact mode - Size L

Layout

Position on the Screen

The dialog is positioned in the center of the screen. It opens in a modal window to ensure that it attracts the user’s attention when it displays emergency states.

On a smartphone, the stretch property allows you to achieve full screen behavior.

Behavior and Interaction

Navigation in a Dialog

You can let users navigate to another page within the dialog. On the second page, an arrow at the top of the dialog allows users to navigate back to the first page.

Navigation pattern list - Size L

Navigation pattern details - Size L

Resizable

You can let users change the size of the dialog (property resizable = “true). The resizable indicator then shows in the bottom-right corner of the dialog.

Resizable indicator in the bottom right-hand corner - Size L

Draggable

By clicking and holding on the heading, users can drag the dialog to another position (property draggable = “true”).

Dialog can be moved by dragging the title - Size L

Messaging Within a Dialog

If your dialog contains a scrollable form, use a message popover to help visualize any issues that are hidden when scrolling.

Warning

Don’t use a message popover in small dialogs where the popover might obscure form fields that are in focus.

DIalog with message popover

Editing and Saving Content

If a dialog is used for editing, keep it simple. If you need more than 8 editable fields, consider other solutions instead, such as navigation to a details page.

The data in the dialog is only saved when the user clicks Create or Save. Use form field validation within the dialog to make users aware of any errors.

The data in the dialog is lost if the page is refreshed during the editing process (also in the draft scenario), or if the user chooses Cancel.

Highlighted form fields in a dialog - Size S

Types

Standard Dialog

Use the standard dialog unless you need one of the specialized dialogs below. The standard dialog has a header with a grey background, and no icon.

Other Types of Dialogs

Personalization dialog
Select dialog
Table select dialog
Value help dialog
View settings dialog
Busy dialog

Message Box

Components

The dialog contains the following sections and options:

Title: The title text appears in the dialog header. By default, the title is left aligned.

Subheader (optional): Subheaders appear below the main header. Since the subheader is not part of the content area, it is not scrollable.

Content: This area contains the actual content of the dialog.

Footer with actions: The footer can contain up to two buttons (optional). If no buttons are defined, the default Close button is shown.

Example of a dialog structure (Cozy)

Emphasized Buttons in a Dialog

Never use an emphasized button for Cancel.

Emphasized button in the dialog footer

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

Toolbar (guidelines)

Implementation

Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Message Box (SAPUI5 samples)
Toolbar (SAPUI5 API reference)
Dialog (SAPUI5 API reference)

Message Popover

Users can browse messages by type and navigate to the message details. In some cases, they can also jump directly from the message to the affected field on the UI.

Message popover

When to Use

Use the message popover if:

You want to display multiple messages to the user.
You do not want to interrupt users while they are performing an action.

Do not use the message popover if:

You need to interrupt the user. In this case, use a message box.
(Typically, interrupting the user is only necessary for technical problems, such as network errors and connection issues.)

Components

(1) Filter bar
(2) Short description
(3) Subtitle
(4) Section/subsection on the UI
(5) Message button
(6) Navigation to message details
(7) Counter for aggregated messages

Components of the message popover

Filter Bar

Initially, the filter bar shows all the different message types in the list (1).

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success, and information).

List

Short Description (2)

A simple and helpful short message text. It’s the same message as the one attached to the UI control where the issue occurred.

Subtitle (3)

When issues are in a table, the subtitle area can contain the identifiers of the row and column containing the issue (see Messaging for Tables).

Section/Subsection (4)

Messages in the list are grouped by the section and subsection on the UI. This helps the user to find the part of the UI that triggered the message.

Last Action: <Action Label> (Example: Last Action: Save)
Last Action (fallback solution)

When issues are in a table, the group header can contain the table name, along with title of the page section (see Messaging for Tables).

'Last Action' group in the message list

Navigation to Message Details (6)

If message details are provided, the message popover automatically provides a chevron on the right-hand side for navigating to the message details page.

If the popover contains only one message that also has message details, the message details page is displayed by default (see Behavior and Interaction).

Aggregated Messages (7)

If you want to aggregate messages, you can use the counter property of each list item.

The message popover only provides the counter property. The aggregation itself must be implemented by the app team.
When 2 or more messages are aggregated, the message short text cannot be a link because there would be multiple targets.

Message Button

If there are messages to display, the message button indicates the most critical message status in the list (5).

In addition, the button contains a count indicating the number of messages of the most critical type.

Message button types - Error, warning, success, information

If there are no messages to display, there is no message button. In this case, the footer toolbar contains only the “normal” actions for the task.

Message Details

The message details page shows:

The message short text (1).
A more detailed message text to explain the issue and propose a solution (2).
An optional link to more information, such as app documentation (3).

Details page of the message popover

Messaging for Tables

The message popover includes information for locating issues in tables.

The group header contains the section name and table name (1). If the issue appears in a specific view, the group header also contains the view name.
The subtitle shows the identifiers of the row and column containing the issue (2).
- If the row or column is currently hidden (for example, by table personalization), a “Hidden” text is shown.
- If the field doesn’t show in the table itself but is part of a sub-object, only the row identifier is displayed (3).

Message popover displaying messages for a table

Behavior and Interaction

When Does the Message Popover Open?

Form Field Validation

Form field validation behavior

Finalizing Actions

Message popover triggered by a finalizing 'Save' action

If the popover contains only one message that also has message details, the message details page is displayed by default.

Message popover detailed view triggered by a finalizing 'Save' action

Navigation to Message Details

If the message provides a long text from the back-end system, the user can navigate to the message details. There, the user will typically find more information and help.

Navigation to message details

Navigation to the Relevant Field

In-Page Navigation

Guidelines

Always add a navigation link, where possible.

Developer Hint

Set the navigation link with the activeTitlePress event. This allows users to click the message text in both the first and second page of the message popover.

Navigation from the message text to a field on the UI

Navigation to a Sub-Object or an External Page

Some errors are not visible on the page where the message popover is. They can be located on a sub-object page (an item of a table, for instance), or have a dependency in an external application.

If that’s the case, the navigation link leads to the target page with focus on the affected field.

If possible, provide a breadcrumb navigation on the target page. Also make sure that the back button of the shell bar leads back to the page where the message popover was.

Navigtion from the message text to a sub-object page

Responsiveness

Size S (Smartphone)

On smartphones, the message popover is automatically shown in full screen mode.

Full screen message popover on a smartphone

Top Tips

Whenever possible, provide a navigation link from the message to the relevant field on the UI.
Use the message subtitle to indicate the field label.
In forms, also highlight the individual fields, and change their value state according to the type of message. For more information, see Form Field Validation.

When to Use

Use the message popover if:

You want to display multiple messages to the user.
You do not want to interrupt users while they are performing an action.

Do not use the message popover if:

You need to interrupt the user. In this case, use a message box.
(Typically, interrupting the user is only necessary for technical problems, such as network errors and connection issues.)

Components

(1) Filter bar
(2) Short description
(3) Subtitle
(4) Section/subsection on the UI
(5) Message button
(6) Navigation to message details
(7) Counter for aggregated messages

Components of the message popover

Filter Bar

Initially, the filter bar shows all the different message types in the list (1).

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success, and information).

List

Short Description (2)

A simple and helpful short message text. It’s the same message as the one attached to the UI control where the issue occurred.

Subtitle (3)

Section/Subsection (4)

Messages in the list are grouped by the section and subsection on the UI. This helps the user to find the part of the UI that triggered the message.

Last Action: <Action Label> (Example: Last Action: Save)
Last Action (fallback solution)

'Last Action' group in the message list

Navigation to Message Details (6)

If message details are provided, the message popover automatically provides a chevron on the right-hand side for navigating to the message details page.

If the popover contains only one message that also has message details, the message details page is displayed by default (see Behavior and Interaction).

Aggregated Messages (7)

If you want to aggregate messages, you can use the counter property of each list item.

The message popover only provides the counter property. The aggregation itself must be implemented by the app team.
When 2 or more messages are aggregated, the message short text cannot be a link because there would be multiple targets.

Message Button

If there are messages to display, the message button indicates the most critical message status in the list (5).

In addition, the error button contains a count indicating the number of errors.

Message button types - Error with counter, warning, success, information

If there are no messages to display, there is no message button. In this case, the footer toolbar contains only the “normal” actions for the task.

Message Details

The message details page shows:

The message short text (1).
A more detailed message text to explain the issue and propose a solution (2).
An optional link to more information, such as app documentation (3).

Details page of the message popover

Behavior and Interaction

When Does the Message Popover Open?

Form Field Validation

Form field validation behavior

Finalizing Actions

Message popover triggered by a finalizing 'Save' action

If the popover contains only one message that also has message details, the message details page is displayed by default.

Message popover detailed view triggered by a finalizing 'Save' action

Navigation to Message Details

If the message provides a long text from the back-end system, the user can navigate to the message details. There, the user will typically find more information and help.

Navigation to message details

Navigation to the Relevant Field

In-Page Navigation

Guidelines

Always add a navigation link, where possible.

Developer Hint

Set the navigation link with the activeTitlePress event. This allows users to click the message text in both the first and second page of the message popover.

Navigation from the message text to a field on the UI

Navigation to a Sub-Object or an External Page

Some errors are not visible on the page where the message popover is. They can be located on a sub-object page (an item of a table, for instance), or have a dependency in an external application.

If that’s the case, the navigation link leads to the target page with focus on the affected field.

If possible, provide a breadcrumb navigation on the target page. Also make sure that the back button of the shell bar leads back to the page where the message popover was.

Navigtion from the message text to a sub-object page

Responsiveness

Size S (Smartphone)

On smartphones, the message popover is automatically shown in full screen mode.

Full screen message popover on a smartphone

Top Tips

Whenever possible, provide a navigation link from the message to the relevant field on the UI.
Use the message subtitle to indicate the field label.
In forms, also highlight the individual fields, and change their value state according to the type of message. For more information, see Form Field Validation.

When to Use

Use the message popover if:

You want to display multiple messages to the user.
You do not want to interrupt users while they are performing an action.

Do not use the message popover if:

You need to interrupt the user. In this case, use a message box.
(Typically, interrupting the user is only necessary for technical problems, such as network errors and connection issues.)

Components

(1) Filter bar
(2) Short description
(3) Subtitle
(4) Section/subsection on the UI
(5) Message button
(6) Navigation to message details
(7) Counter for aggregated messages

Components of the message popover

Filter Bar

Initially, the filter bar shows all the different message types in the list (1).

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success, and information).

List

Short Description (2)

A simple and helpful short message text. It’s the same message as the one attached to the UI control where the issue occurred.

Subtitle (3)

Section/Subsection (4)

Messages in the list are grouped by the section and subsection on the UI. This helps the user to find the part of the UI that triggered the message.

Last Action: <Action Label> (Example: Last Action: Save)
Last Action (fallback solution)

'Last Action' group in the message list

Navigation to Message Details (6)

If message details are provided, the message popover automatically provides a chevron on the right-hand side for navigating to the message details page.

If the popover contains only one message that also has message details, the message details page is displayed by default (see Behavior and Interaction).

Aggregated Messages (7)

If you want to aggregate messages, you can use the counter property of each list item.

The message popover only provides the counter property. The aggregation itself must be implemented by the app team.
When 2 or more messages are aggregated, the message short text cannot be a link because there would be multiple targets.

Message Button

If there are messages to display, the message button indicates the most critical message status in the list (5).

In addition, the error button contains a count indicating the number of errors.

Message button types - Error with counter, warning, success, information

If there are no messages to display, there is no message button. In this case, the footer toolbar contains only the “normal” actions for the task.

Message Details

The message details page shows:

The message short text (1).
A more detailed message text to explain the issue and propose a solution (2).
An optional link to more information, such as app documentation (3).

Details page of the message popover

Behavior and Interaction

When Does the Message Popover Open?

Form Field Validation

Form field validation behavior

Finalizing Actions

Message popover triggered by a finalizing 'Save' action

If the popover contains only one message that also has message details, the message details page is displayed by default.

Message popover detailed view triggered by a finalizing 'Save' action

Navigation to Message Details

If the message provides a long text from the back-end system, the user can navigate to the message details. There, the user will typically find more information and help.

Navigation to message details

Navigation to the Relevant Field

Guidelines

Always add a navigation link, where possible.

For more information about the navigation, see Navigating to the Corresponding Field on the UI in the Message Handling article.

Developer Hint

Set the navigation link with the activeTitlePress event. This allows users to click the message text in both the first and second page of the message popover.

Navigation from the message text to a field on the UI

Responsiveness

Size S (Smartphone)

On smartphones, the message popover is automatically shown in full screen mode.

Full screen message popover on a smartphone

Top Tips

Whenever possible, provide a navigation link from the message to the relevant field on the UI.
Use the message subtitle to indicate the field label.
In forms, also highlight the individual fields, and change their value state according to the type of message. For more information, see Form Field Validation.

Usage

Use the message box if:

You want to display non-field-related messages.
You want to interrupt the user while he or she performs an action.
You want to display error, warning, success, confirmation, or information messages.
You need to interrupt the user for some other reason.
You need the user to acknowledge the message.
You need the user to make a decision.

Do not use the message box if:

You want to display a short success message. (Use a toast instead. For more information, see message toast.)
You can show the message directly in a form field.

Responsiveness

Types

The following categories of messages are available:

Error
Warning
Success
Information
Confirmation

Error Message

Control: sap.m.MessageBox
Icon: sap-icon://message-error
Title: Error
Stretch: False (no full screen on all devices)

Error message with one action

Error message with two actions

Text guidelines for an error message:

Do not just describe the problem; tell the user how to resolve it.
In the short text, speak the language of the end user. Do not include system or configuration details.
If the solution is more involved or technical, add a long text.
Do not repeat the short text in the long text. They both appear together on the screen.

Warning Message

Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios.

Control: sap.m.MessageBox
Icon: sap-icon://alert
Title: Warning
Stretch: False (no full screen on all devices)

Use cases for warnings

a) No decision required: Formulate the message as a statement.
Button(s): OK

Warning message with 'OK' button

b) Decision to continue required: Formulate the message as a statement.

Button(s): OK, Cancel

Warning message with 'OK' and 'Cancel' buttons

c) Specific decision required, with one action

Use a relevant action button. The message may also be formulated as a question.
Button(s): Leave Page, Cancel

Warning message with action and 'Cancel' buttons

Success Message

Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message.

Guidelines

You should generally use a message toast (sap.m.MessageToast) to display success messages.

Only use a message box for success messages in exceptional cases.
Example: A success message contains key information that users must be able to copy.

Control: sap.m.MessageBox
Icon: sap-icon://message-success
Title: Success
Stretch: False (no full screen on all devices)
Button(s): OK

Success message

Information Message

Information messages provide information the user needs to acknowledge, but which does not involve a decision. The message provides information that is useful and relevant, but never critical.

Control: sap.m.MessageBox
Icon: sap-icon://message-information
Title: Information
Stretch: False (no full screen on all devices)

Button(s): OK

Information message

Confirmation Message

Control: sap.m.MessageBox
Icon: sap-icon://question-mark
Title: (such as “Approve”, “Reject”, or “Delete”)
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message

Confirmation Message with “Note” Section

Developer Hint

Control: sap.m.Dialog
Type: Message
Icon: sap-icon://question-mark
Title: Such as “Approve” or “Reject”
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message with note

Confirmation for “Delete”

If the user clicks Delete, display a “Delete” dialog that confirms the delete action.

Control: sap.m.MessageBox
Icon: sap-icon://alert
Title: Delete
Stretch: False (no full screen on all devices)

Button(s): Delete, Cancel

Use cases for delete confirmation messages in object page and list reports

a) No context is available. For example, neither the ID nor the description of the business object are available at the time of deletion.
Body text: Delete this <object>?

Confirmation for 'Delete' action

b) The ID of the object is available.
Body text: Delete <object> <object ID>?

Confirmation for 'Delete' action with object ID

c) The object ID and description are both available at the time of deletion.
Body text: Delete <object> <object ID> “<object description>”?

Confirmation for 'Delete' action with object ID and description

Deleting several objects

If more than one object is being deleted, do not display the object ID and description.
Body text: Delete the <n = optional> selected <objects>?

Confirmation for 'Delete' action with several objects

Developer Hint

Components

The message box contains the following sections and options:

Title: Title text appears in the message box header.

Content: This area contains the actual content of the message box.

Footer with actions: The footer can contain one or more buttons. We recommend limiting the number to two: A primary action and a negative path action.

Example of a message box structure

Show Details button

If details are available, the application has three options to display the text. Text can be displayed as:

Plain
Formatted
The original code format

Message details - Plain text

Message details - Formatted text

Message details with code excerpt

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

Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message Box (SAPUI5 samples)
Message Box (SAPUI5 API reference)

Select Dialog

The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.

A more enhanced dialog for single selection and multiselection is the value help dialog as it offers range selection and excluding functions.

Usage

Use the select dialog if:

Users need to select one or more entries from a comprehensive list that contains multiple attributes or values.

Do not use the select dialog if:

Users need to pick one item from a predefined set of options that contains one attribute or value only such as languages. In this case, consider using the combo box or select instead.
Your use case requires more enhanced functionalities such as a selection based on ranges. For the selection of values, consider using the value help dialog instead.
Your use case requires tabs, filters, or an Add New functionality in the select dialog. In this case, use a standard dialog instead.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The display of the select control depends on the device. On phones, the selection list takes up the whole screen. On desktop and tablet devices it appears as a popover.

Size S

Single select dialog in full screen on smartphone

Multi-select dialog in full screen on smartphone

Size M

Single select dialog on tablet

Multi-select dialog on tablet

Size L

Single select dialog on desktop

Multi-select dialog on desktop

Components

Dialog Header

You need to set the title of the dialog header (1). We recommend the following form:

Single selection

Select

Example: Select Product

Multi-selection

Select

Example: Select Products

Search

The first element in the dialog is a standard search field (2).

Info Toolbar

The info toolbar (3) is only available in multi-selection mode. It shows the number of selected items in the following form:

Selected :

Example: Selected Products: 2

Content

Button Toolbar

The button toolbar (5) contains two buttons: Select and Cancel. Select takes over the selection, while Cancel resets the selection to the state it was in when the dialog was opened.

Components of the select dialog. Left: single select, right: multi-select

Behavior and Interaction

Single Select

Once users select an entry, the select dialog is closed and the selected entry is taken over. If applicable, the entry is displayed in the field from which the dialog was triggered.

Multi-Select

Search

The user can search items.

Resize and Drag Dialog

You can make the select dialog resizable and draggable by setting the corresponding properties (also called resizable and draggable) to “true”.

A resizable dialog makes sense if the items inside have long names or descriptions.

A draggable dialog allows users to see the app content behind the dialog.

Guidelines

Both features are optional. However, even if you only need one, always set both of them to “true” to ensure consistency.

Guidelines

List Options

If you need to indicate that none of the selection options are selected, or you need to allow the user to not select an option, provide (None) as an option and place it at the beginning of the list.

When using the select dialog for selecting filters: If you need to indicate that all items apply as filter options, provide All as an option and place it at the beginning of the list.

Select list with '(None)'

Search Behavior

Two types of search behavior are available:

(1) A live search, also known as “search-as-you-type” (property: liveChange), which is triggered by each character that the user enters or deletes.

(2) A manual search, which is triggered explicitly after the user enters text in the search field and clicks the Search icon or presses the ENTER key.

Reset/Remember Selections

By default, the selection is reset when the dialog is closed. This allows users to make a new selection when they reopen the dialog and makes sense when users need to add multiple items to a table.

Selection is reset after the dialog is closed

Selection is remembered after the dialog is reopened

This also works in single-select dialogs. There, if users click the remembered item again, the dialog closes and they do not have to explicitly click Cancel.

Infobar

In multi-selection mode, an infobar shows the number of selected items. Use the following format:

Selected: [Number of selected items]
Example: Selected: 2

Note that the infobar is not “sticky”. When the user scrolls down the list, the infobar scrolls off the screen.

Infobar States

The infobar has two states – active and non-active (non-clickable). For more information see Infobar States.

Infobar - Active state

Infobar - Non-active state

“Clear” Button

The Clear button allows users to clear all the selected items. By default, the button is not shown. To display the button, set the showClearButton property to “true”.

Select dialog with 'Clear' button

Content

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

Combo Box (guidelines)
Select (guidelines)
Value Help (guidelines)
Search (guidelines)

Implementation

Select Dialog (SAPUI5 samples)
Select Dialog (SAPUI5 API reference)

Dialog

Usage

Use the dialog if:

You want to display complex content (that is not a floorplan), but don’t want the user to navigate away from the current page.
You want to display an additional step or process that needs to be confirmed by a user action.
You want to enable the user to create an object with a small number of fields (up to 8 fields).

Do not use the dialog if:

You want to display a simple message. Use the message box instead.
You just want to confirm a successful action.
You do not want to interrupt the user.
You want to enable users to create an object with more than 8 fields. Use an object page instead.
You want to display a floorplan. Floorplans are not meant to be displayed inside a dialog.

Responsiveness

The dialog provides different behavior on a smartphone than on a tablet or desktop. We distinguish between “cozy” and “compact” dialogs. For more information, see content density.

The buttons in the toolbar are aligned differently on the various devices. On a smartphone, they extend across the entire footer toolbar, but on a tablet or desktop device, they are right-aligned.

Size S (Smartphone)

Full Screen Dialog

Position of the Action Buttons

On smartphones, a dialog can have one or two actions, which are located in the footer and right-aligned.

Full screen dialog - Size S

When to Open Full Screen or Modal

Always display message dialogs as modals. There is no need to display a simple message in a full screen dialog. If you want to display a simple message, use the message box instead.

Size M (Tablet)

By default, the dialog can have up to two action buttons in the footer. The action buttons in the toolbar are right-aligned. Use cozy mode on tablet devices.

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Size L (Desktop)

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Dialog in compact mode - Size L

Layout

Position on the Screen

The dialog is positioned in the center of the screen. It opens in a modal window to ensure that it attracts the user’s attention when it displays emergency states.

On a smartphone, the stretch property allows you to achieve full screen behavior.

Behavior and Interaction

Navigation in a Dialog

You can let users navigate to another page within the dialog. On the second page, an arrow at the top of the dialog allows users to navigate back to the first page.

Navigation pattern list - Size L

Navigation pattern details - Size L

Resizable

You can let users change the size of the dialog (property resizable = “true). The resizable indicator then shows in the bottom-right corner of the dialog.

Resizable indicator in the bottom right-hand corner - Size L

Draggable

By clicking and holding on the heading, users can drag the dialog to another position (property draggable = “true”).

Dialog can be moved by dragging the title - Size L

Messaging Within a Dialog

Do not show message popovers within dialogs. Use highlighting to show issues with content fields. For more information, see form field validation.

Editing and Saving Content

If a dialog is used for editing, keep it simple. If you need more than 8 editable fields, consider other solutions instead, such as navigation to a details page.

The data in the dialog is only saved when the user clicks Create or Save. Use form field validation within the dialog to make users aware of any errors.

The data in the dialog is lost if the page is refreshed during the editing process (also in the draft scenario), or if the user chooses Cancel.

Highlighted form fields in a dialog - Size S

Types

Standard Dialog

Use the standard dialog unless you need one of the specialized dialogs below. The standard dialog has a header with a grey background, and no icon.

Other Types of Dialogs

Personalization dialog
Select dialog
Table select dialog
Value help dialog
View settings dialog
Busy dialog

Message Box

Components

The dialog contains the following sections and options:

Title: The title text appears in the dialog header. By default, the title is left aligned.

Subheader (optional): Subheaders appear below the main header. Since the subheader is not part of the content area, it is not scrollable.

Content: This area contains the actual content of the dialog.

Footer with actions: The footer can contain up to two buttons (optional). If no buttons are defined, the default Close button is shown.

Example of a dialog structure (Cozy)

Emphasized Buttons in a Dialog

Never use an emphasized button for Cancel.

Emphasized button in the dialog footer

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

Toolbar (guidelines)

Implementation

Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Message Box (SAPUI5 samples)
Toolbar (SAPUI5 API reference)
Dialog (SAPUI5 API reference)

Select Dialog

The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.

A more enhanced dialog for single selection and multiselection is the value help dialog as it offers range selection and excluding functions.

Usage

Use the select dialog if:

Users need to select one or more entries from a comprehensive list that contains multiple attributes or values.

Do not use the select dialog if:

Users need to pick one item from a predefined set of options that contains one attribute or value only such as languages. In this case, consider using the combo box or select instead.
Your use case requires more enhanced functionalities such as a selection based on ranges. For the selection of values, consider using the value help dialog instead.
Your use case requires tabs, filters, or an Add New functionality in the select dialog. In this case, use a standard dialog instead.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The display of the select control depends on the device. On phones, the selection list takes up the whole screen. On desktop and tablet devices it appears as a popover.

Size S

Single select dialog in full screen on smartphone

Multi-select dialog in full screen on smartphone

Size M

Single select dialog on tablet

Multi-select dialog on tablet

Size L

Single select dialog on desktop

Multi-select dialog on desktop

Components

Dialog Header

You need to set the title of the dialog header (1). We recommend the following form:

Single selection

Select

Example: Select Product

Multi-selection

Select

Example: Select Products

Search

The first element in the dialog is a standard search field (2).

Info Toolbar

The info toolbar (3) is only available in multi-selection mode. It shows the number of selected items in the following form:

Selected :

Example: Selected Products: 2

Content

Button Toolbar

The button toolbar (5) contains two buttons: Select and Cancel. Select takes over the selection, while Cancel resets the selection to the state it was in when the dialog was opened.

Components of the select dialog. Left: single select, right: multi-select

Behavior and Interaction

Single Select

Once users select an entry, the select dialog is closed and the selected entry is taken over. If applicable, the entry is displayed in the field from which the dialog was triggered.

Multi-Select

In the multi-select version of the select dialog, checkboxes are provided for choosing multiple entries. The selection is taken over when the user closes the dialog via OK. Cancel closes the dialog without taking over the selected values. An infobar indicates the number of selected items.

Search

The user can search items.

Resize and Drag Dialog

You can make the select dialog resizable and draggable by setting the corresponding properties (also called resizable and draggable) to “true”.

A resizable dialog makes sense if the items inside have long names or descriptions.

A draggable dialog allows users to see the app content behind the dialog.

Guidelines

Both features are optional. However, even if you only need one, always set both of them to “true” to ensure consistency.

Guidelines

List Options

If you need to indicate that none of the selection options are selected, or you need to allow the user not to select an option, provide (None) as an option and place it at the beginning of the list.

If you need to indicate that all items apply (for example, as a list filter), provide All as an option and place it at the beginning of the list.

Select list with '(None)'

Search Behavior

Two types of search behavior are available:

(1) A live search, also known as “search-as-you-type” (property: liveChange), which is triggered by each character that the user enters or deletes.

(2) A manual search, which is triggered explicitly after the user enters text in the search field and clicks the Search icon or presses the ENTER key.

Reset/Remember Selections

By default, the selection is reset when the dialog is closed. This allows users to make a new selection when they reopen the dialog and makes sense when users need to add multiple items to a table.

Selection is reset after the dialog is closed

Selection is remembered after the dialog is reopened

This also works in single-select dialogs. There, if users click the remembered item again, the dialog closes and they do not have to explicitly click Cancel.

Infobar

In multi-selection mode, an infobar shows the number of selected items. Use the following format:

Selected: [Number of selected items]
Example: Selected: 2

Note that the infobar is not “sticky”. When the user scrolls down the list, the infobar scrolls off the screen.

Infobar States

The infobar has two states – active and non-active (non-clickable). For more information see Infobar States.

Infobar - Active state

Infobar - Non-active state

“Clear” Button

The Clear button allows users to clear all the selected items. By default, the button is not shown. To display the button, set the showClearButton property to “true”.

Select dialog with 'Clear' button

Content

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

Combo Box (guidelines)
Select (guidelines)
Value Help (guidelines)
Search (guidelines)

Implementation

Select Dialog (SAPUI5 samples)
Select Dialog (SAPUI5 API reference)

Quick View

The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.

Usage

Use the quick view if:

You want to display a concise overview of an object.
You want to display information about, for example, an employee or a company.
You can split your information into groups (for example, contact details and company information).

Do not use the quick view if:

You want to provide information in a way other than displaying it in groups.
You want to display complex information about an object.

Responsiveness

The quick view is based on the popover. It therefore inherits the same basic properties from it and provides the same responsiveness. For more information, see popover.

Layout

Generic Quick View

You can use the fallbackIcon property to define a backup icon. This icon is displayed if the initial avatar can’t be loaded.

Example of a generic quick view

Quick View Examples

You can create your own quick view element or, as with the two examples below show, there are also basic structures for displaying employee and company information in a quick view.

Example: Employee quick view

Example: Company quick view

Behavior and Interaction

The quick view is based on the popover. It therefore inherits the same basic properties from it and provides the same interaction. For more information, see popover.

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

Popover (guidelines)

Implementation

Quick View (SAPUI5 samples)
Quick View (SAPUI5 API reference)

Message Box

Usage

Use the message box if:

You want to display non-field-related messages.
You want to interrupt the user while he or she performs an action.
You want to display error, warning, success, confirmation, or information messages.
You need to interrupt the user for some other reason.
You need the user to acknowledge the message.
You need the user to make a decision.

Do not use the message box if:

You want to display a short success message. (Use a toast instead. For more information, see message toast.)
You can show the message directly in a form field.

Responsiveness

Types

The following categories of messages are available:

Error
Warning
Success
Information
Confirmation

Error Message

Control: sap.m.MessageBox
Icon: sap-icon://message-error
Title: Error
Stretch: False (no full screen on all devices)

Error message with one action

Error message with two actions

Text guidelines for an error message:

Do not just describe the problem; tell the user how to resolve it.
In the short text, speak the language of the end user. Do not include system or configuration details.
If the solution is more involved or technical, add a long text.
Do not repeat the short text in the long text. They both appear together on the screen.

Warning Message

Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Warning
Stretch: False (no full screen on all devices)

Use cases for warnings

a) No decision required: Formulate the message as a statement.
Button(s): OK

Warning message with 'OK' button

b) Decision to continue required: Formulate the message as a statement.

Button(s): OK, Cancel

Warning message with 'OK' and 'Cancel' buttons

c) Specific decision required, with one action

Use a relevant action button. The message may also be formulated as a question.
Button(s): Leave Page, Cancel

Warning message with action and 'Cancel' buttons

Success Message

Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message.

Control: sap.m.MessageBox
Icon: sap-icon://message-success
Title: Success
Stretch: False (no full screen on all devices)
Button(s): OK

Success message

Information

You should generally use a message toast (sap.m.MessageToast) to display success messages instead of a dialog (sap.m.Dialog).

Information Message

Information messages provide information the user needs to acknowledge, but which does not involve a decision. The message provides information that is useful and relevant, but never critical.

Control: sap.m.MessageBox
Icon: sap-icon://message-information
Title: Information
Stretch: False (no full screen on all devices)

Button(s): OK

Information message

Confirmation Message

Control: sap.m.MessageBox
Icon: sap-icon://question-mark
Title: (such as “Approve”, “Reject”, or “Delete”)
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message

Confirmation Message with “Note” Section

Warning

Control: sap.m.Dialog
Type: Message
Icon: sap-icon://question-mark
Title: Such as “Approve” or “Reject”
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message with note

Confirmation for “Delete”

If the user clicks Delete, display a “Delete” dialog that confirms the delete action.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Delete
Stretch: False (no full screen on all devices)

Button(s): Delete, Cancel

Use cases for delete confirmation messages in object page and list reports

a) No context is available. For example, neither the ID nor the description of the business object are available at the time of deletion.
Body text: Delete this <object>?

Confirmation for 'Delete' action

b) The ID of the object is available.
Body text: Delete <object> <object ID>?

Confirmation for 'Delete' action with object ID

c) The object ID and description are both available at the time of deletion.
Body text: Delete <object> <object ID> “<object description>”?

Confirmation for 'Delete' action with object ID and description

Deleting several objects

If more than one object is being deleted, do not display the object ID and description.
Body text: Delete the <n = optional> selected <objects>?

Confirmation for 'Delete' action with several objects

Developer Hint

Components

The message box contains the following sections and options:

Title: Title text appears in the message box header.

Content: This area contains the actual content of the message box.

Example of a message box structure

Show Details button

If details are available, the application has three options to display the text. Text can be displayed as:

Plain
Formatted
The original code format

Message details - Plain text

Message details - Formatted text

Message details with code excerpt

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

Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message Box (SAPUI5 samples)
Message Box (SAPUI5 API reference)

Message Popover

Users can browse messages by type and navigate to the message details. In some cases, they can also jump directly from the message to the affected field on the UI.

Message popover

When to Use

Use the message popover if:

You want to display multiple messages to the user.
You do not want to interrupt users while they are performing an action.

Do not use the message popover if:

You need to interrupt the user. In this case, use a message box.
(Typically, interrupting the user is only necessary for technical problems, such as network errors and connection issues.)

Components

(1) Filter bar
(2) Short description
(3) Subtitle
(4) Section/subsection on the UI
(5) Message button
(6) Navigation to message details
(7) Counter for aggregated messages

Components of the message popover

Filter Bar

Initially, the filter bar shows all the different message types in the list (1).

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success, and information).

List

Short Description (2)

A simple and helpful short message text. It’s the same message as the one attached to the UI control where the issue occurred.

Subtitle (3)

Section/Subsection (4)

Messages in the list are grouped by the section and subsection on the UI. This helps the user to find the part of the UI that triggered the message.

Navigation to Message Details (6)

If message details are provided, the message popover automatically provides a chevron on the right-hand side for navigating to the message details page.

Aggregated Messages (7)

If you want to aggregate messages, you can use the counter property of each list item.

Information

The message popover only provides the counter property. The aggregation itself must be implemented by the app team.
When 2 or more messages are aggregated, the message short text cannot be a link because there would be multiple targets.

Message Button

If there are messages to display, the message button indicates the most critical message status in the list (5).

In addition, the error button contains a count indicating the number of errors.

Message button types - Error with counter, warning, success, information

If there are no messages to display, there is no message button. In this case, the footer toolbar contains only the “normal” actions for the task.

Message Details

The message details page shows:

The message short text (1).
A more detailed message text to explain the issue and propose a solution (2).
An optional link to more information, such as app documentation (3).

Detail page of the message popover

Behavior and Interaction

When Does the Message Popover Open?

Form Field Validation

Form field validation behavior

Finalizing Actions

Message popover triggered by a finalizing 'Save' action

Navigation to Message Details

If the message provides a long text from the back-end system, the user can navigate to the message details. There, the user will typically find more information and help.

Navigation to message details

Navigation to the Relevant Field

Guidelines

Always add a navigation link, where possible.

For more information about the navigation, see Navigating to the Corresponding Field on the UI in the Message Handling article.

Developer Hint

Set the navigation link with the activeTitlePress event. This allows users to click the message text in both the first and second page of the message popover.

Navigation from the message text to a field on the UI

Responsiveness

Size S (Smartphone)

On smartphones, the message popover is automatically shown in full screen mode.

Full screen message popover on a smartphone

Top Tips

Whenever possible, provide a navigation link from the message to the relevant field on the UI.
Use the message subtitle to indicate the field label.
In forms, also highlight the individual fields, and change their value state according to the type of message. For more information, see Form Field Validation.

Usage

Use the message box if:

You want to display non-field-related messages.
You want to interrupt the user while he or she performs an action.
You want to display error, warning, success, confirmation, or information messages.
You need to interrupt the user for some other reason.
You need the user to acknowledge the message.
You need the user to make a decision.

Do not use the message box if:

You want to display a short success message. (Use a toast instead. For more information, see message toast.)
You can show the message directly in a form field.

Responsiveness

Types

The following categories of messages are available:

Error
Warning
Success
Information
Confirmation

Error Message

Control: sap.m.MessageBox
Icon: sap-icon://message-error
Title: Error
Stretch: False (no full screen on all devices)

Error message with one action

Error message with two actions

Text guidelines for an error message:

Do not just describe the problem; tell the user how to resolve it.
In the short text, speak the language of the end user. Do not include system or configuration details.
If the solution is more involved or technical, add a long text.
Do not repeat the short text in the long text. They both appear together on the screen.

Warning Message

Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Warning
Stretch: False (no full screen on all devices)

Use cases for warnings

a) No decision required: Formulate the message as a statement.
Button(s): OK

Warning message with 'OK' button

b) Decision to continue required: Formulate the message as a statement.

Button(s): OK, Cancel

Warning message with 'OK' and 'Cancel' buttons

c) Specific decision required, with one action

Use a relevant action button. The message may also be formulated as a question.
Button(s): Leave Page, Cancel

Warning message with action and 'Cancel' buttons

Success Message

Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message.

Control: sap.m.MessageBox
Icon: sap-icon://message-success
Title: Success
Stretch: False (no full screen on all devices)
Button(s): OK

Success message

Information

You should generally use a message toast (sap.m.MessageToast) to display success messages instead of a dialog (sap.m.Dialog).

Information Message

Information messages provide information the user needs to acknowledge, but which does not involve a decision. The message provides information that is useful and relevant, but never critical.

Control: sap.m.MessageBox
Icon: sap-icon://message-information
Title: Information
Stretch: False (no full screen on all devices)

Button(s): OK

Information message

Confirmation Message

Control: sap.m.MessageBox
Icon: sap-icon://question-mark
Title: (such as “Approve”, “Reject”, or “Delete”)
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message

Confirmation Message with “Note” Section

Warning

Control: sap.m.Dialog
Type: Message
Icon: sap-icon://question-mark
Title: Such as “Approve” or “Reject”
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message with note

Confirmation for “Delete”

If the user clicks Delete, display a “Delete” dialog that confirms the delete action.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Delete
Stretch: False (no full screen on all devices)

Button(s): Delete, Cancel

Use cases for delete confirmation messages in object page and list reports

a) No context is available. For example, neither the ID nor the description of the business object are available at the time of deletion.
Body text: Delete this <object>?

Confirmation for 'Delete' action

b) The ID of the object is available.
Body text: Delete <object> <object ID>?

Confirmation for 'Delete' action with object ID

c) The object ID and description are both available at the time of deletion.
Body text: Delete <object> <object ID> “<object description>”?

Confirmation for 'Delete' action with object ID and description

Deleting several objects

If more than one object is being deleted, do not display the object ID and description.
Body text: Delete the <n = optional> selected <objects>?

Confirmation for 'Delete' action with several objects

Developer Hint

Components

The message box contains the following sections and options:

Title: Title text appears in the message box header.

Content: This area contains the actual content of the message box.

Example of a message box structure

Show Details button

If details are available, the application has three options to display the text. Text can be displayed as:

Plain
Formatted
The original code format

Message details - Plain text

Message details - Formatted text

Message details with code excerpt

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

Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message Box (SAPUI5 samples)

Value Help Dialog

Intro

The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and select multiple conditions. The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.

Usage

Use the value help dialog if:

The user is searching within a dataset that contains more than 1,000 items.
The user needs to use different attributes to find an object (such as city, company name, and so on).
The user needs to define conditions, such as ranges and exclusions.

Do not use the value help dialog if:

There is a simpler control that fits the use case. Always start with the least complex control. For example, use the select control if the user needs to select only one item from a short list.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Value help dialog - Size S

Value help dialog - Size M

Value help dialog - Size L

Components

The value help dialog contains the following components:

1) Header
2) Icon tab bar / list control (phone)
3) Search template (optional)
4) Basic search
5) Go button
6) Filters
7) Result list
8) Selected items and conditions
9) Footer toolbar
10) Area for defining conditions, such as ranges and exclusions

Components of the Value Help Dialog

Header (1)

The header bar contains the dialog title. See the Guidelines section below.

Icon Tab Bar / List Control (Phone) (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem), Search and Select, and Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Search and Select and the Define Conditions tab.
Both controls have a counter in the title that indicates the number of items/conditions selected.

Search Template (3)

Basic Search (4)

The basic search finds all results that are somehow related to the input. For example, the search term “A” returns all the results containing the letter “A”.

Always offer the basic search in the value help dialog. Position the basic search to the right of the search template control. If there is no search template control, left-align the basic search.

Go Button (5)

The Go button triggers the search and filters the result list.

Filters (6)

Value help dialog - Filters

For the basic search with filters, the filter bar (sap.ui.comp.filterbar.FilterBar) is implemented in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields fields are added automatically to the filter area.
There is a toggle button to show and hide the filters.
In each of the filter fields, users can use operators like “between” or “lower than” to define conditions.

Always hide the filter area in the value help dialog by default. Only show the filter area by default if the basic search can’t be provided.

Using the Filters

Users can enter operators (such as “=“) to define the conditions directly within the field without opening the Define Conditions tab.

Users must use the following notation to get results:

Operator	Input Notation	Example
between	value…value	000…100
equal to	=value	=0001
contains	value	1
starts with	value*	001*
ends with	*value	*5
less than	<value	<100
less than or equal to	<=value	<=200
greater than	>value	>0300
greater than or equal to	>=value	>=0500
not between	!(value…value)	!(000…100)
not equal to	!(=value)	!(=0)
does not contain	!(value)	!(1)
does not start with	!(value*)	!(001*)
does not end with	!(*value)	!(*5)
not less than	!(<value)	!(<100)
not less than or equal to	!(<=value)	!(<=200)
not greater than	!(>value)	!(>0300)
not greater than or equal to	!(>=value)	!(>=0500)
empty	<empty>	<empty>
not empty	!(<empty>)	!(<empty>)

Using an operator to filter the result list

Result List (7)

The result list is populated on initial load by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly. Only the entered (or modified) value is transferred to the basic search. Type-ahead suggestions are ignored. The search is triggered automatically when the dialog opens.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the result list.

Selected Items and Conditions (8)

The selected items and conditions are displayed in a tokenizer (see token for more information). Each selected item or condition is displayed as one token.

There is no longer a visual difference between included and excluded items and conditions. They are now differentiated using operators (see Using the filters).

Footer Toolbar (9)

The footer bar offers the OK and Cancel buttons.

Area for Defining Conditions (10)

In the Define Conditions tab, you can use the following operators to define single and multiple conditions:

between
equal to
contains
starts with
ends with
less than
less than or equal to
greater than
greater than or equal to
empty
not between
not equal to
does not contains
does not start with
does not end with
not less than
not less than or equal to
not greater than
not greater than or equal to
not empty

For convenience, the operators are grouped into two categories: Include and Exclude.

Each condition is displayed as a token in the Selected Items and Conditions tokenizer.

Information

The operator dropdown list may not contain all the operators listed above. The type of field value determines which operators are available.

Developer Hint

For information on how to manage white space characters (blanks) when users copy and paste text into input controls, see Removing Leading and Trailing White Space.

Define Conditions - Operators List

Behavior and Interaction

Basic Search and Filters

The basic search (mandatory) and filters (optional) are triggered by clicking the Go button. The search results are shown in the result list.
If data was already entered in input field from which the user triggered the value help, this data is transferred to the basic search and the results are then filtered accordingly.
The basic search performs a search across all fields that are displayed in the filter area and the result list.

Selecting Items and Defining Conditions

Depending on your use case, the value help dialog can offer different selection options:

Select a single item
Define a single condition
Select multiple items
Define multiple conditions
Select multiple items and define multiple conditions

Users open the value help dialog by clicking the value help icon in the input field. The next steps depend on the use case and form factor (smartphone or desktop/tablet).

The different use cases are described in the sections below.

Select a Single Item (Smartphone)

Tapping the value help icon opens the dialog. As soon as an item is selected, the value help dialog closes automatically.

Single item selection on a smartphone

Select a Single Item (Desktop/Tablet)

Single item selection on a desktop/tablet device

Define a Single Condition (Smartphone)

Tapping the value help icon opens the Define Condition tab. Users define a condition by choosing the relevant operator and entering the value or values in the corresponding input field(s).

In this example, we have defined a range.

Defining a single condition on a smartphone

Define a Single Condition (Desktop/Tablet)

Clicking the value help icon opens the Define Condition tab. Users define a condition by choosing the relevant operator and entering the value or values in the corresponding input field(s).

In this example, we have defined a range.

Defining a single condition (desktop/tablet)

Select Multiple Items and Define Multiple Conditions (Smartphone)

Tapping the value help icon displays the start dialog.

The Search and Select tab is used to select multiple items.
The Define Conditions tab is used to define multiple conditions.
The counters in the titles of both tabs represent the number of selected items/defined conditions.

All selected items and conditions are added as tokens to the Selected (n) field at the bottom of the start dialog. The counter n indicates the combined number of items selected and conditions defined.

Start dialog

Selecting multiple items on a smartphone

Defining multiple conditions (smartphone)

Filters on a smartphone

Select Multiple Items and Define Multiple Conditions (Desktop/Tablet)

Clicking the value help icon displays the icon tab bar with the Search and Select and Define Conditions tabs.

The Search and Select tab is used to select multiple items
The Define Conditions tab is used to define multiple conditions.

Selecting multiple items and conditions on a desktop

Define Multiple Conditions (Smartphone)

Tapping the value help icon opens the start dialog with the Define Conditions tab.

The selected values are added as tokens to the Selected Conditions at the bottom of the start dialog.

Start dialog

Defining multiple conditions on a smartphone

Define Multiple Conditions (Desktop/Tablet)

Clicking the value help icon opens the Define Conditions tab.

The selected values are added as tokens to the Selected Conditions at the bottom of the start dialog.

Defining multiple conditions on a desktop

Copying and Pasting Multiple Values

The area for defining conditions allows the user to enter multiple values at once (copied from the clipboard).

Users can paste more than one value into the value input field. In this case, the condition row repeats with the previously selected condition and shows one value per row.

If there are more than 10 rows of conditions, pagination is added to top of the respective area.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Start dialog: [Object] (for example, Company)
Search and Select Dialog: Search and Select
Filters dialog: Show Filters
Define single condition: Define Condition
Define multiple conditions: Define Conditions

For tablet and desktop devices:

Selection of multiple items combined with selection of multiple conditions: [Object] (for example, Company)
Single item selection: Select: [Object] (for example, Select: Company)
Define single condition: Define Condition: [Object] (for example, Define Condition: Company)
Define multiple conditions: Define Conditions: [Object] (for example, Define Conditions: Company)

Filtering

Constant Parameters

You can use constant parameters to pre-filter suggestion lists, drop-downs, and the value help results list. Users can’t change these parameters.

Do not show parameters with constant values as filterable fields in the filter bar of the value help dialog or in the result table columns. Constant values should not be visible to users in any way.

Usage

Use the quick view if:

You want to display a concise overview of an object.
You want to display information about, for example, an employee or a company.
You can split your information into groups (for example, contact details and company information).

Do not use the quick view if:

You want to provide information in a way other than displaying it in groups.
You want to display complex information about an object.

Responsiveness

The quick view is based on the popover. It therefore inherits the same basic properties from it and provides the same responsiveness. For more information, see popover.

Layout

Generic Quick View

The figure on the right shows how the content is structured within the quick view. At the top of the content area, you can display an image next to the title and subtitle. Additionally, groups and fields are used to structure the information.

You can use the fallbackIcon property to define a backup icon. This icon is displayed if the initial image or icon is can’t be loaded.

Example of a generic quick view

Quick View Examples

You can create your own quick view element or, as with the two examples below show, there are also basic structures for displaying employee and company information in a quick view.

Example: Employee quick view

Example: Company quick view

Behavior and Interaction

The quick view is based on the popover. It therefore inherits the same basic properties from it and provides the same interaction. For more information, see popover.

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

Popover (guidelines)

Implementation

Quick View (SAPUI5 samples)
Quick View (SAPUI5 API reference)

Select Dialog

The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.

A more enhanced dialog for single selection and multiselection is the value help dialog as it offers range selection and excluding functions.

Usage

Use the select dialog if:

Users need to select one or more entries from a comprehensive list that contains multiple attributes or values.

Do not use the select dialog if:

Users need to pick one item from a predefined set of options that contains one attribute or value only such as languages. In this case, consider using the combo box or select instead.
Your use case requires more enhanced functionalities such as a selection based on ranges. For the selection of values, consider using the value help dialog instead.
Your use case requires tabs, filters, or an Add New functionality in the select dialog. In this case, use a standard dialog instead.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The display of the select control depends on the device. On phones, the selection list takes up the whole screen. On desktop and tablet devices it appears as a popover.

Size S

Single select dialog in full screen on smartphone

Multi-select dialog in full screen on smartphone

Size M

Single select dialog on tablet

Multi-select dialog on tablet

Size L

Single select dialog on desktop

Multi-select dialog on desktop

Components

Dialog Header

You need to set the title of the dialog header (1). We recommend the following form:

Single selection

Select

Example: Select Product

Multi-selection

Select

Example: Select Products

Search

The first element in the dialog is a standard search field (2).

Info Toolbar

The info toolbar (3) is only available in multi-selection mode. It shows the number of selected items in the following form:

Selected :

Example: Selected Products: 2

Content

Button Toolbar

The button toolbar (5) contains two buttons: Select and Cancel. Select takes over the selection, while Cancel resets the selection to the state it was in when the dialog was opened.

Components of the select dialog. Left: single select, right: multi-select

Behavior and Interaction

The select dialog can be called up from any control. The most common trigger is an input field with selection icon, also known as a “value help field”, or F4. Alternative triggers are buttons or icons, which add items to an existing list or the infobar in the master list in order to apply a contextual filter.

Single Select

Once users select an entry, the select dialog is closed and the selected entry is taken over. If applicable, the entry is displayed in the field from which the dialog was triggered.

Multi-Select

Search

The user can search items.

Resize and Drag Dialog

You can make the select dialog resizable and draggable by setting the corresponding properties (also called resizable and draggable) to “true”.

A resizable dialog makes sense if the items inside have long names or descriptions.

A draggable dialog allows users to see the app content behind the dialog.

Guidelines

Both features are optional. However, even if you only need one, always set both of them to “true” to ensure consistency.

Guidelines

List Options

If you need to indicate that all items apply (for example, as a list filter), provide All as an option and place it at the beginning of the list.

Select list with '(None)'

Search Behavior

Two types of search behavior are available:

(1) A live search, also known as “search-as-you-type” (property: liveChange), which is triggered by each character that the user enters or deletes.

(2) A manual search, which is triggered explicitly after the user enters text in the search field and clicks the Search icon or presses the ENTER key.

Reset/Remember Selections

By default, the selection is reset when the dialog is closed. This allows users to make a new selection when they reopen the dialog and makes sense when users need to add multiple items to a table.

Selection is reset after the dialog is closed

Selection is remembered after the dialog is reopened

This also works in single-select dialogs. There, if users click the remembered item again, the dialog closes and they do not have to explicitly click Cancel.

Infobar

In multi-selection mode, an infobar shows the number of selected items. Use the following format:

Selected: [Number of selected items]
Example: Selected: 2

Note that the infobar is not “sticky”. When the user scrolls down the list, the infobar scrolls off the screen.

Infobar States

The infobar has two states – active and non-active (non-clickable). For more information see Infobar States.

Infobar - Active state

Infobar - Non-active state

“Clear” Button

The Clear button allows users to clear all the selected items. By default, the button is not shown. To display the button, set the showClearButton property to “true”.

Select dialog with 'Clear' button

Content

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

Combo Box (guidelines)
Select (guidelines)
Value Help (guidelines)
Search (guidelines)

Implementation

Select Dialog (SAPUI5 samples)
Select Dialog (SAPUI5 API reference)

Message Popover

Users can browse messages by type and navigate to the message details. In some cases, they can also jump directly from the message to the affected field on the UI.

Message popover

When to Use

Use the message popover if:

You want to display multiple messages to the user.
You do not want to interrupt users while they are performing an action.

Do not use the message popover if:

You need to interrupt the user. In this case, use a message box.
(Typically, interrupting the user is only necessary for technical problems, such as network errors and connection issues.)

Components

(1) Filter bar
(2) Message short text
(3) Message subtitle
(4) Section/subsection on the UI
(5) Message button
(6) Navigation to message details
(7) Counter for aggregated messages

Components of the message popover

Filter Bar

Initially, the filter bar shows all the different message types in the list (1).

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success, and information).

List

Short Description

The short message text (2) provides a simple and helpful short message. It’s the same message as the one attached to the UI control where the issue occurred.

Subtitle

You can use the subtitle (3) to give your message an identifier. If the message relates to a specific field, show the label of the field where the error occurred. Based on the subtitle, the user should be able to identify the corresponding UI control on the UI (for example, the input field in a form).

Section/Subsection

Messages in the list are grouped by the section and subsection on the UI (4). This helps the user to find the part of the UI that triggered the message.

Navigation to Message Details

If message details are provided, the message popover automatically provides a chevron on the right-hand side for navigating to the message details page (6).

Aggregated Messages

If your app team wants to aggregate messages, they can use the counter property of each list item (7). Note that the message popover only provides the counter property. The aggregation itself must be implemented by the app team.

Message Button

If there are messages to display, the message button indicates the most critical message status in the list (5).

In addition, the error button contains a count indicating the number of errors.

Message button types - Error with counter, warning, success, information

If there are no messages to display, there is no message button. In this case, the footer toolbar contains only the “normal” actions for the task.

Message Details

The message details page shows:

The message short text (1).
A more detailed message text to explain the issue and propose a solution (2).
An optional link to more information, such as app documentation (3).

Detail page of the message popover

Behavior and Interaction

When Does the Message Popover Open?

Form Field Validation

Form field validation behavior

Finalizing Actions

Message popover triggered by a finalizing 'Save' action

Navigation to the Second Page

If the message provides a long text from the back-end system, the user can navigate to a second page within the message popover. There, the user will typically find more information and help.

Navigation to the detail page of the message popover

Navigation to the Relevant Field

Guidelines

Always add a navigation link, where possible.

For more information about the navigation, see Navigating to the Corresponding Field on the UI in the Message Handling article.

Developer Hint

Set the navigation link with the activeTitlePress event. This allows users to click the message text in both the first and second page of the message popover.

Navigation from the message text to a field on the UI

Responsiveness

Size S (Smartphone)

On smartphones, the message popover is automatically shown in full screen mode.

Full screen message popover on a smartphone

Top Tips

Whenever possible, provide a navigation link from the message to the relevant field on the UI.
Use the message subtitle to indicate the field label.
In forms, also highlight the individual fields, and change their value state according to the type of message. For more information, see Form Field Validation.

Usage

Use the message box if:

You want to display non-field-related messages.
You want to interrupt the user while he or she performs an action.
You want to display error, warning, success, confirmation, or information messages.
You need to interrupt the user for some other reason.
You need the user to acknowledge the message.
You need the user to make a decision.

Do not use the message box if:

You want to display a short success message. (Use a toast instead. For more information, see message toast.)
You can show the message directly in a form field.

Responsiveness

Types

The following categories of messages are available:

Error
Warning
Success
Information
Confirmation

Error Message

Control: sap.m.MessageBox
Icon: sap-icon://message-error
Title: Error
Stretch: False (no full screen on all devices)

Error message with one action

Error message with two actions

Text guidelines for an error message:

Do not just describe the problem; tell the user how to resolve it.
In the short text, speak the language of the end user. Do not include system or configuration details.
If the solution is more involved or technical, add a long text.
Do not repeat the short text in the long text. They both appear together on the screen.

Warning Message

Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Warning
Stretch: False (no full screen on all devices)

Use cases for warnings

a) No decision required: Formulate the message as a statement.
Button(s): OK

Warning message with 'OK' button

b) Decision to continue required: Formulate the message as a statement.

Button(s): OK, Cancel

Warning message with 'OK' and 'Cancel' buttons

c) Specific decision required, with one action

Use a relevant action button. The message may also be formulated as a question.
Button(s): Leave Page, Cancel

Warning message with action and 'Cancel' buttons

Success Message

Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message.

Control: sap.m.MessageBox
Icon: sap-icon://message-success
Title: Success
Stretch: False (no full screen on all devices)
Button(s): OK

Success message

Information

You should generally use a message toast (sap.m.MessageToast) to display success messages instead of a dialog (sap.m.Dialog).

Information Message

Information messages provide information the user needs to acknowledge, but which does not involve a decision. The message provides information that is useful and relevant, but never critical.

Control: sap.m.MessageBox
Icon: sap-icon://message-information
Title: Information
Stretch: False (no full screen on all devices)

Button(s): OK

Information message

Confirmation Message

Control: sap.m.MessageBox
Icon: sap-icon://question-mark
Title: (such as “Approve”, “Reject”, or “Delete”)
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message

Confirmation Message with “Note” Section

Warning

Control: sap.m.Dialog
Type: Message
Icon: sap-icon://question-mark
Title: Such as “Approve” or “Reject”
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message with note

Confirmation for “Delete”

If the user clicks Delete, display a “Delete” dialog that confirms the delete action.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Delete
Stretch: False (no full screen on all devices)

Button(s): Delete, Cancel

Use cases for delete confirmation messages in object page and list reports

a) No context is available. For example, neither the ID nor the description of the business object are available at the time of deletion.
Body text: Delete this <object>?

Confirmation for 'Delete' action

b) The ID of the object is available.
Body text: Delete <object> <object ID>?

Confirmation for 'Delete' action with object ID

c) The object ID and description are both available at the time of deletion.
Body text: Delete <object> <object ID> “<object description>”?

Confirmation for 'Delete' action with object ID and description

Deleting several objects

If more than one object is being deleted, do not display the object ID and description.
Body text: Delete the <n = optional> selected <objects>?

Confirmation for 'Delete' action with several objects

Developer Hint

Components

The message box contains the following sections and options:

Title: Title text appears in the message box header.

Content: This area contains the actual content of the message box.

Example of a message box structure

Show Details button

If details are available, the application has three options to display the text. Text can be displayed as:

Plain
Formatted
The original code format

Message details - Plain text

Message details - Formatted text

Message details with code excerpt

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

Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message Box (SAPUI5 samples)

Table Select Dialog

Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, users are also able to access additional information about the objects in the table without needing to select them first.

The dialog provides a responsive table layout with additional search, filter, and selection functionalities in the header. A footer toolbar provides actions for canceling or confirming the process.

Usage

Use the table select dialog if:

You need to help users select one or more items from a comprehensive list that contains multiple attributes or values.

Do not use the table select dialog if:

You need to help users pick one item from a predefined set of options that contains only one value. In this case, use the dropdown box instead.
You need to help users with query-based range selection and enhanced filter options. In this case, use the value help dialog instead.
Your use case requires tabs, filters, or actions in a select dialog.In this case, use a standard dialog instead.
Your use case only requires filtering without selection. In this case, use the filter toolbar instead.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The table inside the table select dialog behaves like the responsive table. On smaller screens, the columns wrap and build a list that shows all the information. All other elements in the control are also responsive.

On bigger screens, the table select dialog also provides columns

The table in the dialog is responsive and wraps on smaller screens to show a list

Behavior and Interaction

The table select dialog can be called up from any control. The trigger is usually a button with a selection icon in an input field, or an Add button in a toolbar.

Triggers

Input Trigger

This trigger can be useful if users need to select, for example, one customer from a large customer register.

Example of a trigger: the selection icon in the input field

“Add” Button

This trigger can be useful if users need to add an item to a list. For example, the dialog could help users select the product from a large product catalog. Clicking Select in the footer toolbar of the dialog adds the selected products to the list.

“Clear” Button

The Clear button allows users to clear all the selected items.

Example of a trigger: 'Add' button in a table

Sticky Header

The column headers and info toolbar in the table select dialog are “sticky”, which means that they stay fixed on top when scrolling (sap.m.Table, property: sticky).

Information

The “sticky” feature has some browser limitations, and is not supported in Internet Explorer and in Microsoft Edge versions older than 41. In these browsers, the headers of the table select dialog will not be sticky.

Example of sticky headers

Single Select

The single-select version does not need a Select button in the footer toolbar because the selected entry is taken over and closed as soon as a user selects an item from the table. If applicable, the entry is displayed in the field from which the dialog was triggered. Alternatively, a toast message can be shown if necessary.

Multi-Select

The multi-select version of the table select dialog provides checkboxes for users to choose multiple items. The blue infobar above the table indicates the number of selected items. The selection is taken over when the user closes the dialog via the Select button in the footer toolbar. Clicking Cancel closes the dialog without taking over the selected values.

Remembering Selections

If selections need to be memorized in order to help users make corrections, you can set the RememberSelections property to true. This restores the selection to the state it was in when the dialog was last opened as soon as users exit the dialog via Select or Cancel. The interaction flow of the RememberSelections property is shown and explained in the select dialog article.

Grouping

The list can also be displayed as grouped. Group headers divide the table into segments. A pregrouped table is useful for tables with many entries, which can be sorted by a single attribute.

Table select dialog with group headers

Resize and Drag Dialog

You can allow users to resize and drag the table select dialog by setting the resizable and draggable properties to “true”.

A resizable dialog makes sense if the items within the dialog can have long names or descriptions.
A draggable dialog allows users to see the app content behind the dialog.

Guidelines

Both features are optional. However, if you only need one, always set both properties to “true” for consistency reasons.

Guidelines

Set the information provided in the table select dialog from top to bottom as follows:

Dialog Header

Use the following format for the dialog header:

For single selection: Select [Business Object]
Example: Select Product
For multiple selection: Select [Business Objects]
Example: Select Products.

Search

The first interactive element in the dialog is a standard search field. Two types of search behavior are available:

A live search, also known as “search-as-you-type,” which is triggered by each character that the user enters or deletes.
A manual search, which is triggered explicitly after the user enters text in the search field and clicks theSearch icon or presses the ENTER key. As soon as the user hits the Search button, a Delete icon appears at the end of the input field to delete the keyword and cancel the result list.

App developers need to decide which search to use. We recommend implementing the live search whenever possible. Use the manual search only if the amount of data is too large and if your app would otherwise run into performance issues. For more information, check out the article on searching.

Infobar

In multi-selection mode, an infobar shows the number of selected items. Use the following format:

[Business Objects] Selected: [Number of Items]
Example: Products Selected: 2

“Clear” Button

The “Clear” button for clearing all the selected items is optional. By default, the button is not shown. To display the button, set the showClearButton property to “true”.

Content

The content area provides a table. This behaves like the responsive table, so the columns wrap on smaller screens and display a list.

By default, the table select comes with a growing feature (property: growing = true). We recommend disabling the growing feature and setting this property to “false”. This ensures that all items in the table are loaded at once, and that the “Items selected” count, the search, and select/deselect features all work properly.

Footer Toolbar

In the multi-select version, the footer toolbar contains the Select and Cancel buttons. Select takes over the selection, while Cancel resets the selection to the state it was in when the user opened the dialog.

In the single-select version, only provide Cancel in the footer toolbar because the dialog takes over the selection as soon as the user chooses one.

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)

Implementation

Table Select Dialog (SAPUI5 samples)
Table Select Dialog (SAPUI5 API reference)

Value Help Dialog

Intro

Usage

Use the value help dialog if:

The user is searching within a dataset that contains more than 1,000 items.
The user needs to use different attributes to find an object (such as city, company name, and so on).
The user needs to define conditions, such as ranges and exclusions.

Do not use the value help dialog if:

There is a simpler control that fits the use case. Always start with the least complex control. For example, use the select control if the user needs to select only one item from a short list.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Value help dialog - Size S

Value help dialog - Size M

Value help dialog - Size L

Components

The value help dialog contains the following components:

Components of the Value Help Dialog

Header (1)

The header bar contains the dialog title. See the Guidelines section below.

Icon Tab Bar / List Control (Phone) (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem), Search and Select, and Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Search and Select and the Define Conditions tab.
Both controls have a counter in the title that indicates the number of items/conditions selected.

Search Template (3)

Basic Search (4)

The basic search finds all results that are somehow related to the input. For example, the search term “A” returns all the results containing the letter “A”.

Always offer the basic search in the value help dialog. Position the basic search to the right of the search template control. If there is no search template control, left-align the basic search.

Go Button (5)

The Go button triggers the search and filters the result list.

Filters (6)

Value help dialog - Filters

For the basic search with filters, the filter bar (sap.ui.comp.filterbar.FilterBar) is implemented in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields fields are added automatically to the filter area.
There is a toggle button to show and hide the filters.
In each of the filter fields, users can use operators like “between” or “lower than” to define conditions.

Always hide the filter area in the value help dialog by default. Only show the filter area by default if the basic search can’t be provided.

Using the Filters

Users can enter operators (such as “=“) to define the conditions directly within the field without opening the Define Conditions tab.

Users must use the following notation to get results:

Operator	Input Notation	Example
between	value…value	000…100
equal to	=value	=0001
contains	value	1
starts with	value*	001*
ends with	*value	*5
less than	<value	<100
less than or equal to	<=value	<=200
greater than	>value	>0300
greater than or equal to	>=value	>=0500
not between	!(value…value)	!(000…100)
not equal to	!(=value)	!(=0)
does not contain	!(value)	!(1)
does not start with	!(value*)	!(001*)
does not end with	!(*value)	!(*5)
not less than	!(<value)	!(<100)
not less than or equal to	!(<=value)	!(<=200)
not greater than	!(>value)	!(>0300)
not greater than or equal to	!(>=value)	!(>=0500)
empty	<empty>	<empty>
not empty	!(<empty>)	!(<empty>)

Using an operator to filter the result list

Result List (7)

The result list is populated on initial load by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly. Only the entered (or modified) value is transferred to the basic search. Type-ahead suggestions are ignored. The search is triggered automatically when the dialog opens.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the result list.

Selected Items and Conditions (8)

The selected items and conditions are displayed in a tokenizer (see token for more information). Each selected item or condition is displayed as one token.

There is no longer a visual difference between included and excluded items and conditions. They are now differentiated using operators (see Using the filters).

Footer Toolbar (9)

The footer bar offers the OK and Cancel buttons.

Area for Defining Conditions (10)

In the Define Conditions tab, you can use the following operators to define single and multiple conditions:

between
equal to
contains
starts with
ends with
less than
less than or equal to
greater than
greater than or equal to
empty
not between
not equal to
does not contains
does not start with
does not end with
not less than
not less than or equal to
not greater than
not greater than or equal to
not empty

For convenience, the operators are grouped into two categories: Include and Exclude.

Each condition is displayed as a token in the Selected Items and Conditions tokenizer.

Information

The operator dropdown list may not contain all the operators listed above. The type of field value determines which operators are available.

Developer Hint

For information on how to manage white space characters (blanks) when users copy and paste text into input controls, see Removing Leading and Trailing White Space.

Define Conditions - Operators List

Behavior and Interaction

Basic Search and Filters

The basic search (mandatory) and filters (optional) are triggered by clicking the Go button. The search results are shown in the result list.
If data was already entered in input field from which the user triggered the value help, this data is transferred to the basic search and the results are then filtered accordingly.
The basic search performs a search across all fields that are displayed in the filter area and the result list.

Selecting Items and Defining Conditions

Depending on your use case, the value help dialog can offer different selection options:

Select a single item
Define a single condition
Select multiple items
Define multiple conditions
Select multiple items and define multiple conditions

Users open the value help dialog by clicking the value help icon in the input field. The next steps depend on the use case and form factor (smartphone or desktop/tablet).

The different use cases are described in the sections below.

Select a Single Item (Smartphone)

Tapping the value help icon opens the dialog. As soon as an item is selected, the value help dialog closes automatically.

Single item selection on a smartphone

Select a Single Item (Desktop/Tablet)

Single item selection on a desktop/tablet device

Define a Single Condition (Smartphone)

Tapping the value help icon opens the Define Condition tab. Users define a condition by choosing the relevant operator and entering the value or values in the corresponding input field(s).

In this example, we have defined a range.

Defining a single condition on a smartphone

Define a Single Condition (Desktop/Tablet)

Clicking the value help icon opens the Define Condition tab. Users define a condition by choosing the relevant operator and entering the value or values in the corresponding input field(s).

In this example, we have defined a range.

Defining a single condition (desktop/tablet)

Select Multiple Items and Define Multiple Conditions (Smartphone)

Tapping the value help icon displays the start dialog.

The Search and Select tab is used to select multiple items.
The Define Conditions tab is used to define multiple conditions.
The counters in the titles of both tabs represent the number of selected items/defined conditions.

Start dialog

Selecting multiple items on a smartphone

Defining multiple conditions (smartphone)

Filters on a smartphone

Select Multiple Items and Define Multiple Conditions (Desktop/Tablet)

Clicking the value help icon displays the icon tab bar with the Search and Select and Define Conditions tabs.

The Search and Select tab is used to select multiple items
The Define Conditions tab is used to define multiple conditions.

Selecting multiple items and conditions on a desktop

Define Multiple Conditions (Smartphone)

Tapping the value help icon opens the start dialog with the Define Conditions tab.

The selected values are added as tokens to the Selected Conditions at the bottom of the start dialog.

Start dialog

Defining multiple conditions on a smartphone

Define Multiple Conditions (Desktop/Tablet)

Clicking the value help icon opens the Define Conditions tab.

The selected values are added as tokens to the Selected Conditions at the bottom of the start dialog.

Defining multiple conditions on a desktop

Copying and Pasting Multiple Values

The area for defining conditions allows the user to enter multiple values at once (copied from the clipboard).

Users can paste more than one value into the value input field. In this case, the condition row repeats with the previously selected condition and shows one value per row.

If there are more than 10 rows of conditions, pagination is added to top of the respective area.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Start dialog: [Object] (for example, Company)
Search and Select Dialog: Search and Select
Filters dialog: Show Filters
Define single condition: Define Condition
Define multiple conditions: Define Conditions

For tablet and desktop devices:

Selection of multiple items combined with selection of multiple conditions: [Object] (for example, Company)
Single item selection: Select: [Object] (for example, Select: Company)
Define single condition: Define Condition: [Object] (for example, Define Condition: Company)
Define multiple conditions: Define Conditions: [Object] (for example, Define Conditions: Company)

Filtering

Usage

Use the select dialog if:

Users need to select one or more entries from a comprehensive list that contains multiple attributes or values.

Do not use the select dialog if:

Users need to pick one item from a predefined set of options that contains one attribute or value only such as languages. In this case, consider using the combo box or select instead.
Your use case requires more enhanced functionalities such as a selection based on ranges. For the selection of values, consider using the value help dialog instead.
Your use case requires tabs, filters, or an Add New functionality in the select dialog. In this case, use a standard dialog instead.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The display of the select control depends on the device. On phones, the selection list takes up the whole screen. On desktop and tablet devices it appears as a popover.

Size S

Single select dialog in full screen on smartphone

Multi-select dialog in full screen on smartphone

Size M

Single select dialog on tablet

Multi-select dialog on tablet

Size L

Single select dialog on desktop

Multi-select dialog on desktop

Components

Dialog Header

You need to set the title of the dialog header (1). We recommend the following form:

Single selection

Select

Example: Select Product

Multi-selection

Select

Example: Select Products

Search

The first element in the dialog is a standard search field (2).

Info Toolbar

The info toolbar (3) is only available in multi-selection mode. It shows the number of selected items in the following form:

Selected :

Example: Selected Products: 2

Content

Button Toolbar

The button toolbar (5) contains two buttons: Select and Cancel. Select takes over the selection, while Cancel resets the selection to the state it was in when the dialog was opened.

Components of the select dialog. Left: single select, right: multi select

Behavior and Interaction

Single Select

Once users select an entry, the select dialog is closed and the selected entry is taken over. If applicable, the entry is displayed in the field from which the dialog was triggered.

Multi-Select

Search

The user can search items.

Resize and Drag Dialog

You can make the select dialog resizable and draggable by setting the corresponding properties (also called resizable and draggable) to “true”.

A resizable dialog makes sense if the items inside have long names or descriptions.

A draggable dialog allows users to see the app content behind the dialog.

Guidelines

Both features are optional. However, even if you only need one, always set both of them to “true” to ensure consistency.

Guidelines

List Options

If you need to indicate that all items apply (for example, as a list filter), provide All as an option and place it at the beginning of the list.

Select list with '(None)'

Search Behavior

Two types of search behavior are available:

(1) A live search, also known as “search-as-you-type” (property: liveChange), which is triggered by each character that the user enters or deletes.

(2) A manual search, which is triggered explicitly after the user enters text in the search field and clicks the Search icon or presses the ENTER key.

Reset/Remember Selections

By default, the selection is reset when the dialog is closed. This allows users to make a new selection when they reopen the dialog and makes sense when users need to add multiple items to a table.

Selection is reset after the dialog is closed

Selection is remembered after the dialog is reopened

This also works in single-select dialogs. There, if users click the remembered item again, the dialog closes and they do not have to explicitly click Cancel.

Infobar

In multi-selection mode, an infobar shows the number of selected items. Use the following format:

Selected: [Number of selected items]
Example: Selected: 2

Note that the infobar is not “sticky”. When the user scrolls down the list, the infobar scrolls off the screen.

Infobar States

The infobar has two states – active and non-active (non-clickable). For more information see Infobar States.

Infobar - Active state

Infobar - Non-active state

“Clear” Button

The Clear button allows users to clear all the selected items. By default, the button is not shown. To display the button, set the showClearButton property to “true”.

Select dialog with 'Clear' button

Content

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

Combo Box (guidelines)
Select (guidelines)
Value Help (guidelines)
Search (guidelines)

Implementation

No links

Select Dialog

The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.

A more enhanced dialog for single selection and multiselection is the value help dialog as it offers range selection and excluding functions.

Usage

Use the select dialog if:

Users need to select one or more entries from a comprehensive list that contains multiple attributes or values.

Do not use the select dialog if:

Users need to pick one item from a predefined set of options that contains one attribute or value only such as languages. In this case, consider using the combo box or select instead.
Your use case requires more enhanced functionalities such as a selection based on ranges. For the selection of values, consider using the value help dialog instead.
Your use case requires tabs, filters, or an Add New functionality in the select dialog. In this case, use a standard dialog instead.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The display of the select control depends on the device. On phones, the selection list takes up the whole screen. On desktop and tablet devices it appears as a popover.

Size S

Single select dialog in full screen on smartphone

Multi-select dialog in full screen on smartphone

Size M

Single select dialog on tablet

Multi-select dialog on tablet

Size L

Single select dialog on desktop

Multi-select dialog on desktop

Components

Dialog Header

You need to set the title of the dialog header (1). We recommend the following form:

Single selection

Select

Example: Select Product

Multi-selection

Select

Example: Select Products

Search

The first element in the dialog is a standard search field (2).

Info Toolbar

The info toolbar (3) is only available in multi-selection mode. It shows the number of selected items in the following form:

Selected :

Example: Selected Products: 2

Content

Button Toolbar

The button toolbar (5) contains two buttons: Select and Cancel. Select takes over the selection, while Cancel resets the selection to the state it was in when the dialog was opened.

Components of the select dialog. Left: single select, right: multi select

Behavior and Interaction

Single Select

Once users select an entry, the select dialog is closed and the selected entry is taken over. If applicable, the entry is displayed in the field from which the dialog was triggered.

Multi-Select

Search

The user can search items.

Resize and Drag Dialog

You can make the select dialog resizable and draggable by setting the corresponding properties (also called resizable and draggable) to “true”.

A resizable dialog makes sense if the items inside have long names or descriptions.

A draggable dialog allows users to see the app content behind the dialog.

Guidelines

Both features are optional. However, even if you only need one, always set both of them to “true” to ensure consistency.

Guidelines

List Options

If you need to indicate that all items apply (for example, as a list filter), provide All as an option and place it at the beginning of the list.

Select list with '(None)'

Search Behavior

Two types of search behavior are available:

(1) A live search, also known as “search-as-you-type” (property: liveChange), which is triggered by each character that the user enters or deletes.

(2) A manual search, which is triggered explicitly after the user enters text in the search field and clicks the Search icon or presses the ENTER key.

Reset/Remember Selections

By default, the selection is reset when the dialog is closed. This allows users to make a new selection when they reopen the dialog and makes sense when users need to add multiple items to a table.

Selection is reset after the dialog is closed

Selection is remembered after the dialog is reopened

This also works in single-select dialogs. There, if users click the remembered item again, the dialog closes and they do not have to explicitly click Cancel.

Infobar

In multi-selection mode, an infobar shows the number of selected items. Use the following format:

Selected: [Business Objects] Selected: [Number of Items]
Example: Products Selected: 2

Note that the infobar is not “sticky”. When the user scrolls down the list, the infobar scrolls off the screen.

“Clear” Button

The Clear button allows users to clear all the selected items. By default, the button is not shown. To display the button, set the showClearButton property to “true”.

Select dialog with 'Clear' button

Content

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

Combo Box (guidelines)
Select (guidelines)
Value Help (guidelines)
Search (guidelines)

Implementation

No links

Message Box

Usage

Use the message box if:

You want to display non-field-related messages.
You want to interrupt the user while he or she performs an action.
You want to display error, warning, success, confirmation, or information messages.
You need to interrupt the user for some other reason.
You need the user to acknowledge the message.
You need the user to make a decision.

Do not use the message box if:

You want to display a short success message. (Use a toast instead. For more information, see message toast.)
You can show the message directly in a form field.

Responsiveness

Types

The following categories of messages are available:

Error
Warning
Success
Information
Confirmation

Error Message

Control: sap.m.MessageBox
Icon: sap-icon://message-error
Title: Error
Stretch: False (no full screen on all devices)

Error message with one action

Error message with two actions

Text guidelines for an error message:

Do not just describe the problem; tell the user how to resolve it.
In the short text, speak the language of the end user. Do not include system or configuration details.
If the solution is more involved or technical, add a long text.
Do not repeat the short text in the long text. They both appear together on the screen.

Warning Message

Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Warning
Stretch: False (no full screen on all devices)

Use cases for warnings

a) No decision required: Formulate the message as a statement.
Button(s): OK

Warning message with 'OK' button

b) Decision to continue required: Formulate the message as a statement.

Button(s): OK, Cancel

Warning message with 'OK' and 'Cancel' buttons

c) Specific decision required, with one action

Use a relevant action button. The message may also be formulated as a question.
Button(s): Leave Page, Cancel

Warning message with action and 'Cancel' buttons

Success Message

Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message.

Control: sap.m.MessageBox
Icon: sap-icon://message-success
Title: Success
Stretch: False (no full screen on all devices)
Button(s): OK

Success message

Information

You should generally use a message toast (sap.m.MessageToast) to display success messages instead of a dialog (sap.m.Dialog).

Information Message

Information messages provide information the user needs to acknowledge, but which does not involve a decision. The message provides information that is useful and relevant, but never critical.

Control: sap.m.MessageBox
Icon: sap-icon://message-information
Title: Information
Stretch: False (no full screen on all devices)

Button(s): OK

Information message

Confirmation Message

Control: sap.m.MessageBox
Icon: sap-icon://question-mark
Title: (such as “Approve”, “Reject”, or “Delete”)
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message

Confirmation Message with “Note” Section

Warning

Control: sap.m.Dialog
Type: Message
Icon: sap-icon://question-mark
Title: Such as “Approve” or “Reject”
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message with note

Confirmation for “Delete”

If the user clicks Delete, display a “Delete” dialog that confirms the delete action.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Delete
Stretch: False (no full screen on all devices)

Button(s): Delete, Cancel

Use cases for delete confirmation messages in object page and list reports

a) No context is available. For example, neither the ID nor the description of the business object are available at the time of deletion.
Body text: Delete this <object>?

Confirmation for 'Delete' action

b) The ID of the object is available.
Body text: Delete <object> <object ID>?

Confirmation for 'Delete' action with object ID

c) The object ID and description are both available at the time of deletion.
Body text: Delete <object> <object ID> “<object description>”?

Confirmation for 'Delete' action with object ID and description

Developer Hint

Components

The message box contains the following sections and options:

Title: Title text appears in the message box header.

Content: This area contains the actual content of the message box.

Example of a message box structure

Show Details button

If details are available, the application has three options to display the text. Text can be displayed as:

Plain
Formatted
The original code format

Message details - Plain text

Message details - Formatted text

Message details with code excerpt

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

Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message Box (SAPUI5 samples)

Message Box

Usage

Use the message box if:

You want to display non-field-related messages.
You want to interrupt the user while he or she performs an action.
You want to display error, warning, success, confirmation, or information messages.
You need to interrupt the user for some other reason.
You need the user to acknowledge the message.
You need the user to make a decision.

Do not use the message box if:

You want to display a short success message. (Use a toast instead. For more information, see message toast.)
You can show the message directly in a form field.

Responsiveness

Types

The following categories of messages are available:

Error
Warning
Success
Information
Confirmation

Error Message

Control: sap.m.MessageBox
Icon: sap-icon://message-error
Title: Error
Stretch: False (no full screen on all devices)

Error message with one action

Error message with two actions

Text guidelines for an error message:

Do not just describe the problem; tell the user how to resolve it.
In the short text, speak the language of the end user. Do not include system or configuration details.
If the solution is more involved or technical, add a long text.
Do not repeat the short text in the long text. They both appear together on the screen.

Warning Message

Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Warning
Stretch: False (no full screen on all devices)

Use cases for warnings

a) No decision required: Formulate the message as a statement.
Button(s): OK

Warning message with 'OK' button

b) Decision to continue required: Formulate the message as a statement.

Button(s): OK, Cancel

Warning message with 'OK' and 'Cancel' buttons

c) Specific decision required, with one action

Use a relevant action button. The message may also be formulated as a question.
Button(s): Leave Page, Cancel

Warning message with action and 'Cancel' buttons

Success Message

Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message.

Control: sap.m.MessageBox
Icon: sap-icon://message-success
Title: Success
Stretch: False (no full screen on all devices)
Button(s): OK

Success message

Information

You should generally use a message toast (sap.m.MessageToast) to display success messages instead of a dialog (sap.m.Dialog).

Information Message

Information messages provide information the user needs to acknowledge, but which does not involve a decision. The message provides information that is useful and relevant, but never critical.

Control: sap.m.MessageBox
Icon: sap-icon://message-information
Title: Information
Stretch: False (no full screen on all devices)

Button(s): OK

Information message

Confirmation Message

Control: sap.m.MessageBox
Icon: sap-icon://question-mark
Title: (such as “Approve”, “Reject”, or “Delete”)
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message

Confirmation Message with “Note” Section

Warning

Control: sap.m.Dialog
Type: Message
Icon: sap-icon://question-mark
Title: Such as “Approve” or “Reject”
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message with note

Confirmation for “Delete”

If the user clicks Delete, display a “Delete” dialog that confirms the delete action.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Delete
Stretch: False (no full screen on all devices)

Button(s): Delete, Cancel

Use cases for delete confirmation messages in object page and list reports

a) No context is available. For example, neither the ID nor the description of the business object are available at the time of deletion.
Body text: Delete this <object>?

Confirmation for 'Delete' action

b) The ID of the object is available.
Body text: Delete <object> <object ID>?

Confirmation for 'Delete' action with object ID

c) The object ID and description are both available at the time of deletion.
Body text: Delete <object> <object ID> “<object description>”?

Confirmation for 'Delete' action with object ID and description

Developer Hint

Components

Show Details button

If details are available, the application has three options to display the text. Text can be displayed as:

Plain
Formatted
The original code format

Message details - Plain text

Message details - Formatted text

Message details with code excerpt

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

Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message Box (SAPUI5 samples)

Dialog

Usage

Use the dialog if:

You want to display complex content (that is not a floorplan), but don’t want the user to navigate away from the current page.
You want to display an additional step or process that needs to be confirmed by a user action.
You want to enable the user to create an object with a small number of fields (up to 8 fields).

Do not use the dialog if:

You want to display a simple message. Use the message box instead.
You just want to confirm a successful action.
You do not want to interrupt the user.
You want to enable users to create an object with more than 8 fields. Use an object page instead.
You want to display a floorplan. Floorplans are not meant to be displayed inside a dialog.

Responsiveness

The dialog provides different behavior on a smartphone than on a tablet or desktop. We distinguish between “cozy” and “compact” dialogs. For more information, see content density.

The buttons in the toolbar are aligned differently on the various devices. On a smartphone, they extend across the entire footer toolbar, but on a tablet or desktop device, they are right-aligned.

Size S (Smartphone)

Full Screen Dialog

Position of the Action Buttons

On smartphones, a dialog can have one or two actions, which are located in the footer and right-aligned.

Full screen dialog - Size S

When to Open Full Screen or Modal

Always display message dialogs as modals. There is no need to display a simple message in a full screen dialog. If you want to display a simple message, use the message box instead.

Size M (Tablet)

By default, the dialog can have up to two action buttons in the footer. The action buttons in the toolbar are right-aligned. Use cozy mode on tablet devices.

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Size L (Desktop)

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Dialog in compact mode - Size L

Layout

Position on the Screen

The dialog is positioned in the center of the screen. It opens in a modal window to ensure that it attracts the user’s attention when it displays emergency states.

On a smartphone, the stretch property allows you to achieve full screen behavior.

Behavior and Interaction

Navigation in a Dialog

You can let users navigate to another page within the dialog. On the second page, an arrow at the top of the dialog allows users to navigate back to the first page.

Navigation pattern list - Size L

Navigation pattern details - Size L

Resizable

You can let users change the size of the dialog (property resizable = “true). The resizable indicator then shows in the bottom-right corner of the dialog.

Resizable indicator in the bottom right-hand corner - Size L

Draggable

By clicking and holding on the heading, users can drag the dialog to another position (property draggable = “true”).

Dialog can be moved by dragging the title - Size L

Messaging Within a Dialog

Do not show message popovers within dialogs. Use highlighting to show issues with content fields. For more information, see form field validation.

Editing and Saving Content

If a dialog is used for editing, keep it simple. If you need more than 8 editable fields, consider other solutions instead, such as navigation to a detail page.

The data in the dialog is only saved when the user clicks Create or Save. Use form field validation within the dialog to make users aware of any errors.

The data in the dialog is lost if the page is refreshed during the editing process (also in the draft scenario), or if the user chooses Cancel.

Highlighted form fields in a dialog - Size S

Types

Standard Dialog

Use the standard dialog unless you need one of the specialized dialogs below. The standard dialog has a header with a grey background, and no icon.

Other Types of Dialogs

Personalization dialog
Select dialog
Table select dialog
Value help dialog
View settings dialog
Busy dialog

Message Box

Components

The dialog contains the following sections and options:

Title: Title text appears in the dialog header.

Subheader (optional): Subheaders appear below the main header. Since the subheader is not part of the content area, it is not scrollable.

Content: This area contains the actual content of the dialog.

Footer with actions: The footer can contain up to two buttons (optional). If no buttons are defined, the default Close button is shown.

Example of a dialog structure (Cozy)

Emphasized Buttons in a Dialog

Never use an emphasized button for Cancel.

Emphasized button in the dialog footer

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

Toolbar (guidelines)

Implementation

Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Message Box (SAPUI5 samples)
Toolbar (SAPUI5 API reference)
Dialog (SAPUI5 API reference)

Message Box

Usage

Use the message box if:

You want to display non-field-related messages.
You want to interrupt the user while he or she performs an action.
You want to display error, warning, success, confirmation, or information messages.
You need to interrupt the user for some other reason.
You need the user to acknowledge the message.
You need the user to make a decision.

Do not use the message box if:

You want to display a short success message. (Use a toast instead. For more information, see message toast.)
You can show the message directly in a form field.

Responsiveness

Types

The following categories of messages are available:

Error
Warning
Success
Information
Confirmation

Error Message

Control: sap.m.MessageBox
Icon: sap-icon://message-error
Title: Error
Stretch: False (no full screen on all devices)

Error message with one action

Error message with two actions

Text guidelines for an error message:

Do not just describe the problem; tell the user how to resolve it.
In the short text, speak the language of the end user. Do not include system or configuration details.
If the solution is more involved or technical, add a long text.
Do not repeat the short text in the long text. They both appear together on the screen.

Warning Message

Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Warning
Stretch: False (no full screen on all devices)

Use cases for warnings

a) No decision required: Formulate the message as a statement.
Button(s): OK

Warning message with 'OK' button

b) Decision to continue required: Formulate the message as a statement.

Button(s): OK, Cancel

Warning message with 'OK' and 'Cancel' buttons

c) Specific decision required, with one action

Use a relevant action button. The message may also be formulated as a question.
Button(s): Leave Page, Cancel

Warning message with action and 'Cancel' buttons

Success Message

Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message.

Control: sap.m.MessageBox
Icon: sap-icon://message-success
Title: Success
Stretch: False (no full screen on all devices)
Button(s): OK

Success message

Information

You should generally use a message toast (sap.m.MessageToast) to display success messages instead of a dialog (sap.m.Dialog).

Information Message

Information messages provide information the user needs to acknowledge, but which does not involve a decision. The message provides information that is useful and relevant, but never critical.

Control: sap.m.MessageBox
Icon: sap-icon://message-information
Title: Information
Stretch: False (no full screen on all devices)

Button(s): OK

Information message

Confirmation Message

Control: sap.m.MessageBox
Icon: sap-icon://question-mark
Title: (such as “Approve”, “Reject”, or “Delete”)
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message

Confirmation Message with “Note” Section

Warning

Control: sap.m.Dialog
Type: Message
Icon: sap-icon://question-mark
Title: Such as “Approve” or “Reject”
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message with note

Confirmation for “Delete”

If the user clicks Delete, display a “Delete” dialog that confirms the delete action.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Delete
Stretch: False (no full screen on all devices)

Button(s): Delete, Cancel

Confirmation for 'Delete' action

Components

Show Details button

If details are available, the application has three options to display the text. Text can be displayed as:

Plain
Formatted
The original code format

Message details - Plain text

Message details - Formatted text

Message details with code excerpt

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

Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message Box (SAPUI5 samples)

Popover

Usage

Use a popover if:

You need to define your own structure.
You want to show UI elements that are not available with the quick view.

Do not use a popover if:

The quick view is more appropriate for your use case.
The objects are in the list in a list-detail layout (in this case, the details are shown in the details area).

Responsiveness

The popover can be used in the following ways:

Responsive and adaptive: sap.m.ResponsivePopover
Shows a dialog on smartphones (to be closed with an X) and a popover on a tablet or desktop.
Non-responsive: sap.m.Popover
Always shows a popover. Only use a non-responsive popover if it has very little content. On smartphones, the popover should not use more than a third of the phone’s real estate.

Layout

Structure of Popover

The header and footer are generally optional. The other elements are as follows:

Back (1) – optional
Needs to be implemented if the user can trigger further popovers. Always show popovers in place. Never place them on top of each other.

Close function (3)
This feature closes the dialog. It is available for smartphones only and is set automatically (sap.m.ResponsivePopover).

Content (4)
Ensure that the content has a basic design and shows only the most important information. We recommend the following:

Use no more than two groups.
Limit the total number of fields to eight.
Use single-column tables.
Use micro charts.

Actions (5) – optional

Popover – General structure

Popover – Example

Placement Types

If you set the placement type to “Auto”, the position of the popover in relation to the reference control is determined automatically, depending on the available space.

Popover with default placement type - Right

Developer Hint

More information on the different placement types can be found here.

Modal Mode

The popover in modal mode opens in a modal window, which blocks the whole screen and attracts the user’s attention.

Popover – Modal

Behavior and Interaction

Opening a Popover

The user opens a popover by clicking an object represented by a text link or an icon. To improve accessibility, we recommend using texts, such as the name or ID of an object.

Closing a Popover

The popover is closed when the user clicks outside the popover or selects an action within the popover.

Guidelines

Show status information as text fields in a content group. You can use semantic text colors.
You can define a height for the popover. If the content exceeds the height, a scrollbar is displayed.

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

Quick View (guidelines)

Implementation

Popover (SAPUI5 samples)

Responsive Popover (SAPUI5 samples)

Value Help Dialog

Intro

The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and select multiple ranges. The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.

Usage

Use the value help dialog if:

The user needs to use different attributes (such as city, company name, and so on) to find an object.
The user is searching within a dataset containing more than 200 items.
The user needs to define and select ranges and exclusions.

Do not use the value help dialog if:

There is a simpler control that fits the use case. Always start with the least complex control (for example, use select instead of value help if the user needs to select only one item from a short list). For more information on when to use which control, see Selection Controls – Overview.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Value help dialog - Size S

Value help dialog - Size M

Value help dialog - Size L

Components

The value help dialog contains the following components:

1) Header bar
2) Icon tab bar / list control (phone)
3) Search template (optional)
4) Basic search
5) Advanced search
6) Result list
7) Items row (selected items, excluded items)
8) Footer toolbar
9) Include/exclude areas for range selection

Components of the Value Help Dialog

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Icon Tab Bar on Tablet/Desktop and List Control on Phone (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem) Select from List and
Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Select from List and the Define Conditions tab.

Search Template (3)

Search templates allow the user to display different or additional fields in the advanced search field and the results list. Depending on the use case, the user can switch between the different search templates in order to use different fields when searching. For example, the search template “Customer (by company code)” displays the additional field “Company code” in the advanced search and result list.

Basic Search (4)

The basic search finds all results that are somehow related to the input. For example, the search term “A” returns all the results containing the letter “A”.

Always offer the basic search in the value help dialog. Position the basic search to the right of the search template control. If there is no search template control, left-align the basic search.

Advanced Search (5)

The advanced search offers a search field for each column in the result list.

Value help dialog - Advanced search

For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields/advanced search fields are added automatically to the advanced search area.
There is a toggle link to show and hide the advanced search.
In each of the filter fields, users can use operators like “between” or “lower than” to define ranges.

Always collapse the advanced search by default.

Note that the value help icon of the business object ID field and description field for the business object that opened the current value help dialog will open only the Define Conditions screen. The entire value help dialog is not shown in order to prevent endless loops. For example, the value help icon of the customer ID or description field in a Select: Customer value help dialog will navigate directly to the Define Conditions screen.

How the Advanced Search Works

The user can include operators (such as “=“) to define the ranges directly within the field without moving to the fields of the Define Conditions tab.

The user must type the following to get results:

Operator	Input Notation	Example
between	value…value	000…100
equal to	=value	=0001
contains	value	1
starts with	value*	001*
ends with	*value	*5
less than	<value	<100
less than or equal to	<=value	<=200
greater than	>value	>0300
greater than or equal to	>=value	>=0500
not equal to*	!(=value)	!(=0)

* Note that there isn’t an explicit “not equal to” operator. Instead, you need to use “Exclude” (!) in conjunction with the “equal to” operator (=).

Advanced search using operator

Result List (6)

You can prefill the result list of the value help dialog by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the results list.

Selected/Excluded Items Row (7)

The row for Selected Items / Excluded Items is displayed in the panel container (see panel for more information). Each item or range that is selected or excluded is displayed as a token in the selected or excluded item row.

On desktops, the selection area with the selected and excluded items row is initially expanded.
On tablets and phones, the selection area with the selected and excluded item row is initially collapsed.

Footer Toolbar (8)

The footer bar offers the OK and Cancel buttons.

Include/Exclude Areas for Range Selection (9)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

equal to
between
less than
less than or equal to
greater than
greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

Developer Hint

For information on how to manage white space characters (blanks) when users copy and paste text into input controls, see Removing Leading and Trailing White Space.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking the Go button. The search results are shown in the result list.
If the input field where the user is coming from contains data, this data is transferred to the basic search of the value help dialog and the results are then filtered accordingly.
The basic search performs a search across all fields that are displayed in the advanced search and the result list.

Item and Range Selection

Depending on your use case, the value help dialog can offer different selection options:

Select a single item
Select a single range
Select multiple items
Select/exclude multiple ranges

Users open the value help dialog by clicking the value help icon of the input field. The next steps depend on the use case and form factor (smartphone or desktop/tablet).

The different use cases are described in the sections below.

Select a Single Item (Smartphone)

Tapping the value help icon opens the Select from List tab. As soon as an item is selected, the value help dialog closes automatically.

Single item selection on a smartphone

Select a Single Item (Desktop/Tablet)

Clicking the value help icon opens the Select: [Object] screen (for example, Select: Company). The icon tab bar and the Selected Items / Excluded Items row are hidden. As soon as an item is selected, the value help dialog closes automatically.

Single item selection on a desktop/tablet device

Select a Single Range (Smartphone)

Tapping the value help icon opens the Define Condition tab.

Single range selection on a smartphone

Select a Single Range (Desktop/Tablet)

Clicking the value help icon opens the Define Condition: [Object] tab (for example, Define Condition: Company).

The icon tab bar and the Selected Items / Excluded Items row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Single range selection on a desktop/tablet device

Select Multiple Items | Select/Exclude Multiple Ranges (Smartphone)

Tapping the value help icon displays the start dialog.

The Select from List tab is used to select multiple items
The Define Conditions tab is used to select and exclude ranges.

Both are added as tokens to the Selected Items / Excluded Items row at the bottom of the start dialog.

Start dialog for multi-item and multi-range selection on a smartphone

Multi-range selection on a smartphone

Multi-item selection on a smartphone

Advanced search on a smartphone

Select Multiple Items | Select/Exclude Multiple Ranges (Desktop/Tablet)

Clicking the value help icon displays the icon tab bar with the Select from List and Define Conditions tabs.

The Select from List tab is used to select multiple items
The Define Conditions tab is used to select and exclude ranges.

Both are added as tokens to the Selected Items / Excluded Items row at the bottom of the screen.

Multi-item and multi-range selection on a desktop/tablet device

Select/Exclude Multiple Ranges (Smartphone)

Tapping the value help icon opens the start dialog with the Define Conditions tab.

The selected values are added as tokens to the Selected Items / Excluded Items row at the bottom of the start dialog.

Start dialog for multi-range selection on a smartphone

Multi-range selection on a smartphone

Select/Exclude Multiple Ranges (Desktop/Tablet)

Clicking the value help icon opens the Define Conditions: [Object] tab (for example, Define Conditions: Company). The icon tab bar is hidden and the Selected Items / Excluded Items row is displayed.

Multi-range selection on a desktop/tablet device

Selected Items / Excluded Items

Each item that is selected from the result list on the Select from List tab is displayed as a token in the Selected Items row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the Selected Items / Excluded Items row.

Copying and Pasting Multiple Values

The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values at once (copied from the clipboard) .

In both areas, users can paste more than one value into the value input field. In this case, the condition row repeats with the previously selected condition and shows one value per row.

If there are more than 10 rows of conditions in either the Include or Exclude area, pagination is added to top of the respective area. A token appears next to each pasted value on the Selected Items / Excluded Items row at the bottom of the value help dialog.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Starting dialog: [Object] (for example, Company)
Select from list dialog: Select from List
Advanced search dialog: Advanced Search
Single range selection: Define Condition
Multiple range selection: Define Conditions

For tablet and desktop devices:

Multiple items combined with selection of multiple ranges: [Object] (for example, Company)
Single item selection: Select: [Object] (for example, Select: Company)
Single range selection: Define Condition: [Object] (for example, Define Condition: Company)
Multiple range selection: Define Conditions: [Object] (for example, Define Conditions: Company)

Advanced Search

If necessary, also provide value help for fields offered in the advanced search. However, do not provide the full value help dialog for the ID and description fields of the business object that is being selected. For these two fields, make sure that the value help icon opens only the Define Conditions screen (range selection).

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

Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
List (guidelines)
Panel (guidelines)

Implementation

Smart Filter Bar with value help dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)

Message Box

Usage

Use the message box if:

You want to display non-field-related messages.
You want to interrupt the user while he or she performs an action.
You want to display error, warning, success, confirmation, or information messages.
You need to interrupt the user for some other reason.
You need the user to acknowledge the message.
You need the user to make a decision.

Do not use the message box if:

You want to display a short success message. (Use a toast instead. For more information, see message toast.)
You can show the message directly in a form field.

Responsiveness

Types

The following categories of messages are available:

Error
Warning
Success
Information
Confirmation

Error Message

Control: sap.m.MessageBox
Icon: sap-icon://message-error
Title: Error
Stretch: False (no full screen on all devices)

Error message with one action

Error message with two actions

Text guidelines for an error message:

Do not just describe the problem; tell the user how to resolve it.
In the short text, speak the language of the end user. Do not include system or configuration details.
If the solution is more involved or technical, add a long text.
Do not repeat the short text in the long text. They both appear together on the screen.

Warning Message

Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Warning
Stretch: False (no full screen on all devices)

Use cases for warnings

a) No decision required: Formulate the message as a statement.
Button(s): OK

Warning message with 'OK' button

b) Decision to continue required: Formulate the message as a statement.

Button(s): OK, Cancel

Warning message with 'OK' and 'Cancel' buttons

c) Specific decision required, with one action

Use a relevant action button. The message may also be formulated as a question.
Button(s): Leave Page, Cancel

Warning message with action and 'Cancel' buttons

Success Message

Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message.

Control: sap.m.MessageBox
Icon: sap-icon://message-success
Title: Success
Stretch: False (no full screen on all devices)
Button(s): OK

Success message

Information

You should generally use a message toast (sap.m.MessageToast) to display success messages instead of a dialog (sap.m.Dialog).

Information Message

Information messages provide information the user needs to acknowledge, but which does not involve a decision. The message provides information that is useful and relevant, but never critical.

Control: sap.m.MessageBox
Icon: sap-icon://message-information
Title: Information
Stretch: False (no full screen on all devices)

Button(s): OK

Information message

Confirmation Message

Control: sap.m.MessageBox
Icon: sap-icon://question-mark
Title: (such as “Approve”, “Reject”, or “Delete”)
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message

Confirmation Message with “Note” Section

Warning

Control: sap.m.Dialog
Type: Message
Icon: sap-icon://question-mark
Title: Such as “Approve” or “Reject”
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message with note

Confirmation for “Delete”

If the user clicks Delete, display a “Delete” dialog that confirms the delete action.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Delete
Stretch: False (no full screen on all devices)

Button(s): Delete, Cancel

Confirmation for 'Delete' action

Components

Show Details button

If details are available, the application has three options to display the text. Text can be displayed as:

Plain
Formatted
The original code format

Message details - Plain text

Message details - Formatted text

Message details with code excerpt

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

Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message Box (SAPUI5 samples)

Dialog

Usage

Use the dialog if:

You want to display complex content (that is not a floorplan), but don’t want the user to navigate away from the current page.
You want to display an additional step or process that needs to be confirmed by a user action.
You want to enable the user to create an object with a small number of fields (up to 8 fields).

Do not use the dialog if:

You want to display a simple message. Use the message box instead.
You just want to confirm a successful action.
You do not want to interrupt the user.
You want to enable users to create an object with more than 8 fields. Use an object page instead.
You want to display a floorplan. Floorplans are not meant to be displayed inside a dialog.

Responsiveness

The dialog provides different behavior on a smartphone than on a tablet or desktop. We distinguish between “cozy” and “compact” dialogs. For more information, see content density.

The buttons in the toolbar are aligned differently on the various devices. On a smartphone, they extend across the entire footer toolbar, but on a tablet or desktop device, they are right-aligned.

Size S (Smartphone)

Full Screen Dialog

Position of the Action Buttons

On smartphones, a dialog can have one or two actions, which are located in the footer and right-aligned.

Full screen dialog - Size S

When to Open Full Screen or Modal

Always display message dialogs as modals. There is no need to display a simple message in a full screen dialog. If you want to display a simple message, use the message box instead.

Size M (Tablet)

By default, the dialog can have up to two action buttons in the footer. The action buttons in the toolbar are right-aligned. Use cozy mode on tablet devices.

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Size L (Desktop)

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Dialog in compact mode - Size L

Layout

Position on the Screen

The dialog is positioned in the center of the screen. It opens in a modal window to ensure that it attracts the user’s attention when it displays emergency states.

On a smartphone, the stretch property allows you to achieve full screen behavior.

Behavior and Interaction

Navigation in a Dialog

You can let users navigate to another page within the dialog. On the second page, an arrow at the top of the dialog allows users to navigate back to the first page.

Navigation pattern list - Size L

Navigation pattern details - Size L

Resizable

You can let users change the size of the dialog (property resizable = “true). The resizable indicator then shows in the bottom-right corner of the dialog.

Resizable indicator in the bottom right-hand corner - Size L

Draggable

By clicking and holding on the heading, users can drag the dialog to another position (property draggable = “true”).

Dialog can be moved by dragging the title - Size L

Messaging Within a Dialog

Do not show message popovers within dialogs. Use highlighting to show issues with content fields. For more information, see form field validation.

Editing and Saving Content

If a dialog is used for editing, keep it simple. If you need more than 8 editable fields, consider other solutions instead, such as navigation to a detail page.

The data in the dialog is only saved when the user clicks Create or Save. Use form field validation within the dialog to make users aware of any errors.

The data in the dialog is lost if the page is refreshed during the editing process (also in the draft scenario), or if the user chooses Cancel.

Highlighted form fields in a dialog - Size S

Types

Standard Dialog

Use the standard dialog unless you need one of the specialized dialogs below. The standard dialog has a header with a grey background, and no icon.

Other Types of Dialogs

Personalization dialog
Select dialog
Table select dialog
Value help dialog
View settings dialog
Busy dialog

Message Box

Components

The dialog contains the following sections and options:

Title: Title text appears in the dialog header.

Subheader (optional): Subheaders appear below the main header. Since the subheader is not part of the content area, it is not scrollable.

Content: This area contains the actual content of the dialog.

Footer with actions: The footer can contain up to two buttons (optional). If no buttons are defined, the default Close button is shown.

Example of a dialog structure (Cozy)

Emphasized Buttons in a Dialog

Never use an emphasized button for Cancel.

Emphasized button in the dialog footer

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

Toolbar (guidelines)

Implementation

Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Message Boxes (SAPUI5 samples)
Toolbar (SAPUI5 API reference)
Dialog (SAPUI5 API reference)

Value Help Dialog

Usage

Use the value help dialog if:

The user needs to use different attributes (such as city, company name, and so on) to find an object.
The user is searching within a dataset containing more than 200 items.
The user needs to define and select ranges and exclusions.

Do not use the value help dialog if:

There is a simpler control that fits the use case. Always start with the least complex control (for example, use select instead of value help if the user needs to select only one item from a short list). For more information on when to use which control, see Selection Controls – Overview.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Value help dialog - Size S

Value help dialog - Size M

Value help dialog - Size L

Components

The value help dialog contains the following components:

Components of the Value Help Dialog

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Icon Tab Bar on Tablet/Desktop and List Control on Phone (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem) Select from List and
Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Select from List and the Define Conditions tab.

Search Template (3)

Basic Search (4)

The basic search finds all results that are somehow related to the input. For example, the search term “A” returns all the results containing the letter “A”.

Always offer the basic search in the value help dialog. Position the basic search to the right of the search template control. If there is no search template control, left-align the basic search.

Advanced Search (5)

The advanced search offers a search field for each column in the result list.

Value help dialog - Advanced search

For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields/advanced search fields are added automatically to the advanced search area.
There is a toggle link to show and hide the advanced search.
In each of the filter fields, users can use operators like “between” or “lower than” to define ranges.

Always collapse the advanced search by default.

How the Advanced Search Works

The user can include operators (such as “=“) to define the ranges directly within the field without moving to the fields of the Define Conditions tab.

The user must type the following to get results:

Operator	Input Notation	Example
between	value…value	000…100
equal to	=value	=0001
contains	value	1
starts with	value*	001*
ends with	*value	*5
less than	<value	<100
less than or equal to	<=value	<=200
greater than	>value	>0300
greater than or equal to	>=value	>=0500
not equal to*	!(=value)	!(=0)

* Note that there isn’t an explicit “not equal to” operator. Instead, you need to use “Exclude” (!) in conjunction with the “equal to” operator (=).

Advanced search using operator

Result List (6)

You can prefill the result list of the value help dialog by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the results list.

Selected/Excluded Items Row (7)

On desktops, the selection area with the selected and excluded items row is initially expanded.
On tablets and phones, the selection area with the selected and excluded item row is initially collapsed.

Footer Toolbar (8)

The footer bar offers the OK and Cancel buttons.

Include/Exclude Areas for Range Selection (9)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

equal to
between
less than
less than or equal to
greater than
greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

Developer Hint

For information on how to manage whitespace characters (blanks) when users copy and paste text into input controls, see Removing Leading and Trailing Whitespace.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking the Go button. The search results are shown in the result list.
If the input field where the user is coming from contains data, this data is transferred to the basic search of the value help dialog and the results are then filtered accordingly.
The basic search performs a search across all fields that are displayed in the advanced search and the result list.

Item and Range Selection

Depending on your use case, the value help dialog can offer different selection options:

Select a single item
Select a single range
Select multiple items
Select/exclude multiple ranges

Users open the value help dialog by clicking the value help icon of the input field. The next steps depend on the use case and form factor (smartphone or desktop/tablet).

The different use cases are described in the sections below.

Select a Single Item (Smartphone)

Tapping the value help icon opens the Select from List tab. As soon as an item is selected, the value help dialog closes automatically.

Single item selection on a smartphone

Select a Single Item (Desktop/Tablet)

Single item selection on a desktop/tablet device

Select a Single Range (Smartphone)

Tapping the value help icon opens the Define Condition tab.

Single range selection on a smartphone

Select a Single Range (Desktop/Tablet)

Clicking the value help icon opens the Define Condition: [Object] tab (for example, Define Condition: Company).

The icon tab bar and the Selected Items / Excluded Items row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Single range selection on a desktop/tablet device

Select Multiple Items | Select/Exclude Multiple Ranges (Smartphone)

Tapping the value help icon displays the start dialog.

The Select from List tab is used to select multiple items
The Define Conditions tab is used to select and exclude ranges.

Both are added as tokens to the Selected Items / Excluded Items row at the bottom of the start dialog.

Start dialog for multi-item and multi-range selection on a smartphone

Multi-range selection on a smartphone

Multi-item selection on a smartphone

Advanced search on a smartphone

Select Multiple Items | Select/Exclude Multiple Ranges (Desktop/Tablet)

Clicking the value help icon displays the icon tab bar with the Select from List and Define Conditions tabs.

The Select from List tab is used to select multiple items
The Define Conditions tab is used to select and exclude ranges.

Both are added as tokens to the Selected Items / Excluded Items row at the bottom of the screen.

Multi-item and multi-range selection on a desktop/tablet device

Select/Exclude Multiple Ranges (Smartphone)

Tapping the value help icon opens the start dialog with the Define Conditions tab.

The selected values are added as tokens to the Selected Items / Excluded Items row at the bottom of the start dialog.

Start dialog for multi-range selection on a smartphone

Multi-range selection on a smartphone

Select/Exclude Multiple Ranges (Desktop/Tablet)

Multi-range selection on a desktop/tablet device

Selected Items / Excluded Items

Each item that is selected from the result list on the Select from List tab is displayed as a token in the Selected Items row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the Selected Items / Excluded Items row.

Copying and Pasting Multiple Values

The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values at once (copied from the clipboard) .

In both areas, users can paste more than one value into the value input field. In this case, the condition row repeats with the previously selected condition and shows one value per row.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Starting dialog: [Object] (for example, Company)
Select from list dialog: Select from List
Advanced search dialog: Advanced Search
Single range selection: Define Condition
Multiple range selection: Define Conditions

For tablet and desktop devices:

Multiple items combined with selection of multiple ranges: [Object] (for example, Company)
Single item selection: Select: [Object] (for example, Select: Company)
Single range selection: Define Condition: [Object] (for example, Define Condition: Company)
Multiple range selection: Define Conditions: [Object] (for example, Define Conditions: Company)

Advanced Search

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

Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
List (guidelines)
Panel (guidelines)

Implementation

Smart Filter Bar with value help dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)

Value Help Dialog

Usage

Use the value help dialog if:

The user needs to use different attributes (such as city, company name, and so on) to find an object.
The user is searching within a dataset containing more than 200 items.
The user needs to define and select ranges and exclusions.

Do not use the value help dialog if:

There is a simpler control that fits the use case. Always start with the least complex control (for example, use select instead of value help if the user needs to select only one item from a short list). For more information on when to use which control, see Selection Controls – Overview.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Value help dialog - Size S

Value help dialog - Size M

Value help dialog - Size L

Components

The value help dialog contains the following components:

Components of the Value Help Dialog

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Icon Tab Bar on Tablet/Desktop and List Control on Phone (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem) Select from List and
Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Select from List and the Define Conditions tab.

Search Template (3)

Basic Search (4)

The basic search finds all results that are somehow related to the input. For example, the search term “A” returns all the results containing the letter “A”.

Always offer the basic search in the value help dialog. Position the basic search to the right of the search template control. If there is no search template control, left-align the basic search.

Advanced Search (5)

The advanced search offers a search field for each column in the result list.

Value help dialog - Advanced search

For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields/advanced search fields are added automatically to the advanced search area.
There is a toggle link to show and hide the advanced search.
In each of the filter fields, users can use operators like “between” or “lower than” to define ranges.

Always collapse the advanced search by default.

How the Advanced Search Works

The user can include operators (such as “=“) to define the ranges directly within the field without moving to the fields of the Define Conditions tab.

The user must type the following to get results:

Operator	Input Notation	Example
between	value…value	000…100
equal to	=value	=0001
contains	value	1
starts with	value*	001*
ends with	*value	*5
less than	<value	<100
less than or equal to	<=value	<=200
greater than	>value	>0300
greater than or equal to	>=value	>=0500
not equal to*	!(=value)	!(=0)

* Note that there isn’t an explicit “not equal to” operator. Instead, you need to use “Exclude” (!) in conjunction with the “equal to” operator (=).

Advanced search using operator

Result List (6)

You can prefill the result list of the value help dialog by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the results list.

Selected/Excluded Items Row (7)

On desktops, the selection area with the selected and excluded items row is initially expanded.
On tablets and phones, the selection area with the selected and excluded item row is initially collapsed.

Footer Toolbar (8)

The footer bar offers the OK and Cancel buttons.

Include/Exclude Areas for Range Selection (9)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

equal to
between
less than
less than or equal to
greater than
greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

Developer Hint

For information on how to manage whitespace characters (blanks) when users copy and paste text into input controls, see Removing Leading and Trailing Whitespace.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking or tapping the Go button. The search results are shown in the result list.
If the input field where the user is coming from contains data, this data is transferred to the basic search of the value help dialog and the results are then filtered accordingly.
The basic search performs a search across all fields that are displayed in the advanced search and the result list.

Item and Range Selection

Depending on your use case, the value help dialog can offer different selection options:

Select a single item
Select a single range
Select multiple items, select/exclude multiple ranges
Select/exclude multiple ranges

Users open the value help dialog by clicking or tapping the value help icon of the input field. The next steps depend on the use case and form factor (smartphone or desktop/tablet).

The different use cases are described in the sections below.

Select a Single Item (Smartphone)

Tapping the value help icon opens the Select from List tab. As soon as an item is selected, the value help dialog closes automatically.

Single item selection on a smartphone

Select a Single Item (Desktop/Tablet)

Single item selection on a desktop/tablet device

Select a Single Range (Smartphone)

Tapping the value help icon opens the Define Condition tab.

Single range selection on a smartphone

Select a Single Range (Desktop/Tablet)

Clicking the value help icon opens the Define Condition: [Object] tab (for example, Define Condition: Company).

The icon tab bar and the Selected Items / Excluded Items row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Single range selection on a desktop/tablet device

Select Multiple Items | Select/Exclude Multiple Ranges (Smartphone)

Tapping the value help icon displays the start dialog.

The Select from List tab is used to select multiple items
The Define Conditions tab is used to select and exclude ranges.

Both are added as tokens to the Selected Items / Excluded Items row at the bottom of the start dialog.

Start dialog for multi-item and multi-range selection on a smartphone

Multi-range selection on a smartphone

Multi-item selection on a smartphone

Advanced search on a smartphone

Select Multiple Items | Select/Exclude Multiple Ranges (Desktop/Tablet)

Clicking the value help icon displays the icon tab bar with the Select from List and Define Conditions tabs.

The Select from List tab is used to select multiple items
The Define Conditions tab is used to select and exclude ranges.

Both are added as tokens to the Selected Items / Excluded Items row at the bottom of the screen.

Multi-item and multi-range selection on a desktop/tablet device

Select/Exclude Multiple Ranges (Smartphone)

Tapping the value help icon opens the start dialog with the Define Conditions tab.

The selected values are added as tokens to the Selected Items / Excluded Items row at the bottom of the start dialog.

Start dialog for multi-range selection on a smartphone

Multi-range selection on a smartphone

Select/Exclude Multiple Ranges (Desktop/Tablet)

Multi-range selection on a desktop/tablet device

Selected Items / Excluded Items

Each item that is selected from the result list on the Select from List tab is displayed as a token in the Selected Items row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the Selected Items / Excluded Items row.

Copying and Pasting Multiple Values

The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values at once (copied from the clipboard) .

In both areas, users can paste more than one value into the value input field. In this case, the condition row repeats with the previously selected condition and shows one value per row.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Starting dialog: [Object] (for example, Company)
Select from list dialog: Select from List
Advanced search dialog: Advanced Search
Single range selection: Define Condition
Multiple range selection: Define Conditions

For tablet and desktop devices:

Multiple items combined with selection of multiple ranges: [Object] (for example, Company)
Single item selection: Select: [Object] (for example, Select: Company)
Single range selection: Define Condition: [Object] (for example, Define Condition: Company)
Multiple range selection: Define Conditions: [Object] (for example, Define Conditions: Company)

Advanced Search

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

Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
List (guidelines)
Panel (guidelines)

Implementation

Smart Filter Bar with value help dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)

Select Dialog

The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.

A more enhanced dialog for single selection and multiselection is the value help dialog as it offers range selection and excluding functions.

Usage

Use the select dialog if:

Users need to select one or more entries from a comprehensive list that contains multiple attributes or values.

Do not use the select dialog if:

Users need to pick one item from a predefined set of options that contains one attribute or value only such as languages. In this case, consider using the combo box or select instead.
Your use case requires more enhanced functionalities such as a selection based on ranges. For the selection of values, consider using the value help dialog instead.
Your use case requires tabs, filters, or an Add New functionality in the select dialog. In this case, use a standard dialog instead.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The display of the select control depends on the device. On phones, the selection list takes up the whole screen. On desktop and tablet devices it appears as a popover.

Size S

Single select dialog in full screen on smartphone

Multi-select dialog in full screen on smartphone

Size M

Single select dialog on tablet

Multi-select dialog on tablet

Size L

Single select dialog on desktop

Multi-select dialog on desktop

Components

Dialog Header

You need to set the title of the dialog header (1). We recommend the following form:

Single selection

Select

Example: Select Product

Multi-selection

Select

Example: Select Products

Search

The first element in the dialog is a standard search field (2).

Info Toolbar

The info toolbar (3) is only available in multi-selection mode. It shows the number of selected items in the following form:

Selected :

Example: Selected Products: 2

Content

Button Toolbar

The button toolbar (5) contains two buttons: Select and Cancel. Select takes over the selection, while Cancel resets the selection to the state it was in when the dialog was opened.

Components of the select dialog. Left: single select, right: multi select

Behavior and Interaction

Single Select

Once users select an entry, the select dialog is closed and the selected entry is taken over. If applicable, the entry is displayed in the field from which the dialog was triggered.

Multi-Select

Search

The user can search items.

Resize and Drag Dialog

You can make the select dialog resizable and draggable by setting the corresponding properties (also called resizable and draggable) to “true”.

A resizable dialog makes sense if the items inside have long names or descriptions.

A draggable dialog allows users to see the app content behind the dialog.

Guidelines

Both features are optional. However, even if you only need one, always set both of them to “true” to ensure consistency.

Guidelines

List Options

If you need to indicate that all items apply (for example, as a list filter), provide All as an option and place it at the beginning of the list.

Select list with '(None)'

Search Behavior

Two types of search behavior are available:

(1) A live search, also known as “search-as-you-type” (property: liveChange), which is triggered by each character that the user enters or deletes.

(2) A manual search, which is triggered explicitly after the user enters text in the search field and clicks the Search icon or presses the ENTER key.

Reset/Remember Selections

By default, the selection is reset when the dialog is closed. This allows users to make a new selection when they reopen the dialog and makes sense when users need to add multiple items to a table.

Selection is reset after the dialog is closed

Selection is remembered after the dialog is reopened

This also works in single-select dialogs. There, if users click the remembered item again, the dialog closes and they do not have to explicitly click Cancel.

Infobar

In multi-selection mode, an infobar shows the number of selected items. Use the following format:

Selected: [Business Objects] Selected: [Number of Items]
Example: Products Selected: 2

Note that the infobar is not “sticky”. When the user scrolls down the list, the infobar scrolls off the screen.

“Clear” Button

The Clear button allows users to clear all the selected items. By default, the button is not shown. To display the button, set the showClearButton property to “true”.

Select dialog with 'Clear' button

Content

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

Combo Box (guidelines)
Select (guidelines)
Value Help (guidelines)
Search (guidelines)

Implementation

No links

Dialog

The dialog control (sap.m.dialog) interrupts the current app process to prompt the user for information or for a response. It forces a decision or a confirmation that needs to be signed off by the user.

Usage

Use the dialog if:

You want to display complex content (that is not a floorplan), but don’t want the user to navigate away from the current page.
You want to display an additional step or process that needs to be confirmed by a user action.
You want to enable the user to create an object with a small number of fields (up to 8 fields).

Do not use the dialog if:

You want to display a simple message. Use the message box instead.
You just want to confirm a successful action.
You do not want to interrupt the user.
You want to enable users to create an object with more than 8 fields. Use an object page instead.
You want to display a floorplan. Floorplans are not meant to be displayed inside a dialog.

Responsiveness

The dialog provides different behavior on a smartphone than on a tablet or desktop. We distinguish between “cozy” and “compact” dialogs. For more information, see content density.

The buttons in the toolbar are aligned differently on the various devices. On a smartphone, they extend across the entire footer toolbar, but on a tablet or desktop device, they are right-aligned.

Size S (Smartphone)

Full Screen Dialog

Position of the Action Buttons

On smartphones, a dialog can have one or two actions, which are located in the footer and right-aligned.

Full screen dialog - Size S

When to Open Full Screen or Modal

Always display message dialogs as modals. There is no need to display a simple message in a full screen dialog. If you want to display a simple message, use the message box instead.

Size M (Tablet)

By default, the dialog can have up to two action buttons in the footer. The action buttons in the toolbar are right-aligned. Use cozy mode on tablet devices.

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Size L (Desktop)

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Dialog in compact mode - Size L

Layout

Position on the Screen

The dialog is positioned in the center of the screen. It opens in a modal window to ensure that it attracts the user’s attention when it displays emergency states.

On a smartphone, the stretch property allows you to achieve full screen behavior.

Behavior and Interaction

Navigation in a Dialog

You can let users navigate to another page within the dialog. On the second page, an arrow at the top of the dialog allows users to navigate back to the first page.

Navigation pattern list - Size L

Navigation pattern details - Size L

Resizable

You can let users change the size of the dialog (property resizable = “true). The resizable indicator then shows in the bottom-right corner of the dialog.

Resizable indicator in the bottom right-hand corner - Size L

Draggable

By clicking and holding on the heading, users can drag the dialog to another position (property draggable = “true”).

Dialog can be moved by dragging the title - Size L

Messaging Within a Dialog

Do not show message popovers within dialogs. Use highlighting to show issues with content fields. For more information, see form field validation.

Editing and Saving Content

If a dialog is used for editing, keep it simple. If you need more than 8 editable fields, consider other solutions instead, such as navigation to a detail page.

The data in the dialog is only saved when the user click or taps Create or Save. Use form field validation within the dialog to make users aware of any errors.

The data in the dialog is lost if the page is refreshed during the editing process (also in the draft scenario), or if the user chooses Cancel.

Highlighted form fields in a dialog - Size S

Types

Standard Dialog

Use the standard dialog unless you need one of the specialized dialogs below. The standard dialog has a header with a grey background, and no icon.

Other Types of Dialogs

Personalization dialog
Select dialog
Table select dialog
Value help dialog
View settings dialog
Busy dialog

Message Box

Components

The dialog contains the following sections and options:

Title: Title text appears in the dialog header.

Subheader (optional): Subheaders appear below the main header. Since the subheader is not part of the content area, it is not scrollable.

Content: This area contains the actual content of the dialog.

Footer with actions: The footer can contain up to two buttons (optional). If no buttons are defined, the default Close button is shown.

Example of a dialog structure (Cozy)

Emphasized Buttons in a Dialog

Never use an emphasized button for Cancel.

Emphasized button in the dialog footer

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

Toolbar (guidelines)

Implementation

Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Message Boxes (SAPUI5 samples)
Toolbar (SAPUI5 API reference)
Dialog (SAPUI5 API reference)

Popover

Usage

Use a popover if:

You need to define your own structure.
You want to show UI elements that are not available with the quick view.

Do not use a popover if:

The quick view is more appropriate for your use case.
The objects are in a master list (in this case, the details are shown in the details area).

Responsiveness

The popover can be used in the following ways:

Responsive and adaptive: sap.m.ResponsivePopover
Shows a dialog on smartphones (to be closed with an X) and a popover on a tablet or desktop.
Non-responsive: sap.m.Popover
Always shows a popover. Only use a non-responsive popover if it has very little content. On smartphones, the popover should not use more than a third of the phone’s real estate.

Layout

Structure of Popover

The header and footer are generally optional. The other elements are as follows:

Back (1) – optional
Needs to be implemented if the user can trigger further popovers. Always show popovers in place. Never place them on top of each other.

Close function (3)
This feature closes the dialog. It is available for smartphones only and is set automatically (sap.m.ResponsivePopover).

Content (4)
Ensure that the content has a basic design and shows only the most important information. We recommend the following:

Use no more than two groups.
Limit the total number of fields to eight.
Use single-column tables.
Use micro charts.

Actions (5) – optional

Popover – General structure

Popover – Example

Placement Types

If you set the placement type to “Auto”, the position of the popover in relation to the reference control is determined automatically, depending on the available space.

Popover with default placement type - Right

Developer Hint

More information on the different placement types can be found here.

Modal Mode

The popover in modal mode opens in a modal window, which blocks the whole screen and attracts the user’s attention.

Popover – Modal

Behavior and Interaction

Opening a Popover

The user opens a popover by clicking an object represented by a text link or an icon. To improve accessibility, we recommend using texts, such as the name or ID of an object.

Closing a Popover

The popover is closed when the user clicks outside the popover or selects an action within the popover.

Guidelines

Show status information as text fields in a content group. You can use semantic text colors.
You can define a height for the popover. If the content exceeds the height, a scroll bar is displayed.

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

Quick View (guidelines)

Implementation

Popover (SAPUI5 samples)

Responsive Popover (SAPUI5 samples)

Select Dialog

The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.

A more enhanced dialog for single selection and multiselection is the value help dialog as it offers range selection and excluding functions.

Usage

Use the select dialog if:

Users need to select one or more entries from a comprehensive list that contains multiple attributes or values.

Do not use the select dialog if:

Users need to pick one item from a predefined set of options that contains one attribute or value only such as languages. In this case, consider using the combo box or select instead.
Your use case requires more enhanced functionalities such as a selection based on ranges. For the selection of values, consider using the value help dialog instead.
Your use case requires tabs, filters, or an Add New functionality in the select dialog. In this case, use a standard dialog instead.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The display of the select control depends on the device. On phones, the selection list takes up the whole screen. On desktop and tablet devices it appears as a popover.

Size S

Single select dialog in full screen on smartphone

Multi-select dialog in full screen on smartphone

Size M

Single select dialog on tablet

Multi-select dialog on tablet

Size L

Single select dialog on desktop

Multi-select dialog on desktop

Components

Dialog Header

You need to set the title of the dialog header (1). We recommend the following form:

Single selection

Select

Example: Select Product

Multi-selection

Select

Example: Select Products

Search

The first element in the dialog is a standard search field (2).

Info Toolbar

The info toolbar (3) is only available in multi-selection mode. It shows the number of selected items in the following form:

Selected :

Example: Selected Products: 2

Content

Button Toolbar

The button toolbar (5) contains two buttons: Select and Cancel. Select takes over the selection, while Cancel resets the selection to the state it was in when the dialog was opened.

Components of the select dialog. Left: single select, right: multi select

Behavior and Interaction

The select dialog can be called up from any control. The most common trigger is an input field with selection icon, also known as a “value help field”, or F4. Alternative triggers are buttons or icons, which add items to an existing list or the info bar in the master list in order to apply a contextual filter.

Single Select

Once users select an entry, the select dialog is closed and the selected entry is taken over. If applicable, the entry is displayed in the field from which the dialog was triggered.

Multi-Select

Search

The user can search items.

Resize and Drag Dialog

You can make the select dialog resizable and draggable by setting the corresponding properties (also called resizable and draggable) to “true”.

A resizable dialog makes sense if the items inside have long names or descriptions.

A draggable dialog allows users to see the app content behind the dialog.

Guidelines

Both features are optional. However, even if you only need one, always set both of them to “true” to ensure consistency.

Guidelines

List Options

If you need to indicate that all items apply (for example, as a list filter), provide All as an option and place it at the beginning of the list.

Select list with '(None)'

Search Behavior

Two types of search behavior are available:

(1) A live search, also known as “search-as-you-type” (property: liveChange), which is triggered by each character that the user enters or deletes.

(2) A manual search, which is triggered explicitly after the user enters text in the search field and clicks or taps the Search icon or presses the ENTER key.

Reset/Remember Selections

By default, the selection is reset when the dialog is closed. This allows users to make a new selection when they reopen the dialog and makes sense when users need to add multiple items to a table.

Selection is reset after the dialog is closed

However, if your use case requires selections in a dialog to be remembered so that the user can make corrections, you can set the rememberSelections function in the select dialog to “true”. When users exit the dialog by clicking or tapping Cancel, the selection is then restored to the state it was in when the dialog was opened.

Selection is remembered after the dialog is reopened

This also works in single-select dialogs. There, if users click the remembered item again, the dialog closes and they do not have to explicitly click Cancel.

Info Bar

In multi-selection mode, an info bar shows the number of selected items. Use the following format:

Selected: [Business Objects] Selected: [Number of Items]
Example: Products Selected: 2

Note that the info bar is not “sticky”. When the user scrolls down the list, the info bar scrolls off the screen.

“Clear” Button

The Clear button allows users to clear all the selected items. By default, the button is not shown. To display the button, set the showClearButton property to “true”.

Select dialog with 'Clear' button

Content

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

Combo Box (guidelines)
Select (guidelines)
Value Help (guidelines)
Search (guidelines)

Implementation

No links

Quick View

The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.

Usage

Use the quick view if:

You want to display a concise overview of an object.
You want to display information about, for example, an employee or a company.
You can split your information into groups (for example, contact details and company information).

Do not use the quick view if:

You want to provide information in a way other than displaying it in groups.
You want to display complex information about an object.

Responsiveness

The quick view is based on the popover. It therefore inherits the same basic properties from it and provides the same responsiveness. For more information, see popover.

Layout

Generic Quick View

You can use the fallbackIcon property to define a backup icon. This icon is displayed if the initial image or icon is can’t be loaded.

Example of a generic quick view

Quick View Examples

You can create your own quick view element or, as with the two examples below show, there are also basic structures for displaying employee and company information in a quick view.

Example: Employee quick view

Example: Company quick view

Behavior and Interaction

The quick view is based on the popover. It therefore inherits the same basic properties from it and provides the same interaction. For more information, see popover.

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

Popover (guidelines)

Implementation

Quick View (SAPUI5 samples)
Quick View (SAPUI5 API reference)

Select Dialog

The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.

A more enhanced dialog for single selection and multiselection is the value help dialog as it offers range selection and excluding functions.

Usage

Use the select dialog if:

Users need to select one or more entries from a comprehensive list that contains multiple attributes or values.

Do not use the select dialog if:

Users need to pick one item from a predefined set of options that contains one attribute or value only such as languages. In this case, consider using the combo box or select instead.
Your use case requires more enhanced functionalities such as a selection based on ranges. For the selection of values, consider using the value help dialog instead.
Your use case requires tabs, filters, or an Add New functionality in the select dialog. In this case, use a standard dialog instead.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The display of the select control depends on the device. On phones, the selection list takes up the whole screen. On desktop and tablet devices it appears as a popover.

Size S

Single select dialog in full screen on smartphone

Multi-select dialog in full screen on smartphone

Size M

Single select dialog on tablet

Multi-select dialog on tablet

Size L

Single select dialog on desktop

Multi-select dialog on desktop

Components

Dialog Header

You need to set the title of the dialog header (1). We recommend the following form:

Single selection

Select

Example: Select Product

Multi-selection

Select

Example: Select Products

Search

The first element in the dialog is a standard search field (2).

Info Toolbar

The info toolbar (3) is only available in multi-selection mode. It shows the number of selected items in the following form:

Selected :

Example: Selected Products: 2

Content

Button Toolbar

The button toolbar (5) contains two buttons: Select and Cancel. Select takes over the selection, while Cancel resets the selection to the state it was in when the dialog was opened.

Components of the select dialog. Left: single select, right: multi select

Behavior and Interaction

The select dialog can be called up from any control. The most common trigger is an input field with selection icon, also known as a “value help field”, or F4. Alternative triggers are buttons or icons, which add items to an existing list or the info bar in the master list in order to apply a contextual filter.

Single Select

Once users select an entry, the select dialog is closed and the selected entry is taken over. If applicable, the entry is displayed in the field from which the dialog was triggered.

Multi-Select

Search

The user can search items.

Resize and Drag Dialog

You can make the select dialog resizable and draggable by setting the corresponding properties (also called resizable and draggable) to “true”.

A resizable dialog makes sense if the items inside have long names or descriptions.

A draggable dialog allows users to see the app content behind the dialog.

Guidelines

Both features are optional. However, even if you only need one, always set both of them to “true” to ensure consistency.

Guidelines

List Options

If you need to indicate that all items apply (for example, as a list filter), provide All as an option and place it at the beginning of the list.

Select list with '(None)'

Search Behavior

Two types of search behavior are available:

(1) A live search, also known as “search-as-you-type” (property: liveChange), which is triggered by each character that the user enters or deletes.

(2) A manual search, which is triggered explicitly after the user enters text in the search field and clicks or taps the Search icon or presses the ENTER key.

Reset/Remember Selections

By default, the selection is reset when the dialog is closed. This allows users to make a new selection when they reopen the dialog and makes sense when users need to add multiple items to a table.

Selection is reset after the dialog is closed

However, if your use case requires selections in a dialog to be remembered so that the user can make corrections, you can set the rememberSelections function in the select dialog to “true”. When users exit the dialog by clicking or tapping Cancel, the selection is then restored to the state it was in when the dialog was opened.

Selection is remembered after the dialog is reopened

This also works in single-select dialogs. There, if users click the remembered item again, the dialog closes and they do not have to explicitly click Cancel.

Info Bar

In multi-selection mode, an info bar shows the number of selected items. Use the following format:

Selected: [Business Objects] Selected: [Number of Items]
Example: Products Selected: 2

Note that the info bar is not “sticky”. When the user scrolls down the list, the info bar scrolls off the screen.

“Clear” Button

The Clear button allows users to clear all the selected items. By default, the button is not shown. To display the button, set the showClearButton property to “true”.

Select dialog with 'Clear' button

Content

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

Combo Box (guidelines)
Select (guidelines)
Value Help (guidelines)
Search (guidelines)

Implementation

No links

Table Select Dialog

The dialog provides a responsive table layout with additional search, filter, and selection functionalities in the header. A footer toolbar provides actions for canceling or confirming the process.

Usage

Use the table select dialog if:

You need to help users select one or more items from a comprehensive list that contains multiple attributes or values.

Do not use the table select dialog if:

You need to help users pick one item from a predefined set of options that contains only one value. In this case, use the dropdown box instead.
You need to help users with query-based range selection and enhanced filter options. In this case, use the value help dialog instead.
Your use case requires tabs, filters, or actions in a select dialog.In this case, use a standard dialog instead.
Your use case only requires filtering without selection. In this case, use the filter toolbar instead.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

On bigger screens, the table select dialog also provides columns

The table in the dialog is responsive and wraps on smaller screens to show a list

Behavior and Interaction

The table select dialog can be called up from any control. The trigger is usually a button with a selection icon in an input field, or an Add button in a toolbar.

Triggers

Input Trigger

This trigger can be useful if users need to select, for example, one customer from a large customer register.

Example of a trigger: the selection icon in the input field

“Add” Button

“Clear” Button

The Clear button allows users to clear all the selected items.

Example of a trigger: 'Add' button in a table

Sticky Header

The column headers and info toolbar in the table select dialog are “sticky”, which means that they stay fixed on top when scrolling (sap.m.Table, property: sticky).

Information

Example of sticky headers

Single Select

Multi-Select

Remembering Selections

Grouping

The list can also be displayed as grouped. Group headers divide the table into segments. A pregrouped table is useful for tables with many entries, which can be sorted by a single attribute.

Table select dialog with group headers

Resize and Drag Dialog

You can allow users to resize and drag the table select dialog by setting the resizable and draggable properties to “true”.

A resizable dialog makes sense if the items within the dialog can have long names or descriptions.
A draggable dialog allows users to see the app content behind the dialog.

Guidelines

Both features are optional. However, if you only need one, always set both properties to “true” for consistency reasons.

Guidelines

Set the information provided in the table select dialog from top to bottom as follows:

Dialog Header

Use the following format for the dialog header:

For single selection: Select [Business Object]
Example: Select Product
For multiple selection: Select [Business Objects]
Example: Select Products.

Search

The first interactive element in the dialog is a standard search field. Two types of search behavior are available:

A live search, also known as “search-as-you-type,” which is triggered by each character that the user enters or deletes.
A manual search, which is triggered explicitly after the user enters text in the search field and clicks theSearch icon or presses the ENTER key. As soon as the user hits the Search button, a Delete icon appears at the end of the input field to delete the keyword and cancel the result list.

Infobar

In multi-selection mode, an infobar shows the number of selected items. Use the following format:

[Business Objects] Selected: [Number of Items]
Example: Products Selected: 2

“Clear” Button

The “Clear” button for clearing all the selected items is optional. By default, the button is not shown. To display the button, set the showClearButton property to “true”.

Content

The content area provides a table. This behaves like the responsive table, so the columns wrap on smaller screens and display a list.

Footer Toolbar

In the single-select version, only provide Cancel in the footer toolbar because the dialog takes over the selection as soon as the user chooses one.

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)

Implementation

Table Select Dialog (SAPUI5 samples)
Table Select Dialog (SAPUI5 API reference)

Select Dialog

The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.

A more enhanced dialog for single selection and multiselection is the value help dialog as it offers range selection and excluding functions.

Usage

Use the select dialog if:

Users need to select one or more entries from a comprehensive list that contains multiple attributes or values.

Do not use the select dialog if:

Users need to pick one item from a predefined set of options that contains one attribute or value only such as languages. In this case, consider using the combo box or select instead.
Your use case requires more enhanced functionalities such as a selection based on ranges. For the selection of values, consider using the value help dialog instead.
Your use case requires tabs, filters, or an Add New functionality in the select dialog. In this case, use a standard dialog instead.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The display of the select control depends on the device. On phones, the selection list takes up the whole screen. On desktop and tablet devices it appears as a popover.

Size S

Single select dialog in full screen on smartphone

Multi-select dialog in full screen on smartphone

Size M

Single select dialog on tablet

Multi-select dialog on tablet

Size L

Single select dialog on desktop

Multi-select dialog on desktop

Components

Dialog Header

You need to set the title of the dialog header (1). We recommend the following form:

Single selection

Select

Example: Select Product

Multi-selection

Select

Example: Select Products

Search

The first element in the dialog is a standard search field (2).

Info Toolbar

The info toolbar (3) is only available in multi-selection mode. It shows the number of selected items in the following form:

Selected :

Example: Selected Products: 2

Content

Button Toolbar

The button toolbar (5) contains two buttons: Select and Cancel. Select takes over the selection, while Cancel resets the selection to the state it was in when the dialog was opened.

Components of the select dialog. Left: single select, right: multi select

Behavior and Interaction

The select dialog can be called up from any control. The most common trigger is an input field with selection icon, also known as a “value help field”, or F4. Alternative triggers are buttons or icons, which add items to an existing list or the info bar in the master list in order to apply a contextual filter.

Single Select

Once users select an entry, the select dialog is closed and the selected entry is taken over. If applicable, the entry is displayed in the field from which the dialog was triggered.

Multi-Select

Search

The user can search items.

Guidelines

List Options

If you need to indicate that all items apply (for example, as a list filter), provide All as an option and place it at the beginning of the list.

Select list with '(None)'

Search Behavior

Two types of search behavior are available:

(1) A live search, also known as “search-as-you-type” (property: liveChange), which is triggered by each character that the user enters or deletes.

(2) A manual search, which is triggered explicitly after the user enters text in the search field and clicks or taps the Search icon or presses the ENTER key.

Remember Selections

If your use case requires selections in a dialog to be remembered so that the user can make corrections, you can set the rememberSelections function in the select dialog to ‘true’. When users exit the dialog by clicking or tapping Cancel, the selection is restored to the state it was in when the dialog was opened.

Selection is remembered after the dialog is reopened

Once the dialog is closed, the selection is reset by default. This allows users to make a new selection when they reopen the dialog. This functionality makes sense, for example, when users need to add multiple items to a table.

Selection is reset after the dialog is closed

Info Bar

In multi-selection mode, an info bar shows the number of selected items. Use the following format:

Selected: [Business Objects] Selected: [Number of Items]
Example: Products Selected: 2

Note that the info bar is not “sticky”. When the user scrolls down the list, the info bar scrolls off the screen.

“Clear” Button

The Clear button allows users to clear all the selected items. By default, the button is not shown. To display the button, set the showClearButton property to “true”.

Select dialog with 'Clear' button

Content

By default, the select dialog comes with a growing feature (property: growing = true). We recommend disabling the growing feature and setting this property to “false”. This ensures that all items in the table are loaded at once, and that the “Items selected” count, the search, and select/deselect features all work properly.

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

Combo Box (guidelines)
Select (guidelines)
Value Help (guidelines)
Search (guidelines)

Implementation

No links

Table Select Dialog

The dialog provides a responsive table layout with additional search, filter, and selection functionalities in the header. A footer toolbar provides actions for canceling or confirming the process.

Usage

Use the table select dialog if:

You need to help users select one or more items from a comprehensive list that contains multiple attributes or values.

Do not use the table select dialog if:

You need to help users pick one item from a predefined set of options that contains only one value. In this case, use the dropdown box instead.
You need to help users with query-based range selection and enhanced filter options. In this case, use the value help dialog instead.
Your use case requires tabs, filters, or actions in a select dialog.In this case, use a standard dialog instead.
Your use case only requires filtering without selection. In this case, use the filter toolbar instead.

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

On bigger screens, the table select dialog also provides columns

The table in the dialog is responsive and wraps on smaller screens to show a list

Behavior and Interaction

The table select dialog can be called up from any control. The trigger is usually a button with a selection icon in an input field, or an Add button in a toolbar.

Triggers

Input Trigger

This trigger can be useful if users need to select, for example, one customer from a large customer register.

Example of a trigger: the selection icon in the input field

“Add” Button

“Clear” Button

The Clear button allows users to clear all the selected items.

Example of a trigger: 'Add' button in a table

Sticky Header

The column headers and info toolbar in the table select dialog are “sticky”, which means that they stay fixed on top when scrolling (sap.m.Table, property: sticky).

Information

Example of sticky headers

Single Select

Multi-Select

The multi-select version of the table select dialog provides checkboxes for users to choose multiple items. The blue info bar above the table indicates the number of selected items. The selection is taken over when the user closes the dialog via the Select button in the footer toolbar. Clicking or tapping Cancel closes the dialog without taking over the selected values.

Remembering Selections

Grouping

The list can also be displayed as grouped. Group headers divide the table into segments. A pregrouped table is useful for tables with many entries, which can be sorted by a single attribute.

A responsive table with group headers

Guidelines

Set the information provided in the table select dialog from top to bottom as follows:

Dialog Header

Use the following format for the dialog header:

For single selection: Select [Business Object]
Example: Select Product
For multiple selection: Select [Business Objects]
Example: Select Products.

Search

The first interactive element in the dialog is a standard search field. Two types of search behavior are available:

A live search, also known as “search-as-you-type,” which is triggered by each character that the user enters or deletes.
A manual search, which is triggered explicitly after the user enters text in the search field and clicks or taps theSearch icon or presses the ENTER key. As soon as the user hits the Search button, a Delete icon appears at the end of the input field to delete the keyword and cancel the result list.

Info Bar

In multi-selection mode, an info bar shows the number of selected items. Use the following format:

[Business Objects] Selected: [Number of Items]
Example: Products Selected: 2

“Clear” Button

The “Clear” button for clearing all the selected items is optional. By default, the button is not shown. To display the button, set the showClearButton property to “true”.

Content

The content area provides a table. This behaves like the responsive table, so the columns wrap on smaller screens and display a list.

Footer Toolbar

In the single-select version, only provide Cancel in the footer toolbar because the dialog takes over the selection as soon as the user chooses one.

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)

Implementation

Table Select Dialog (SAPUI5 samples)
Table Select Dialog (SAPUI5 API reference)

Dialog

Usage

Use the dialog if:

You want to display complex content (that is not a floorplan), but don’t want the user to navigate away from the current page.
You want to display an additional step or process that needs to be confirmed by a user action.
You want to enable the user to create an object with a small number of fields (up to 8 fields).

Do not use the dialog if:

You want to display a simple message. Use the message box instead.
You just want to confirm a successful action.
You do not want to interrupt the user.
You want to enable users to create an object with more than 8 fields. Use an object page instead.
You want to display a floorplan. Floorplans are not meant to be displayed inside a dialog.

Responsiveness

The dialog provides different behavior on a smartphone than on a tablet or desktop. We distinguish between “cozy” and “compact” dialogs. For more information, see content density.

The buttons in the toolbar are aligned differently on the various devices. On a smartphone, they extend across the entire footer toolbar, but on a tablet or desktop device, they are right-aligned.

Size S (Smartphone)

Full Screen Dialog

Full screen dialog - Size S

Position of the Action Buttons

By default, a dialog can have one or two actions, which extend across the entire footer on smartphones.

Alignment of footer actions - Size S

When to Open Full Screen or Modal

Always display message dialogs as modals. There is no need to display a simple message in a full screen dialog. If you want to display a simple message, use the message box instead.

Size M (Tablet)

By default, the dialog can have up to two action buttons in the footer. The action buttons in the toolbar are right-aligned. Use cozy mode on tablet devices.

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Size L (Desktop)

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Dialog in compact mode - Size L

Layout

Position on the Screen

The dialog is positioned in the center of the screen. It opens in a modal window to ensure that it attracts the user’s attention when it displays emergency states.

On a smartphone, the stretch property allows you to achieve full screen behavior.

Behavior and Interaction

Navigation in a Dialog

You can let users navigate to another page within the dialog. On the second page, an arrow at the top of the dialog allows users to navigate back to the first page.

Navigation Pattern List - Size L

Navigation Pattern Detail - Size L

Resizable

You can let users change the size of the dialog (property resizable = “true). The resizable indicator then shows in the bottom-right corner of the dialog.

Resizable indicator in the bottom right-hand corner - Size L

Draggable

By clicking and holding on the heading, users can drag the dialog to another position (property draggable = “true”).

Dialog can be moved by dragging the title - Size L

Messaging Within a Dialog

Do not show message popovers within dialogs. Use highlighting to show issues with content fields. For more information, see form field validation.

Editing and Saving Content

If a dialog is used for editing, keep it simple. If you need more than 8 editable fields, consider other solutions instead, such as navigation to a detail page.

The data in the dialog is only saved when the user click or taps Create or Save. Use form field validation within the dialog to make users aware of any errors.

The data in the dialog is lost if the page is refreshed during the editing process (also in the draft scenario), or if the user chooses Cancel.

Highlighted form fields in a dialog - Size S

Types

Standard Dialog

Use the standard dialog unless you need one of the specialized dialogs below. The standard dialog has a header with a grey background, and no icon.

Other Types of Dialogs

Personalization dialog
Select dialog
Table select dialog
Value help dialog
View settings dialog
Busy dialog

Message Box

Components

The dialog contains the following sections and options:

Title: Title text appears in the dialog header.

Subheader (optional): Subheaders appear below the main header. Since the subheader is not part of the content area, it is not scrollable.

Content: This area contains the actual content of the dialog.

Footer with actions: The footer can contain up to two buttons (optional). If no buttons are defined, the default Close button is shown.

Example of a dialog structure (Cozy example)

Emphasized Buttons in a Dialog

Never use an emphasized button for Cancel.

Emphasized button in the dialog toolbar

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

Toolbar (guidelines)

Implementation

Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Message Boxes (SAPUI5 samples)
Toolbar (SAPUI5 API reference)
Dialog (SAPUI5 API reference)

Value Help Dialog

Usage

Use the value help dialog if:

The user needs to use different attributes (such as city, company name, and so on) to find an object.
The user is searching within a dataset containing more than 200 items.
The user needs to define and select ranges and exclusions.

Do not use the value help dialog if:

The user only needs a few items to filter the dataset. Always start with the least complex control (for example, use select instead of value help if the user needs to select only one item from a short list).

Information

For more information on which selection control to choose, see the selection control overview.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Value help dialog - Size S

Value help dialog - Size M

Value help dialog - Size L

Components

The value help dialog contains the following components:

Components of the Value Help Dialog

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Icon Tab Bar on Tablet/Desktop and List Control on Phone (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem) Select from List and
Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Select from List and the Define Conditions tab.

Search Template (3)

Basic Search (4)

The basic search finds all results that are somehow related to the input. For example, the search term “A” returns all the results containing the letter “A”.

Always offer the basic search in the value help dialog. Position the basic search to the right of the search template control. If there is no search template control, left-align the basic search.

Advanced Search (5)

The advanced search offers a search field for each column in the result list.

Value help dialog - Advanced search

For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields/advanced search fields are added automatically to the advanced search area.
There is a toggle link to show and hide the advanced search.
On desktops, the advanced search should be expanded by default.
On tablets, the advanced search should be collapsed by default.
In each of the filter fields, users can use operators like “between” or “lower than” to define ranges.

How the Advanced Search Works

The user can include operators (such as “=“) to define the ranges directly within the field without moving to the fields of the Define Conditions tab.

The user must type the following to get results:

Operator	Input Notation	Example
between	value…value	000…100
equal to	=value	=0001
contains	value	1
starts with	value*	001*
ends with	*value	*5
less than	<value	<100
less than or equal to	<=value	<=200
greater than	>value	>0300
greater than or equal to	>=value	>=0500
not equal to*	!(=value)	!(=0)

* Note that there isn’t an explicit “not equal to” operator. Instead, you need to use “Exclude” (!) in conjunction with the “equal to” operator (=).

Advanced search using operator

Result List (6)

You can prefill the result list of the value help dialog by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the results list.

Selected/Excluded Items Row (7)

On desktops, the selection area with the selected and excluded items row is initially expanded.
On tablets and phones, the selection area with the selected and excluded item row is initially collapsed.

Footer Toolbar (8)

The footer bar offers the OK and Cancel buttons.

Include/Exclude Areas for Range Selection (9)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

equal to
between
less than
less than or equal to
greater than
greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

Developer Hint

For information on how to manage whitespace characters (blanks) when users copy and paste text into input controls, see Removing Leading and Trailing Whitespace.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking or tapping the Go button. The search results are shown in the result list.
If the input field where the user is coming from contains data, this data is transferred to the basic search of the value help dialog and the results are then filtered accordingly.
The basic search performs a search across all fields that are displayed in the advanced search and the result list.

Item and Range Selection

Depending on your use case, the value help dialog can offer different selection options:

Select a single item
Select a single range
Select multiple items
Select/exclude multiple ranges

Users open the value help dialog by clicking or tapping the value help icon of the input field. The next steps depend on the use case and form factor (smartphone or desktop/tablet).

The different use cases are described in the sections below.

Select a Single Item (Smartphone)

Tapping the value help icon opens the Select from List tab. As soon as an item is selected, the value help dialog closes automatically.

Single item selection on a smartphone

Select a Single Item (Desktop/Tablet)

Single item selection on a desktop/tablet device

Select a Single Range (Smartphone)

Tapping the value help icon opens the Define Condition tab.

Single range selection on a smartphone

Select a Single Range (Desktop/Tablet)

Clicking the value help icon opens the Define Condition: [Object] tab (for example, Define Condition: Company).

The icon tab bar and the Selected Items / Excluded Items row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Single range selection on a desktop/tablet device

Select Multiple Items | Select/Exclude Multiple Ranges (Smartphone)

Tapping the value help icon displays the start dialog.

The Select from List tab is used to select multiple items
The Define Conditions tab is used to select and exclude ranges.

Both are added as tokens to the Selected Items / Excluded Items row at the bottom of the start dialog.

Start dialog for multi-item and multi-range selection on a smartphone

Multi-range selection on a smartphone

Multi-item selection on a smartphone

Advanced search on a smartphone

Select Multiple Items | Select/Exclude Multiple Ranges (Desktop/Tablet)

Clicking the value help icon displays the icon tab bar with the Select from List and Define Conditions tabs.

The Select from List tab is used to select multiple items
The Define Conditions tab is used to select and exclude ranges.

Both are added as tokens to the Selected Items / Excluded Items row at the bottom of the screen.

Multi-item and multi-range selection on a desktop/tablet device

Select/Exclude Multiple Ranges (Smartphone)

Tapping the value help icon opens the start dialog with the Define Conditions tab.

The selected values are added as tokens to the Selected Items / Excluded Items row at the bottom of the start dialog.

Start dialog for multi-range selection on a smartphone

Multi-range selection on a smartphone

Select/Exclude Multiple Ranges (Desktop/Tablet)

Multi-range selection on a desktop/tablet device

Selected Items / Excluded Items

Each item that is selected from the result list on the Select from List tab is displayed as a token in the Selected Items row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the Selected Items / Excluded Items row.

Copying and Pasting Multiple Values

The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values at once (copied from the clipboard) .

In both areas, users can paste more than one value into the value input field. In this case, the condition row repeats with the previously selected condition and shows one value per row.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Starting dialog: [Object] (for example, Company)
Select from list dialog: Select from List
Advanced search dialog: Advanced Search
Single range selection: Define Condition
Multiple range selection: Define Conditions

For tablet and desktop devices:

Multiple items combined with selection of multiple ranges: [Object] (for example, Company)
Single item selection: Select: [Object] (for example, Select: Company)
Single range selection: Define Condition: [Object] (for example, Define Condition: Company)
Multiple range selection: Define Conditions: [Object] (for example, Define Conditions: Company)

Advanced Search

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

Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
List (guidelines)
Panel (guidelines)

Implementation

Smart Filter Bar with value help dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)

Value Help Dialog

For more information on which selection control to choose, see the selection control overview.

Usage

Use the value help dialog if:

The user needs to use different attributes (such as city, company name, and so on) to find an object.
The user is searching within a dataset containing more than 200 items.
The user needs to define and select ranges and exclusions.

Do not use the value help dialog if:

The user only needs a few items to filter the data set. Always start with the least complex control (for example, use select instead of value help if the user needs to select only one item from a short list).

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Value help dialog - Size S

Value help dialog - Size M

Value help dialog - Size L

Components

The value help dialog contains the following components:

Components of the Value Help Dialog

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Icon Tab Bar on Tablet/Desktop and List Control on Phone (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem) Select from List and
Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Select from List and the Define Conditions tab.

Search Template (3)

Basic Search (4)

The basic search finds all results that are somehow related to the input. For example, the search term “A” returns all the results containing the letter “A”.

Always offer the basic search in the value help dialog. Position the basic search to the right of the search template control. If there is no search template control, left-align the basic search.

Advanced Search (5)

The advanced search offers a search field for each column in the result list.

Value help dialog - Advanced search

For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields/advanced search fields are added automatically to the advanced search area.
There is a toggle link to show and hide the advanced search.
On desktops, the advanced search should be expanded by default.
On tablets, the advanced search should be collapsed by default.
In each of the filter fields, users can use operators like “between” or “lower than” to define ranges.

How the Advanced Search Works

The user can include operators (such as “=“) to define the ranges directly within the field without moving to the fields of the Define Conditions tab.

The user must type the following to get results:

Operator	Input Notation	Example
between	value…value	000…100
equal to	=value	=0001
contains	value	1
starts with	value*	001*
ends with	*value	*5
less than	<value	<100
less than or equal to	<=value	<=200
greater than	>value	>0300
greater than or equal to	>=value	>=0500
not equal to*	!(=value)	!(=0)

* Note that there isn’t an explicit “not equal to” operator. Instead, you need to use “Exclude” (!) in conjunction with the “equal to” operator (=).

Advanced search using operator

Result List (6)

You can prefill the result list of the value help dialog by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the results list.

Selected/Excluded Items Row (7)

On desktops, the selection area with the selected and excluded items row is initially expanded.
On tablets and phones, the selection area with the selected and excluded item row is initially collapsed.

Footer Toolbar (8)

The footer bar offers the OK and Cancel buttons.

Include/Exclude Areas for Range Selection (9)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

equal to
between
less than
less than or equal to
greater than
greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

Developer Hint

For information on how to manage whitespace characters (blanks) when users copy and paste text into input controls, see Removing Leading and Trailing Whitespace.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking or tapping the Go button. The search results are shown in the result list.
If the input field where the user is coming from contains data, this data is transferred to the basic search of the value help dialog and the results are then filtered accordingly.
The basic search performs a search across all fields that are displayed in the advanced search and the result list.

Item and Range Selection

Depending on your use case, the value help dialog can offer different selection options:

Select a single item
Select a single range
Select multiple items
Select/exclude multiple ranges

Users open the value help dialog by clicking or tapping the value help icon of the input field. The next steps depend on the use case and form factor (smartphone or desktop/tablet).

The different use cases are described in the sections below.

Select a Single Item (Smartphone)

Tapping the value help icon opens the Select from List tab. As soon as an item is selected, the value help dialog closes automatically.

Single item selection on a smartphone

Select a Single Item (Desktop/Tablet)

Single item selection on a desktop/tablet device

Select a Single Range (Smartphone)

Tapping the value help icon opens the Define Condition tab.

Single range selection on a smartphone

Select a Single Range (Desktop/Tablet)

Clicking the value help icon opens the Define Condition: [Object] tab (for example, Define Condition: Company).

The icon tab bar and the Selected Items / Excluded Items row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Single range selection on a desktop/tablet device

Select Multiple Items | Select/Exclude Multiple Ranges (Smartphone)

Tapping the value help icon displays the start dialog.

The Select from List tab is used to select multiple items
The Define Conditions tab is used to select and exclude ranges.

Both are added as tokens to the Selected Items / Excluded Items row at the bottom of the start dialog.

Start dialog for multi-item and multi-range selection on a smartphone

Multi-range selection on a smartphone

Multi-item selection on a smartphone

Advanced search on a smartphone

Select Multiple Items | Select/Exclude Multiple Ranges (Desktop/Tablet)

Clicking the value help icon displays the icon tab bar with the Select from List and Define Conditions tabs.

The Select from List tab is used to select multiple items
The Define Conditions tab is used to select and exclude ranges.

Both are added as tokens to the Selected Items / Excluded Items row at the bottom of the screen.

Multi-item and multi-range selection on a desktop/tablet device

Select/Exclude Multiple Ranges (Smartphone)

Tapping the value help icon opens the start dialog with the Define Conditions tab.

The selected values are added as tokens to the Selected Items / Excluded Items row at the bottom of the start dialog.

Start dialog for multi-range selection on a smartphone

Multi-range selection on a smartphone

Select/Exclude Multiple Ranges (Desktop/Tablet)

Multi-range selection on a desktop/tablet device

Selected Items / Excluded Items

Each item that is selected from the result list on the Select from List tab is displayed as a token in the Selected Items row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the Selected Items / Excluded Items row.

Copying and Pasting Multiple Values

The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values at once (copied from the clipboard) .

In both areas, users can paste more than one value into the value input field. In this case, the condition row repeats with the previously selected condition and shows one value per row.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Starting dialog: [Object] (for example, Company)
Select from list dialog: Select from List
Advanced search dialog: Advanced Search
Single range selection: Define Condition
Multiple range selection: Define Conditions

For tablet and desktop devices:

Multiple items combined with selection of multiple ranges: [Object] (for example, Company)
Single item selection: Select: [Object] (for example, Select: Company)
Single range selection: Define Condition: [Object] (for example, Define Condition: Company)
Multiple range selection: Define Conditions: [Object] (for example, Define Conditions: Company)

Advanced Search

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

Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
List (guidelines)
Panel (guidelines)

Implementation

Smart Filter Bar with value help dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)

Select Dialog

The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.

A more enhanced dialog for single selection and multiselection is the value help dialog as it offers range selection and excluding functions. For more information on which selection control to choose, see the selection control overview.

Usage

Use the select dialog if:

Users need to select one or more entries from a comprehensive list that contains multiple attributes or values.

Do not use the select dialog if:

Users need to pick one item from a predefined set of options that contains one attribute or value only such as languages. In this case, consider using the combo box or select instead.
Your use case requires more enhanced functionalities such as a selection based on ranges. For the selection of values, consider using the value help dialog instead.
Your use case requires tabs, filters, or an Add New functionality in the select dialog. In this case, use a standard dialog instead.

Responsiveness

The display of the select control depends on the device. On phones, the selection list takes up the whole screen. On desktop and tablet devices it appears as a popover.

Size S

Single select dialog in full screen on smartphone

Multi-select dialog in full screen on smartphone

Size M

Single select dialog on tablet

Multi-select dialog on tablet

Size L

Single select dialog on desktop

Multi-select dialog on desktop

Components

Dialog Header

You need to set the title of the dialog header (1). We recommend the following form:

Single selection

Select

Example: Select Product

Multi-selection

Select

Example: Select Products

Search

The first element in the dialog is a standard search field (2).

Info Toolbar

The info toolbar (3) is only available in multi-selection mode. It shows the number of selected items in the following form:

Selected :

Example: Selected Products: 2

Content

Button Toolbar

The button toolbar (5) contains two buttons: OK and Cancel. OK takes over the selection, while Cancel resets the selection to the state it was in when the dialog was opened. Do not use Add or Select instead of OK.

Components of the select dialog. Left: single select, right: multi select

Behavior and Interaction

The select dialog can be called up from any control. The most common trigger is an input field with selection icon, also known as a “value help field”, or F4. Alternative triggers are buttons or icons, which add items to an existing list or the info bar in the master list in order to apply a contextual filter.

Single Select

Once users select an entry, the select dialog is closed and the selected entry is taken over. If applicable, the entry is displayed in the field from which the dialog was triggered.

Multi-Select

Search

The user can search items.

Guidelines

List Options

If you need to indicate that all items apply (for example, as a list filter), provide All as an option and place it at the beginning of the list.

Select list with '(None)'

Search Behavior

Two types of search behavior are available:

(1) A live search, also known as “search-as-you-type” (property: liveChange), which is triggered by each character that the user enters or deletes.

(2) A manual search, which is triggered explicitly after the user enters text in the search field and clicks or taps the Search icon or presses the ENTER key.

Remember Selections

Selection is remembered after the dialog is reopened

Selection is reset after the dialog is closed

Info Bar

In multi-selection mode, an info bar shows the number of selected items. Use the following format:

Selected: [Business Objects] Selected: [Number of Items]
Example: Products Selected: 2

Note that the info bar is not “sticky”. When the user scrolls down the list, the info bar scrolls off the screen.

“Clear” Button

The Clear button allows users to clear all the selected items. By default, the button is not shown. To display the button, set the showClearButton property to “true”.

Select dialog with 'Clear' button

Content

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

Combo Box (guidelines)
Select (guidelines)
Value Help (guidelines)
Search (guidelines)

Implementation

No links

Popover

Usage

Use a popover if:

You need to define your own structure.
You want to show UI elements that are not available with the quick view.

Do not use a popover if:

The quick view is more appropriate for your use case.
The objects are in a master list (in this case, the details are shown in the details area).

Responsiveness

The popover can be used in the following ways:

Responsive and adaptive: sap.m.ResponsivePopover
Shows a dialog on smartphones (to be closed with an X) and a popover on a tablet or desktop.
Non-responsive: sap.m.Popover
Always shows a popover. Only use a non-responsive popover if it has very little content. On smartphones, the popover should not use more than a third of the phone’s real estate.

Layout

Structure of Popover

The header and footer are generally optional. The other elements are as follows:

Back (1) – optional
Needs to be implemented if the user can trigger further popovers. Always show popovers in place. Never place them on top of each other.

Close function (3)
This feature closes the dialog. It is available for smartphones only and is set automatically (sap.m.ResponsivePopover).

Content (4)
Ensure that the content has a basic design and shows only the most important information. We recommend the following:

Use no more than two groups.
Limit the total number of fields to eight.
Use single-column tables.
Use micro charts.

Actions (5) – optional

Popover – General structure

Popover – Example

Placement Types

If you set the placement type to “Auto”, the position of the popover in relation to the reference control is determined automatically, depending on the available space.

Popover with default placement type - Right

Developer Hint

More information on the different placement types can be found here.

Modal Mode

The popover in modal mode opens in a modal window, which blocks the whole screen and attracts the user’s attention.

Popover – Modal

Behavior and Interaction

Opening a Popover

The user opens a popover by clicking or tapping an object represented by a text link or an icon. To improve accessibility, we recommend using texts, such as the name or ID of an object.

Closing a Popover

The popover is closed when the user clicks or taps outside the popover or selects an action within the popover.

Guidelines

Show status information as text fields in a content group. You can use semantic text colors.
You can define a height for the popover. If the content exceeds the height, a scroll bar is displayed.

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

Quick View (guidelines)

Implementation

Popover (SAPUI5 samples)

Responsive Popover (SAPUI5 samples)

Message Box

Usage

Use the message box if:

You want to display non-field-related messages.
You want to interrupt the user while he or she performs an action.
You want to display error, warning, success, confirmation, or information messages.
You need to interrupt the user for some other reason.
You need the user to acknowledge the message.
You need the user to make a decision.

Do not use the message box if:

You want to display a short success message. (Use a toast instead. For more information, see message toast.)
You can show the message directly in a form field.

Responsiveness

Types

The following categories of messages are available:

Error
Warning
Success
Information
Confirmation

Error Message

Control: sap.m.MessageBox
Icon: sap-icon://message-error
Title: Error
Stretch: False (no full screen on all devices)

Error message with one action

Error message with two actions

Text guidelines for an error message:

Do not just describe the problem; tell the user how to resolve it.
In the short text, speak the language of the end user. Do not include system or configuration details.
If the solution is more involved or technical, add a long text.
Do not repeat the short text in the long text. They both appear together on the screen.

Warning Message

Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Warning
Stretch: False (no full screen on all devices)

Use cases for warnings

a) No decision required: Formulate the message as a statement.
Button(s): OK

Warning message with 'OK' button

b) Decision to continue required: Formulate the message as a statement.

Button(s): OK, Cancel

Warning message with 'OK' and 'Cancel' buttons

c) Specific decision required, with one action

Use a relevant action button. The message may also be formulated as a question.
Button(s): Leave Page, Cancel

Warning message with action and 'Cancel' buttons

Success Message

Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message.

Control: sap.m.MessageBox
Icon: sap-icon://message-success
Title: Success
Stretch: False (no full screen on all devices)
Button(s): OK

Success message

Information

You should generally use a message toast (sap.m.MessageToast) to display success messages instead of a dialog (sap.m.Dialog).

Information Message

Information messages provide information the user needs to acknowledge, but which does not involve a decision. The message provides information that is useful and relevant, but never critical.

Control: sap.m.MessageBox
Icon: sap-icon://message-information
Title: Information
Stretch: False (no full screen on all devices)

Button(s): OK

Information message

Confirmation Message

Control: sap.m.MessageBox
Icon: sap-icon://question-mark
Title: (such as “Approve”, “Reject”, or “Delete”)
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message

Confirmation Message with “Note” Section

Warning

Control: sap.m.Dialog
Type: Message
Icon: sap-icon://question-mark
Title: Such as “Approve” or “Reject”
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message with note

Confirmation for “Delete”

If the user clicks or taps Delete, display a “Delete” dialog that confirms the delete action.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Delete
Stretch: False (no full screen on all devices)

Button(s): Delete, Cancel

Confirmation for 'Delete' action

Components

Show Details button

If details are available, the application has three options to display the text. Text can be displayed as:

Plain
Formatted
The original code format

Message details - Plain text

Message details - Formatted text

Message details with code excerpt

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

Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message Box (SAPUI5 samples)

Select Dialog

The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.

Usage

Use the select dialog if:

Users need to select one or more entries from a comprehensive list that contains multiple attributes or values.

Do not use the select dialog if:

Users need to pick one item from a predefined set of options that contains one attribute or value only such as languages. In this case, consider using the combo box or select instead.
Your use case requires more enhanced functionalities such as a selection based on ranges. For the selection of values, consider using the value help dialog instead.
Your use case requires tabs, filters, or an Add New functionality in the select dialog. In this case, use a standard dialog instead.

Responsiveness

The display of the select control depends on the device. On phones, the selection list takes up the whole screen. On desktop and tablet devices it appears as a popover.

Size S

Single select dialog in full screen on smartphone

Multi-select dialog in full screen on smartphone

Size M

Single select dialog on tablet

Multi-select dialog on tablet

Size L

Single select dialog on desktop

Multi-select dialog on desktop

Components

Dialog Header

You need to set the title of the dialog header (1). We recommend the following form:

Single selection

Select

Example: Select Product

Multi-selection

Select

Example: Select Products

Search

The first element in the dialog is a standard search field (2).

Info Toolbar

The info toolbar (3) is only available in multi-selection mode. It shows the number of selected items in the following form:

Selected :

Example: Selected Products: 2

Content

Button Toolbar

Components of the select dialog. Left: single select, right: multi select

Behavior and Interaction

The select dialog can be called up from any control. The most common trigger is an input field with selection icon, also known as a “value help field”, or F4. Alternative triggers are buttons or icons, which add items to an existing list or the info bar in the master list in order to apply a contextual filter.

Single Select

Once users select an entry, the select dialog is closed and the selected entry is taken over. If applicable, the entry is displayed in the field from which the dialog was triggered.

Multi-Select

Search

The user can search items.

Guidelines

List Options

If you need to indicate that all items apply (for example, as a list filter), provide All as an option and place it at the beginning of the list.

Select list with '(None)'

Search Behavior

Two types of search behavior are available:

(1) A live search, also known as “search-as-you-type” (property: liveChange), which is triggered by each character that the user enters or deletes.

(2) A manual search, which is triggered explicitly after the user enters text in the search field and clicks or taps the Search icon or presses the ENTER key.

Remember Selections

Selection is remembered after the dialog is reopened

Selection is reset after the dialog is closed

Info Bar

In multi-selection mode, an info bar shows the number of selected items. Use the following format:

Selected: [Business Objects] Selected: [Number of Items]
Example: Products Selected: 2

Note that the info bar is not “sticky”. When the user scrolls down the list, the info bar scrolls off the screen.

“Clear” Button

The Clear button allows users to clear all the selected items. By default, the button is not shown. To display the button, set the showClearButton property to “true”.

Select dialog with 'Clear' button

Content

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

Combo Box (guidelines)
Select (guidelines)
Value Help (guidelines)
Search (guidelines)

Implementation

No links

Table Select Dialog

The dialog provides a responsive table layout with additional search, filter, and selection functionalities in the header. A footer toolbar provides actions for canceling or confirming the process.

For more information on which selection control to choose, see the selection control overview.

Usage

Use the table select dialog if:

You need to help users select one or more items from a comprehensive list that contains multiple attributes or values.

Do not use the table select dialog if:

You need to help users pick one item from a predefined set of options that contains only one value. In this case, use the dropdown box instead.
You need to help users with query-based range selection and enhanced filter options. In this case, use the value help dialog instead.
Your use case requires tabs, filters, or actions in a select dialog.In this case, use a standard dialog instead.
Your use case only requires filtering without selection. In this case, use the filter toolbar instead.

Responsiveness

On bigger screens, the table select dialog also provides columns

The table in the dialog is responsive and wraps on smaller screens to show a list

Behavior and Interaction

The table select dialog can be called up from any control. The trigger is usually a button with a selection icon in an input field, or an Add button in a toolbar.

Triggers

Input Trigger

This trigger can be useful if users need to select, for example, one customer from a large customer register.

Example of a trigger: the selection icon in the input field

“Add” Button

This trigger can be useful if users need to add an item to a list. For example, the dialog could help users select the product from a large product catalog. Clicking OK in the footer toolbar of the dialog adds the selected products to the list.

“Clear” Button

The Clear button allows users to clear all the selected items.

Example of a trigger: 'Add' button in a table

Sticky Header

The column headers and info toolbar in the table select dialog are “sticky”, which means that they stay fixed on top when scrolling (sap.m.Table, property: sticky).

Information

Example of sticky headers

Single Select

The single-select version does not need an OK button in the footer toolbar because the selected entry is taken over and closed as soon as a user selects an item from the table. If applicable, the entry is displayed in the field from which the dialog was triggered. Alternatively, a toast message can be shown if necessary.

Multi-Select

The multi-select version of the table select dialog provides checkboxes for users to choose multiple items. The blue info bar above the table indicates the number of selected items. The selection is taken over when the user closes the dialog via the OK button in the footer toolbar. Clicking or tapping Cancel closes the dialog without taking over the selected values.

Remembering Selections

If selections need to be memorized in order to help users make corrections, you can set the RememberSelections property to true. This restores the selection to the state it was in when the dialog was last opened as soon as users exit the dialog via OK or Cancel. The interaction flow of the RememberSelections property is shown and explained in the select dialog article.

Grouping

The list can also be displayed as grouped. Group headers divide the table into segments. A pregrouped table is useful for tables with many entries, which can be sorted by a single attribute.

A responsive table with group headers

Guidelines

Set the information provided in the table select dialog from top to bottom as follows:

Dialog Header

Use the following format for the dialog header:

For single selection: Select [Business Object]
Example: Select Product
For multiple selection: Select [Business Objects]
Example: Select Products.

Search

The first interactive element in the dialog is a standard search field. Two types of search behavior are available:

A live search, also known as “search-as-you-type,” which is triggered by each character that the user enters or deletes.
A manual search, which is triggered explicitly after the user enters text in the search field and clicks or taps theSearch icon or presses the ENTER key. As soon as the user hits the Search button, a Delete icon appears at the end of the input field to delete the keyword and cancel the result list.

Info Bar

In multi-selection mode, an info bar shows the number of selected items. Use the following format:

[Business Objects] Selected: [Number of Items]
Example: Products Selected: 2

“Clear” Button

The “Clear” button for clearing all the selected items is optional. By default, the button is not shown. To display the button, set the showClearButton property to “true”.

Content

The content area provides a table. This behaves like the responsive table, so the columns wrap on smaller screens and display a list.

Footer Toolbar

In the multi-select version, the footer toolbar contains the OK and Cancel buttons. OK takes over the selection, while Cancel resets the selection to the state it was in when the user opened the dialog. Do not use Add or Select instead of OK.

In the single-select version, only provide Cancel in the footer toolbar because the dialog takes over the selection as soon as the user chooses one.

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)

Implementation

Table Select Dialog (SAPUI5 samples)
Table Select Dialog (SAPUI5 API reference)

Value Help Dialog

For more information on which selection control to choose, see the selection control overview.

Usage

Use the value help dialog if:

The user needs to use different attributes (such as city, company name, and so on) to find an object.
The user is searching within a dataset containing more than 200 items.
The user needs to define and select ranges and exclusions.

Do not use the value help dialog if:

The user only needs a few items to filter the data set. Always start with the least complex control (for example, use select instead of value help if the user needs to select only one item from a short list).

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Value help dialog - Size S

Value help dialog - Size M

Value help dialog - Size L

Components

The value help dialog contains the following components:

Components of the Value Help Dialog

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Icon Tab Bar on Tablet/Desktop and List Control on Phone (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem) Select from List and
Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Select from List and the Define Conditions tab.

Search Template (3)

Basic Search (4)

The basic search finds all results that are somehow related to the input. For example, the search term “A” returns all the results containing the letter “A”.

Always offer the basic search in the value help dialog. Position the basic search to the right of the search template control. If there is no search template control, left-align the basic search.

Advanced Search (5)

The advanced search offers a search field for each column in the result list.

Value help dialog - Advanced search

For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields/advanced search fields are added automatically to the advanced search area.
There is a toggle link to show and hide the advanced search.
On desktops, the advanced search should be expanded by default.
On tablets, the advanced search should be collapsed by default.
In each of the filter fields, users can use operators like “between” or “lower than” to define ranges.

How the Advanced Search Works

The user can include operators (such as “=“) to define the ranges directly within the field without moving to the fields of the Define Conditions tab.

The user must type the following to get results:

Operator	Input Notation	Example
between	value…value	000…100
equal to	=value	=0001
contains	value	1
starts with	value*	001*
ends with	*value	*5
less than	<value	<100
less than or equal to	<=value	<=200
greater than	>value	>0300
greater than or equal to	>=value	>=0500
not equal to*	!(=value)	!(=0)

* Note that there isn’t an explicit “not equal to” operator. Instead, you need to use “Exclude” (!) in conjunction with the “equal to” operator (=).

Advanced search using operator

Result List (6)

You can prefill the result list of the value help dialog by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the results list.

Selected/Excluded Items Row (7)

On desktops, the selection area with the selected and excluded items row is initially expanded.
On tablets and phones, the selection area with the selected and excluded item row is initially collapsed.

Footer Toolbar (8)

The footer bar offers the OK and Cancel buttons.

Include/Exclude Areas for Range Selection (9)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

equal to
between
less than
less than or equal to
greater than
greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

Developer Hint

For information on how to manage whitespace characters (blanks) when users copy and paste text into input controls, see Removing Leading and Trailing Whitespace.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking or tapping the Go button. The search results are shown in the result list.
If the input field where the user is coming from contains data, this data is transferred to the basic search of the value help dialog and the results are then filtered accordingly.
The basic search performs a search across all fields that are displayed in the advanced search and the result list.

Item and Range Selection

Depending on your use case, the value help dialog can offer different selection options:

Select a single item
Select a single range
Select multiple items
Select/exclude multiple ranges

Users open the value help dialog by clicking or tapping the value help icon of the input field. The next steps depend on the use case and form factor (smartphone or desktop/tablet).

The different use cases are described in the sections below.

Select a Single Item (Smartphone)

Tapping the value help icon opens the Select from List tab. As soon as an item is selected, the value help dialog closes automatically.

Single item selection on a smartphone

Select a Single Item (Desktop/Tablet)

Single item selection on a desktop/tablet device

Select a Single Range (Smartphone)

Tapping the value help icon opens the Define Condition tab.

Single range selection on a smartphone

Select a Single Range (Desktop/Tablet)

Clicking the value help icon opens the Define Condition: [Object] tab (for example, Define Condition: Company).

The icon tab bar and the Selected Items / Excluded Items row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Single range selection on a desktop/tablet device

Select Multiple Items | Select/Exclude Multiple Ranges (Smartphone)

Tapping the value help icon displays the start dialog.

The Select from List tab is used to select multiple items
The Define Conditions tab is used to select and exclude ranges.

Both are added as tokens to the Selected Items / Excluded Items row at the bottom of the start dialog.

Start dialog for multi-item and multi-range selection on a smartphone

Multi-range selection on a smartphone

Multi-item selection on a smartphone

Advanced search on a smartphone

Select Multiple Items | Select/Exclude Multiple Ranges (Desktop/Tablet)

Clicking the value help icon displays the icon tab bar with the Select from List and Define Conditions tabs.

The Select from List tab is used to select multiple items
The Define Conditions tab is used to select and exclude ranges.

Both are added as tokens to the Selected Items / Excluded Items row at the bottom of the screen.

Multi-item and multi-range selection on a desktop/tablet device

Select/Exclude Multiple Ranges (Smartphone)

Tapping the value help icon opens the start dialog with the Define Conditions tab.

The selected values are added as tokens to the Selected Items / Excluded Items row at the bottom of the start dialog.

Start dialog for multi-range selection on a smartphone

Multi-range selection on a smartphone

Select/Exclude Multiple Ranges (Desktop/Tablet)

Multi-range selection on a desktop/tablet device

Selected Items / Excluded Items

Each item that is selected from the result list on the Select from List tab is displayed as a token in the Selected Items row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the Selected Items / Excluded Items row.

Copying and Pasting Multiple Values

The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values at once (copied from the clipboard) .

In both areas, users can paste more than one value into the value input field. In this case, the condition row repeats with the previously selected condition and shows one value per row.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Starting dialog: [Object] (for example, Company)
Select from list dialog: Select from List
Advanced search dialog: Advanced Search
Single range selection: Define Condition
Multiple range selection: Define Conditions

For tablet and desktop devices:

Multiple items combined with selection of multiple ranges: [Object] (for example, Company)
Single item selection: Select: [Object] (for example, Select: Company)
Single range selection: Define Condition: [Object] (for example, Define Condition: Company)
Multiple range selection: Define Conditions: [Object] (for example, Define Conditions: Company)

Advanced Search

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

Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
List (guidelines)
Panel (guidelines)

Implementation

Smart Filter Bar with value help dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)

Dialog

Usage

Use the dialog if:

You want to display complex content, but don’t want the user to navigate away from the current page.
You want to display an additional step or process that needs to be confirmed by a user action.
You want to enable the user to create an object with a small number of fields (up to 8 fields).

Do not use the dialog if:

You want to display a simple message. Use the message box instead.
You just want to confirm a successful action.
You do not want to interrupt the user.
You want to enable users to create an object with more than 8 fields. Use an object page instead.

Responsiveness

The dialog provides different behavior on a smartphone than on a tablet or desktop. We distinguish between “cozy” and “compact” dialogs. For more information, see content density.

The buttons in the toolbar are aligned differently on the various devices. On a smartphone, they extend across the entire footer toolbar, but on a tablet or desktop device, they are right-aligned.

Size S (Smartphone)

Full Screen Dialog

Full screen dialog - Size S

Position of the Action Buttons

By default, a dialog can have one or two actions, which extend across the entire footer on smartphones.

Alignment of footer actions - Size S

When to Open Full Screen or Modal

Always display message dialogs as modals. There is no need to display a simple message in a full screen dialog. If you want to display a simple message, use the message box instead.

Size M (Tablet)

By default, the dialog can have up to two action buttons in the footer. The action buttons in the toolbar are right-aligned. Use cozy mode on tablet devices.

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Size L (Desktop)

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Dialog in compact mode - Size L

Layout

Position on the Screen

The dialog is positioned in the center of the screen. It opens in a modal window to ensure that it attracts the user’s attention when it displays emergency states.

On a smartphone, the stretch property allows you to achieve full screen behavior.

Behavior and Interaction

Navigation in a Dialog

You can let users navigate to another page within the dialog. On the second page, an arrow at the top of the dialog allows users to navigate back to the first page.

Navigation Pattern List - Size L

Navigation Pattern Detail - Size L

Resizable

You can let users change the size of the dialog (property resizable = “true). The resizable indicator then shows in the bottom-right corner of the dialog.

Resizable indicator in the bottom right-hand corner - Size L

Draggable

By clicking and holding on the heading, users can drag the dialog to another position (property draggable = “true”).

Dialog can be moved by dragging the title - Size L

Messaging Within a Dialog

Do not show message popovers within dialogs. Use highlighting to show issues with content fields. For more information, see form field validation.

Editing and Saving Content

If a dialog is used for editing, keep it simple. If you need more than 8 editable fields, consider other solutions instead, such as navigation to a detail page.

The data in the dialog is only saved when the user click or taps Create or Save. Use form field validation within the dialog to make users aware of any errors.

The data in the dialog is lost if the page is refreshed during the editing process (also in the draft scenario), or if the user chooses Cancel.

Highlighted form fields in a dialog - Size S

Types

Standard Dialog

Use the standard dialog unless you need one of the specialized dialogs below. The standard dialog has a header with a grey background, and no icon.

Other Types of Dialogs

Personalization dialog
Select dialog
Table select dialog
Value help dialog
View settings dialog
Busy dialog

Message Box

Components

The dialog contains the following sections and options:

Title: Title text appears in the dialog header.

Subheader (optional): Subheaders appear below the main header. Since the subheader is not part of the content area, it is not scrollable.

Content: This area contains the actual content of the dialog.

Footer with actions: The footer can contain up to two buttons (optional). If no buttons are defined, the default Close button is shown.

Example of a dialog structure (Cozy example)

Emphasized Buttons in a Dialog

Never use an emphasized button for Cancel.

Emphasized button in the dialog toolbar

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

Toolbar (guidelines)

Implementation

Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Message Boxes (SAPUI5 samples)
Toolbar (SAPUI5 API reference)
Dialog (SAPUI5 API reference)

Select Dialog

The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.

A more enhanced dialog for single selection and multiselection is the value help dialog as it offers range selection and excluding functions.

Usage

Use the select dialog if:

Users need to select one or more entries from a comprehensive list that contains multiple attributes or values.

Do not use the select dialog if:

Users need to pick one item from a predefined set of options that contains one attribute or value only such as languages. In this case, consider using the combo box or select instead.
Your use case requires more enhanced functionalities such as a selection based on ranges. For the selection of values, consider using the value help dialog instead.
Your use case requires tabs, filters, or an Add New functionality in the select dialog. In this case, use a standard dialog instead.

Responsiveness

The display of the select control depends on the device. On phones, the selection list takes up the whole screen. On desktop and tablet devices it appears as a popover.

Size S

Single select dialog in full screen on smartphone

Multi-select dialog in full screen on smartphone

Size M

Single select dialog on tablet

Multi-select dialog on tablet

Size L

Single select dialog on desktop

Multi-select dialog on desktop

Components

Dialog Header

You need to set the title of the dialog header (1). We recommend the following form:

Single selection

Select

Example: Select Product

Multi-selection

Select

Example: Select Products

Search

The first element in the dialog is a standard search field (2).

Info Toolbar

The info toolbar (3) is only available in multi-selection mode. It shows the number of selected items in the following form:

Selected :

Example: Selected Products: 2

Content

Button Toolbar

Components of the select dialog. Left: single select, right: multi select

Behavior and Interaction

The select dialog can be called up from any control. The most common trigger is an input field with selection icon, also known as a “value help field”, or F4. Alternative triggers are buttons or icons, which add items to an existing list or the info bar in the master list in order to apply a contextual filter.

Single Select

Once users select an entry, the select dialog is closed and the selected entry is taken over. If applicable, the entry is displayed in the field from which the dialog was triggered.

Multi-Select

Search

The user can search items.

Guidelines

List Options

If you need to indicate that all items apply (for example, as a list filter), provide All as an option and place it at the beginning of the list.

Select list with '(None)'

Search Behavior

Two types of search behavior are available:

(1) A live search, also known as “search-as-you-type” (property: liveChange), which is triggered by each character that the user enters or deletes.

(2) A manual search, which is triggered explicitly after the user enters text in the search field and clicks or taps the Search icon or presses the ENTER key.

Remember Selections

Selection is remembered after the dialog is reopened

Selection is reset after the dialog is closed

Info Bar

In multi-selection mode, an info bar shows the number of selected items. Use the following format:

<Business Object> Selected: <# items>
Example: Products Selected: 2

Note that the info bar is not “sticky”. When the user scrolls down the list, the info bar scrolls off the screen.

Content

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

Combo Box (guidelines)
Select (guidelines)
Value Help (guidelines)
Search (guidelines)

Implementation

No links

Popover

Usage

Use a popover if:

You need to define your own structure.
You want to show UI elements that are not available with the quick view.

Do not use a popover if:

The quick view is more appropriate for your use case.
The objects are in a master list (in this case, the details are shown in the details area).

Responsiveness

The popover can be used in the following ways:

Responsive and adaptive: sap.m.ResponsivePopover
Shows a dialog on smartphones (to be closed with an X) and a popover on a tablet or desktop.
Non-responsive: sap.m.Popover
Always shows a popover. Only use a non-responsive popover if it has very little content. On smartphones, the popover should not use more than a third of the phone’s real estate.

Layout

Structure of Popover

The header and footer are generally optional. The other elements are as follows:

Back (1) – optional
Needs to be implemented if the user can trigger further popovers. Always show popovers in place. Never place them on top of each other.

Close function (3)
This feature closes the dialog. It is available for smartphones only and is set automatically (sap.m.ResponsivePopover).

Content (4)
Ensure that the content has a basic design and shows only the most important information. We recommend the following:

Use no more than two groups.
Limit the total number of fields to eight.
Use single-column tables.
Use micro charts.

Actions (5) – optional

Popover – General structure

Popover – Example

Placement Types

If you set the placement type to “Auto”, the position of the popover in relation to the reference control is determined automatically, depending on the available space.

Popover with default placement type - Right

Developer Hint

More information on the different placement types can be found here.

Modal Mode

The popover in modal mode opens in a modal window, which blocks the whole screen and attracts the user’s attention.

Popover – Modal

Behavior and Interaction

Opening a Popover

The user opens a popover by clicking or tapping an object represented by a text link or an icon. To improve accessibility, we recommend using texts, such as the name or ID of an object.

Closing a Popover

The popover is closed when the user clicks or taps outside the popover or selects an action within the popover.

When the popover is open over a table, and the user clicks outside the popover to close it, this can trigger unwanted drill-down navigation to a table item. Since this interaction changes the whole screen content, you can suppress drill-down navigation on tables when popovers are open on the same screen.

Developer Hint

To control the closing behavior of the popover in this case, add a CSS style “pointer-events: none” to the area that should remain static. When the popover is closed, remove the CSS style again. Here is a sample demonstrating how this can be achieved.

You can also use the property setBlocked to prevent users from accidentally triggering actions while closing the popover. The property lets you specify the area to be blocked when the popover is opened.

Guidelines

Show status information as text fields in a content group. You can use semantic text colors.
You can define a height for the popover. If the content exceeds the height, a scroll bar is displayed.

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

Quick View (guidelines)

Implementation

Popover (SAPUI5 samples)

Responsive Popover (SAPUI5 samples)

Table Select Dialog

The dialog provides a responsive table layout with additional search, filter, and selection functionalities in the header. A footer toolbar provides actions for canceling or confirming the process.

Usage

Use the table select dialog if:

You need to help users select one or more items from a comprehensive list that contains multiple attributes or values.

Do not use the table select dialog if:

You need to help users pick one item from a predefined set of options that contains only one value. In this case, use the dropdown box instead.
You need to help users with query-based range selection and enhanced filter options. In this case, use the value help dialog instead.
Your use case requires tabs, filters, or actions in a select dialog.In this case, use a standard dialog instead.
Your use case only requires filtering without selection. In this case, use the filter toolbar instead.

Responsiveness

On bigger screens, the table select dialog also provides columns

The table in the dialog is responsive and wraps on smaller screens to show a list

Behavior and Interaction

The table select dialog can be called up from any control. The trigger is usually a button with a selection icon in an input field, or an Add button in a toolbar.

Input trigger: This trigger can be useful if users need to select, for example, one customer from a large customer register.

Example of a trigger: the selection icon in the input field

Add button: This trigger can be useful if users need to add an item to a list. For example, the dialog could help users select the product from a large product catalog. Clicking OK in the footer toolbar of the dialog adds the selected products to the list.

Reset button: This button allows users to clear all the selected items.

Example of a trigger: Add button in a table

Single Select

Multi-Select

The multi-select version of the table select dialog provides checkboxes for users to choose multiple items. The blue info bar above the table indicates the number of selected items. The selection is taken over when the user closes the dialog via the OK button in the footer toolbar. Clicking or tapping Cancel closes the dialog without taking over the selected values.

Remembering Selections

If selections need to be memorized in order to help users make corrections, you can set the RememberSelections property to true. This restores the selection to the state it was in when the dialog was last opened as soon as users exit the dialog via OK or Cancel. The interaction flow of the RememberSelections property is shown and explained in the select dialog article.

Grouping

The list can also be displayed as grouped. Group headers divide the table into segments. A pregrouped table is useful for tables with many entries, which can be sorted by a single attribute.

A responsive table with group headers

Guidelines

Set the information provided in the table select dialog from top to bottom as follows:

Dialog Header

Set the title of the dialog header in the following form:

For single selection: Select <Business Object>. For example: Select Product
For multiple selection: Select <Business Objects> [plural]. For example: Select Products.

Search

The first interactive element in the dialog is a standard search field. Two types of search behavior are available:

A live search, also known as “search-as-you-type,” which is triggered by each character that the user enters or deletes.
A manual search, which is triggered explicitly after the user enters text in the search field and clicks or taps theSearch icon or presses the ENTER key. As soon as the user hits the Search button, a Delete icon appears at the end of the input field to delete the keyword and cancel the result list.

Info Bar

In multi-selection mode, an info bar shows the number of selected items. Use the following format:

<Business Object> Selected: <# items>
Example: Products Selected: 2

Content

The content area provides a table. This behaves like the responsive table, so the columns wrap on smaller screens and display a list.

Footer Toolbar

In the single-select version, only provide Cancel in the footer toolbar because the dialog takes over the selection as soon as the user chooses one.

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)

Implementation

Table Select Dialog (SAPUI5 samples)
Table Select Dialog (SAPUI5 API reference)

Value Help Dialog

Usage

Use the value help dialog if:

The user needs to use different attributes (such as city, company name, and so on) to find an object.
The user is searching within a dataset containing more than 200 items.
The user needs to define and select ranges and exclusions.

Do not use the value help dialog if:

The user only needs a few items to filter the data set. Always start with the least complex control (for example, use select instead of value help if the user needs to select only one item from a short list).

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Value help dialog - Size S

Value help dialog - Size M

Value help dialog - Size L

Components

The value help dialog contains the following components:

Components of the Value Help Dialog

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Icon Tab Bar on Tablet/Desktop and List Control on Phone (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem) Select from List and
Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Select from List and the Define Conditions tab.

Search Template (3)

Basic Search (4)

The basic search finds all results that are somehow related to the input. For example, the search term “A” returns all the results containing the letter “A”.

Always offer the basic search in the value help dialog. Position the basic search to the right of the search template control. If there is no search template control, left-align the basic search.

Advanced Search (5)

The advanced search offers a search field for each column in the result list.

Value help dialog - Advanced search

For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields/advanced search fields are added automatically to the advanced search area.
There is a toggle link to show and hide the advanced search.
On desktops, the advanced search should be expanded by default.
On tablets, the advanced search should be collapsed by default.
In each of the filter fields, users can use operators like “between” or “lower than” to define ranges.

How the Advanced Search Works

The user can include operators (such as “=“) to define the ranges directly within the field without moving to the fields of the Define Conditions tab.

The user must type the following to get results:

Operator	Input Notation	Example
between	value…value	000…100
equal to	=value	=0001
contains	value	1
starts with	value*	001*
ends with	*value	*5
less than	<value	<100
less than or equal to	<=value	<=200
greater than	>value	>0300
greater than or equal to	>=value	>=0500
not equal to*	!(=value)	!(=0)

* Note that there isn’t an explicit “not equal to” operator. Instead, you need to use “Exclude” (!) in conjunction with the “equal to” operator (=).

Advanced search using operator

Result List (6)

You can prefill the result list of the value help dialog by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the results list.

Selected/Excluded Items Row (7)

On desktops, the selection area with the selected and excluded items row is initially expanded.
On tablets and phones, the selection area with the selected and excluded item row is initially collapsed.

Footer Toolbar (8)

The footer bar offers the OK and Cancel buttons.

Include/Exclude Areas for Range Selection (9)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

equal to
between
less than
less than or equal to
greater than
greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

Developer Hint

For information on how to manage whitespace characters (blanks) when users copy and paste text into input controls, see Removing Leading and Trailing Whitespace.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking or tapping the Go button. The search results are shown in the result list.
If the input field where the user is coming from contains data, this data is transferred to the basic search of the value help dialog and the results are then filtered accordingly.
The basic search performs a search across all fields that are displayed in the advanced search and the result list.

Item and Range Selection

Depending on your use case, the value help dialog can offer different selection options:

Select a single item
Select a single range
Select multiple items
Select/exclude multiple ranges

Users open the value help dialog by clicking or tapping the value help icon of the input field. The next steps depend on the use case and form factor (smartphone or desktop/tablet).

The different use cases are described in the sections below.

Select a Single Item (Smartphone)

Tapping the value help icon opens the Select from List tab. As soon as an item is selected, the value help dialog closes automatically.

Single item selection on a smartphone

Select a Single Item (Desktop/Tablet)

Clicking the value help icon opens the Select: <Object> screen (for example, Select: Company). The icon tab bar and the Selected Items / Excluded Items row are hidden. As soon as an item is selected, the value help dialog closes automatically.

Single item selection on a desktop/tablet device

Select a Single Range (Smartphone)

Tapping the value help icon opens the Define Condition tab.

Single range selection on a smartphone

Select a Single Range (Desktop/Tablet)

Clicking the value help icon opens the Define Condition: <Object> tab (for example, Define Condition: Company).

The icon tab bar and the Selected Items / Excluded Items row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Single range selection on a desktop/tablet device

Select Multiple Items | Select/Exclude Multiple Ranges (Smartphone)

Tapping the value help icon displays the start dialog.

The Select from List tab is used to select multiple items
The Define Conditions tab is used to select and exclude ranges.

Both are added as tokens to the Selected Items / Excluded Items row at the bottom of the start dialog.

Start dialog for multi-item and multi-range selection on a smartphone

Multi-range selection on a smartphone

Multi-item selection on a smartphone

Advanced search on a smartphone

Select Multiple Items | Select/Exclude Multiple Ranges (Desktop/Tablet)

Clicking the value help icon displays the icon tab bar with the Select from List and Define Conditions tabs.

The Select from List tab is used to select multiple items
The Define Conditions tab is used to select and exclude ranges.

Both are added as tokens to the Selected Items / Excluded Items row at the bottom of the screen.

Multi-item and multi-range selection on a desktop/tablet device

Select/Exclude Multiple Ranges (Smartphone)

Tapping the value help icon opens the start dialog with the Define Conditions tab.

The selected values are added as tokens to the Selected Items / Excluded Items row at the bottom of the start dialog.

Start dialog for multi-range selection on a smartphone

Multi-range selection on a smartphone

Select/Exclude Multiple Ranges (Desktop/Tablet)

Clicking the value help icon opens the Define Conditions: <Object> tab (for example, Define Conditions: Company). The icon tab bar is hidden and the Selected Items / Excluded Items row is displayed.

Multi-range selection on a desktop/tablet device

Selected Items / Excluded Items

Each item that is selected from the result list on the Select from List tab is displayed as a token in the Selected Items row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the Selected Items / Excluded Items row.

Copying and Pasting Multiple Values

The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values at once (copied from the clipboard) .

In both areas, users can paste more than one value into the value input field. In this case, the condition row repeats with the previously selected condition and shows one value per row.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Starting dialog: <Object> (for example, Company)
Select from list dialog: Select from List
Advanced search dialog: Advanced Search
Single range selection: Define Condition
Multiple range selection: Define Conditions

For tablet and desktop devices:

Multiple items combined with selection of multiple ranges: <Object> (for example, Company)
Single item selection: Select: <Object> (for example, Select: Company)
Single range selection: Define Condition: <Object> (for example, Define Condition: Company)
Multiple range selection: Define Conditions: <Object> (for example, Define Conditions: Company)

Advanced Search

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

Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
List (guidelines)
Panel (guidelines)

Implementation

Smart Filter Bar with value help dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)

Popover

Usage

Use a popover if:

You need to define your own structure.
You want to show UI elements that are not available with the quick view.

Do not use a popover if:

The quick view is more appropriate for your use case.
The objects are in a master list (in this case, the details are shown in the details area).

Responsiveness

The popover can be used in the following ways:

Responsive and adaptive: sap.m.ResponsivePopover
Shows a dialog on smartphones (to be closed with an X) and a popover on a tablet or desktop.
Non-responsive: sap.m.Popover
Always shows a popover. Only use a non-responsive popover if it has very little content. On smartphones, the popover should not use more than a third of the phone’s real estate.

Layout

Structure of Popover

The header and footer are generally optional. The other elements are as follows:

Back (1) – optional
Needs to be implemented if the user can trigger further popovers. Always show popovers in place. Never place them on top of each other.

Close function (3)
This feature closes the dialog. It is available for smartphones only and is set automatically (sap.m.ResponsivePopover).

Content (4)
Ensure that the content has a basic design and shows only the most important information. We recommend the following:

Use no more than two groups.
Limit the total number of fields to eight.
Use single-column tables.
Use micro charts.

Actions (5) – optional

Popover – General structure

Popover – Example

Placement Types

If you set the placement type to “Auto”, the position of the popover in relation to the reference control is determined automatically, depending on the available space.

Popover with default placement type - Right

Developer Hint

More information on the different placement types can be found here.

Modal Mode

The popover in modal mode opens in a modal window, which blocks the whole screen and attracts the user’s attention.

Popover – Modal

Behavior and Interaction

Opening a Popover

The user opens a popover by clicking or tapping an object represented by a text link or an icon. To improve accessibility, we recommend using texts, such as the name or ID of an object.

Closing a Popover

The popover is closed when the user clicks or taps outside the popover or selects an action within the popover.

Developer Hint

Guidelines

Show status information as text fields in a content group. You can use semantic text colors.
You can define a height for the popover. If the content exceeds the height, a scroll bar is displayed.

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

Quick View (guidelines)

Implementation

Popover (SAPUI5 samples)

Responsive Popover (SAPUI5 samples)

Dialog

Usage

Use the dialog if:

You want to display complex content, but don’t want the user to navigate away from the current page.
You want to display an additional step or process that needs to be confirmed by a user action.
You want to enable the user to create an object with a small number of fields (up to 8 fields).

Do not use the dialog if:

You want to display a simple message. Use the message box instead.
You just want to confirm a successful action.
You do not want to interrupt the user.
You want to enable users to create an object with more than 8 fields. Use an object page instead.

Responsiveness

The dialog provides different behavior on a smartphone than on a tablet or desktop. We distinguish between “cozy” and “compact” dialogs. For more information, see content density.

The buttons in the toolbar are aligned differently on the various devices. On a smartphone, they extend across the entire footer toolbar, but on a tablet or desktop device, they are right-aligned.

Size S (Smartphone)

Full Screen Dialog

Full screen dialog

Position of the Action Buttons

By default, a dialog can have one or two actions, which extend across the entire footer on smartphones.

Alignment of footer actions

When to Open Full Screen or Modal

Always display message dialogs as modals. There is no need to display a simple message in a full screen dialog. If you want to display a simple message, use the message box instead.

Size M (Tablet)

By default, the dialog can have up to two action buttons in the footer. The action buttons in the toolbar are right-aligned. Use cozy mode on tablet devices.

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Size L (Desktop)

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Dialog in compact mode (size L)

Layout

Position on the Screen

The dialog is positioned in the center of the screen. It opens in a modal window to ensure that it attracts the user’s attention when it displays emergency states.

On a smartphone, the stretch property allows you to achieve full screen behavior.

Behavior and Interaction

Navigation in a Dialog

You can let users navigate to another page within the dialog. On the second page, an arrow at the top of the dialog allows users to navigate back to the first page.

Navigation Pattern

Resizable

You can let users change the size of the dialog (property resizable = “true). The resizable indicator then shows in the bottom-right corner of the dialog.

Resizable indicator in the bottom right-hand corner

Draggable

By clicking and holding on the heading, users can drag the dialog to another position (property draggable = “true”).

Dialog can be moved by dragging the title

Messaging Within a Dialog

Do not show message popovers within dialogs. Use highlighting to show issues with content fields. For more information, see form field validation.

Editing and Saving Content

If a dialog is used for editing, keep it simple. If you need more than 8 editable fields, consider other solutions instead, such as navigation to a detail page.

The data in the dialog is only saved when the user click or taps Save. Use form field validation within the dialog to make users aware of any errors.

The data in the dialog is lost if the page is refreshed during the editing process (also in the draft scenario), or if the user chooses Cancel.

Highlighted form fields in a dialog

Types

Standard Dialog

Use the standard dialog unless you need one of the specialized dialogs below. The standard dialog has a header with a grey background, and no icon.

Other Types of Dialogs

Personalization dialog
Select dialog
Table select dialog
Value help dialog
View settings dialog
Busy dialog

Message Box

Components

The dialog contains the following sections and options:

Title: Title text appears in the dialog header.

Subheader (optional): Subheaders appear below the main header. Since the subheader is not part of the content area, it is not scrollable.

Content: This area contains the actual content of the dialog.

Footer with actions: The footer can contain up to two buttons (optional). If no buttons are defined, the default Close button is shown.

Example of a dialog structure

Emphasized Buttons in a Dialog

Never use an emphasized button for Cancel.

Emphasized button in the dialog toolbar

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

Toolbar (guidelines)

Implementation

Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Message Boxes (SAPUI5 samples)
Toolbar (SAPUI5 API reference)
Dialog (SAPUI5 API reference)

Select Dialog

The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.

A more enhanced dialog for single selection and multiselection is the value help dialog as it offers range selection and excluding functions.

Usage

Use the select dialog if:

Users need to select one or more entries from a comprehensive list that contains multiple attributes or values.

Do not use the select dialog if:

Users need to pick one item from a predefined set of options that contains one attribute or value only such as languages. In this case, consider using the combo box or select instead.
Your use case requires more enhanced functionalities such as a selection based on ranges. For the selection of values, consider using the value help dialog instead.
Your use case requires tabs, filters, or an Add New functionality in the select dialog. In this case, use a standard dialog instead.

Responsiveness

The display of the select control depends on the device. On phones, the selection list takes up the whole screen. On desktop and tablet devices it appears as a popover.

Size S

Single select dialog in full screen on smartphone

Multi-select dialog in full screen on smartphone

Size M

Single select dialog on tablet

Multi-select dialog on tablet

Size L

Single select dialog on desktop

Multi-select dialog on desktop

Components

Dialog Header

You need to set the title of the dialog header (1). We recommend the following form:

Single selection

Select <entity>

Example: Select Product

Multi-selection

Select <entities>

Example: Select Products

Search

The first element in the dialog is a standard search field (2).

Info Toolbar

The info toolbar (3) is only available in multi-selection mode. It shows the number of selected items in the following form:

Selected :

Example: Selected Products: 2

Content

Button Toolbar

Components of the select dialog. Left: single select, right: multi select

Behavior and Interaction

The select dialog can be called up from any control. The most common trigger is an input field with selection icon, also known as a “value help field”, or F4. Alternative triggers are buttons or icons, which add items to an existing list or the info bar in the master list in order to apply a contextual filter.

Single Select

Once users select an entry, the select dialog is closed and the selected entry is taken over. If applicable, the entry is displayed in the field from which the dialog was triggered.

Multi-Select

Search

The user can search items.

Guidelines

List options

If you need to indicate that all items apply (for example, as a list filter), provide All as an option and place it at the beginning of the list.

Select list with '(None)'

Search Behavior

Two types of search behavior are available:

(1) A live search, also known as “search-as-you-type” (property: liveChange), which is triggered by each character that the user enters or deletes.

(2) A manual search, which is triggered explicitly after the user enters text in the search field and clicks or taps the Search icon or presses the ENTER key.

Remember Selections

Selection is remembered after the dialog is reopened

Selection is reset after the dialog is closed

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

Combo Box (guidelines)
Select (guidelines)
Value Help (guidelines)
Search (guidelines)

Implementation

No links

Popover

Usage

Use a popover if:

You need to define your own structure.
You want to show UI elements that are not available with the quick view.

Do not use a popover if:

The quick view is more appropriate for your use case.
The objects are in a master list (in this case, the details are shown in the details area).

Responsiveness

The popover can be used in the following ways:

Responsive and adaptive: sap.m.ResponsivePopover
Shows a dialog on smartphones (to be closed with an X) and a popover on a tablet or desktop.
Non-responsive: sap.m.Popover
Always shows a popover. Only use a non-responsive popover if it has very little content. On smartphones, the popover should not use more than a third of the phone’s real estate.

Layout

Structure of Popover

The header and footer are generally optional. The other elements are as follows:

Back (1) – optional
Needs to be implemented if the user can trigger further popovers. Always show popovers in place. Never place them on top of each other.

Close function (3)
This feature closes the dialog. It is available for smartphones only and is set automatically (sap.m.ResponsivePopover).

Content (4)
Ensure that the content has a basic design and shows only the most important information. We recommend the following:

Use no more than two groups.
Limit the total number of fields to eight.
Use single-column tables.
Use micro charts.

Actions (5) – optional

Popover – General structure

Popover – Example

Behavior and Interaction

Opening a Popover

The user opens a popover by clicking or tapping an object represented by a text link or an icon. To improve accessibility, we recommend using texts, such as the name or ID of an object.

Closing a Popover

The popover is closed when the user clicks or taps outside the popover or selects an action within the popover.

Developer Hint

Guidelines

Show status information as text fields in a content group. You can use semantic text colors.
You can define a height for the popover. If the content exceeds the height, a scroll bar is displayed.

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

Quick View (guidelines)

Implementation

Popover (SAPUI5 samples)

Responsive Popover (SAPUI5 samples)

Value Help Dialog

Usage

Use the value help dialog if:

The user needs to use different attributes (such as city, company name, and so on) to find an object.
The user is searching within a data set containing more than 200 items.
The user needs to define and select ranges and exclusions.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Size S – Value help dialog

Size M – Value help dialog

Size L – Value help dialog

Components

The value help dialog contains the following components:

Header bar
Icon tab bar and list control
Search template (optional)
Basic search
Items row (selected items, excluded items)
Footer toolbar
Include/exclude areas for range selection

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Icon Tab Bar on Tablet/Desktop and List Control on Phone (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem) Select from List and
Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Select from List and the Define Conditions tab.

Search Template (3)

Basic Search (4)

It’s mandatory to display the basic search in the value help dialog. Position the basic search on the right of the search template control. If there’s no search template control, the basic search is displayed left-aligned.

Advanced Search (5)

The advanced search offers all columns of the result list.
The value help icon of the business object ID field and description field for the business object that opened the current value help dialog will open only the Define Conditions screen. The entire value help dialog is not shown in order to prevent endless loops. For example, the value help icon of the customer ID or description field in a Select: Customer value help dialog will navigate directly to the Define Conditions screen.

For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields/advanced search fields are added automatically to the advanced search area.
There is a toggle link to show and hide the advanced search.
On desktops, the advanced search should be expanded by default.
On tablets, the advanced search should be collapsed by default.

Result List (6)

You can prefill the result list of the value help dialog by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the results list.

Selected/Excluded Items Row (7)

The selected/excluded item row is displayed in the panel container (see panel for more information). Each item or range that is selected or excluded is displayed as a token in the selected or excluded item row.

On desktops, the selection area with the selected and excluded items row is expanded initially.
On tablets and phones, the selection area with the selected and excluded item row is collapsed initially.

Footer Toolbar (8)

The footer bar includes OK and Cancel buttons.

Include/Exclude Area for Range Selection (9)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

Equal to
Between
Less than
Less than or equal to
Greater than
Greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

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.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking the Go button. The search results are shown in the result list.
If the input field where the user is coming from contains data, it is transferred to the basic search of the value help dialog and the results are filtered accordingly.
The basic search performs a search in all fields that are displayed in the advanced search and the result list.

Item and Range Selection

The user can select single and multiple items, as well as single and multiple ranges. Items and ranges can also be excluded.

1. Single Selection

A single item or a range can be selected in single selection cases:

Single Item Selection on Smartphones

For the selection of a single item, the value help dialog is opened by clicking the value help icon of the input field. The Select From List tab is then displayed. As soon as one item is selected, the value help dialog closes automatically.

Value help dialog – Single item selection on a smartphone

Single Item Selection on Tablets and Desktops

For the selection of a single item, the value help dialog is opened by clicking the value help icon of the input field. In this case only, the content of the Select From List tab is displayed. The icon tab bar and the selected/excluded item row are hidden. As soon as one item is selected, the value help dialog closes automatically.

Value help dialog – Single item selection on desktop

Single Range Selection on Smartphones

For the selection of a single range, the value help dialog is opened by clicking the value help icon of the input field. The Define Condition tab is then displayed.

Value help dialog – Single range selection on smartphone

Single Range Selection on Tablets and Desktops

For the selection of a single range, the value help dialog is opened by clicking the value help icon of the input field. In this case only, the content of the Define Conditions tab is displayed.

The icon tab bar and the selected/excluded item row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Value help dialog – Single range selection

2. Multiselection

Users can select multiple items and ranges in range selection cases:

Multi-Item and Multi-Range Selection on Smartphones

For selection of multiple items and multiple ranges, the value help dialog is opened by clicking the value help icon of the input field. The start dialog is then displayed.

Use the Select From List tab to select multiple items. Use the Define Conditions tab to select and exclude ranges. Both are added as tokens to the selected/excluded items row on the bottom of the start dialog.

Value help dialog – Start dialog for multi-item and multi-range selection on smartphone

Value help dialog – Multi-item selection on smartphone

Value help dialog – Advanced search on smartphone

Multi-Item and Multi-Range Selection on Tablets and Desktops

For selection of multiple items and multiple ranges, the value help dialog is opened by clicking the value help icon of the input field. The icon tab bar with the Select From List tab and the Define Conditions tab are displayed.

Value help dialog – Multi-item and multi-range selection on desktop

3. Multi-Range Selection

Multi-Range Selection on Smartphones

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the start dialog and the Define Conditions tab are displayed.

Value help dialog – Multi-range selection on smartphone

Multi-Range Selection on Tablets and Desktops

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the content of the Define Conditions tab is displayed. The icon tab bar is hidden and the selected/excluded item row is displayed.

Value help dialog – Multi-range selection on desktop

Selected/Excluded Items Row

Each item that is selected from the result list on the Select From List tab is displayed as a token in the selected item row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the selected/excluded item row.

Copying and Pasting Multiple Values

The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values (copied from clipboard) at once.

In both areas, the Value input field allows the user to paste more than one value into an input field. In this case, the condition row will be repeated with the previously selected condition and shows one value per row.

If there are more than 10 rows of conditions, pagination will be added to the screen, displaying a toolbar to allow the user to navigate back and forth between the different pages. A token will appear next to each pasted value on the selected/excluded items row at the bottom of the value help dialog.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Starting dialog: <BO Name>. For example, “Company”.
Select from list dialog: “Select from List”.
Advanced search dialog: “Advanced Search”
For single range selection: “Define Condition”.
For multiple range selection, show “Define Conditions”.

For tablets and desktops:

For multiple items combined with multiple ranges selection, show <BO Name>. For example, “Company”.
For single item selection, show Select: <BO Name>. For example, “Select Company”.
For single range selection, display Define Condition: <BO Name>. For example, “Define Condition: Company”.
For multiple range selection, display Define Conditions: <BO Name>. For example, “Define Conditions: Company”.

Advanced Search

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

Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
List (guidelines)
Panel (guidelines)

Implementation

Value Help Dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)

Value Help Dialog

Usage

Use the value help dialog if:

The user needs to use different attributes (such as city, company name, and so on) to find an object.
The user is searching within a data set containing more than 200 items.
The user needs to define and select ranges and exclusions.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Size S – Value help dialog

Size M – Value help dialog

Size L – Value help dialog

Components

The value help dialog contains the following components:

Header bar
Icon tab bar and list control
Search template (optional)
Basic search
Items row (selected items, excluded items)
Footer toolbar
Include/exclude areas for range selection

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Icon Tab Bar on Tablet/Desktop and List Control on Phone (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem) Select from List and
Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Select from List and the Define Conditions tab.

Search Template (3)

Basic Search (4)

Advanced Search (5)

The advanced search offers all columns of the result list.
The value help icon of the business object ID field and description field for the business object that opened the current value help dialog will open only the Define Conditions screen. The entire value help dialog is not shown in order to prevent endless loops. For example, the value help icon of the customer ID or description field in a Select: Customer value help dialog will navigate directly to the Define Conditions screen.

For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields/advanced search fields are added automatically to the advanced search area.
There is a toggle link to show and hide the advanced search.
On desktops, the advanced search should be expanded by default.
On tablets, the advanced search should be collapsed by default.

Result List (6)

You can prefill the result list of the value help dialog by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the results list.

Selected/Excluded Items Row (7)

On desktops, the selection area with the selected and excluded items row is expanded initially.
On tablets and phones, the selection area with the selected and excluded item row is collapsed initially.

Footer Toolbar (8)

The footer bar includes OK and Cancel buttons.

Include/Exclude Area for Range Selection (9)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

Equal to
Between
Less than
Less than or equal to
Greater than
Greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

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.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking the Go button. The search results are shown in the result list.
If the input field where the user is coming from contains data, it is transferred to the basic search of the value help dialog and the results are filtered accordingly.
The basic search performs a search in all fields that are displayed in the advanced search and the result list.

Item and Range Selection

The user can select single and multiple items, as well as single and multiple ranges. Items and ranges can also be excluded.

1. Single Selection

A single item or a range can be selected in single selection cases:

Single Item Selection on Smartphones

Value help dialog – Single item selection on a smartphone

Single Item Selection on Tablets and Desktops

Value help dialog – Single item selection on desktop

Single Range Selection on Smartphones

For the selection of a single range, the value help dialog is opened by clicking the value help icon of the input field. The Define Condition tab is then displayed.

Value help dialog – Single range selection on smartphone

Single Range Selection on Tablets and Desktops

The icon tab bar and the selected/excluded item row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Value help dialog – Single range selection

2. Multiselection

Users can select multiple items and ranges in range selection cases:

Multi-Item and Multi-Range Selection on Smartphones

For selection of multiple items and multiple ranges, the value help dialog is opened by clicking the value help icon of the input field. The start dialog is then displayed.

Value help dialog – Start dialog for multi-item and multi-range selection on smartphone

Value help dialog – Multi-item selection on smartphone

Value help dialog – Advanced search on smartphone

Multi-Item and Multi-Range Selection on Tablets and Desktops

Value help dialog – Multi-item and multi-range selection on desktop

3. Multi-Range Selection

Multi-Range Selection on Smartphones

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the start dialog and the Define Conditions tab are displayed.

Value help dialog – Multi-range selection on smartphone

Multi-Range Selection on Tablets and Desktops

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the content of the Define Conditions tab is displayed. The icon tab bar is hidden and the selected/excluded item row is displayed.

Value help dialog – Multi-range selection on desktop

Selected/Excluded Items Row

Each item that is selected from the result list on the Select From List tab is displayed as a token in the selected item row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the selected/excluded item row.

Copying and Pasting Multiple Values

The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values (copied from clipboard) at once.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Starting dialog: <BO Name>. For example, “Company”.
Select from list dialog: “Select from List”.
Advanced search dialog: “Advanced Search”
For single range selection: “Define Condition”.
For multiple range selection, show “Define Conditions”.

For tablets and desktops:

For multiple items combined with multiple ranges selection, show <BO Name>. For example, “Company”.
For single item selection, show Select: <BO Name>. For example, “Select Company”.
For single range selection, display Define Condition: <BO Name>. For example, “Define Condition: Company”.
For multiple range selection, display Define Conditions: <BO Name>. For example, “Define Conditions: Company”.

Advanced Search

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

Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
List (guidelines)
Panel (guidelines)

Implementation

Value Help Dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)

Value Help Dialog

Usage

Use the value help dialog if:

The user needs to use different attributes (such as city, company name, and so on) to find an object.
The user is searching within a data set containing more than 200 items.
The user needs to define and select ranges and exclusions.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Size S – Value help dialog

Size M – Value help dialog

Size L – Value help dialog

Components

The value help dialog contains the following components:

Header bar
Icon tab bar and list control
Search template (optional)
Basic search
Items row (selected items, excluded items)
Footer toolbar
Include/exclude areas for range selection

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Icon Tab Bar on Tablet/Desktop and List Control on Phone (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem) Select from List and
Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Select from List and the Define Conditions tab.

Search Template (3)

Basic Search (4)

Advanced Search (5)

The advanced search offers all columns of the result list.
The value help icon of the business object ID field and description field for the business object that opened the current value help dialog will open only the Define Conditions screen. The entire value help dialog is not shown in order to prevent endless loops. For example, the value help icon of the customer ID or description field in a Select: Customer value help dialog will navigate directly to the Define Conditions screen.

For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields/advanced search fields are added automatically to the advanced search area.
There is a toggle link to show and hide the advanced search.
On desktops, the advanced search should be expanded by default.
On tablets, the advanced search should be collapsed by default.

Result List (6)

You can prefill the result list of the value help dialog by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the results list.

Selected/Excluded Items Row (7)

On desktops, the selection area with the selected and excluded items row is expanded initially.
On tablets and phones, the selection area with the selected and excluded item row is collapsed initially.

Footer Toolbar (8)

The footer bar includes OK and Cancel buttons.

Include/Exclude Area for Range Selection (9)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

Equal to
Between
Less than
Less than or equal to
Greater than
Greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

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.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking the Go button. The search results are shown in the result list.
If the input field where the user is coming from contains data, it is transferred to the basic search of the value help dialog and the results are filtered accordingly.
The basic search performs a search in all fields that are displayed in the advanced search and the result list.

Item and Range Selection

The user can select single and multiple items, as well as single and multiple ranges. Items and ranges can also be excluded.

1. Single Selection

A single item or a range can be selected in single selection cases:

Single Item Selection on Smartphones

Value help dialog – Single item selection on a smartphone

Single Item Selection on Tablets and Desktops

Value help dialog – Single item selection on desktop

Single Range Selection on Smartphones

For the selection of a single range, the value help dialog is opened by clicking the value help icon of the input field. The Define Condition tab is then displayed.

Value help dialog – Single range selection on smartphone

Single Range Selection on Tablets and Desktops

The icon tab bar and the selected/excluded item row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Value help dialog – Single range selection

2. Multiselection

Users can select multiple items and ranges in range selection cases:

Multi-Item and Multi-Range Selection on Smartphones

For selection of multiple items and multiple ranges, the value help dialog is opened by clicking the value help icon of the input field. The start dialog is then displayed.

Value help dialog – Start dialog for multi-item and multi-range selection on smartphone

Value help dialog – Multi-item selection on smartphone

Value help dialog – Advanced search on smartphone

Multi-Item and Multi-Range Selection on Tablets and Desktops

Value help dialog – Multi-item and multi-range selection on desktop

3. Multi-Range Selection

Multi-Range Selection on Smartphones

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the start dialog and the Define Conditions tab are displayed.

Value help dialog – Multi-range selection on smartphone

Multi-Range Selection on Tablets and Desktops

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the content of the Define Conditions tab is displayed. The icon tab bar is hidden and the selected/excluded item row is displayed.

Value help dialog – Multi-range selection on desktop

Selected/Excluded Items Row

Each item that is selected from the result list on the Select From List tab is displayed as a token in the selected item row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the selected/excluded item row.

Copying and Pasting Multiple Values

The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values (copied from clipboard) at once.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Starting dialog: <BO Name>. For example, “Company”.
Select from list dialog: “Select from List”.
Advanced search dialog: “Advanced Search”
For single range selection: “Define Condition”.
For multiple range selection, show “Define Conditions”.

For tablets and desktops:

For multiple items combined with multiple ranges selection, show <BO Name>. For example, “Company”.
For single item selection, show Select: <BO Name>. For example, “Select Company”.
For single range selection, display Define Condition: <BO Name>. For example, “Define Condition: Company”.
For multiple range selection, display Define Conditions: <BO Name>. For example, “Define Conditions: Company”.

Advanced Search

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

Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
List (guidelines)
Panel (guidelines)

Implementation

Value Help Dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)

Value Help Dialog

Usage

Use the value help dialog if:

The user needs to use different attributes (such as city, company name, and so on) to find an object.
The user is searching within a dataset containing more than 200 items.
The user needs to define and select ranges and exclusions.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Size S – Value help dialog

Size M – Value help dialog

Size L – Value help dialog

Components

The value help dialog contains the following components:

Header bar
Icon tab bar and list control
Search template (optional)
Basic search
Items row (selected items, excluded items)
Footer toolbar
Include/exclude areas for range selection

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Icon Tab Bar on Tablet/Desktop and List Control on Phone (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem) Select from List and
Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Select from List and the Define Conditions tab.

Search Template (3)

Basic Search (4)

Advanced Search (5)

The advanced search offers all columns of the result list.
The value help icon of the business object ID field and description field for the business object that opened the current value help dialog will open only the Define Conditions screen. The entire value help dialog is not shown in order to prevent endless loops. For example, the value help icon of the customer ID or description field in a Select: Customer value help dialog will navigate directly to the Define Conditions screen.

For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields/advanced search fields are added automatically to the advanced search area.
There is a toggle link to show and hide the advanced search.
On desktops, the advanced search should be expanded by default.
On tablets, the advanced search should be collapsed by default.

Result List (6)

You can prefill the result list of the value help dialog by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the results list.

Selected/Excluded Items Row (7)

On desktops, the selection area with the selected and excluded items row is expanded initially.
On tablets and phones, the selection area with the selected and excluded item row is collapsed initially.

Footer Toolbar (8)

The footer bar includes OK and Cancel buttons.

Include/Exclude Area for Range Selection (9)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

Equal to
Between
Less than
Less than or equal to
Greater than
Greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

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.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking the Go button. The search results are shown in the result list.
If the input field where the user is coming from contains data, it’s transferred to the basic search of the value help dialog and the results are then filtered accordingly.
The basic search performs a search in all fields that are displayed in the advanced search and the result list.

Item and Range Selection

The user can select single and multiple items, as well as single and multiple ranges. Items and ranges can also be excluded.

1. Single Selection

A single item or a range can be selected in single selection cases:

Single Item Selection on Smartphones

For the selection of a single item, the value help dialog is opened by clicking the value help icon of the input field. The Select from List tab is then displayed. As soon as one item is selected, the value help dialog closes automatically.

Value help dialog – Single item selection on a smartphone

Single Item Selection on Tablets and Desktops

For the selection of a single item, the value help dialog is opened by clicking the value help icon of the input field. In this case only, the content of the Select from List tab is displayed. The icon tab bar and the selected/excluded item row are hidden. As soon as one item is selected, the value help dialog closes automatically.

Value help dialog – Single item selection on desktop

Single Range Selection on Smartphones

For the selection of a single range, the value help dialog is opened by clicking the value help icon of the input field. The Define Condition tab is then displayed.

Value help dialog – Single range selection on smartphone

Single Range Selection for Smartphones

The icon tab bar and the selected/excluded item row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Value help dialog – Single range selection

2. Multi-selection

Users can select multiple items and ranges in range selection cases:

Multi-Item and Multi-Range Selections on Smartphones

For selection of multiple items and multiple ranges, the value help dialog is opened by clicking the value help icon of the input field. The start dialog is then displayed.

Use the Select from List tab to select multiple items. Use the Define Conditions tab to select and exclude ranges. Both are added as tokens to the selected/excluded items row on the bottom of the start dialog.

Value help dialog – Start dialog for multi-item and multi-range selection on smartphone

Value help dialog – Multi-range selection on smartphone

Value help dialog – Multi-item selection on smartphone

Value help dialog – Advanced search on smartphone

Multi-Item and Multi-Range Selection on Tablets and Desktops

For selection of multiple items and multiple ranges, the value help dialog is opened by clicking the value help icon of the input field. The icon tab bar with the Select from List tab and the Define Conditions tab are displayed.

Value help dialog – Multi-item and multi-range selection on desktop

3. Multi-Range Selection

Multi-Range Selection on Smartphones

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the start dialog and the Define Conditions tab are displayed.

Value help dialog – Multi-range selection on smartphone

Multi-Range Selection on Tablets and Desktops

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the content of the Define Conditions tab is displayed. The icon tab bar is hidden and the selected/excluded item row is displayed.

Value help dialog – Multi-range selection on desktop

Selected/Excluded Items Row

Each item that is selected from the result list on the Select from List tab is displayed as a token in the selected item row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the selected/excluded item row.

Copying and Pasting Multiple Values

The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values (copied from clipboard) at once.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Starting dialog: <BO Name>. For example, “Company”.
Select from list dialog: “Select from List”.
Advanced search dialog: “Advanced Search”
For single range selection: “Define Condition”.
For multiple range selection, show “Define Conditions”.

For tablets and desktops:

For multiple items combined with multiple ranges selection, show <BO Name>. For example, “Company”.
For single item selection, show Select: <BO Name>. For example, “Select Company”.
For single range selection, display Define Condition: <BO Name>. For example, “Define Condition: Company”.
For multiple range selection, display Define Conditions: <BO Name>. For example, “Define Conditions: Company”.

Advanced Search

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

Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
List (guidelines)
Panel (guidelines)

Implementation

Value Help Dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)

Value Help Dialog

Usage

Use the value help dialog if:

The user needs to use different attributes (such as city, company name, and so on) to find an object.
The user is searching within a dataset containing more than 200 items.
The user needs to define and select ranges and exclusions.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Size S – Value help dialog

Size M – Value help dialog

Size L – Value help dialog

Components

The value help dialog contains the following components:

Header bar
Icon tab bar and list control
Search template (optional)
Basic search
Items row (selected items, excluded items)
Footer toolbar
Include/exclude areas for range selection

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Icon Tab Bar on Tablet/Desktop and List Control on Phone (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem) Select from List and
Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Select from List and the Define Conditions tab.

Search Template (3)

Basic Search (4)

Advanced Search (5)

The advanced search offers all columns of the result list.
The value help icon of the business object ID field and description field for the business object that opened the current value help dialog will open only the Define Conditions screen. The entire value help dialog is not shown in order to prevent endless loops. For example, the value help icon of the customer ID or description field in a Select: Customer value help dialog will navigate directly to the Define Conditions screen.

For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields/advanced search fields are added automatically to the advanced search area.
There is a toggle link to show and hide the advanced search.
On desktops, the advanced search should be expanded by default.
On tablets, the advanced search should be collapsed by default.

Result List (6)

You can prefill the result list of the value help dialog by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the results list.

Selected/Excluded Items Row (7)

On desktops, the selection area with the selected and excluded items row is expanded initially.
On tablets and phones, the selection area with the selected and excluded item row is collapsed initially.

Footer Toolbar (8)

The footer bar includes OK and Cancel buttons.

Include/Exclude Area for Range Selection (9)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

Equal to
Between
Less than
Less than or equal to
Greater than
Greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

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.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking the Go button. The search results are shown in the result list.
If the input field where the user is coming from contains data, it’s transferred to the basic search of the value help dialog and the results are then filtered accordingly.
The basic search performs a search in all fields that are displayed in the advanced search and the result list.

Item and Range Selection

The user can select single and multiple items, as well as single and multiple ranges. Items and ranges can also be excluded.

1. Single Selection

A single item or a range can be selected in single selection cases:

Single Item Selection on Smartphones

Value help dialog – Single item selection on a smartphone

Single Item Selection on Tablets and Desktops

Value help dialog – Single item selection on desktop

Single Range Selection on Smartphones

For the selection of a single range, the value help dialog is opened by clicking the value help icon of the input field. The Define Condition tab is then displayed.

Value help dialog – Single range selection on smartphone

Single Range Selection for Smartphones

The icon tab bar and the selected/excluded item row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Value help dialog – Single range selection

2. Multi-selection

Users can select multiple items and ranges in range selection cases:

Multi-Item and Multi-Range Selections on Smartphones

For selection of multiple items and multiple ranges, the value help dialog is opened by clicking the value help icon of the input field. The start dialog is then displayed.

Value help dialog – Start dialog for multi-item and multi-range selection on smartphone

Value help dialog – Multi-range selection on smartphone

Value help dialog – Multi-item selection on smartphone

Value help dialog – Advanced search on smartphone

Multi-Item and Multi-Range Selection on Tablets and Desktops

Value help dialog – Multi-item and multi-range selection on desktop

3. Multi-Range Selection

Multi-Range Selection on Smartphones

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the start dialog and the Define Conditions tab are displayed.

Value help dialog – Multi-range selection on smartphone

Multi-Range Selection on Tablets and Desktops

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the content of the Define Conditions tab is displayed. The icon tab bar is hidden and the selected/excluded item row is displayed.

Value help dialog – Multi-range selection on desktop

Selected/Excluded Items Row

Each item that is selected from the result list on the Select from List tab is displayed as a token in the selected item row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the selected/excluded item row.

Copying and Pasting Multiple Values

The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values (copied from clipboard) at once.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Starting dialog: <BO Name>. For example, “Company”.
Select from list dialog: “Select from List”.
Advanced search dialog: “Advanced Search”
For single range selection: “Define Condition”.
For multiple range selection, show “Define Conditions”.

For tablets and desktops:

For multiple items combined with multiple ranges selection, show <BO Name>. For example, “Company”.
For single item selection, show Select: <BO Name>. For example, “Select Company”.
For single range selection, display Define Condition: <BO Name>. For example, “Define Condition: Company”.
For multiple range selection, display Define Conditions: <BO Name>. For example, “Define Conditions: Company”.

Advanced Search

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

Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
List (guidelines)
Panel (guidelines)

Implementation

Value Help Dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)

Value Help Dialog

Usage

Use the value help dialog if:

The user needs to use different attributes (such as city, company name, and so on) to find an object.
The user is searching within a dataset containing more than 200 items.
The user needs to define and select ranges and exclusions.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Size S – Value help dialog

Size M – Value help dialog

Size L – Value help dialog

Components

The value help dialog contains the following components:

Header bar
Icon tab bar and list control
Search template (optional)
Basic search
Items row (selected items, excluded items)
Footer toolbar
Include/exclude areas for range selection

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Icon Tab Bar on Tablet/Desktop and List Control on Phone (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem) Select from List and
Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Select from List and the Define Conditions tab.

Search Template (3)

Basic Search (4)

Advanced Search (5)

The advanced search offers all columns of the result list.
The value help icon of the business object ID field and description field for the business object that opened the current value help dialog will open only the Define Conditions screen. The entire value help dialog is not shown in order to prevent endless loops. For example, the value help icon of the customer ID or description field in a Select: Customer value help dialog will navigate directly to the Define Conditions screen.

For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields/advanced search fields are added automatically to the advanced search area.
There is a toggle link to show and hide the advanced search.
On desktops, the advanced search should be expanded by default.
On tablets, the advanced search should be collapsed by default.

Result List (6)

You can prefill the result list of the value help dialog by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the results list.

Selected/Excluded Items Row (7)

On desktops, the selection area with the selected and excluded items row is expanded initially.
On tablets and phones, the selection area with the selected and excluded item row is collapsed initially.

Footer Toolbar (8)

The footer bar includes OK and Cancel buttons.

Include/Exclude Area for Range Selection (9)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

Equal to
Between
Less than
Less than or equal to
Greater than
Greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

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.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking the Go button. The search results are shown in the result list.
If the input field where the user is coming from contains data, it’s transferred to the basic search of the value help dialog and the results are then filtered accordingly.
The basic search performs a search in all fields that are displayed in the advanced search and the result list.

Item and Range Selection

The user can select single and multiple items, as well as single and multiple ranges. Items and ranges can also be excluded.

1. Single Selection

A single item or a range can be selected in single selection cases:

Single Item Selection on Smartphones

Value help dialog – Single item selection on a smartphone

Single Item Selection on Tablets and Desktops

Value help dialog – Single item selection on desktop

Single Range Selection on Smartphones

For the selection of a single range, the value help dialog is opened by clicking the value help icon of the input field. The Define Condition tab is then displayed.

Value help dialog – Single range selection on smartphone

Single Range Selection for Smartphones

The icon tab bar and the selected/excluded item row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Value help dialog – Single range selection

2. Multi-selection

Users can select multiple items and ranges in range selection cases:

Multi-Item and Multi-Range Selections on Smartphones

For selection of multiple items and multiple ranges, the value help dialog is opened by clicking the value help icon of the input field. The start dialog is then displayed.

Value help dialog – Start dialog for multi-item and multi-range selection on smartphone

Value help dialog – Multi-range selection on smartphone

Value help dialog – Multi-item selection on smartphone

Value help dialog – Advanced search on smartphone

Multi-Item and Multi-Range Selection on Tablets and Desktops

Value help dialog – Multi-item and multi-range selection on desktop

3. Multi-Range Selection

Multi-Range Selection on Smartphones

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the start dialog and the Define Conditions tab are displayed.

Value help dialog – Multi-range selection on smartphone

Multi-Range Selection on Tablets and Desktops

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the content of the Define Conditions tab is displayed. The icon tab bar is hidden and the selected/excluded item row is displayed.

Value help dialog – Multi-range selection on desktop

Selected/Excluded Items Row

Each item that is selected from the result list on the Select from List tab is displayed as a token in the selected item row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the selected/excluded item row.

Copying and Pasting Multiple Values

The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values (copied from clipboard) at once.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Starting dialog: <BO Name>. For example, “Company”.
Select from list dialog: “Select from List”.
Advanced search dialog: “Advanced Search”
For single range selection: “Define Condition”.
For multiple range selection, show “Define Conditions”.

For tablets and desktops:

For multiple items combined with multiple ranges selection, show <BO Name>. For example, “Company”.
For single item selection, show Select: <BO Name>. For example, “Select Company”.
For single range selection, display Define Condition: <BO Name>. For example, “Define Condition: Company”.
For multiple range selection, display Define Conditions: <BO Name>. For example, “Define Conditions: Company”.

Advanced Search

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

Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
List (guidelines)
Panel (guidelines)

Implementation

Value Help Dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)

Value Help Dialog

Usage

Use the value help dialog if:

The user needs to use different attributes (such as city, company name, and so on) to find an object.
The user is searching within a dataset containing more than 200 items.
The user needs to define and select ranges and exclusions.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Size S – Value help dialog

Size M – Value help dialog

Size L – Value help dialog

Components

The value help dialog contains the following components:

Header bar
Icon tab bar and list control
Search template (optional)
Basic search
Items row (selected items, excluded items)
Footer toolbar
Include/exclude areas for range selection

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Icon Tab Bar on Tablet/Desktop and List Control on Phone (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem) Select from List and
Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Select from List and the Define Conditions tab.

Search Template (3)

Basic Search (4)

Advanced Search (5)

The advanced search offers all columns of the result list.
The value help icon of the business object ID field and description field for the business object that opened the current value help dialog will open only the Define Conditions screen. The entire value help dialog is not shown in order to prevent endless loops. For example, the value help icon of the customer ID or description field in a Select: Customer value help dialog will navigate directly to the Define Conditions screen.

For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields/advanced search fields are added automatically to the advanced search area.
There is a toggle link to show and hide the advanced search.
On desktops, the advanced search should be expanded by default.
On tablets, the advanced search should be collapsed by default.

Result List (6)

You can prefill the result list of the value help dialog by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the results list.

Selected/Excluded Items Row (7)

On desktops, the selection area with the selected and excluded items row is expanded initially.
On tablets and phones, the selection area with the selected and excluded item row is collapsed initially.

Footer Toolbar (8)

The footer bar includes OK and Cancel buttons.

Include/Exclude Area for Range Selection (9)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

Equal to
Between
Less than
Less than or equal to
Greater than
Greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

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.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking the Go button. The search results are shown in the result list.
If the input field where the user is coming from contains data, it’s transferred to the basic search of the value help dialog and the results are then filtered accordingly.
The basic search performs a search in all fields that are displayed in the advanced search and the result list.

Item and Range Selection

The user can select single and multiple items, as well as single and multiple ranges. Items and ranges can also be excluded.

1. Single Selection

A single item or a range can be selected in single selection cases:

Single Item Selection on Smartphones

Value help dialog – Single item selection on a smartphone

Single Item Selection on Tablets and Desktops

Value help dialog – Single item selection on desktop

Single Range Selection on Smartphones

For the selection of a single range, the value help dialog is opened by clicking the value help icon of the input field. The Define Condition tab is then displayed.

Value help dialog – Single range selection on smartphone

Single Range Selection for Smartphones

The icon tab bar and the selected/excluded item row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Value help dialog – Single range selection

2. Multi-selection

Users can select multiple items and ranges in range selection cases:

Multi-Item and Multi-Range Selections on Smartphones

For selection of multiple items and multiple ranges, the value help dialog is opened by clicking the value help icon of the input field. The start dialog is then displayed.

Value help dialog – Start dialog for multi-item and multi-range selection on smartphone

Value help dialog – Multi-range selection on smartphone

Value help dialog – Multi-item selection on smartphone

Value help dialog – Advanced search on smartphone

Multi-Item and Multi-Range Selection on Tablets and Desktops

Value help dialog – Multi-item and multi-range selection on desktop

3. Multi-Range Selection

Multi-Range Selection on Smartphones

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the start dialog and the Define Conditions tab are displayed.

Value help dialog – Multi-range selection on smartphone

Multi-Range Selection on Tablets and Desktops

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the content of the Define Conditions tab is displayed. The icon tab bar is hidden and the selected/excluded item row is displayed.

Value help dialog – Multi-range selection on desktop

Selected/Excluded Items Row

Each item that is selected from the result list on the Select from List tab is displayed as a token in the selected item row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the selected/excluded item row.

Copying and Pasting Multiple Values

The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values (copied from clipboard) at once.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Starting dialog: <BO Name>. For example, “Company”.
Select from list dialog: “Select from List”.
Advanced search dialog: “Advanced Search”
For single range selection: “Define Condition”.
For multiple range selection, show “Define Conditions”.

For tablets and desktops:

For multiple items combined with multiple ranges selection, show <BO Name>. For example, “Company”.
For single item selection, show Select: <BO Name>. For example, “Select Company”.
For single range selection, display Define Condition: <BO Name>. For example, “Define Condition: Company”.
For multiple range selection, display Define Conditions: <BO Name>. For example, “Define Conditions: Company”.

Advanced Search

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

Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
List (guidelines)
Panel (guidelines)

Implementation

Smart Filter Bar with value help dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)

Value Help Dialog

Usage

Use the value help dialog if:

The user needs to use different attributes (such as city, company name, and so on) to find an object.
The user is searching within a dataset containing more than 200 items.
The user needs to define and select ranges and exclusions.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Size S – Value help dialog

Size M – Value help dialog

Size L – Value help dialog

Components

The value help dialog contains the following components:

Header bar
Icon tab bar and list control
Search template (optional)
Basic search
Items row (selected items, excluded items)
Footer toolbar
Include/exclude areas for range selection

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Icon Tab Bar on Tablet/Desktop and List Control on Phone (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem) Select from List and
Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Select from List and the Define Conditions tab.

Search Template (3)

Basic Search (4)

Advanced Search (5)

The advanced search offers all columns of the result list.
The value help icon of the business object ID field and description field for the business object that opened the current value help dialog will open only the Define Conditions screen. The entire value help dialog is not shown in order to prevent endless loops. For example, the value help icon of the customer ID or description field in a Select: Customer value help dialog will navigate directly to the Define Conditions screen.

For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields/advanced search fields are added automatically to the advanced search area.
There is a toggle link to show and hide the advanced search.
On desktops, the advanced search should be expanded by default.
On tablets, the advanced search should be collapsed by default.

Result List (6)

You can prefill the result list of the value help dialog by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the results list.

Selected/Excluded Items Row (7)

On desktops, the selection area with the selected and excluded items row is expanded initially.
On tablets and phones, the selection area with the selected and excluded item row is collapsed initially.

Footer Toolbar (8)

The footer bar includes OK and Cancel buttons.

Include/Exclude Area for Range Selection (9)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

Equal to
Between
Less than
Less than or equal to
Greater than
Greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

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.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking the Go button. The search results are shown in the result list.
If the input field where the user is coming from contains data, it’s transferred to the basic search of the value help dialog and the results are then filtered accordingly.
The basic search performs a search in all fields that are displayed in the advanced search and the result list.

Item and Range Selection

The user can select single and multiple items, as well as single and multiple ranges. Items and ranges can also be excluded.

1. Single Selection

A single item or a range can be selected in single selection cases:

Single Item Selection on Smartphones

Value help dialog – Single item selection on a smartphone

Single Item Selection on Tablets and Desktops

Value help dialog – Single item selection on desktop

Single Range Selection on Smartphones

For the selection of a single range, the value help dialog is opened by clicking the value help icon of the input field. The Define Condition tab is then displayed.

Value help dialog – Single range selection on smartphone

Single Range Selection for Smartphones

The icon tab bar and the selected/excluded item row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Value help dialog – Single range selection

2. Multi-selection

Users can select multiple items and ranges in range selection cases:

Multi-Item and Multi-Range Selections on Smartphones

For selection of multiple items and multiple ranges, the value help dialog is opened by clicking the value help icon of the input field. The start dialog is then displayed.

Value help dialog – Start dialog for multi-item and multi-range selection on smartphone

Value help dialog – Multi-range selection on smartphone

Value help dialog – Multi-item selection on smartphone

Value help dialog – Advanced search on smartphone

Multi-Item and Multi-Range Selection on Tablets and Desktops

Value help dialog – Multi-item and multi-range selection on desktop

3. Multi-Range Selection

Multi-Range Selection on Smartphones

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the start dialog and the Define Conditions tab are displayed.

Value help dialog – Multi-range selection on smartphone

Multi-Range Selection on Tablets and Desktops

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the content of the Define Conditions tab is displayed. The icon tab bar is hidden and the selected/excluded item row is displayed.

Value help dialog – Multi-range selection on desktop

Selected/Excluded Items Row

Each item that is selected from the result list on the Select from List tab is displayed as a token in the selected item row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the selected/excluded item row.

Copying and Pasting Multiple Values

The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values (copied from clipboard) at once.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Starting dialog: <BO Name>. For example, “Company”.
Select from list dialog: “Select from List”.
Advanced search dialog: “Advanced Search”
For single range selection: “Define Condition”.
For multiple range selection, show “Define Conditions”.

For tablets and desktops:

For multiple items combined with multiple ranges selection, show <BO Name>. For example, “Company”.
For single item selection, show Select: <BO Name>. For example, “Select Company”.
For single range selection, display Define Condition: <BO Name>. For example, “Define Condition: Company”.
For multiple range selection, display Define Conditions: <BO Name>. For example, “Define Conditions: Company”.

Advanced Search

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

Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
List (guidelines)
Panel (guidelines)

Implementation

Smart Filter Bar with value help dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)

Value Help Dialog

Usage

Use the value help dialog if:

The user needs to use different attributes (such as city, company name, and so on) to find an object.
The user is searching within a dataset containing more than 200 items.
The user needs to define and select ranges and exclusions.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Size S – Value help dialog

Size M – Value help dialog

Size L – Value help dialog

Components

The value help dialog contains the following components:

Header bar
Icon tab bar and list control
Search template (optional)
Basic search
Items row (selected items, excluded items)
Footer toolbar
Include/exclude areas for range selection

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Icon Tab Bar on Tablet/Desktop and List Control on Phone (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem) Select from List and
Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Select from List and the Define Conditions tab.

Search Template (3)

Basic Search (4)

Advanced Search (5)

The advanced search offers all columns of the result list.
The value help icon of the business object ID field and description field for the business object that opened the current value help dialog will open only the Define Conditions screen. The entire value help dialog is not shown in order to prevent endless loops. For example, the value help icon of the customer ID or description field in a Select: Customer value help dialog will navigate directly to the Define Conditions screen.

For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields/advanced search fields are added automatically to the advanced search area.
There is a toggle link to show and hide the advanced search.
On desktops, the advanced search should be expanded by default.
On tablets, the advanced search should be collapsed by default.

Result List (6)

You can prefill the result list of the value help dialog by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the results list.

Selected/Excluded Items Row (7)

On desktops, the selection area with the selected and excluded items row is expanded initially.
On tablets and phones, the selection area with the selected and excluded item row is collapsed initially.

Footer Toolbar (8)

The footer bar includes OK and Cancel buttons.

Include/Exclude Area for Range Selection (9)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

Equal to
Between
Less than
Less than or equal to
Greater than
Greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

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.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking the Go button. The search results are shown in the result list.
If the input field where the user is coming from contains data, it’s transferred to the basic search of the value help dialog and the results are then filtered accordingly.
The basic search performs a search in all fields that are displayed in the advanced search and the result list.

Item and Range Selection

The user can select single and multiple items, as well as single and multiple ranges. Items and ranges can also be excluded.

1. Single Selection

A single item or a range can be selected in single selection cases:

Single Item Selection on Smartphones

Value help dialog – Single item selection on a smartphone

Single Item Selection on Tablets and Desktops

Value help dialog – Single item selection on desktop

Single Range Selection on Smartphones

For the selection of a single range, the value help dialog is opened by clicking the value help icon of the input field. The Define Condition tab is then displayed.

Value help dialog – Single range selection on smartphone

Single Range Selection for Smartphones

The icon tab bar and the selected/excluded item row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Value help dialog – Single range selection

2. Multi-selection

Users can select multiple items and ranges in range selection cases:

Multi-Item and Multi-Range Selections on Smartphones

For selection of multiple items and multiple ranges, the value help dialog is opened by clicking the value help icon of the input field. The start dialog is then displayed.

Value help dialog – Start dialog for multi-item and multi-range selection on smartphone

Value help dialog – Multi-range selection on smartphone

Value help dialog – Multi-item selection on smartphone

Value help dialog – Advanced search on smartphone

Multi-Item and Multi-Range Selection on Tablets and Desktops

Value help dialog – Multi-item and multi-range selection on desktop

3. Multi-Range Selection

Multi-Range Selection on Smartphones

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the start dialog and the Define Conditions tab are displayed.

Value help dialog – Multi-range selection on smartphone

Multi-Range Selection on Tablets and Desktops

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the content of the Define Conditions tab is displayed. The icon tab bar is hidden and the selected/excluded item row is displayed.

Value help dialog – Multi-range selection on desktop

Selected/Excluded Items Row

Each item that is selected from the result list on the Select from List tab is displayed as a token in the selected item row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the selected/excluded item row.

Copying and Pasting Multiple Values

The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values (copied from clipboard) at once.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Starting dialog: <BO Name>. For example, “Company”.
Select from list dialog: “Select from List”.
Advanced search dialog: “Advanced Search”
For single range selection: “Define Condition”.
For multiple range selection, show “Define Conditions”.

For tablets and desktops:

For multiple items combined with multiple ranges selection, show <BO Name>. For example, “Company”.
For single item selection, show Select: <BO Name>. For example, “Select Company”.
For single range selection, display Define Condition: <BO Name>. For example, “Define Condition: Company”.
For multiple range selection, display Define Conditions: <BO Name>. For example, “Define Conditions: Company”.

Advanced Search

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

Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
List (guidelines)
Panel (guidelines)

Implementation

Smart Filter Bar with value help dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)

Dialog

The dialog control (sap.m.dialog) interrupts the current app process to prompt the user for information or a response. It is a forced decision or a confirmation that needs to be signed off by the user.

Usage

Use the dialog if:

You want to display complex content but don’t want the user to navigate away from the current page.
You want to display an additional step or process on the UI, which the user has to confirm via an action at the end.
You want to create an object with a small number of fields (up to 8 fields).

Do not use the dialog if:

You want to display a simple message (use the message box instead)
You just want to confirm a successful action.
You do not want to interrupt the user’s action.
You want to create an object with more than 8 fields. Use an object page instead (sap.m.ObjectPage).

Responsiveness

The dialog provides different behavior on a smartphone than on a tablet or desktop. You can distinguish between a cozy dialog and a compact dialog. For more information, see content density.

The buttons in the toolbar are aligned differently on the various devices. On a smartphone, they cover the entire footer, but on a tablet or desktop, they are right-aligned.

Size S (Smartphone)

Full Screen Dialog

We recommend displaying dialogs in S size in full screen mode. Most of the content of a dialog is worth opening full screen so the user is able to focus on the content of the dialog. The stretch property can be easily set by the application to true. The toolbar on which actions are placed within a dialog is positioned at the bottom of the dialog.

Full screen dialog (size S)

Position of the Action Buttons

By default, the dialog can have one or two actions, which cover the entire footer on smartphones.

Footer actions alignment (size S)

When to Open Full Screen or Modal

Message dialogs should always be displayed as modals. There is no need to display a simple message in a full screen dialog. If you want to display a simple message, use the message box instead.

If you use standard dialogs such as value help, you should open them in full screen mode. The device’s entire screen is used to display the dialog, and the user can focus on the content of the message. The dialogs offer a stretch property for full screen behavior.

Size M (Tablet)

By default, the dialog can have up to two action buttons in the footer. The action buttons in the toolbar are right-aligned. Use cozy mode on tablet devices.

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Size L (Desktop)

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Dialog in compact mode (size L)

Layout

Position on the Screen

The dialog is positioned in the center of the screen. It opens in a modal window to ensure that it attracts the user’s attention when it displays emergency states.

On a smartphone, the stretch property allows you to achieve full screen behavior.

Behavior and Interaction

Navigation in a Dialog

Navigation in a dialog enables the application to navigate to another page within the dialog. On the second page, an arrow on top of the dialog allows the user to navigate back to the first page.

Navigation example inside the dialog

Resizable

The user can change the size of the dialog by setting the “resizable” property to true. The following figure shows the resizing indicator, which helps the user to identify this functionality.

Resizable indicator on the bottom right-hand corner

Draggable

Dialogs can be moved by dragging the header to another position. Set the “draggable” property to ‘true’ and by clicking the title, the user can move the dialog to another position.

Dialog is movable by dragging the title of the dialog

Messaging in Dialog

Message popovers do not need to be displayed in dialogs. For example, to show an issue with with content in a field, highlighting can be used. For more information, see form field validation.

Highlighted form fields in dialog

Types

Standard Dialog

Use the standard dialog if you want to display a common dialog. The main visual differences are that the header is displayed with a grey background, and that no icon is shown.

The content can be filled with your application-specific data.

Other Types of Dialogs

Personalization dialog
Select dialog
Table select dialog
Value help dialog
View settings dialog
Busy dialog

Message Box

The message box is a special type of dialog that is used to display messages quickly. For each type of message, the app team can decide when to use a dialog. Use the message toast (sap.m.MessageToast) for success messages. For more information, see message box.

Components

The dialog contains the following sections and options:

Title: Title text appears in the dialog header.

Subheader: When a subheader is assigned to a dialog (optionally), it appears below the main header. As the subheader is not part of the content area, it is not scrollable.

Content: This area contains the actual content of the dialog.

Footer with actions: The footer can contain up to two buttons (optionally).

Example of a dialog structure

Emphasized Buttons in a Dialog

By emphasizing a button in the dialog toolbar, the user can focus more on the action that the application would see as the standard action. Use an emphasized button if you want to better guide your user.

Usage of an emphasized button in dialog toolbar

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

Toolbar (guidelines)

Implementation

Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Message Boxes (SAPUI5 samples)
Toolbar (SAPUI5 API reference)
Dialog (SAPUI5 API reference)

Table Select Dialog

The dialog provides a responsive table layout with additional search, filter, and selection functionalities in the header. A footer toolbar provides actions for canceling or confirming the process.

Usage

Use the table select dialog if:

You need to help users select one or more items from a comprehensive list that contains multiple attributes or values.

Do not use the table select dialog if:

You need to help users pick one item from a predefined set of options that contains only one value. In this case, use the dropdown box instead.
You need to help users with query-based range selection and enhanced filter options. In this case, use the value help dialog instead.
Your use case requires tabs, filters, or actions in a select dialog.In this case, use a standard dialog instead.
Your use case only requires filtering without selection. In this case, use the filter toolbar instead.

Responsiveness

On bigger screens, the table select dialog also provides columns

The table in the dialog is responsive and wraps on smaller screens to show a list

Behavior and Interaction

The table select dialog can be called up from any control. The trigger is usually a button with a selection icon in an input field, or an Add button in a toolbar.

Input trigger: This trigger can be useful if users need to select, for example, one customer from a large customer register.

Example of a trigger: the selection icon in the input field

Add button: This trigger can be useful if users need to add, for example, a product to a list. The dialog would help users select the product from a large product catalog. If the user clicked OK in the dialog footer toolbar, the product would then appear in the list.

Example of a trigger: Add button in a table

Single Select

Multi-Select

The multi-select version of the table select dialog provides checkboxes for users to choose multiple items. The blue info bar above the table indicates the number of selected items. The selection is taken over when the user closes the dialog via the OK button in the footer toolbar. Clicking or tapping Cancel closes the dialog without taking over the selected values.

Remembering Selections

If selections need to be memorized in order to help users make corrections, you can set the RememberSelections property to true. This restores the selection to the state it was in when the dialog was last opened as soon as users exit the dialog via OK or Cancel. The interaction flow of the RememberSelections property is shown and explained in the select dialog article.

Grouping

The list can also be displayed as grouped. Group headers divide the table into segments. A pregrouped table is useful for tables with many entries, which can be sorted by a single attribute.

A responsive table with group headers

Guidelines

Set the information provided in the table select dialog from top to bottom as follows:

Dialog Header

Set the title of the dialog header in the following form:

For single selection:Select . For example: Select Product.
For multiple selection:Select . For example: Select Products.

Search

The first interactive element in the dialog is a standard search field. Two types of search behavior are available:

A live search, also known as “search-as-you-type,” which is triggered by each character that the user enters or deletes.
A manual search, which is triggered explicitly after the user enters text in the search field and clicks or taps theSearch icon or presses the ENTER key. As soon as the user hits the Search button, a Delete icon appears at the end of the input field to delete the keyword and cancel the result list.

Info Bar

In multiselection mode, an info bar shows the number of selected items in the following form:

Selected : Number. For example: Selected Products: 2.

The info bar does not remain in the header when the user scrolls to view details further down the list, but instead scrolls out of the screen.

Content

The content area provides a table. This behaves like the responsive table, so the columns wrap on smaller screens and display a list.

Footer Toolbar

In the single-select version, only provide Cancel in the footer toolbar because the dialog takes over the selection as soon as the user chooses one.

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)

Implementation

Table Select Dialog (SAPUI5 samples)
Table Select Dialog (SAPUI5 API reference)

Message Box

Usage

Use the message box if:

You want to display non-field-related messages.
You want to interrupt the user while he or she performs an action.
You want to display error, warning, success, confirmation, or information messages.
You need to interrupt the user for some other reason.
You need the user to acknowledge the message.
You need the user to make a decision.

Do not use the message box if:

You want to display a short success message. (Use a toast instead. For more information, see message toast.)
You can show the message directly in a form field.

Responsiveness

Types

The following categories of messages are available:

Error
Warning
Success
Information
Confirmation

Error Message

Control: sap.m.MessageBox
Icon: sap-icon://message-error
Title: Error
Stretch: False (no full screen on all devices)

Error message box with one action

Error message box with two actions

Text guidelines for an error message:

Do not just describe the problem; tell the user how to resolve it.
In the short text, speak the language of the end user. Do not include system or configuration details.
If the solution is more involved or technical, add a long text.
Do not repeat the short text in the long text. They both appear together on the screen.

Warning Message

Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Warning
Stretch: False (no full screen on all devices)

Use cases for warnings

a) No decision required: Formulate the message as a statement.
Button(s): OK

Warning message box with OK button

b) Decision to continue required: Formulate the message as a statement.

Button(s): OK, Cancel

Warning message with OK and Cancel buttons

c) Specific decision required, with one action

Use a relevant action button. The message may also be formulated as a question.
Button(s): Leave Page, Cancel

Warning message with action and Cancel buttons

Success Message

Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message.

Control: sap.m.MessageBox
Icon: sap-icon://message-success
Title: Success
Stretch: False (no full screen on all devices)
Button(s): OK

Success message box

Information

You should generally use a message toast (sap.m.MessageToast) to display success messages instead of a dialog (sap.m.Dialog).

Information Message

Information messages provide information the user needs to acknowledge, but which does not involve a decision. The message provides information that is useful and relevant, but never critical.

Control: sap.m.MessageBox
Icon: sap-icon://message-information
Title: Information
Stretch: False (no full screen on all devices)

Button(s): OK

Information message box

Confirmation Message

Control: sap.m.MessageBox
Icon: sap-icon://message-question
Title: (such as “Approve”, “Reject”, or “Delete”)
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message box – Approve

Confirmation Message with “Note” Section

Warning

Control: sap.m.Dialog
Type: Message
Icon: sap-icon://message-question
Title: Such as “Approve”, “Reject”, or “Delete”
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message box – Reject

Delete Message

If the user clicks or taps Delete, display a “Delete” dialog that confirms the delete action.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Delete
Stretch: False (no full screen on all devices)

Button(s): Delete, Cancel

Delete message box

Components

Show Details button

If details are available, the application has three option to display the text. Text can be displayed as:

Plain
Formatted
The original code format

Plain details text

Formatted details text

Show details button on a message 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

Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message Box (SAPUI5 samples)

Popover

Usage

Use a popover if:

You need to define your own structure.
You want to show UI elements that are not available with the quick view.

Do not use a popover if:

The quick view is more appropriate for your use case.
The objects are in a master list (in this case, the details are shown in the details area).

Responsiveness

The popover can be used in the following ways:

Responsive and adaptive: sap.m.ResponsivePopover
Shows a dialog on smartphones (to be closed with an X) and a popover on a tablet or desktop.
Non-responsive: sap.m.Popover
Always shows a popover. Only use a non-responsive popover if it has very little content. On smartphones, the popover should not use more than a third of the phone’s real estate.

Layout

Structure of Popover

The header and footer are generally optional. The other elements are as follows:

Back (1) – optional
Needs to be implemented if the user can trigger further popovers. Always show popovers in place. Never place them on top of each other.

Close function (3)
This feature closes the dialog. It is available for smartphones only and is set automatically (sap.m.ResponsivePopover).

Content (4)
Ensure that the content has a basic design and shows only the most important information. We recommend the following:

Use no more than two groups.
Limit the total number of fields to eight.
Use single-column tables.
Use micro charts.

Actions (5) – optional

Popover – General structure

Popover – Example

Behavior and Interaction

Opening a Popover

The user opens a popover by clicking or tapping an object represented by a text link or an icon. To improve accessibility, we recommend using texts, such as the name or ID of an object.

Closing a Popover

The popover is closed when the user clicks or taps outside the popover or selects an action within the popover.

Guidelines

Show status information as text fields in a content group. You can use semantic text colors.
You can define a height for the popover. If the content exceeds the height, a scroll bar is displayed.

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

Quick View (guidelines)

Implementation

Popover (SAPUI5 samples)

Responsive Popover (SAPUI5 samples)

Dialog

Usage

Use the dialog if:

You want to display complex content but don’t want the user to navigate away from the current page.
You want to display an additional step or process on the UI, which the user has to confirm via an action at the end.

Do not use the dialog if:

You want to display a simple message (use the message box instead)
You just want to confirm a successful action.
You do not want to interrupt the user’s action.

Responsiveness

The dialog provides different behavior on a smartphone than on a tablet or desktop. You can distinguish between a cozy dialog and a compact dialog. For more information, see content density.

The buttons in the toolbar are aligned differently on the various devices. On a smartphone, they cover the entire footer, but on a tablet or desktop, they are right-aligned.

Size S (Smartphone)

Full Screen Dialog

Full screen dialog (size S)

Position of the Action Buttons

By default, the dialog can have one or two actions, which cover the entire footer on smartphones.

Footer actions alignment (size S)

When to Open Full Screen or Modal

Message dialogs should always be displayed as modals. There is no need to display a simple message in a full screen dialog. If you want to display a simple message, use the message box instead.

Size M (Tablet)

By default, the dialog can have up to two action buttons in the footer. The action buttons in the toolbar are right-aligned. Use cozy mode on tablet devices.

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Size L (Desktop)

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Dialog in compact mode (size L)

Layout

Position on the Screen

The dialog is positioned in the center of the screen. It opens in a modal window to ensure that it attracts the user’s attention when it displays emergency states.

On a smartphone, the stretch property allows you to achieve full screen behavior.

Behavior and Interaction

Navigation in a Dialog

Navigation in a dialog enables the application to navigate to another page within the dialog. On the second page, an arrow on top of the dialog allows the user to navigate back to the first page.

Navigation example inside the dialog

Resizable

The user can change the size of the dialog by setting the “resizable” property to true. The following figure shows the resizing indicator, which helps the user to identify this functionality.

Resizable indicator on the bottom right-hand corner

Draggable

Dialogs can be moved by dragging the header to another position. Set the “draggable” property to ‘true’ and by clicking the title, the user can move the dialog to another position.

Dialog is movable by dragging the title of the dialog

Messaging in Dialog

Message popovers do not need to be displayed in dialogs. For example, to show an issue with with content in a field, highlighting can be used. For more information, see form field validation.

Highlighted form fields in dialog

Types

Standard Dialog

Use the standard dialog if you want to display a common dialog. The main visual differences are that the header is displayed with a grey background, and that no icon is shown.

The content can be filled with your application-specific data.

Other Types of Dialogs

Personalization dialog
Select dialog
Table select dialog
Value help dialog
View settings dialog
Busy dialog

Message Box

Components

The dialog contains the following sections and options:

Title: Title text appears in the dialog header.

Subheader: When a subheader is assigned to a dialog (optionally), it appears below the main header. As the subheader is not part of the content area, it is not scrollable.

Content: This area contains the actual content of the dialog.

Footer with actions: The footer can contain up to two buttons (optionally).

Example of a dialog structure

Emphasized Buttons in a Dialog

Usage of an emphasized button in dialog toolbar

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

Toolbar (guidelines)

Implementation

Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Message Boxes (SAPUI5 samples)
Toolbar (SAPUI5 API reference)
Dialog (SAPUI5 API reference)

Popover

Usage

Use a popover if:

You need to define your own structure.
You want to show UI elements that are not available with the quick view.

Do not use a popover if:

The quick view is more appropriate for your use case.
The objects are in a master list (in this case, the details are shown in the details area).

Responsiveness

The popover can be used in the following ways:

Responsive and adaptive: sap.m.ResponsivePopover
Shows a dialog on smartphones (to be closed with an X) and a popover on a tablet or desktop.
Non-responsive: sap.m.Popover
Always shows a popover. Only use a non-responsive popover if it has very little content. On smartphones, the popover should not use more than a third of the phone’s real estate.

Layout

Structure of Popover

The header and footer are generally optional. The other elements are as follows:

Back (1) – optional
Needs to be implemented if the user can trigger further popovers. Always show popovers in place. Never place them on top of each other.

Close function (3)
This feature closes the dialog. It is available for smartphones only and is set automatically (sap.m.ResponsivePopover).

Content (4)
Ensure that the content has a basic design and shows only the most important information. We recommend the following:

Use no more than two groups.
Limit the total number of fields to eight.
Use single-column tables.
Use micro charts.

Actions (5) – optional

Popover – General structure

Popover – Example

Behavior and Interaction

Opening a Popover

The user opens a popover by clicking or tapping an object represented by a text link or an icon. To improve accessibility, we recommend using texts, such as the name or ID of an object.

Closing a Popover

The popover is closed when the user clicks or taps outside the popover or selects an action within the popover.

Guidelines

Show status information as text fields in a content group. You can use semantic text colors.
You can define a height for the popover. If the content exceeds the height, a scroll bar is displayed.

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

Quick View (guidelines)

Implementation

Popover (SAPUI5 samples)

Responsive Popover (SAPUI5 samples)

Dialog

Usage

Use the dialog if:

You want to display a system message.
You want to interrupt the user’s action.
You want to show a message with a short and a long description.

Do not use the dialog if:

You just want to confirm a successful action.
You do not want to interrupt the user’s action.

Responsiveness

The dialog provides different behavior on a smartphone than on a tablet or desktop. You can distinguish between a cozy dialog and a compact dialog. For more information, see content density.

The buttons in the toolbar are aligned differently on the various devices. On a smartphone, they cover the entire footer, but on a tablet or desktop, they are right-aligned.

Size S (Smartphone)

Full Screen Dialog

We recommend displaying dialogs in S size in full screen mode. Most of the content of a dialog is worth opening in full screen so the user is able to focus on the content of the dialog. The stretch property can be easily set by the application to true. The toolbar on which the actions are placed within a dialog is positioned at the bottom of the dialog.

Full screen dialog (size S)

Position of the Action Buttons

By default, the dialog can have one or two actions, which cover the entire footer on smartphones.

Footer actions alignment (size S)

When to Open Full Screen or Modal

Message dialogs should always be displayed as modals. There is no need to display a simple message in a full screen dialog. If you want to display a simple message, use the message box (sap.m.Messagebox) instead.

Size M (Tablet)

By default, the dialog can have up to two action buttons in the footer. The action buttons in the toolbar are right-aligned. Use cozy mode on tablet devices.

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Size L (Desktop)

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Dialog in compact mode (size L)

Layout

Position on the Screen

The dialog is positioned in the center of the screen. It opens in a modal window to ensure that it attracts the user’s attention when it displays emergency states.

On a smartphone, the stretch property allows you to achieve full screen behavior.

Centered position of a dialog

Position on the Screen

The dialog is positioned in the center of the screen. It opens in a modal window to ensure that it attracts the user’s attention when it displays emergency states.

On a smartphone, the stretch property allows you to achieve full screen behavior.

Centered position of a dialog

Behavior and Interaction

Messaging in Dialog

Message popovers do not need to be displayed in the dialogs. Keep it simple and just highlight each field that has a problem. For more information, see form field validation.

Highlighted form fields in dialog

Types

Standard Dialog

Use the standard dialog if you want to display a common dialog. The main visual differences are that the header is displayed with a grey background, and that no icon is shown.

The content can be filled with your application-specific data.

Other Types of Dialog

Personalization dialog
Select dialog
Table select dialog
Value help dialog
View settings dialog
Busy dialog

Message Box

Components

The dialog contains the following sections and options:

Title: Title text appears in the dialog header.

Subheader: When a subheader is assigned to a dialog (optionally), it appears below the main header. As the subheader is not part of the content area, it is not scrollable.

Content: This area contains the actual content of the dialog.

Footer with actions: The footer can contain up to two buttons (optionally).

Example of a dialog structure

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

Toolbar (guidelines)

Implementation

Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Message Boxes (SAPUI5 samples)
Toolbar (SAPUI5 API reference)
Dialog (SAPUI5 API reference)

Dialog

Usage

Use the dialog if:

You want to display a system message.
You want to interrupt the user’s action.
You want to show a message with a short and a long description.

Do not use the dialog if:

You just want to confirm a successful action.
You do not want to interrupt the user’s action.

Responsiveness

The dialog provides different behavior on a smartphone than on a tablet or desktop. You can distinguish between a cozy dialog and a compact dialog. For more information, see content density.

The buttons in the toolbar are aligned differently on the various devices. On a smartphone, they cover the entire footer, but on a tablet or desktop, they are right-aligned.

Size S (Smartphone)

Full Screen Dialog

Full screen dialog (size S)

Position of the Action Buttons

By default, the dialog can have one or two actions, which cover the entire footer on smartphones.

Footer actions alignment (size S)

When to Open Full Screen or Modal

Size M (Tablet)

By default, the dialog can have up to two action buttons in the footer. The action buttons in the toolbar are right-aligned. Use cozy mode on tablet devices.

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Size L (Desktop)

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Dialog in compact mode (size L)

Layout

Position on the Screen

The dialog is positioned in the center of the screen. It opens in a modal window to ensure that it attracts the user’s attention when it displays emergency states.

On a smartphone, the stretch property allows you to achieve full screen behavior.

Centered position of a dialog

Position on the Screen

The dialog is positioned in the center of the screen. It opens in a modal window to ensure that it attracts the user’s attention when it displays emergency states.

On a smartphone, the stretch property allows you to achieve full screen behavior.

Centered position of a dialog

Behavior and Interaction

Resizable

The user can change the size of the dialog by setting the “resizable” property to true. The following figure shows the resizing indicator, which helps the user to identify this functionality.

Resizable indicator on the bottom right-hand corner

Draggable

Dialogs can be moved by dragging the header to another position. Set the property “draggable” to ‘true’ and by clicking the title the user can move the dialog to another position.

Dialog is movable by dragging the title of the dialog

Messaging in Dialog

Message popovers do not need to be displayed in the dialogs. Keep it simple and just highlight each field that has a problem. For more information, see form field validation.

Highlighted form fields in dialog

Types

Standard Dialog

Use the standard dialog if you want to display a common dialog. The main visual differences are that the header is displayed with a grey background, and that no icon is shown.

The content can be filled with your application-specific data.

Other Types of Dialog

Personalization dialog
Select dialog
Table select dialog
Value help dialog
View settings dialog
Busy dialog

Message Box

Components

The dialog contains the following sections and options:

Title: Title text appears in the dialog header.

Subheader: When a subheader is assigned to a dialog (optionally), it appears below the main header. As the subheader is not part of the content area, it is not scrollable.

Content: This area contains the actual content of the dialog.

Footer with actions: The footer can contain up to two buttons (optionally).

Example of a dialog structure

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

Toolbar (guidelines)

Implementation

Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Message Boxes (SAPUI5 samples)
Toolbar (SAPUI5 API reference)
Dialog (SAPUI5 API reference)

Dialog

Usage

Use the dialog if:

You want to display a system message.
You want to interrupt the user’s action.
You want to show a message with a short and a long description.

Do not use the dialog if:

You just want to confirm a successful action.
You do not want to interrupt the user’s action.

Responsiveness

The dialog provides different behavior on a smartphone than on a tablet or desktop. You can distinguish between a cozy dialog and a compact dialog. For more information, see content density.

The buttons in the toolbar are aligned differently on the various devices. On a smartphone, they cover the entire footer, but on a tablet or desktop, they are right-aligned.

Size S (Smartphone)

Full Screen Dialog

Full screen dialog (size S)

Position of the Action Buttons

By default, the dialog can have one or two actions, which cover the entire footer on smartphones.

Footer actions alignment (size S)

When to Open Full Screen or Modal

Size M (Tablet)

By default, the dialog can have up to two action buttons in the footer. The action buttons in the toolbar are right-aligned. Use cozy mode on tablet devices.

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Size L (Desktop)

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Dialog in compact mode (size L)

Layout

Position on the Screen

The dialog is positioned in the center of the screen. It opens in a modal window to ensure that it attracts the user’s attention when it displays emergency states.

On a smartphone, the stretch property allows you to achieve full screen behavior.

Centered position of a dialog

Behavior and Interaction

Resizable

The user can change the size of the dialog by setting the “resizable” property to true. The following figure shows the resizing indicator, which helps the user to identify this functionality.

Resizable indicator on the bottom right-hand corner

Draggable

Dialogs can be moved by dragging the header to another position. Set the property “draggable” to ‘true’ and by clicking the title the user can move the dialog to another position.

Dialog is movable by dragging the title of the dialog

Messaging in Dialog

Message popovers do not need to be displayed in the dialogs. Keep it simple and just highlight each field that has a problem. For more information, see form field validation.

Highlighted form fields in dialog

Types

Standard Dialog

Use the standard dialog if you want to display a common dialog. The main visual differences are that the header is displayed with a grey background, and that no icon is shown.

The content can be filled with your application-specific data.

Other Types of Dialog

Personalization dialog
Select dialog
Table select dialog
Value help dialog
View settings dialog
Busy dialog

Message Box

Components

The dialog contains the following sections and options:

Title: Title text appears in the dialog header.

Subheader: When a subheader is assigned to a dialog (optionally), it appears below the main header. As the subheader is not part of the content area, it is not scrollable.

Content: This area contains the actual content of the dialog.

Footer with actions: The footer can contain up to two buttons (optionally).

Example of a dialog structure

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

Toolbar (guidelines)

Implementation

Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Message Boxes (SAPUI5 samples)
Toolbar (SAPUI5 API reference)
Dialog (SAPUI5 API reference)

Dialog

Usage

Use the dialog if:

You want to display a system message.
You want to interrupt the user’s action.
You want to show a message with a short and a long description.

Do not use the dialog if:

You just want to confirm a successful action.
You do not want to interrupt the user’s action.

Responsiveness

The dialog provides different behavior on a smartphone than on a tablet or desktop. You can distinguish between a cozy dialog and a compact dialog. For more information, see content density.

The buttons in the toolbar are aligned differently on the various devices. On a smartphone, they cover the entire footer, but on a tablet or desktop, they are right-aligned.

Size S (Smartphone)

Full Screen Dialog

Full screen dialog (size S)

Position of the Action Buttons

By default, the dialog can have one or two actions, which cover the entire footer on smartphones.

Footer actions alignment (size S)

When to Open Full Screen or Modal

Size M (Tablet)

By default, the dialog can have up to two action buttons in the footer. The action buttons in the toolbar are right-aligned. Use cozy mode on tablet devices.

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Size L (Desktop)

If the content height increases or is set to more than the screen height, the dialog height stops at 4 rem from the top and bottom. The user can then scroll through the content area.

Dialog in compact mode (size L)

Layout

Position on the Screen

The dialog is positioned in the center of the screen. It opens in a modal window to ensure that it attracts the user’s attention when it displays emergency states.

On a smartphone, the stretch property allows you to achieve full screen behavior.

Centered position of a dialog

Behavior and Interaction

Resizable

The user can change the size of the dialog by setting the “resizable” property to true. The following figure shows the resizing indicator, which helps the user to identify this functionality.

Resizable indicator on the bottom right-hand corner

Draggable

Dialogs can be moved by dragging the header to another position. Set the “draggable” property to ‘true’ and by clicking the title, the user can move the dialog to another position.

Dialog is movable by dragging the title of the dialog

Messaging in Dialog

Message popovers do not need to be displayed in dialogs. For example, to show an issue with with content in a field, highlighting can be used. For more information, see form field validation.

Highlighted form fields in dialog

Types

Standard Dialog

Use the standard dialog if you want to display a common dialog. The main visual differences are that the header is displayed with a grey background, and that no icon is shown.

The content can be filled with your application-specific data.

Other Types of Dialog

Personalization dialog
Select dialog
Table select dialog
Value help dialog
View settings dialog
Busy dialog

Message Box

Components

The dialog contains the following sections and options:

Title: Title text appears in the dialog header.

Subheader: When a subheader is assigned to a dialog (optionally), it appears below the main header. As the subheader is not part of the content area, it is not scrollable.

Content: This area contains the actual content of the dialog.

Footer with actions: The footer can contain up to two buttons (optionally).

Example of a dialog structure

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

Toolbar (guidelines)

Implementation

Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Message Boxes (SAPUI5 samples)
Toolbar (SAPUI5 API reference)
Dialog (SAPUI5 API reference)

Select Dialog

The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.

A more enhanced dialog for single selection and multiselection is the value help dialog as it offers range selection and excluding functions.

Usage

Use the select dialog if:

Users need to select one or more entries from a comprehensive list that contains multiple attributes or values.

Do not use the select dialog if:

Users need to pick one item from a predefined set of options that contains one attribute or value only such as languages. In this case, consider using the combo box or select instead.
Your use case requires more enhanced functionalities such as a selection based on ranges. For the selection of values, consider using the value help dialog instead.
Your use case requires tabs, filters, or an Add New functionality in the select dialog. In this case, use a standard dialog instead.

Responsiveness

The display of the select control depends on the device. On phones, the selection list takes up the whole screen. On desktop and tablet devices it appears as a popover.

Size S

Single-select dialog in full screen on smartphone

Multi-select dialog in full screen on smartphone

Size M

Single-select dialog on tablet

Multi-select dialog on tablet

Size L

Single-select dialog on desktop

Multi-select dialog on desktop

Components

Dialog Header

You need to set the title of the dialog header (1). We recommend the following form:

Single selection

Select <Entity>

Example: Select Product

Multi-selection

Select <Entities>

Example: Select Products

Search

The first element in the dialog is a standard search field (2).

Info Toolbar

The info toolbar (3) is only available in multi-selection mode. It shows the number of selected items in the following form:

Selected <Entities>: <Number>

Example: Selected Products: 2

Content

Button Toolbar

Components of the select dialog – Left: single select; right: multi select

Behavior and Interaction

The select dialog can be called up from any control. The most common trigger is an input field with selection icon, also known as a “value help field”, or F4. Alternative triggers are buttons or icons, which add items to an existing list or the info bar in the master list in order to apply a contextual filter.

Single Select

Once users select an entry, the select dialog is closed and the selected entry is taken over. If applicable, the entry is displayed in the field from which the dialog was triggered.

Multi-Select

Search

The user can search items.

Guidelines

Search Behavior

There are two types of search behaviors available:

(1) A live search, also known as “search-as-you-type” (property: liveChange), which is triggered by each character that the user enters or deletes.

(2) A manual search, which is triggered explicitly after the user enters text in the search field and clicks or taps the Search icon or presses the Enter key.

App developers need to decide which search to use. We recommend implementing the live search whenever possible. Use the manual search only if the amount of data is too large and your app would otherwise run into performance issues. For more information, check out the article on searching.

Remembering Selections

If your use case requires the memorization of selections in a dialog in order to allow for corrections, you can set the rememberSelections function in the select dialog to true. When users exit the dialog with cancel, the selection is restored to the state when the dialog was opened.

Selection is remembered after reopening the dialog

By default, the selection is reset once the dialog is closed. This allows a new selection when opening the dialog again. As an example, this functionality makes sense when users need to add multiple items to a table.

Selection is reset after closing the 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

Combo Box (guidelines)
Select (guidelines)
Value Help (guidelines)
Search (guidelines)

Implementation

No links

Select Dialog

The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.

A more enhanced dialog for single selection and multiselection is the value help dialog as it offers range selection and excluding functions.

Usage

Use the select dialog if:

Users need to select one or more entries from a comprehensive list that contains multiple attributes or values.

Do not use the select dialog if:

Users need to pick one item from a predefined set of options that contains one attribute or value only such as languages. In this case, consider using the combo box or select instead.
Your use case requires more enhanced functionalities such as a selection based on ranges. For the selection of values, consider using the value help dialog instead.
Your use case requires tabs, filters, or an Add New functionality in the select dialog. In this case, use a standard dialog instead.

Responsiveness

The display of the select control depends on the device. On phones, the selection list takes up the whole screen. On desktop and tablet devices it appears as a popover.

Size S

Single-select dialog in full screen on smartphone

Multi-select dialog in full screen on smartphone

Size M

Single-select dialog on tablet

Multi-select dialog on tablet

Size L

Single-select dialog on desktop

Multi-select dialog on desktop

Components

Dialog Header

You need to set the title of the dialog header (1). We recommend the following form:

Single selection

Select <Entity>

Example: Select Product

Multi-selection

Select <Entities>

Example: Select Products

Search

The first element in the dialog is a standard search field (2).

Info Toolbar

The info toolbar (3) is only available in multi-selection mode. It shows the number of selected items in the following form:

Selected <Entities>: <Number>

Example: Selected Products: 2

Content

Button Toolbar

Components of the select dialog – Left: single select; right: multi select

Behavior and Interaction

The select dialog can be called up from any control. The most common trigger is an input field with selection icon, also known as a “value help field”, or F4. Alternative triggers are buttons or icons, which add items to an existing list or the info bar in the master list in order to apply a contextual filter.

Single Select

Once users select an entry, the select dialog is closed and the selected entry is taken over. If applicable, the entry is displayed in the field from which the dialog was triggered.

Multi-Select

Search

The user can search items.

Guidelines

Search Behavior

Two types of search behavior are available:

(1) A live search, also known as “search-as-you-type” (property: liveChange), which is triggered by each character that the user enters or deletes

(2) A manual search, which is triggered explicitly after the user enters text in the search field and clicks or taps the Search icon or presses the Enter key

App developers need to decide which search to use. We recommend implementing the live search whenever possible. Use the manual search only if the amount of data is too large and your app would otherwise run into performance issues. For more information, check out the Search article.

Remember Selections

Selection is remembered after the dialog is reopened

Selection is reset after the dialog is closed

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

Combo Box (guidelines)
Select (guidelines)
Value Help (guidelines)
Search (guidelines)

Implementation

No links

Select Dialog

The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.

A more enhanced dialog for single selection and multiselection is the value help dialog as it offers range selection and excluding functions.

Usage

Use the select dialog if:

Users need to select one or more entries from a comprehensive list that contains multiple attributes or values.

Do not use the select dialog if:

Users need to pick one item from a predefined set of options that contains one attribute or value only such as languages. In this case, consider using the combo box or select instead.
Your use case requires more enhanced functionalities such as a selection based on ranges. For the selection of values, consider using the value help dialog instead.
Your use case requires tabs, filters, or an Add New functionality in the select dialog. In this case, use a standard dialog instead.

Responsiveness

The display of the select control depends on the device. On phones, the selection list takes up the whole screen. On desktop and tablet devices it appears as a popover.

Size S

Single select dialog in full screen on smartphone

Multi-select dialog in full screen on smartphone

Size M

Single select dialog on tablet

Multi-select dialog on tablet

Size L

Single select dialog on desktop

Multi-select dialog on desktop

Components

Dialog Header

You need to set the title of the dialog header (1). We recommend the following form:

Single selection

Select <Entity>

Example: Select Product

Multi-selection

Select <Entities>

Example: Select Products

Search

The first element in the dialog is a standard search field (2).

Info Toolbar

The info toolbar (3) is only available in multi-selection mode. It shows the number of selected items in the following form:

Selected <Entities>: <Number>

Example: Selected Products: 2

Content

Button Toolbar

Components of the select dialog. Left: single select, right: multi select

Behavior and Interaction

The select dialog can be called up from any control. The most common trigger is an input field with selection icon, also known as a “value help field”, or F4. Alternative triggers are buttons or icons, which add items to an existing list or the info bar in the master list in order to apply a contextual filter.

Single Select

Once users select an entry, the select dialog is closed and the selected entry is taken over. If applicable, the entry is displayed in the field from which the dialog was triggered.

Multi-Select

Search

The user can search items.

Guidelines

Search Behavior

Two types of search behavior are available:

(1) A live search, also known as “search-as-you-type” (property: liveChange), which is triggered by each character that the user enters or deletes

(2) A manual search, which is triggered explicitly after the user enters text in the search field and clicks or taps the Search icon or presses the Enter key

Remember Selections

Selection is remembered after the dialog is reopened

Selection is reset after the dialog is closed

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

Combo Box (guidelines)
Select (guidelines)
Value Help (guidelines)
Search (guidelines)

Implementation

No links

Value Help Dialog

Usage

Use the value help dialog if:

The user needs to use different attributes (such as city, company name, and so on) to find an object.
The user is searching within a dataset containing more than 200 items.
The user needs to define and select ranges and exclusions.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Size S – Value help dialog

Size M – Value help dialog

Size L – Value help dialog

Components

The value help dialog contains the following components:

Header bar
Icon tab bar and list control
Search template (optional)
Basic search
Items row (selected items, excluded items)
Footer toolbar
Include/exclude areas for range selection

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Icon Tab Bar on Tablet/Desktop and List Control on Phone (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem) Select from List and
Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Select from List and the Define Conditions tab.

Search Template (3)

Basic Search (4)

Advanced Search (5)

The advanced search offers all columns of the result list.
The value help icon of the business object ID field and description field for the business object that opened the current value help dialog will open only the Define Conditions screen. The entire value help dialog is not shown in order to prevent endless loops. For example, the value help icon of the customer ID or description field in a Select: Customer value help dialog will navigate directly to the Define Conditions screen.

For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields/advanced search fields are added automatically to the advanced search area.
There is a toggle link to show and hide the advanced search.
On desktops, the advanced search should be expanded by default.
On tablets, the advanced search should be collapsed by default.

Result List (6)

You can prefill the result list of the value help dialog by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the results list.

Selected/Excluded Items Row (7)

On desktops, the selection area with the selected and excluded items row is expanded initially.
On tablets and phones, the selection area with the selected and excluded item row is collapsed initially.

Footer Toolbar (8)

The footer bar includes OK and Cancel buttons.

Include/Exclude Area for Range Selection (9)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

Equal to
Between
Less than
Less than or equal to
Greater than
Greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

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.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking the Go button. The search results are shown in the result list.
If the input field where the user is coming from contains data, it’s transferred to the basic search of the value help dialog and the results are then filtered accordingly.
The basic search performs a search in all fields that are displayed in the advanced search and the result list.

Item and Range Selection

The user can select single and multiple items, as well as single and multiple ranges. Items and ranges can also be excluded.

1. Single Selection

A single item or a range can be selected in single selection cases:

Single Item Selection on Smartphones

Value help dialog – Single item selection on a smartphone

Single Item Selection on Tablets and Desktops

Value help dialog – Single item selection on desktop

Single Range Selection on Smartphones

For the selection of a single range, the value help dialog is opened by clicking the value help icon of the input field. The Define Condition tab is then displayed.

Value help dialog – Single range selection on smartphone

Single Range Selection for Smartphones

The icon tab bar and the selected/excluded item row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Value help dialog – Single range selection

2. Multi-selection

Users can select multiple items and ranges in range selection cases:

Multi-Item and Multi-Range Selections on Smartphones

For selection of multiple items and multiple ranges, the value help dialog is opened by clicking the value help icon of the input field. The start dialog is then displayed.

Value help dialog – Start dialog for multi-item and multi-range selection on smartphone

Value help dialog – Multi-range selection on smartphone

Value help dialog – Multi-item selection on smartphone

Value help dialog – Advanced search on smartphone

Multi-Item and Multi-Range Selection on Tablets and Desktops

Value help dialog – Multi-item and multi-range selection on desktop

3. Multi-Range Selection

Multi-Range Selection on Smartphones

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the start dialog and the Define Conditions tab are displayed.

Value help dialog – Multi-range selection on smartphone

Multi-Range Selection on Tablets and Desktops

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the content of the Define Conditions tab is displayed. The icon tab bar is hidden and the selected/excluded item row is displayed.

Value help dialog – Multi-range selection on desktop

Selected/Excluded Items Row

Each item that is selected from the result list on the Select from List tab is displayed as a token in the selected item row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the selected/excluded item row.

Copying and Pasting Multiple Values

The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values (copied from clipboard) at once.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Starting dialog: <BO Name>. For example, “Company”.
Select from list dialog: “Select from List”.
Advanced search dialog: “Advanced Search”
For single range selection: “Define Condition”.
For multiple range selection, show “Define Conditions”.

For tablets and desktops:

For multiple items combined with multiple ranges selection, show <BO Name>. For example, “Company”.
For single item selection, show Select: <BO Name>. For example, “Select Company”.
For single range selection, display Define Condition: <BO Name>. For example, “Define Condition: Company”.
For multiple range selection, display Define Conditions: <BO Name>. For example, “Define Conditions: Company”.

Advanced Search

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

Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
List (guidelines)
Panel (guidelines)

Implementation

Value Help Dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)

Value Help Dialog

Usage

Use the value help dialog if:

The user needs different attributes to find an object, such as the customer name, country, and city to search for a customer.
The user is searching in a data set with more than 200 items.
The user needs to define and select ranges and exclusions.

Do not use the value help dialog if:

Smartphones should be supported. In this case, use the select dialog (simple version of the value help dialog) instead by using the sap.m.SelectDialog control.

Responsiveness

The value help dialog control is currently not responsive and only available for desktop and tablet devices!
For smartphones, use the select dialog (sap.m.SelectDialog) as a simple version of the value help dialog.

Value help dialog - Size S

Value help dialog - Size M

Value help dialog - Size L

Components

The value help dialog contains an icon tab bar with the following two tabs:

The Select From List tab to select single and multiple items
The Define Conditions tab to include and exclude ranges

Value help dialog - Select From List tab

Value help dialog - Define Conditions tab

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Search Template (2)

Basic Search (3)

It is mandatory to display the basic search in the value help dialog.
Position the basic search on the right of the search template control. If there is no search template control, the basic search is displayed left-aligned.

Advanced Search (4)

The advanced search offers all columns of the result list.
The value help icon of the business object ID field and description field for the business object that opened the current value help dialog will open only the Define Conditions screen. The entire value help dialog is not shown in order to prevent endless loops. For example, the value help icon of the customer ID or description field in a Select: Customer value help dialog will directly navigate to the Define Conditions screen.
For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:
- The text Dynamic Selection is replaced by Advanced Search.
- All filter fields are added to the advanced area.
- The restore button is hidden.
- The advanced area is expanded.

Result List (5)

You can display the result list of the value help dialog by default . If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, the display ID and description of the business object appear in the first and second columns. Additional information is displayed after them. A maximum of five columns in the results list is recommended.

Selected/Excluded Items Row (6)

The selected/excluded item row is displayed in the panel container (sap.m.Panel). For more information, see Panel.
On desktops, the selection area with the selected and excluded items row is initially expanded.
On tablets, the selection area with the selected and excluded item row is initially collapsed.
Each item or range that is selected or excluded is displayed as a token in the selected or excluded item row.

Footer Toolbar (7)

The footer bar includes OK and Cancel buttons.

Include/Exclude Area for Range Selection (8)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

equal to
between
less than
less than or equal to
greater than
greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking the Go button. The search results are shown in the result list below the search area.
If the input field where the user is coming from contains data, it is transferred to the basic search of the value help dialog and the results are filtered accordingly.
The basic search searches in all fields that are displayed in the advanced search and the result list.

Item and Range Selection

The user can select single and multiple items, as well as single and multiple ranges. Items and ranges can also be excluded.

1. Single Selection

A single item or a range can be selected in single selection cases:

1.1 Single Item Selection

For the selection of a single item, the value help dialog is opened by clicking the value help icon of the input field. In this case only, the content of the Select From List tab is displayed.

The icon tab bar and the selected/excluded item row are hidden. As soon as one item is selected, the value help dialog closes automatically.

Value help dialog - Single item selection

1.2 Single Range Selection

The icon tab bar and the selected/excluded item row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Value help dialog - Single range selection

2. Multi Selection

Users can select multiple items and ranges in range selection cases:

2.1 Multi Item and Multi Range Selection

Use the Select From List tab to select multiple items. Use the Define Conditions tab to select and exclude ranges. Both are added as tokens to the selected/excluded items row at the bottom of the screen.

Value help dialog - Multi item selection

Value help dialog - Multi range selection

2.2 Multi Range Selection

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the content of the Define Conditions tab is displayed. The icon tab bar is hidden and the selected/excluded item row is displayed.

Value help dialog - Multiple range selection

Selected/Excluded Items Row

Each item that is selected from the result list on the Select From List tab is displayed as a token in the selected item row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the selected/excluded item row.

Guidelines

Dialog Title

The dialog title differs for multiple and single selection:

For multiple items combined with multiple range selection, show <BO Name>. For example, Company.
For single item selection, show Select: <BO Name>. For example, Select: Company.
For single range selection, show Define Condition: <BO Name>. For example, Define Condition: Company.
For multiple range selection, show Define Conditions: <BO Name>. For example, Define Conditions: Company.

Advanced Search

Example: In a value help dialog for selecting the customer, do not provide full value help for the Customer ID and Customer Name fields.

Try to use the value help in combination with a suggest.

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)
Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
Panel (guidelines)

Implementation

Value Help Dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)
Select Dialog (SAPUI5 samples)
Simple value help for size S
Select Dialog (SAPUI5 API reference)
Simple value help for size S

Value Help Dialog

Usage

Use the value help dialog if:

The user needs to use different attributes (such as city, company name, and so on) to find an object.
The user is searching within a data set containing more than 200 items.
The user needs to define and select ranges and exclusions.

Responsiveness

The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.

Size S – Value help dialog

Size M – Value help dialog

Size L – Value help dialog

Components

The value help dialog contains the following components:

Header bar
Icon tab bar and list control
Search template (optional)
Basic search
Items row (selected items, excluded items)
Footer toolbar
Include/exclude areas for range selection

Header Bar (1)

The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.

Icon Tab Bar on Tablet/Desktop and List Control on Phone (2)

Depending on the device, the following controls are used to display the content of the value help dialog:

Smartphones: The start dialog provides a list (sap.m.List) with the standard list items (sap.m.StandardListItem) Select from List and
Define Conditions to navigate between the different dialogs.
Tablet and desktop devices: The value help dialog contains an icon tab bar (sap.m.IconTabBar) to navigate between the Select from List and the Define Conditions tab.

Search Template (3)

Basic Search (4)

Advanced Search (5)

The advanced search offers all columns of the result list.
The value help icon of the business object ID field and description field for the business object that opened the current value help dialog will open only the Define Conditions screen. The entire value help dialog is not shown in order to prevent endless loops. For example, the value help icon of the customer ID or description field in a Select: Customer value help dialog will navigate directly to the Define Conditions screen.

For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:

There is no Filters link or a dialog to make additional filter fields visible. All filter fields/advanced search fields are added automatically to the advanced search area.
There is a toggle link to show and hide the advanced search.
On desktops, the advanced search should be expanded by default.
On tablets, the advanced search should be collapsed by default.

Result List (6)

You can prefill the result list of the value help dialog by default.
If you transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display the ID and description of the business object in the first and second columns. Display additional information in the next columns.
We recommend a maximum of five columns in the results list.

Selected/Excluded Items Row (7)

On desktops, the selection area with the selected and excluded items row is expanded initially.
On tablets and phones, the selection area with the selected and excluded item row is collapsed initially.

Footer Toolbar (8)

The footer bar includes OK and Cancel buttons.

Include/Exclude Area for Range Selection (9)

In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:

Equal to
Between
Less than
Less than or equal to
Greater than
Greater than or equal to

Each range is displayed as a token in the selected or excluded item row.

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.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) are triggered by clicking the Go button. The search results are shown in the result list.
If the input field where the user is coming from contains data, it is transferred to the basic search of the value help dialog and the results are filtered accordingly.
The basic search performs a search in all fields that are displayed in the advanced search and the result list.

Item and Range Selection

The user can select single and multiple items, as well as single and multiple ranges. Items and ranges can also be excluded.

1. Single Selection

A single item or a range can be selected in single selection cases:

Single Item Selection on Smartphones

Value help dialog – Single item selection on a smartphone

Single Item Selection on Tablets and Desktops

Value help dialog – Single item selection on desktop

Single Range Selection on Smartphones

For the selection of a single range, the value help dialog is opened by clicking the value help icon of the input field. The Define Condition tab is then displayed.

Value help dialog – Single range selection on smartphone

Single Range Selection on Tablets and Desktops

The icon tab bar and the selected/excluded item row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.

Value help dialog – Single range selection

2. Multiselection

Users can select multiple items and ranges in range selection cases:

Multi-Item and Multi-Range Selection on Smartphones

For selection of multiple items and multiple ranges, the value help dialog is opened by clicking the value help icon of the input field. The start dialog is then displayed.

Value help dialog – Start dialog for multi-item and multi-range selection on smartphone

Value help dialog – Multi-item selection on smartphone

Value help dialog – Advanced search on smartphone

Multi-Item and Multi-Range Selection on Tablets and Desktops

Value help dialog – Multi-item and multi-range selection on desktop

3. Multi-Range Selection

Multi-Range Selection on Smartphones

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the start dialog and the Define Conditions tab are displayed.

Value help dialog – Multi-range selection on smartphone

Multi-Range Selection on Tablets and Desktops

For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.

In this case only, the content of the Define Conditions tab is displayed. The icon tab bar is hidden and the selected/excluded item row is displayed.

Value help dialog – Multi-range selection on desktop

Selected/Excluded Items Row

Each item that is selected from the result list on the Select From List tab is displayed as a token in the selected item row.
Each range that is selected or excluded on the Define Conditions tab is displayed as a token in the selected/excluded item row.

Copying and Pasting Multiple Values

The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values (copied from clipboard) at once.

Copying and pasting multiple values

Guidelines

Dialog Title

The dialog title differs depending on the device and whether multiple or single selection is used.

For smartphones:

Starting dialog: <BO Name>. For example, “Company”.
Select from list dialog: “Select from List”.
Advanced search dialog: “Advanced Search”
For single range selection: “Define Condition”.
For multiple range selection, show “Define Conditions”.

For tablets and desktops:

For multiple items combined with multiple ranges selection, show <BO Name>. For example, “Company”.
For single item selection, show Select: <BO Name>. For example, “Select Company”.
For single range selection, display Define Condition: <BO Name>. For example, “Define Condition: Company”.
For multiple range selection, display Define Conditions: <BO Name>. For example, “Define Conditions: Company”.

Advanced Search

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

Input Field (guidelines)
Multi Input Field (guidelines)
Token (guidelines)
Icon Tab Bar (guidelines)
List (guidelines)
Panel (guidelines)

Implementation

Value Help Dialog (SAPUI5 samples)
Value Help Dialog (SAPUI5 API reference)

Value Help Dialog

Usage

Use the value help dialog if:

The user needs different attributes to find an object, such as the customer name, country, and city to search for a customer.
The user is searching in a data set with more than 200 items.
The user needs to define and select ranges and exclusions.

Do not use the value help dialog if:

Smartphones should be supported. In this case, use the select dialog (simple version of the value help dialog) instead by using the sap.m.SelectDialog control.

Responsiveness

The value help dialog control is currently not responsive and only available for desktop devices!
For smartphones, use the select dialog (sap.m.SelectDialog) as a simple version of the value help dialog.

Value help dialog - Size S

Value help dialog - Size L

Components

The value help dialog has two screens:

The main search screen
An embedded dialog for entering conditions

Value help dialog overview

Users can navigate between the two screens using links in the header area (in-place navigation):

Define Conditions takes the user from the main search screen to the conditions screen.
Back to Search returns the user from the conditions screen to the main search screen.

The sections below describe how to implement the different components of the value help dialog.

Header Bar (1)

Dialog Title

Use the title format: Select: <BO Name>
Example: “Select: Customer”
If you are using the optional search template feature in the value help dialog, it is displayed in front of the basic search.

Define Conditions

On the Define Conditions screen, users can select multiple ranges and define exclusions. Depending on the use case, you can show or hide this link and corresponding page.

Basic Search (2)

It is mandatory to display the basic search on top of the screen
If the input field from where the user is coming from contains data, it is transferred to the basic search of the value help dialog
The basic search is searching in all fields which are displayed in the advanced search and the result list

Advanced Search (3)

Depending on the use case it is optional to show or hide the advanced search.
For implementation of the basic and advanced search the sap.ui.comp.filterbar.FilterBar will be used in advanced mode. The advanced mode overwrites the following standard behavior:
- the text “dynamic selection” is replaced by “advanced search”
- all filter fields are added to the advanced area
- the restore button is hidden
- the advanced area is expanded
Also offer all columns of the result list in the advanced search.
The value help icon of the business object ID field and description field for the business object, which has opened the current value help dialog, will open the Define Conditions screen only. The reason not to show the whole value help dialog is to prevent endless loops. For example: the value help icon of the customer ID or description field in a “select: customer” value help dialog will directly navigate to the Define Conditions screen.

Result List (4)

You can prefill the result list of the value help dialog by default . If you have transferred values from the input field to the basic search field of the value help dialog, the results are filtered accordingly.
If available, display ID and description of the business object in the first and second column. Display additional information after them. A maximum of 5 columns in the results list is recommended, less than 5 columns is always fine.

Selected/ Excluded Items Row (5)

Each item and range which is selected or excluded on the Define Conditions screen will be displayed as token in the selected/ excluded item row.

Footer Toolbar (6)

The footer bar will show an OK and Cancel button.

Behavior and Interaction

Basic and Advanced Search

The basic search (mandatory) and advanced search (optional) will be triggered by clicking the search button. The search results will be shown in the result list below the search area.

Item Selection

The user can select items out of the list. All selected items will appear as token in the selected items row.

Single Selection

A single item or a range can be selected in single selection cases:

For selection of a single item the value help dialog will be opened by clicking the value help icon of the input field. The Define Conditions link in the header bar, as well as the selected/ excluded item row will be hidden. As soon as one item is selected, the value help dialog will be closed automatically.

Value help dialog for single item selection

For selection of a single range, the Define Conditions screen will be opened by clicking the value help icon of the input field without the back navigation in the header bar.

Value help dialog for single range selection

Multi Selection

For multi selection it is possible to select more than one item, range and exclusion.

For selection of multiple items the value help dialog will be opened by clicking the value help icon of the input field. The Define Conditions link in the header will navigate to the Define Conditions screen.

Value help dialog for multiple selection

Define multiple conditions

Define and Select Ranges/ Exclusions

By clicking the Define Conditions link in the header bar, the Define Conditions screen will be displayed to define and select ranges as well as exclusions. Both will also be added to the selected/ excluded items row on the bottom of the screen.

Guidelines

If necessary, also provide value help for fields offered in the advanced search. However, do not provide the full value help dialog for the ID and description fields of the business object that is being selected. For these two fields, make sure that the value help icon only opens the Define Conditions screen (range selection).

Example: In a value help dialog for selecting the customer, do not offer full value help for the “Customer ID” and “Customer Name” fields.

Try to use the value help in combination with suggest.

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)
Input Field (guidelines)
Multi Input Field (guidelines)

Implementation

- Value Help Dialog (SAPUI5 samples)
- Value Help Dialog – Simple Version (SAPUI5 samples)

Message Box

Usage

Use the message box if:

You want to display non-field-related messages.
You want to interrupt the user while he or she performs an action.
You want to display error, warning, success, confirmation, or information messages.
You need to interrupt the user for some other reason.
You need the user to acknowledge the message.
You need the user to make a decision.

Do not use the message box if:

You want to display a short success message. (Use a toast instead. For more information, see message toast.)
You can show the message directly in a form field.

Responsiveness

Types

The following categories of messages are available:

Error
Warning
Success
Information
Confirmation

Error Message

Control: sap.m.MessageBox
Icon: sap-icon://message-error
Title: Error
Stretch: false (no full screen on all devices)

Error message box with one action

Error message box with two actions

Text guidelines for an error message:

Do not just describe the problem; tell the user how to resolve it.
In the short text, speak the language of the end user. Do not include system or configuration details.
If the solution is more involved or technical, add a long text.
Do not repeat the short text in the long text. (They both appear together on the screen.)

Warning Message

Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Warning
Stretch: false (no full screen on all devices)

Use cases for warnings

a) No decision required: formulate the message as a statement.
Button(s): OK

Warning message box with OK button

b) Decision to continue required: formulate the message as a statement.

Button(s): OK, Cancel

Warning message with OK and Cancel buttons

c) Specific decision requried with one action

Use a relevant action button. The message may also be formulated as a question.
Button(s): <Action1>, Cancel

Warning message with action and Cancel buttons

Success Message

Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message.

Control: sap.m.MessageBox
Icon: sap-icon://message-success
Title: Success
Stretch: false (no full screen on all devices)
Button(s): OK

Success message box

Information

You should generally use a message toast (sap.m.MessageToast) to display success messages instead of a dialog (sap.m.Dialog).

Information Message

Information messages provide information the user needs to acknowledge, but that does not involve a decision. The message provides information that is useful and relevant, but never critical.

Control: sap.m.MessageBox
Icon: sap-icon://message-information
Title: Information
Stretch: false (no full screen on all devices)

Button(s): OK

Information message box

Confirmation Message

Control: sap.m.MessageBox
Icon: sap-icon://message-question
Title: <action> (such as “Approve”, “Reject”, or “Delete”)
Stretch: false (no full screen on all devices)

Button(s): <Action>, Cancel

Confirmation message box – Approve

Confirmation message box – Reject

Delete Message

If the user clicks or taps Delete, display a “Delete” dialog that confirms the delete action.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Delete
Stretch: false (no full screen on all devices)

Button(s): Delete, Cancel

Delete message box

Components

Show Details button

The message displayed for the user should provide sufficient information to ensure that the user knows what happened.
A message box without an explicit details section should be sufficient.
Therefore, the Show Details link is only shown if detailed information is available that differs from the message text and is important for the user.

If details are available, they appear in a text area as part of the message box.

Show details button on a message dialog

Message details within an sap.m.MessageBox

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

Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message Box (SAPUI5 samples)

Message Box

Usage

Use the message box if:

You want to display non-field-related messages.
You want to interrupt the user while he or she performs an action.
You want to display error, warning, success, confirmation, or information messages.
You need to interrupt the user for some other reason.
You need the user to acknowledge the message.
You need the user to make a decision.

Do not use the message box if:

You want to display a short success message. (Use a toast instead. For more information, see message toast.)
You can show the message directly in a form field.

Responsiveness

Types

The following categories of messages are available:

Error
Warning
Success
Information
Confirmation

Error Message

Control: sap.m.MessageBox
Icon: sap-icon://message-error
Title: Error
Stretch: false (no full screen on all devices)

Error message box with one action

Error message box with two actions

Text guidelines for an error message:

Do not just describe the problem; tell the user how to resolve it.
In the short text, speak the language of the end user. Do not include system or configuration details.
If the solution is more involved or technical, add a long text.
Do not repeat the short text in the long text. (They both appear together on the screen.)

Warning Message

Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Warning
Stretch: false (no full screen on all devices)

Use cases for warnings

a) No decision required: formulate the message as a statement.
Button(s): OK

Warning message box with OK button

b) Decision to continue required: formulate the message as a statement.

Button(s): OK, Cancel

Warning message with OK and Cancel buttons

c) Specific decision requried with one action

Use a relevant action button. The message may also be formulated as a question.
Button(s): <Action1>, Cancel

Warning message with action and Cancel buttons

Success Message

Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message.

Control: sap.m.MessageBox
Icon: sap-icon://message-success
Title: Success
Stretch: false (no full screen on all devices)
Button(s): OK

Success message box

Information

You should generally use a message toast (sap.m.MessageToast) to display success messages instead of a dialog (sap.m.Dialog).

Information Message

Information messages provide information the user needs to acknowledge, but that does not involve a decision. The message provides information that is useful and relevant, but never critical.

Control: sap.m.MessageBox
Icon: sap-icon://message-information
Title: Information
Stretch: false (no full screen on all devices)

Button(s): OK

Information message box

Confirmation Message

Control: sap.m.MessageBox
Icon: sap-icon://message-question
Title: <action> (such as “Approve”, “Reject”, or “Delete”)
Stretch: false (no full screen on all devices)

Button(s): <Action>, Cancel

Confirmation message box – Approve

Confirmation message box – Reject

Delete Message

If the user clicks or taps Delete, display a “Delete” dialog that confirms the delete action.

Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Delete
Stretch: false (no full screen on all devices)

Button(s): Delete, Cancel

Delete message box

Components

Show Details button

If details are available, they appear in a text area as part of the message box.

Show details button on a message 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

Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message Box (SAPUI5 samples)

Popover

Usage

Use a popover if:

You need to define your own structure.
You want to show UI elements that are not available with the quick view.

Do not use a popover if:

The quick view is more appropriate for your use case.
The objects are in a master list (in this case, the details are shown in the details area).

Responsiveness

The popover can be used in the following ways:

Responsive and adaptive: sap.m.ResponsivePopover
Shows a dialog on smartphones (to be closed with an X) and a popover on a tablet or desktop.
Non-responsive: sap.m.Popover
Always shows a popover. Only use a non-responsive popover if it has very little content. On smartphones, the popover should not use more than a third of the phone’s real estate.

Layout

Structure of Popover

The header and footer are generally optional. The other elements are as follows:

Back (1) – optional
Needs to be implemented if the user can trigger further popovers. Always show popovers in place. Never place them on top of each other.

Close function (3)
This feature closes the dialog. It is available for smartphones only and is set automatically (sap.m.ResponsivePopover).

Content (4)
Ensure that the content has a basic design and shows only the most important information. We recommend the following:

Use no more than two groups.
Limit the total number of fields to eight.
Use single-column tables.
Use micro charts.

Actions (5) – optional

Popover – General structure

Popover – Example

Behavior and Interaction

Opening a Popover

The user opens a popover by clicking or tapping an object represented by a text link or an icon. To improve accessibility, we recommend using texts, such as the name or ID of an object.

Closing a Popover

The popover is closed when the user clicks or taps outside the popover or selects an action within the popover.

Guidelines

Show status information as text fields in a content group. You can use semantic text colors.
You can define a height for the popover. If the content exceeds the height, a scroll bar is displayed.

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

Quick View (guidelines)

Implementation

Popover (SAPUI5 samples)

Responsive Popover (SAPUI5 samples)

Popover

Usage

Use a popover if:

You need to define your own structure.
You want to show UI elements that are not available with the quick view.

Do not use a popover if:

The quick view is more appropriate for your use case.
The objects are in a master list (in this case, the details are shown in the details area).

Responsiveness

The popover can be used in the following ways:

Responsive and adaptive: sap.m.ResponsivePopover
Shows a dialog on smartphones (to be closed with an X) and a popover on a tablet or desktop.
Non-responsive: sap.m.Popover
Always shows a popover. Only use a non-responsive popover if it has very little content. On smartphones, the popover should not use more than a third of the phone’s real estate.

Layout

Structure of Popover

The header and footer are generally optional. The other elements are as follows:

Back (1) – optional
Needs to be implemented if the user can trigger further popovers. Always show popovers in place. Never place them on top of each other.

Close function (3)
This feature closes the dialog. It is available for smartphones only and is set automatically (sap.m.ResponsivePopover).

Content (4)
Ensure that the content has a basic design and shows only the most important information. We recommend the following:

Use no more than two groups.
Limit the total number of fields to eight.
Use single-column tables.
Use micro charts.

Actions (5) – optional

Popover – General structure

Popover – Example

Behavior and Interaction

Opening a Popover

The user opens a popover by clicking or tapping an object represented by a text link or an icon. To improve accessibility, we recommend using texts, such as the name or ID of an object.

Closing a Popover

The popover is closed when the user clicks or taps outside the popover or selects an action within the popover.

Guidelines

Show status information as text fields in a content group. You can use semantic text colors.
You can define a height for the popover. If the content exceeds the height, a scroll bar is displayed.

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

Quick View (guidelines)

Implementation

Popover (SAPUI5 samples)

Responsive Popover (SAPUI5 samples)

Posts navigation

← Older posts

Cloud File Browser

Cloud file browser - Export and import dialogs

Components

Cloud file browser components

Iconography

Cloud file browser icons

Behavior and Interaction

Export

Export as dialog and cloud file browser

Accessibility

Update / Overwrite a file

Cloud file browser with file selected

Warning message for file update

Create a Folder

Folder creation

Locked Folders

Cloud file browser with locked folder

Import

Accessibility

Import mode

Loading Data

Busy indicator

Empty States

No file share found

Folder fails to load

Empty folder

The user doesn’t have permission to access the file share

Empty state - No file share

Empty state - Empty folder

Last Selected Location

Column sorting

Responsiveness

Mobile (size S)

Mobile (size S) with 200% zoom

Resources

Elements and Controls

Implementation

Color Picker

Color picker

When to Use

Anatomy

Anatomy of the color picker

Behavior and Interaction

Responsive Behavior

Related Links

Components

Implementation

Value Help Dialog

Intro

Clicking the value help icon opens the value help dialog

Usage

Use the value help dialog if:

Do not use the value help dialog if:

Responsiveness

Value help dialog - Sizes L and XL

Value help dialog - Size M

Value help dialog - Size S

Components

Components of the Value Help Dialog

Header (1)

Icon Tab Bar / List Control (Phone) (2)

Search Template (3)

Basic Search (4)

Go Button (5)

Result List (6)

Selected Items and Conditions (7)

Footer Toolbar (8)

Filters (9)

Value help dialog - Filters

Using the Filters

Note:

Example: Operators for Date Fields

Using an operator to filter the result list

Area for Defining Conditions (10)

'Define Conditions' - List of operators

Defining a condition for a Boolean attribute

Behavior and Interaction

Basic Search and Filters

Selecting Items and Defining Conditions

Select a Single Item (Smartphone)