Archives

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. For more information, see quick view.

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.

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 – General structure
Popover – Example
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

Implementation

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.

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
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
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
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
Example of a trigger: Add button in a table

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 infobar 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
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 <Entity>. For example: Select Product.
  • For multiple selection:Select <Entities>. 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.

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 multiselection mode, an infobar shows the number of selected items in the following form:

Selected <Entities>: Number. For example: Selected Products: 2.

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

Implementation

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.

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
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
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
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
Example of a trigger: Add button in a table

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
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 <Entity>. For example: Select Product.
  • For multiple selection:Select <Entities>. 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.

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.

Info bar

In multiselection mode, an info bar shows the number of selected items in the following form:

Selected <Entities>: 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 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

Implementation

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

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.

Example of a generic quick view
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: Employee quick view
Example: Company 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

Implementation

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

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.

Example of a generic quick view
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: Employee quick view
Example: Company 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

Implementation