View Settings Dialog

The view settings dialog helps the user to sort, filter, or group data within a (master) list or a table. The dialog is triggered by icon buttons in the table toolbar. Each button shows a dropdown list icon.

Usage

Use the view settings dialog if:

You need to allow the user to sort line items in a manageable list or table (up to about 20 columns).
You need to offer custom filter settings in a manageable list or table (up to about 20 columns).
You need to allow the user to group line items in a manageable list or table (up to about 20 columns).

Do not use the view settings dialog if:

You have complex tables (more than about 20 columns).
You need to rearrange columns within your table. Use the table personalization dialog instead.
You need very specific sort, filter, or column sorting options within complex tables. Use the P13n dialog instead.

Button Placement

If the app does not offer all three sorting, filtering, and grouping functionalities, but only one of these (such as sort), we recommend placing the icon button directly in the toolbar.

Do not place sort, filter, or group buttons in the footer toolbar if they refer to a table.

Place group, sort, and filter buttons in the footer toolbar if they refer to a master list.

For detailed information about where to place the sort, filter, and group buttons, see “Sort, Filter, Group (Generic)” in the Behavior and Interaction section of the table toolbar article.

Sort, Group, and Filter a List

You can also offer the view setting features for a list.

Responsiveness

The popover dialog appears as a modal window on desktop and tablet screen sizes, but full screen on smartphones.

The view settings dialog is a composite control that consists of a modal dialog with a maximum of three tabs with lists of attributes. Each helps the user to either sort, filter, or group a table or list. If the use case requires,only a sort feature, for example, you can hide the filter and group tabs.

The dialog is triggered by the dropdown list icon button in the table header

View settings dialog on a smartphone (size S)

View settings dialog on a tablet (size M)

View settings dialog on a desktop (size L)

Behavior and Interaction

The sort, filter, and group features can all be applied to a table simultaneously.

Sort

The first tab in the view settings dialog is the sort feature. The tab shows a standard sort icon with two arrows – one pointing up, and one pointing down (see image above).

The sort dialog shows two groups of sort settings. The first group offers general Ascending and Descending sort options. The second group offers attributes that fit the use case, such as Product, Supplier, Weight, or Price. The attributes can match the table columns, but because a table column can also contain several data points, such as “Name” and “Surname”, the attributes allow an attribute to be shown for each data point.

The user select attributes using the radio buttons. Clicking or tapping OK closes the dialog and shows the table items in the selected order.

Filter

The second tab in the view settings dialog is the filter feature. The tab shows a filter, which is the standard filter icon. The filter tab can offer a single filter selection list, a multi-filter selection list, or a category list. The category list provides an overview, and leads the user to detailed filter selection lists via drilldown.

The dialog for choosing a category from the filter tab drills down to the filter settings.

The dialog after choosing a general filter category (here: Price). The dialog can offer a specification of that category depending on the use case.

A table view filtered by Price – the info bar shows the filter setting.

Filter Selection List – Single Selection

The dialog offers one single-selection list with radio buttons to select a filter. This list is useful for offering a list of preconfigured filters for a specific use, such as “Products with numbers ‘starting between 100 and 200’ with status ‘in stock’ and color ‘green’”.

Filter selection list – Multi-Selection

You can also offer a filter selection list as a multi-selection list. In this case, the user can choose, for example, all “green” and “red” products.

Multi-selection of filters

Category List

The filter dialog shows a single list of general filter categories depending on the use case, like Price or Height. The user chooses a category by clicking or tapping the list item, such as Price. As this is a simple drilldown, these categories do not offer radio buttons. The dialog shows a list of filter settings in the Price category. Optional filters here, such as Less than 100, depend on the use case. The user chooses a filter setting by selecting one of the radio buttons offered in this list. Clicking or tapping OK closes the dialog and shows the table items filtered by the selected attribute. The info bar shows which filter has been set.

Free-Form Apps

You can also customize your own filter UIs, for example, to support date picking.

Filter Values

Filters can correspond to single values as well as groups, such as “<100.00 EUR”.

Filter Reset

The refresh button on the filter tab resets all filter settings.

Group

The third tab in the view settings dialog is the group feature. The tab shows an icon with lines in square brackets, which is the standard group icon.

The group dialog shows two groups of attributes. The first group offers a general Ascending or Descending order, which allows the user to select the order in which the defined groups appear. The second group offers attributes that fit the use case, such as Type or Supplier.

You can also offer an attribute like Price to group data in a table.

The user uses the radio buttons or selects checkboxes to choose attributes. Clicking or tapping OK closes the dialog and shows the table with items grouped below headers.

Removing Filters

Be sure to offer an entry such as None in a single-selection list which removes a set filter.

The dialog for choosing an attribute from the group tab.

A table view grouped by suppliers – group headers divide the list.

Naming Group Headers

Be sure to name the group headers as follows: Category Name: Value/Range. For example, Category: Accessories, or Supplier: Red Point Stores.

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

Table Overview (guidelines)
Table Toolbar (guidelines)
Table Personalization (guidelines)
P13n Dialog (guidelines)

Implementation

Table View Settings (SAPUI5 samples)
Table View Settings (SAPUI5 API reference)

Switch

The toggle switch mimics a physical switch that allows users to turn things on or off. With the swtich, single settings options such as personalization or display settings can be switched on or off. The initial state of the control (On or Off) should be made clear from the corresponding inline label.

Usage

Use the switch if:

You need to emphasize the On/Off characteristic within a dialog.
You need to clearly show the mode or state that a setting is in.
You need a toggle switch for binary settings when changes become effective immediately after the user changes them. For example, if the user needs to set data transmission or accept/reject business objects.

Do not use the switch if:

The user has to choose several options or perform extra steps for changes to become effective. In this case, provide checkboxes to choose options and a Submit or Next button to apply the changes. Also use checkboxes or a list view if the user can select multiple items.

Types

The switch provides attributes to customize its appearance.

Default switch

Inline Label

The default type allows custom text input. We recommend that you avoid labels comprising more than 4 letters. Otherwise, the text becomes truncated and loses its meaning.

Default switch with custom label

Inline Icon for Accepting and Rejecting

The Accept and Reject switch type allows you to use the check and cross icons. Do not use other icons in this context.

Accept and Reject switch with icon and color coding

Behavior and Interaction

Switch

The user can switch between two values, such as On and Off.

Styles

Depending on their usage, switches come in different states and markups, but are always active or inactive. The interaction states are as follows:

Switch interaction states

Guidelines

Replace the On and Off labels if there are more specific labels for the setting. Use any short labels (3–4 characters) that represent binary opposites if they are more appropriate for a particular setting. For example, you might use Show and Hide if the setting is “Show images.”

Do not replace the On or Off label unless you really have to. Use the default labels unless there are other labels that are more specific for the setting.

Do not use labels that are longer than three or four characters. Otherwise, the text becomes truncated and loses its meaning.

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 (guidelines)
Radio Button (guidelines)
Check Box (guidelines)

Implementation

Switch (SAPUI5 samples)
Switch (SAPUI5 API reference)

Switch

The toggle switch mimics a physical switch that allows users to turn things on or off. With the swtich, single settings options such as personalization or display settings can be switched on or off. The initial state of the control (On or Off) should be made clear from the corresponding inline label.

Usage

Use the switch if:

You need to emphasize the On/Off characteristic within a dialog.
You need to clearly show the mode or state that a setting is in.
You need a toggle switch for binary settings when changes become effective immediately after the user changes them. For example, if the user needs to set data transmission or accept/reject business objects.

Do not use the switch if:

The user has to choose several options or perform extra steps for changes to become effective. In this case, provide checkboxes to choose options and a Submit or Next button to apply the changes. Also use checkboxes or a list view if the user can select multiple items.

Types

The switch provides attributes to customize its appearance.

Default switch

Inline Label

The default type allows custom text input. We recommend that you avoid labels comprising more than 4 letters. Otherwise, the text becomes truncated and loses its meaning.

Default switch with custom label

Inline Icon for Accepting and Rejecting

The Accept and Reject switch type allows you to use the check and cross icons. Do not use other icons in this context.

Accept and Reject switch with icon and color coding

Behavior and Interaction

Switch

The user can switch between two values, such as On and Off.

Styles

Depending on their usage, switches come in different states and markups, but are always active or inactive. The interaction states are as follows:

Switch interaction states

Switch Interaction states - Semantic Colors

Guidelines

Replace the On and Off labels if there are more specific labels for the setting. Use any short labels (3–4 characters) that represent binary opposites if they are more appropriate for a particular setting. For example, you might use Show and Hide if the setting is “Show images.”

Do not replace the On or Off label unless you really have to. Use the default labels unless there are other labels that are more specific for the setting.

Do not use labels that are longer than three or four characters. Otherwise, the text becomes truncated and loses its meaning.

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 (guidelines)
Radio Button (guidelines)
Check Box (guidelines)

Implementation

Switch (SAPUI5 samples)
Switch (SAPUI5 API reference)

Time Picker

The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.

Usage

Use the time picker if:

You want the user to select a time.
You want the user to select a time range. In this case, one time picker can be used to set the starting time and a second one to set the end time.
You want the user to select a detailed time duration, such as 1 minute and 30 seconds.

Do not use the time picker if:

You want the user to select a duration such as 15 minutes, 30 minutes, 1 hour, or 2 hours. In this case, use the select control instead.

Responsiveness

The time picker comes with a cozy mode and a compact mode. In the compact mode, the time input field and the button are smaller than in the cozy mode. In the compact mode, there are also arrows that the user can click or tap to set hours, minutes, and so on. For more information, see the article on content density.

On desktop (size L/XL) and tablet (size M) devices, the user can enter a time in the input field of the time picker, or set a time via the time picker dropdown which opens when the user clicks the time picker button.

For mobile (size S) devices, the tap area is the same as for a tablet, and the user can type a time in the time input field. Unlike on a tablet or desktop, the time picker dropdown does not open below the time input field, but rather in a subview.

Comparison of cozy mode (left) and compact mode (right)

Components

The time picker consists of a time input field and a time picker button. On desktop, tablet, and mobile devices, both elements have their own click area. Clicking the time picker button opens the time picker dropdown.

Time picker input

Time Input Field

The time input field allows the user to enter a time directly in the field, or select it using the time picker dropdown. The input is validated and feedback is given to the user.

The time input field can also contain a placeholder (input prompt).

Time Picker Button

When the user clicks or taps the time picker button, the time picker dropdown opens to allow the user to choose a time.

Time Picker Dropdown

In the time picker dropdown, the user can select a time by setting hours, minutes, seconds and AM/PM or a subset of these (with hours and minutes only).

Dropdown with hours and minutes

Dropdown with hours, minutes, seconds, and AM/PM

Behaviour and Interaction

Select a Time (Desktop Device)

Selecting a Time (Desktop Device)

The user clicks the time picker button, which opens the time picker dropdown. In the time picker dropdown, the user can set the time either with the mouse or by using the keyboard arrows. The Page Up and Page Down keys can also be used to set the current selection to the lowest or highest value, and the Home and End keys can be used to go to the first or last element of the picker.

When the desired time has been selected, the user can confirm this selection by clicking the OK button. If the user wants to close the dropdown without changing the time to the selected time, this can be done by clicking the Cancel button or by clicking outside the dropdown.

The user can also select a time by clicking the time picker input field and typing the desired time in the field. You can prevent users from making incorrect entries by not allowing them to type in certain characters. For example, if the user enters a time that has the correct format but is invalid (such as 12:60:85), the time picker displays a validation error.

Time picker dropdown and input field

Selecting a Time (Tablet or Mobile Device)

On tablets and mobile devices, users can select the time by tapping the time picker button. The timer picker dropdown opens beneath the input field (a subview is opened on mobile devices). The user sets the hour by touching the hour element and then swiping up or down. To set the minutes, seconds, and AM/PM, the user also touches the corresponding element and swipes up or down to set the right value.

To confirm the selected time, the user taps the OK button. Taping the Cancel button cancels the selection. On tablets, the selection can also be cancelled by tapping outside the time picker dropdown.

Set time by swiping up and down

Style

Disabled Time Picker

In the disabled state, the time picker input is grayed out and the button becomes invisible.

Validation Error

When an invalid time is typed in, the time picker's border turns red and an error message appears.

Guidelines

Time Formats

Only let the user select time in seconds if this information is really necessary.

If the user has to set a time that is timezone sensitive, always provide information about the timezone. For example, if you want the user to choose a time on a calendar for a meeting that might also involve people from other timezones, provide information about those timezones. Ideally, you should also display the local time in the other attendees’ timezones so that the user can choose a time that is convenient for everyone.

12-Hour System

In the 12-hour system, the date picker can contain selections for hours, minutes, seconds, and AM/PM.

24-Hour System

In the 24-hour system, the date picker can contain selections for hours, minutes, and seconds. AM/PM is not available in this mode.

For more information, see formatting time.

Properties

AM and PM are locale-dependent. Therefore, the locale can be set using the property “localeId”.

You can set the display format (property: displayFormat) to define the format in which the time input field and the time picker dropdown display the time. For more information about time formats, see the article on formatting dates.

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

Date Picker (guidelines)
Date/Time Picker (guidelines)
Input Field (guidelines)
Select (guidelines)
Formatting Time (guidelines)
Formatting Dates (guidelines)

Implementation

Time Picker (SAPUI5 samples)
Time Picker (SAPUI5 API reference)

Time Picker

The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.

Usage

Use the time picker if:

You want the user to select a time.
You want the user to select a time range. In this case, one time picker can be used to set the starting time and a second one to set the end time.
You want the user to select a detailed time duration, such as 1 minute and 30 seconds.

Do not use the time picker if:

You want the user to select a duration such as 15 minutes, 30 minutes, 1 hour, or 2 hours. In this case, use the select control instead.

Responsiveness

The time picker comes with a cozy mode and a compact mode. In the compact mode, the time input field and the button are smaller than in the cozy mode. In the compact mode, there are also arrows that the user can click or tap to set hours, minutes, and so on. For more information, see the article on content density.

On desktop (size L/XL) and tablet (size M) devices, the user can enter a time in the input field of the time picker, or set a time via the time picker dropdown which opens when the user clicks the time picker button.

For mobile (size S) devices, the tap area is the same as for a tablet, and the user can type a time in the time input field. Unlike on a tablet or desktop, the time picker dropdown does not open below the time input field, but rather in a subview.

Comparison of cozy mode (left) and compact mode (right)

Components

The time picker consists of a time input field and a time picker button. On desktop, tablet, and mobile devices, both elements have their own click area. Clicking the time picker button opens the time picker dropdown.

Time picker input

Time Input Field

The time input field allows the user to enter a time directly in the field, or select it using the time picker dropdown. The input is validated and feedback is given to the user.

The time input field can also contain a placeholder (input prompt).

Time Picker Button

When the user clicks or taps the time picker button, the time picker dropdown opens to allow the user to choose a time.

Time Picker Dropdown

In the time picker dropdown, the user can select a time by setting hours, minutes, seconds and AM/PM or a subset of these (with hours and minutes only).

Dropdown with hours and minutes

Dropdown with hours, minutes, seconds, and AM/PM option

Behavior and Interaction

Selecting a Time (Desktop Device)

The user clicks the time picker button, which opens the time picker dropdown. In the time picker dropdown, the user can set the time either with the mouse or by using the keyboard arrows. The Page Up and Page Down keys can also be used to set the current selection to the lowest or highest value, and the Home and End keys can be used to go to the first or last element of the picker.

When the desired time has been selected, the user can confirm this selection by clicking the OK button. If the user wants to close the dropdown without changing the time to the selected time, this can be done by clicking the Cancel button or by clicking outside the dropdown.

The user can also select a time by clicking the time picker input field and typing the desired time in the field. You can prevent users from making incorrect entries by not allowing them to type in certain characters. For example, if the user enters a time that has the correct format but is invalid (such as 12:60:85), the time picker displays a validation error.

Time picker dropdown and input field

Selecting a Time (Tablet or Mobile Device)

On tablets and mobile devices, users can select the time by tapping the time picker button. The timer picker dropdown opens beneath the input field (a subview is opened on mobile devices). The user sets the hour by touching the hour element and then swiping up or down. To set the minutes, seconds, and AM/PM, the user also touches the corresponding element and swipes up or down to set the right value.

To confirm the selected time, the user taps the OK button. Taping the Cancel button cancels the selection. On tablets, the selection can also be cancelled by tapping outside the time picker dropdown.

Set time by swiping up and down

Style

Disabled Time Picker

In the disabled state, the time picker input is grayed out and the button becomes invisible.

Disabled time picker

Validation Error

When an invalid time is typed in, the time picker’s border turns red and an error message appears.

Validation error

Guidelines

Time Formats

Only let the user select time in seconds if this information is really necessary.

If the user has to set a time that is timezone sensitive, always provide information about the timezone. For example, if you want the user to choose a time on a calendar for a meeting that might also involve people from other timezones, provide information about those timezones. Ideally, you should also display the local time in the other attendees’ timezones so that the user can choose a time that is convenient for everyone.

12-Hour System

In the 12-hour system, the date picker can contain selections for hours, minutes, seconds, and AM/PM.

24-Hour System

In the 24-hour system, the date picker can contain selections for hours, minutes, and seconds. AM/PM is not available in this mode.

For more information, see formatting time.

Properties

AM and PM are locale-dependent. Therefore, the locale can be set using the property “localeId”.

You can set the display format (property: displayFormat) to define the format in which the time input field and the time picker dropdown display the time. For more information about time formats, see the article on formatting dates.

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

Date Picker (guidelines)
Input Field (guidelines)
Select (guidelines)
Formatting Time (guidelines)
Formatting Dates (guidelines)

Implementation

Time Picker (SAPUI5 samples)
Time Picker (SAPUI5 API reference)

Table Personalization (Overview)

Table personalization can be used to modify the display and settings of a table.

It is a UI pattern that is used to change one or more of the following attributes:

Visibility of columns
Order of columns
Sorting
Grouping
Filtering

Table personalization can be applied to simple tables (up to about 20 columns) and complex tables (more than about 20 columns) using different controls.

Usage

Use the view settings dialog if:

The user is able to personalize fewer than about 20 columns.
A combination of sorting, filtering, and grouping is needed.

Use the table personalization dialog if:

The user is able to personalize fewer than about 20 columns.
Columns need to be shown/hidden and reordered.

Use the view settings dialog AND the table personalization dialog if:

The user wants to personalize fewer than about 20 columns.
A combination of show/hide and one other function is needed.

Use the P13n dialog if:

You are using an analytical table (ALV).
The user is able to personalize more than about 20 columns.
Complex queries have to be built for the respective table.

Do not use table personalization at all if:

The table has very few columns and rows.
A very complex filter is needed. In this case, consider using a filter bar instead of the filter tab.

Types

Simple Table Personalization

Table Personalization Dialog

All table personalization dialogs are opened via the Settings button on the right-hand side of the table toolbar.

The table personalization dialog can show/hide and reorder columns.

Hide/Show

To show or hide columns, the user only needs to select or deselect the checkboxes of the respective list item. Alternatively, the user can select all the items at once.

Reorder

Two buttons on the left-hand side enable a selected column to be moved up or down.

The user confirms the dialog to apply the options to the table.

For more information, see the table personalization dialog article.

Table personalization dialog

View Settings Dialog

The sort, filter, and group features can all be applied to a table simultaneously.

Sort

The first tab in the view settings dialog is the sort feature, which allows the table content to be sorted according to the chosen attribute.

The dialog offers two sort features:

The first group sorts the table by a general ascending or descending order.
The second group lets the user choose an attribute that fits either a column or part of a column since there are also columns that contain more than one data point.

Filter

The second tab in the view settings dialog is the filter feature, which can offer a single filter selection list or a category list. The category list provides an overview and guides the user to detailed filter selection lists via drilldown. The options available are single selection, multiselection, a category list, a predefined list, and a custom filter.

Group

The third tab in the view settings dialog is the group feature, which also offers two groups of attributes:

The first group offers a general ascending or descending order that controls the order in which the defined groups appear.
The second group offers attributes with which to group the corresponding data in the table.

View settings dialog – Sort tab

View settings dialog – Filter tab

View settings dialog – Group tab

Complex Table Personalization

P13n Dialog

The P13n dialog is the most complex personalization option for tables. It is used if none of the other options are sufficient. Like the view settings dialog, it can combine any of the tabs available. By allowing inclusion and exclusion filters, as well as several group options (for some tables only), it can form more complex queries than the other options.

Columns
The P13n dialog offers the most options for changing the table columns that are shown and the order in which they are displayed.

It can show/hide a column and alter the order of the columns.

P13n dialog – Columns tab

Sort
It also allows the user to sort the table content according to the columns that are chosen and in a specific order.

For more complex sorting needs, the user can add the required number of criteria by clicking the button (Add New Line) at the end of the line.

P13n dialog – Sort tab

Filter
A filter option allows the user to filter the table information according to specific filter criteria, which can be included or excluded in the relevant section of the filter.

Each filter criterion consists of a column, an operator (depending on the data type of the column), and a value by which the selected column is filtered.

For more complex cases, the user can add filters by clicking the button (Add New Line), and remove them by clicking the button (Remove Line) at the end of each filter item.

P13n dialog – Filter tab

Group
The Group tab enables the user to group the table data by one or more columns.

For more complex grouping scenarios, the user can add more grouping options by clicking the button (Add New Line) at the right-hand side of each grouping line (only available for the ALV table).

P13n dialog – Group tab

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

Table Overview (guidelines)
Table Personalization Dialog (guidelines)
P13n-Dialog (guidelines)
View Settings Dialog (guidelines)

Implementation

Table Personalization (SAPUI5 samples)
View Settings Dialog (SAPUI5 samples)
P13n-Dialog (SAPUI5 samples)
Table Personalization Dialog (SAPUI5 API reference)
Table Personalization Provider (SAPUI5 API reference)

Table Personalization (Overview)

Table personalization can be used to modify the display and settings of a table.

It is a UI pattern that is used to change one or more of the following attributes:

Visibility of columns
Order of columns
Sorting
Grouping
Filtering

Table personalization can be applied to simple tables (up to about 20 columns) and complex tables (more than about 20 columns) using different controls.

Usage

Use the view settings dialog if:

The user is able to personalize fewer than about 20 columns.
A combination of sorting, filtering, and grouping is needed.

Use the table personalization dialog if:

The user is able to personalize fewer than about 20 columns.
Columns need to be shown/hidden and reordered.

Use the view settings dialog AND the table personalization dialog if:

The user wants to personalize fewer than about 20 columns.
A combination of show/hide and one other function is needed.

Use the P13n dialog if:

You are using an analytical table (ALV).
The user is able to personalize more than about 20 columns.
Complex queries have to be built for the respective table.

Do not use table personalization at all if:

The table has very few columns and rows.
A very complex filter is needed. In this case, consider using a filter bar instead of the filter tab.

Types

Simple Table Personalization

Table Personalization Dialog

All table personalization dialogs are opened via the Settings button on the right-hand side of the table toolbar.

The table personalization dialog can show/hide and reorder columns.

Hide/Show

To show or hide columns, the user only needs to select or deselect the checkboxes of the respective list item. Alternatively, the user can select all the items at once.

Reorder

Two buttons on the left-hand side enable a selected column to be moved up or down.

The user confirms the dialog to apply the options to the table.

For more information, see table personalization dialog.

Table personalization dialog

View Settings Dialog

The sort, filter, and group features can all be applied to a table simultaneously.

Sort

The first tab in the view settings dialog is the sort feature, which allows the table content to be sorted according to the chosen attribute.

The dialog offers two sort features:

The first group sorts the table by a general ascending or descending order.
The second group lets the user choose an attribute that fits either a column or part of a column since there are also columns that contain more than one data point.

Filter

The second tab in the view settings dialog is the filter feature, which can offer a single filter selection list or a category list. The category list provides an overview and guides the user to detailed filter selection lists via drilldown. The options available are single selection, multiselection, a category list, a predefined list, and a custom filter.

Group

The third tab in the view settings dialog is the group feature, which also offers two groups of attributes:

The first group offers a general ascending or descending order that controls the order in which the defined groups appear.
The second group offers attributes with which to group the corresponding data in the table.

View settings dialog – Sort tab

View settings dialog – Filter tab

View settings dialog – Group tab

Complex Table Personalization

P13n Dialog

The P13n dialog is the most complex personalization option for tables. It is used if none of the other options are sufficient. Like the view settings dialog, it can combine any of the tabs available. By allowing inclusion and exclusion filters, as well as several group options (for some tables only), it can form more complex queries than the other options.

Columns
The P13n dialog offers the most options for changing the table columns that are shown and the order in which they are displayed.

It can show/hide a column and alter the order of the columns.

P13n dialog – Columns tab

Sort
It also allows the user to sort the table content according to the columns that are chosen and in a specific order.

For more complex sorting needs, the user can add the required number of criteria by clicking the button (Add New Line) at the end of the line.

P13n dialog – Sort tab

Filter
A filter option allows the user to filter the table information according to specific filter criteria, which can be included or excluded in the relevant section of the filter.

Each filter criterion consists of a column, an operator (depending on the data type of the column), and a value by which the selected column is filtered.

For more complex cases, the user can add filters by clicking the button (Add New Line), and remove them by clicking the button (Remove Line) at the end of each filter item.

P13n dialog – Filter tab

Group
The Group tab enables the user to group the table data by one or more columns.

For more complex grouping scenarios, the user can add more grouping options by clicking the button (Add New Line) at the right-hand side of each grouping line (only available for the ALV table).

P13n dialog – Group tab

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

Table Overview (guidelines)
Table Personalization Dialog (guidelines)
P13n-Dialog (guidelines)
View Settings Dialog (guidelines)

Implementation

Table Personalization (SAPUI5 samples)
View Settings Dialog (SAPUI5 samples)
P13n-Dialog (SAPUI5 samples)
Table Personalization Dialog (SAPUI5 API reference)
Table Personalization Provider (SAPUI5 API reference)

P13n-Dialog

The p13n dialog control provides a dialog for tables that allows the user to personalize one or more of the following attributes:

Columns (visibility and order of columns)
Sort (sorting of table values)
Filter (filtering of table values)
Group (grouping for specific attributes)

These tabs can be shown in any combination as the use case requires.

The P13n dialog is intended for complex tables with a large number of columns and the need for complex queries for sorting, grouping, and filtering.
For simple tables, see view settings dialog and table personalization dialog)

The P13n dialog can be triggered in the table toolbar on the top right-hand corner of the table.

The dialog is shown centered, either as a dialog (on desktop and tablet devices) or as a full-screen dialog (on mobile devices).

The P13n dialog can be triggered in the table toolbar on the top right-hand corner of the table.

The dialog is shown centered, either as a dialog (on desktop and tablet devices) or as a full-screen dialog (on mobile devices).

The dialog button within the table toolbar

Usage

Use the P13n dialog if:

The user is able to personalize more than 20 or so columns.
You need several functions for sorting, grouping, and so on.
You are using the analytical table.
Complex queries have to be built for the relevant table.

Do not use the P13n dialog if:

The user is able to personalize fewer than about 20 columns.
You only need a simple column show/hide feature.

Responsiveness

The P13n dialog is available for all display sizes. For sizes L/XL (desktop) and M (tablet), the dialog is shown as a dialog. For size S (smartphones), the P13n dialog is displayed as a full-screen dialog.

Size S – Overview

Size S – Columns

Size M

Size L

Components

The P13n dialog consists of four different tabs that can be used separately or combined, as required by the use case:

Sort
Filter
Group
Columns

App developers can add more tabs manually.

Behavior and Interaction

Columns

The first tab is the Columns tab. It allows the user to change the table columns that are shown and the order in which they are displayed.

The list contains all of the table’s possible columns in the form of list items with checkboxes. The checkboxes of the currently displayed columns are selected.

Another button next to the search field in the table toolbar allows the user to toggle between showing all columns and only those that are currently selected in the list.

Show/Hide

To show or hide a column, select or deselect the appropriate checkbox.

Reorder

To change the order of the columns, simply mark one list item and use the buttons on the right-hand side of the table toolbar to move them up or down. The order of the columns from top to bottom corresponds to the order on the table from left to right.

Search

If the table has numerous columns, the user can use the search field in the table toolbar to find a specific column more quickly. As soon as the user enters the first letter, the resulting columns are displayed instantly.

The Columns tab of the P13n dialog

Sort

The second tab is the Sort tab, which allows the user to sort the table content according to the chosen attributes, and also in either ascending or descending order.

The sort criterion consists of two input fields. In the first field, the user can choose a column by which the table is to be sorted. In the second field, the user chooses the sort order (ascending or descending).

For more complex sorting needs, the user can add the required number of criteria by clicking the plus “” sign at the end of the line.

The order of the criteria is exactly the same as the order in which sorting is applied to the table.

The Sort tab of the P13n dialog

Information

Using the sort feature on column headers replaces ALL sort options in the dialog!

Filter

The third tab is the Filter tab, which allows the user to filter the table information according to specific criteria.

The filter criteria can be included or excluded in the relevant section of the filter.

Column

In the first input field, the user selects the column to be filtered. Any of the columns can be selected; even those that are not currently visible.

Option

The second field offers an operator for specifying the filter in more detail. The operators that are available depends on the data type of the selected column:

The Filter tab of the P13n dialog

Text

between
contains
equal to
begins with
ends with
empty
greater than
greater than or equal to
less than
less than or equal to

Number

between
contains
equal to
begins with
ends with
empty
greater than
greater than or equal to
less than
less than or equal to

Date

between
equal to
after
on or after
before
before or on
empty

Value

The last field contains the value by which the selected column is filtered. The kind of input field that is provided depends on the data type of the selected column.

Two or even more fields can be provided as required by the use case.

For more complex cases, the user can add filters by clicking the plus “” button or remove them by clicking the Remove button at the end of each filter item.

Information

If there is a filter bar, use its filter functionality and deactivate the filter feature of the P13n dialog.

Group

The third tab is the Group tab, which offers the functionality to group the table data by one or more columns.

In the first selection field, all columns are provided for selection. The user can select a checkbox on the right of the column selection field if the selected field is to be displayed as a column anyway.

For more complex grouping scenarios, the user can add more grouping options by clicking the plus “” button on the right-hand side of each grouping line. This option only works with the analytical table.

The grouped table shows the selected field as the group header, which can be expanded or collapsed.

Under the group headers, all subgroup headers and all applicable table entries are displayed.

The Group tab of the P13n dialog

Information

To group by a specific column, that particular column must be marked as visible on the Columns tab!

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

Table Personalization Overview (guidelines)
View Settings Dialog (guidelines)
Table Personalization Dialog (guidelines)

Implementation

P13n-Dialog (SAPUI5 samples)
P13n-Dialog (SAPUI5 API reference)

P13n-Dialog

The p13n dialog control provides a dialog for tables that allows the user to personalize one or more of the following attributes:

Columns (visibility and order of columns)
Sort (sorting of table values)
Filter (filtering of table values)
Group (grouping for specific attributes)

These tabs can be shown in any combination as the use case requires.

The P13n dialog is intended for complex tables with a large number of columns and the need for complex queries for sorting, grouping, and filtering.
For simple tables, see view settings dialog and table personalization dialog)

The P13n dialog can be triggered in the table toolbar on the top right-hand corner of the table.

The dialog is shown centered, either as a dialog (on desktop and tablet devices) or as a full-screen dialog (on mobile devices).

The P13n dialog can be triggered in the table toolbar on the top right-hand corner of the table.

The dialog is shown centered, either as a dialog (on desktop and tablet devices) or as a full-screen dialog (on mobile devices).

The dialog button within the table toolbar

Usage

Use the P13n dialog if:

The user is able to personalize more than 20 or so columns.
You need several functions for sorting, grouping, and so on.
You are using the analytical table.
Complex queries have to be built for the relevant table.

Do not use the P13n dialog if:

The user is able to personalize fewer than about 20 columns.
You only need a simple column show/hide feature.

Responsiveness

The P13n dialog is available for all display sizes. For sizes L/XL (desktop) and M (tablet), the dialog is shown as a dialog. For size S (smartphones), the P13n dialog is displayed as a full-screen dialog.

Size S – Overview

Size S – Columns

Size M

Size L

Components

The P13n dialog consists of four different tabs that can be used separately or combined, as required by the use case:

Sort
Filter
Group
Columns

App developers can add more tabs manually.

Behavior and Interaction

Columns

The first tab is the Columns tab. It allows the user to change the table columns that are shown and the order in which they are displayed.

The list contains all of the table’s possible columns in the form of list items with checkboxes. The checkboxes of the currently displayed columns are selected.

Another button next to the search field in the table toolbar allows the user to toggle between showing all columns and only those that are currently selected in the list.

Show/Hide

To show or hide a column, select or deselect the appropriate checkbox.

Reorder

To change the order of the columns, simply mark one list item and use the buttons on the right-hand side of the table toolbar to move them up or down. The order of the columns from top to bottom corresponds to the order on the table from left to right.

Search

If the table has numerous columns, the user can use the search field in the table toolbar to find a specific column more quickly. As soon as the user enters the first letter, the resulting columns are displayed instantly.

The Columns tab of the P13n dialog

Sort

The second tab is the Sort tab, which allows the user to sort the table content according to the chosen attributes, and also in either ascending or descending order.

The sort criterion consists of two input fields. In the first field, the user can choose a column by which the table is to be sorted. In the second field, the user chooses the sort order (ascending or descending).

For more complex sorting needs, the user can add the required number of criteria by clicking the plus “” sign at the end of the line.

The order of the criteria is exactly the same as the order in which sorting is applied to the table.

The Sort tab of the P13n dialog

Information

Using the sort feature on column headers replaces ALL sort options in the dialog!

Filter

The third tab is the Filter tab, which allows the user to filter the table information according to specific criteria.

The filter criteria can be included or excluded in the relevant section of the filter.

Column

In the first input field, the user selects the column to be filtered. Any of the columns can be selected; even those that are not currently visible.

Option

The second field offers an operator for specifying the filter in more detail. The operators that are available depends on the data type of the selected column.

The Filter tab of the P13n dialog

Text

between
contains
equal to
begins with
ends with
empty
greater than
greater than or equal to
less than
less than or equal to

Number

between
contains
equal to
begins with
ends with
empty
greater than
greater than or equal to
less than
less than or equal to

Date

between
equal to
after
on or after
before
before or on
empty

Value

The last field contains the value by which the selected column is filtered. The kind of input field that is provided depends on the data type of the selected column.

Two or even more fields can be provided as required by the use case.

For more complex cases, the user can add filters by clicking the plus “” button or remove them by clicking the Remove button at the end of each filter item.

Information

If there is a filter bar, use its filter functionality and deactivate the filter feature of the P13n dialog.

Group

The third tab is the Group tab, which offers the functionality to group the table data by one or more columns.

In the first selection field, all columns are provided for selection. The user can select a checkbox on the right of the column selection field if the selected field is to be displayed as a column anyway.

For more complex grouping scenarios, the user can add more grouping options by clicking the plus “” button on the right-hand side of each grouping line. This option only works with the analytical table.

The grouped table shows the selected field as the group header, which can be expanded or collapsed.

Under the group headers, all subgroup headers and all applicable table entries are displayed.

The Group tab of the P13n dialog

Information

To group by a specific column, that particular column must be marked as visible on the Columns tab!

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

Table Personalization Overview (guidelines)
View Settings Dialog (guidelines)
Table Personalization Dialog (guidelines)

Implementation

P13n-Dialog (SAPUI5 samples)
P13n-Dialog (SAPUI5 API reference)

P13n-Dialog

Table Overview

A table contains a set of line items and usually comprises rows (with each row showing one line item) and columns. Line items can contain data of any kind, but also interactive controls, for example, for editing the data, navigating, or triggering actions relating to the line item.

To display large amounts of data in tabular form, several table controls are provided. These are divided into two groups, each of which is defined by a consistent feature set:

Fully responsive tables
Desktop-centric tables

Usage

Use the responsive table if:

A table is needed. The responsive table is the default table in SAP Fiori.
The table content should be flexible and visually appealing. The responsive table offers the most flexibility in regards to its content because all SAPUI5 controls, and even multiple controls, can be used. In addition, different rows can be based on different item templates.
The focus lies on working on line items, not on individual cells.
A main use case involves selecting one or more items, for which details are needed in order to choose the correct item.
Line items are independent of each other and no operation across columns is needed.
You want to have only one implementation for all devices.

Use the list if:

You want to display a simple dataset.
A table would be too complex.
A list of actions is to be displayed.
Simple two-level hierarchies are required (by using grouping or navigation).
The main use case involves selecting one of several items with only a few details per item.
A master list in a split-screen layout is needed.

For all the cases listed above, use the list control.

Use the tree if:

You want to display a simple hierarchical dataset.
You want to use a hierarchical master list in a split-screen layout.
Using a tree table would be too complex.
The main use case involves selecting one of several hierarchical items with only a few details per item.

For all the cases listed above, use the tree control.

Use the grid table if:

You need to display more than 1,000 rows at the same time.
The cell level and the spatial relationship between cells are more important than the line item, such as if users need to recognize patterns in the data, like in waterfall charts.
Comparing items is a major use case. The grid table layout remains stable irrespective of the screen width. In addition, a cell only ever contains one control.
You need an analytical table, but you cannot provide an analytical binding.

Note that the grid table is not fully responsive. It is available only for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

Use the tree table if:

Data needs to be displayed in a hierarchical manner.

Note that the tree table is not fully responsive. It is available only for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

Use the analytical table if:

You need multilevel grouping as well as grand totals and subtotals.

Note that the analytical table is not fully responsive. It is available only for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

Use the smart table if:

Any of the above tables should render themselves from the OData service, and almost no additional UI code should be written.

Note that the smart table supports only basic content layouts, unless you invest further in UI code.

In addition, the smart table cannot be used within the chart container.

Do not use a table at all if:

The main use case involves choosing one item from a very small number of items with no additional details. In this case, a select or combo box might be more suitable.
You need an overview of large amounts of data. In this case, use a chart.
You just need it for layout reasons. In this case, use a layout container, such as the grid layout.
You need read-only or editable field-value pairs. In this case, use a form instead.

Types

Fully Responsive Tables

Responsive Table (sap.m.Table)

This is the default table in SAP Fiori. If a table is needed, the responsive table should be the first choice. It is based on the list.

The responsive table provides:

An optimized way to show a line item at a glance without the need for horizontal scrolling, regardless of the screen width.
Full flexibility in regards to content:
- Any SAPUI5 control can be used in a cell, including micro charts and forms.
- Using layout containers, such as a grid layout, allows more than one control to be used in a cell. Consequently, the cell shows more than one data point.
- Templates with multiple rows are supported, so different items can have different layouts. For example, this can be used to show editable items and read-only items in the same table without switching modes. In this case, the editable items could have a completely different layout than the read-only items.
- Items with different heights are supported. This allows for more dynamic content in cells, for example, to show lists or use text controls that wrap instead of truncate.
Smooth scrolling. This is done by rendering all items on the application background. Thus, the responsive table does not have its own scroll bar but uses the scroll bar of the whole page.
A very lightweight design.
Touch support.

The responsive table is limited in the following way:

Since all items are rendered, the responsive table is limited to approximately 1,000 items on one screen (depending on the complexity of the items and the whole screen). Exceeding this number can lead to decreased rendering performance. On mobile devices, browsers can also run out of memory.

Responsive table

List (sap.m.List)

The list is the basis for the responsive table. It should be used whenever a table is too complex.

The list provides:

Full flexibility in regards to its content:
- There are various specializations for specific list types.
- With a custom list item, all SAPUI5 controls can be used inside a list. Using layout containers allows more than one control to be used in a custom list item.
- Templates with multiple rows are supported, so different items can be shown in the same list.
- Items with different heights are supported.
Smooth scrolling. This is done by rendering all items on the application background. Thus, the list doesn’t have its own scroll bar but uses the scroll bar of the entire page.
A very lean and lightweight design.
Touch support.

The list is limited in the following way:

Since all items are rendered, the list is limited to approximately 1,000 items on one screen (depending on the complexity of the items and the entire screen). Exceeding this number can lead to decreased rendering performance. On mobile devices, browsers can also run out of memory.

List

Tree (sap.m.Tree)

The tree is based on the list. It should be used whenever a hierarchical view is needed, but a tree table is too complex.

The tree provides:

A standard tree item that provides an icon, a text (that wraps), and a counter.
Support for items with different heights.
Smooth scrolling. This is done by rendering all items on the application background. Thus, the tree doesn’t have its own scroll bar, but uses the scroll bar of the entire page.
A very lean and lightweight design.
Touch support.

The tree is limited in the following way:

Since all items are rendered, the tree is limited to approximately 200 items on one screen (depending on the complexity of the items and the whole screen). Exceeding this number can lead to decreased rendering performance. On mobile devices, browsers can also run out of memory.

Tree

Desktop-Centric Tables

This group contains three different tables:

Grid table: This is the most basic table in this group.
Analytical table: This provides the following features on top of the grid table:
- Grouping by several levels.
- Automatic calculation of grand totals for a column and subtotals per group level.
Tree table: This provides a hierarchical view of the items.

Grid Table (sap.ui.table.Table)

The grid table provides:

An optimized way to show large amounts of data. It supports an unlimited number of rows. It also supports a very condensed display of line items on non-touch devices, thus allowing more rows to be displayed on the same screen property.
Fixed control height, thus supporting horizontal and vertical scrolling (“viewport scrolling”). However, this also means that there are several vertical scrollbars on the screen for the page and table, which might be cumbersome on smaller screens.
Touch devices are supported.

The grid table is limited in the following ways:

Content layout is less flexible:
- The grid table supports only certain controls, mainly for displaying text or getting single-line text input from users. For example, you cannot add micro charts.
- Only one control can be added per cell.
- It supports only single-row templates.
- All items need to have the same height.
Vertical scrolling is not smooth. For performance reasons, the content is not really scrolled but exchanged.
The design is more complex.
Although touch is supported, the grid table works only on desktops and tablets. For smartphones, a fallback solution is needed.

Grid table

Analytical Table (sap.ui.table.AnalyticalTable)

The analytical table is based on the grid table and is therefore quite similar to it.

In addition to the grid table, the analytical table provides:

Multilevel grouping
Display of grand totals per column and subtotals per group

The analytical table is limited in the same way as the grid table, with one addition:

The analytical table needs analytical binding.

Analytical table

Tree Table (sap.ui.table.TreeTable)

The tree table is based on the grid table and is therefore quite similar to it.

In addition to the grid table, the tree table provides:

One hierarchical column

The tree table is limited in the same way as the grid table.

Tree table

Smart Table

The smart table is not a table type but a wrapper around existing table controls. It automatically adds a toolbar and the following additional common functionality:

Item counter
Variant management
Switch between edit and read-only modes
Table settings (sort, filter, group, column settings)
Export to spreadsheet

The smart table is configured via the underlying OData service. Not much additional UI code needs to be added, which can save writing considerable amounts of source code.

However, the smart table is limited to standard layouts and use cases. If you need more, you either have to write additional UI code for the smart table or use the underlying table controls directly.

Smart table using the responsive table

Resources

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

Elements and Controls

Responsive Table (guidelines)
List (guidelines)
Tree (guidelines)
Grid Table (guidelines)
Analytical Table (guidelines)
Tree Table (guidelines)
Smart Table (guidelines)

Implementation

Responsive Table (SAPUI5 samples)
List (SAPUI5 samples)
Tree (SAPUI5 samples)
Grid Table (SAPUI5 samples)
Smart Table (SAPUI5 samples)
Responsive Table (SAPUI5 API reference)
List (SAPUI5 API reference)
Tree (SAPUI5 API reference)
Grid Table (SAPUI5 API reference)
Analytical Table (SAPUI5 API reference)
Tree Table (SAPUI5 API reference)
Smart Table (SAPUI5 API reference)

Chart – Number and Time Format

All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:

Numbers

All numbers must comply with the user’s locale setting. Numbers can be visible in the following areas:

Value axis
Plot area (value labels that are displayed close to the data points)
Popover
Tooltip
Value-based legend
Legend for the bubble size

Time

All dates and times must comply with the user’s locale setting. Dates and times can be visible in the following areas:

Time axis
Categorical axis (if you use standard categories for dates or times)
Popover
Tooltip

Developer Hint

In order to use UI5 formats in the chart, you must use the sap.viz.ui5.format.ChartFormatter. Just add the 2 lines:

var formatterInstance = sap.viz.ui5.format.ChartFormatter.getInstance();
sap.viz.ui5.api.env.Format.numericFormatter(formatterInstance);

The ChartFormatter comes with some predefined UI5 patterns listed in “sap.viz.ui5.format.ChartFormatter.DefaultPattern”. Therefore you can use them directly. They will be correctly localized.

Nevertheless, if you need a format pattern than is not in the list, you need to create your own pattern and register it by using registerCustomFormatter.

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

Chart (guidelines)
Formatting Numbers (guidelines)
Formatting Time (guidelines)
Formatting Dates (guidelines)

Implementation

No links.

Table Overview

A table contains a set of line items and usually comprises rows (with each row showing one line item) and columns. Line items can contain data of any kind, but also interactive controls, for example, for editing the data, navigating, or triggering actions relating to the line item.

To display large amounts of data in tabular form, several table controls are provided. These are divided into two groups, each of which is defined by a consistent feature set:

Fully responsive tables
Desktop-centric tables

Usage

Use the responsive table if:

A table is needed. The responsive table is the default table in SAP Fiori.
The table content should be flexible and visually appealing. The responsive table offers the most flexibility in regards to its content because all SAPUI5 controls, and even multiple controls, can be used. In addition, different rows can be based on different item templates.
The focus lies on working on line items, not on individual cells.
A main use case involves selecting one or more items, for which details are needed in order to choose the correct item.
Line items are independent of each other and no operation across columns is needed.
You want to have only one implementation for all devices.

Use the list if:

A simple data set is to be displayed.
A table would be too complex.
A list of actions is to be displayed.
Simple two-level hierarchies are required (by using grouping or navigation).
The main use case involves selecting one of several items with only a few details per item.

For these cases, use the list control instead.

Use the grid table if:

You need to display more than 1,000 rows at the same time.
The cell level and the spatial relationship between cells are more important than the line item, such as if users need to recognize patterns in the data, like in waterfall charts.
Comparing items is a major use case. The grid table layout remains stable irrespective of the screen width. In addition, a cell only ever contains one control.
You need an analytical table, but you cannot provide an analytical binding.

Note that the grid table is not fully responsive. It is available only for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

Use the tree table if:

Data needs to be displayed in a hierarchical manner.

Note that the tree table is not fully responsive. It is available only for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

Use the analytical table if:

You need multilevel grouping as well as grand totals and subtotals.

Note that the analytical table is not fully responsive. It is available only for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

Do not use a table at all if:

The main use case involves choosing one item from a very small number of items with no additional details. In this case, a select or combo box might be more suitable.
You need an overview of large amounts of data. In this case, use a chart.
You just need it for layout reasons. In this case, use a layout container, such as the grid layout.
You need read-only or editable field-value pairs. In this case, use a form instead.

Types

Fully Responsive Tables

Responsive Table (sap.m.Table)

This is the default table in SAP Fiori. If a table is needed, the responsive table should be the first choice. It is based on the list.

The responsive table provides:

An optimized way to show a line item at a glance without the need for horizontal scrolling, regardless of the screen width.
Full flexibility in regards to content:
- Any SAPUI5 control can be used in a cell, including micro charts and forms.
- Using layout containers, such as a grid layout, allows more than one control to be used in a cell; consequently, the cell shows more than one data point.
- Templates with multiple rows are supported, so different items can have different layouts. For example, this can be used to show editable items and read-only items in the same table without switching modes. In this case, the editable items could have a completely different layout than the read-only items.
- Items with different heights are supported. This allows for more dynamic content in cells, for example, to show lists or use text controls that wrap instead of truncate.
Smooth scrolling. This is done by rendering all items on the application background. Thus, the responsive table does not have its own scroll bar but uses the scroll bar of the entire page.
A very lightweight design.
Touch support.

The responsive table is limited in the following way:

Since all items are rendered, the responsive table is limited to approximately 1,000 items on one screen (depending on the complexity of the items and the entire screen). Exceeding this number can lead to decreased rendering performance. On mobile devices, browsers can also run out of memory.

Responsive table

List (sap.m.List)

The list is the basis for the responsive table. It should be used whenever a table is too complex.

The list provides:

Full flexibility in regards to its content:
- There are various specializations for specific list types.
- With a custom list item, all SAPUI5 controls can be used inside a list. Using layout containers allows more than one control to be used in a custom list item.
- Templates with multiple rows are supported, so different items can be shown in the same list.
- Items with different heights are supported.
Smooth scrolling. This is done by rendering all items on the application background. Thus, the list does not have its own scroll bar but uses the scroll bar of the whole page.
A very lean and lightweight design.
Touch support.

The list is limited in the following way:

Since all items are rendered, the list is limited to approximately 1,000 items on one screen (depending on the complexity of the items and the whole screen). Exceeding this number can lead to decreased rendering performance. On mobile devices, browsers can also run out of memory.

List

Desktop-Centric Tables

This group contains three different tables:

Grid table: This is the most basic table in this group.
Analytical table: This provides the following features on top of the grid table:
- Grouping by several levels.
- Automatic calculation of grand totals for a column and subtotals per group level.
Tree table: This provides a hierarchical view of the items.

Grid Table (sap.ui.table.Table)

The grid table provides:

An optimized way to show large amounts of data. It supports an unlimited number of rows. It also supports a very condensed display of line items on non-touch devices, thus allowing more rows to be displayed on the same screen real estate.
Fixed control height, thus supporting horizontal and vertical scrolling (“viewport scrolling”). However, this also means that there are several vertical scrollbars on the screen for the page and table, which might be cumbersome on smaller screens.
Touch devices are supported.

The grid table is limited in the following way:

Content layout is less flexible:
- The grid table supports only certain controls, mainly for displaying text or getting single-line text input from users. For example, you cannot add micro charts.
- Only one control can be added per cell.
- It supports only single-row templates.
- All items need to have the same height.
Vertical scrolling is not smooth. For performance reasons, the content is not really scrolled but exchanged.
The design is more complex.
Although touch is supported, the grid table works only on desktops and tablets. For smartphones, a fallback solution is needed.

Grid table

Analytical Table (sap.ui.table.AnalyticalTable)

The analytical table is based on the grid table and is therefore quite similar to it.

The analytical table provides:

Multilevel grouping
Display of grand totals per column and subtotals per group

The analytical table is limited in the same way as the grid table, with one addition:

The analytical table needs analytical binding.

Analytical table

Tree Table (sap.ui.table.TreeTable)

The tree table is based on the grid table and is therefore quite similar to it.

In addition to the grid table, the tree table provides:

One hierarchical column

The tree table is limited in the same way as the grid table.

Tree table

Resources

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

Elements and Controls

Responsive Table (guidelines)
List (guidelines)
Grid Table (guidelines)
Analytical Table (guidelines)
Tree Table (guidelines)

Implementation

No links

Table Overview

A table contains a set of line items and usually comprises rows (with each row showing one line item) and columns. Line items can contain data of any kind, but also interactive controls, for example, for editing the data, navigating, or triggering actions relating to the line item.

To display large amounts of data in tabular form, several table controls are provided. These are divided into two groups, each of which is defined by a consistent feature set:

Fully responsive tables
Desktop-centric tables

Usage

Use the responsive table if:

A table is needed. The responsive table is the default table in SAP Fiori.
The table content should be flexible and visually appealing. The responsive table offers the most flexibility in regards to its content because all SAPUI5 controls, and even multiple controls, can be used. In addition, different rows can be based on different item templates.
The focus lies on working on line items, not on individual cells.
A main use case involves selecting one or more items, for which details are needed in order to choose the correct item.
Line items are independent of each other and no operation across columns is needed.
You want to have only one implementation for all devices.

Use the list if:

A simple data set is to be displayed.
A table would be too complex.
A list of actions is to be displayed.
Simple two-level hierarchies are required (by using grouping or navigation).
The main use case involves selecting one of several items with only a few details per item.

For these cases, use the list control instead.

Use the grid table if:

You need to display more than 1,000 rows at the same time.
The cell level and the spatial relationship between cells are more important than the line item, such as if users need to recognize patterns in the data, like in waterfall charts.
Comparing items is a major use case. The grid table layout remains stable irrespective of the screen width. In addition, a cell only ever contains one control.
You need an analytical table, but you cannot provide an analytical binding.

Note that the grid table is not fully responsive. It is available only for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

Use the tree table if:

Data needs to be displayed in a hierarchical manner.

Note that the tree table is not fully responsive. It is available only for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

Use the analytical table if:

You need multilevel grouping as well as grand totals and subtotals.

Note that the analytical table is not fully responsive. It is available only for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

Use the smart table if:

Any of the above tables should render themselves from the OData service, and almost no additional UI code should be written.

Note that the smart table supports only basic content layouts, unless you invest further in UI code.

In addition, the smart table cannot be used within the chart container.

Do not use a table at all if:

The main use case involves choosing one item from a very small number of items with no additional details. In this case, a select or combo box might be more suitable.
You need an overview of large amounts of data. In this case, use a chart.
You just need it for layout reasons. In this case, use a layout container, such as the grid layout.
You need read-only or editable field-value pairs. In this case, use a form instead.

Types

Fully Responsive Tables

Responsive Table (sap.m.Table)

This is the default table in SAP Fiori. If a table is needed, the responsive table should be the first choice. It is based on the list.

The responsive table provides:

An optimized way to show a line item at a glance without the need for horizontal scrolling, regardless of the screen width.
Full flexibility in regards to content:
- Any SAPUI5 control can be used in a cell, including micro charts and forms.
- Using layout containers, such as a grid layout, allows more than one control to be used in a cell; consequently, the cell shows more than one data point.
- Templates with multiple rows are supported, so different items can have different layouts. For example, this can be used to show editable items and read-only items in the same table without switching modes. In this case, the editable items could have a completely different layout than the read-only items.
- Items with different heights are supported. This allows for more dynamic content in cells, for example, to show lists or use text controls that wrap instead of truncate.
Smooth scrolling. This is done by rendering all items on the application background. Thus, the responsive table does not have its own scroll bar but uses the scroll bar of the entire page.
A very lightweight design.
Touch support.

The responsive table is limited in the following way:

Since all items are rendered, the responsive table is limited to approximately 1,000 items on one screen (depending on the complexity of the items and the entire screen). Exceeding this number can lead to decreased rendering performance. On mobile devices, browsers can also run out of memory.

Responsive table

List (sap.m.List)

The list is the basis for the responsive table. It should be used whenever a table is too complex.

The list provides:

Full flexibility in regards to its content:
- There are various specializations for specific list types.
- With a custom list item, all SAPUI5 controls can be used inside a list. Using layout containers allows more than one control to be used in a custom list item.
- Templates with multiple rows are supported, so different items can be shown in the same list.
- Items with different heights are supported.
Smooth scrolling. This is done by rendering all items on the application background. Thus, the list does not have its own scroll bar but uses the scroll bar of the whole page.
A very lean and lightweight design.
Touch support.

The list is limited in the following way:

Since all items are rendered, the list is limited to approximately 1,000 items on one screen (depending on the complexity of the items and the whole screen). Exceeding this number can lead to decreased rendering performance. On mobile devices, browsers can also run out of memory.

List

Desktop-Centric Tables

This group contains three different tables:

Grid table: This is the most basic table in this group.
Analytical table: This provides the following features on top of the grid table:
- Grouping by several levels.
- Automatic calculation of grand totals for a column and subtotals per group level.
Tree table: This provides a hierarchical view of the items.

Grid Table (sap.ui.table.Table)

The grid table provides:

An optimized way to show large amounts of data. It supports an unlimited number of rows. It also supports a very condensed display of line items on non-touch devices, thus allowing more rows to be displayed on the same screen real estate.
Fixed control height, thus supporting horizontal and vertical scrolling (“viewport scrolling”). However, this also means that there are several vertical scrollbars on the screen for the page and table, which might be cumbersome on smaller screens.
Touch devices are supported.

The grid table is limited in the following way:

Content layout is less flexible:
- The grid table supports only certain controls, mainly for displaying text or getting single-line text input from users. For example, you cannot add micro charts.
- Only one control can be added per cell.
- It supports only single-row templates.
- All items need to have the same height.
Vertical scrolling is not smooth. For performance reasons, the content is not really scrolled but exchanged.
The design is more complex.
Although touch is supported, the grid table works only on desktops and tablets. For smartphones, a fallback solution is needed.

Grid table

Analytical Table (sap.ui.table.AnalyticalTable)

The analytical table is based on the grid table and is therefore quite similar to it.

The analytical table provides:

Multilevel grouping
Display of grand totals per column and subtotals per group

The analytical table is limited in the same way as the grid table, with one addition:

The analytical table needs analytical binding.

Analytical table

Tree Table (sap.ui.table.TreeTable)

The tree table is based on the grid table and is therefore quite similar to it.

In addition to the grid table, the tree table provides:

One hierarchical column

The tree table is limited in the same way as the grid table.

Tree table

Smart Table

The smart table is not a table type, but rather a wrapper around existing table controls. It automatically adds a toolbar and the following additional common functionality:

Item counter
Variant management
View switch between edit mode and read-only mode
Table settings (sort, filter, group, column settings)
Export to spreadsheet

The smart table is configured via the underlying OData service. Not much additional UI code needs to be added, which can save writing considerable amounts of source code.

However, the smart table is limited to standard layouts and use cases. If you need more, you will need to write additional UI code for the smart table, or use the underlying table controls directly.

Smart table using the responsive table

Resources

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

Elements and Controls

Responsive Table (guidelines)
List (guidelines)
Grid Table (guidelines)
Analytical Table (guidelines)
Tree Table (guidelines)
Smart Table (guidelines)

Implementation

No links

Table Overview

A table contains a set of line items and usually comprises rows (with each row showing one line item) and columns. Line items can contain data of any kind, but also interactive controls, for example, for editing the data, navigating, or triggering actions relating to the line item.

To display large amounts of data in tabular form, several table controls are provided. These are divided into two groups, each of which is defined by a consistent feature set:

Fully responsive tables
Desktop-centric tables

Usage

Use the responsive table if:

A table is needed. The responsive table is the default table in SAP Fiori.
The table content should be flexible and visually appealing. The responsive table offers the most flexibility in regards to its content because all SAPUI5 controls, and even multiple controls, can be used. In addition, different rows can be based on different item templates.
The focus lies on working on line items, not on individual cells.
A main use case involves selecting one or more items, for which details are needed in order to choose the correct item.
Line items are independent of each other and no operation across columns is needed.
You want to have only one implementation for all devices.

Use the list if:

A simple data set is to be displayed.
A table would be too complex.
A list of actions is to be displayed.
Simple two-level hierarchies are required (by using grouping or navigation).
The main use case involves selecting one of several items with only a few details per item.

For these cases, use the list control instead.

Use the grid table if:

You need to display more than 1,000 rows at the same time.
The cell level and the spatial relationship between cells are more important than the line item, such as if users need to recognize patterns in the data, like in waterfall charts.
Comparing items is a major use case. The grid table layout remains stable irrespective of the screen width. In addition, a cell only ever contains one control.
You need an analytical table, but you cannot provide an analytical binding.

Note that the grid table is not fully responsive. It is available only for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

Use the tree table if:

Data needs to be displayed in a hierarchical manner.

Note that the tree table is not fully responsive. It is available only for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

Use the analytical table if:

You need multilevel grouping as well as grand totals and subtotals.

Note that the analytical table is not fully responsive. It is available only for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

Use the smart table if:

Any of the above tables should render themselves from the OData service, and almost no additional UI code should be written.

Note that the smart table supports only basic content layouts, unless you invest further in UI code.

In addition, the smart table cannot be used within the chart container.

Do not use a table at all if:

The main use case involves choosing one item from a very small number of items with no additional details. In this case, a select or combo box might be more suitable.
You need an overview of large amounts of data. In this case, use a chart.
You just need it for layout reasons. In this case, use a layout container, such as the grid layout.
You need read-only or editable field-value pairs. In this case, use a form instead.

Types

Fully Responsive Tables

Responsive Table (sap.m.Table)

This is the default table in SAP Fiori. If a table is needed, the responsive table should be the first choice. It is based on the list.

The responsive table provides:

An optimized way to show a line item at a glance without the need for horizontal scrolling, regardless of the screen width.
Full flexibility in regards to content:
- Any SAPUI5 control can be used in a cell, including micro charts and forms.
- Using layout containers, such as a grid layout, allows more than one control to be used in a cell. Consequently, the cell shows more than one data point.
- Templates with multiple rows are supported, so different items can have different layouts. For example, this can be used to show editable items and read-only items in the same table without switching modes. In this case, the editable items could have a completely different layout than the read-only items.
- Items with different heights are supported. This allows for more dynamic content in cells, for example, to show lists or use text controls that wrap instead of truncate.
Smooth scrolling. This is done by rendering all items on the application background. Thus, the responsive table does not have its own scroll bar but uses the scroll bar of the whole page.
A very lightweight design.
Touch support.

The responsive table is limited in the following way:

Since all items are rendered, the responsive table is limited to approximately 1,000 items on one screen (depending on the complexity of the items and the whole screen). Exceeding this number can lead to decreased rendering performance. On mobile devices, browsers can also run out of memory.

Responsive table

List (sap.m.List)

The list is the basis for the responsive table. It should be used whenever a table is too complex.

The list provides:

Full flexibility in regards to its content:
- There are various specializations for specific list types.
- With a custom list item, all SAPUI5 controls can be used inside a list. Using layout containers allows more than one control to be used in a custom list item.
- Templates with multiple rows are supported, so different items can be shown in the same list.
- Items with different heights are supported.
Smooth scrolling. This is done by rendering all items on the application background. Thus, the list doesn’t have its own scroll bar but uses the scroll bar of the entire page.
A very lean and lightweight design.
Touch support.

The list is limited in the following way:

Since all items are rendered, the list is limited to approximately 1,000 items on one screen (depending on the complexity of the items and the entire screen). Exceeding this number can lead to decreased rendering performance. On mobile devices, browsers can also run out of memory.

List

Desktop-Centric Tables

This group contains three different tables:

Grid table: This is the most basic table in this group.
Analytical table: This provides the following features on top of the grid table:
- Grouping by several levels.
- Automatic calculation of grand totals for a column and subtotals per group level.
Tree table: This provides a hierarchical view of the items.

Grid Table (sap.ui.table.Table)

The grid table provides:

An optimized way to show large amounts of data. It supports an unlimited number of rows. It also supports a very condensed display of line items on non-touch devices, thus allowing more rows to be displayed on the same screen property.
Fixed control height, thus supporting horizontal and vertical scrolling (“viewport scrolling”). However, this also means that there are several vertical scrollbars on the screen for the page and table, which might be cumbersome on smaller screens.
Touch devices are supported.

The grid table is limited in the following ways:

Content layout is less flexible:
- The grid table supports only certain controls, mainly for displaying text or getting single-line text input from users. For example, you cannot add micro charts.
- Only one control can be added per cell.
- It supports only single-row templates.
- All items need to have the same height.
Vertical scrolling is not smooth. For performance reasons, the content is not really scrolled but exchanged.
The design is more complex.
Although touch is supported, the grid table works only on desktops and tablets. For smartphones, a fallback solution is needed.

Grid table

Analytical Table (sap.ui.table.AnalyticalTable)

The analytical table is based on the grid table and is therefore quite similar to it.

In addition to the grid table, the analytical table provides:

Multilevel grouping
Display of grand totals per column and subtotals per group

The analytical table is limited in the same way as the grid table, with one addition:

The analytical table needs analytical binding.

Analytical table

Tree Table (sap.ui.table.TreeTable)

The tree table is based on the grid table and is therefore quite similar to it.

In addition to the grid table, the tree table provides:

One hierarchical column

The tree table is limited in the same way as the grid table.

Tree table

Smart Table

The smart table is not a table type but a wrapper around existing table controls. It automatically adds a toolbar and the following additional common functionality:

Item counter
Variant management
Switch between edit and read-only modes
Table settings (sort, filter, group, column settings)
Export to spreadsheet

The smart table is configured via the underlying OData service. Not much additional UI code needs to be added, which can save writing considerable amounts of source code.

However, the smart table is limited to standard layouts and use cases. If you need more, you either have to write additional UI code for the smart table or use the underlying table controls directly.

Smart table using the responsive table

Resources

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

Elements and Controls

Responsive Table (guidelines)
List (guidelines)
Grid Table (guidelines)
Analytical Table (guidelines)
Tree Table (guidelines)
Smart Table (guidelines)

Implementation

No links

Table Overview

A table contains a set of line items and usually comprises rows (with each row showing one line item) and columns. Line items can contain data of any kind, but also interactive controls, for example, for editing the data, navigating, or triggering actions relating to the line item.

To display large amounts of data in tabular form, several table controls are provided. These are divided into two groups, each of which is defined by a consistent feature set:

Fully responsive tables
Desktop-centric tables

Usage

Use the responsive table if:

A table is needed. The responsive table is the default table in SAP Fiori.
The table content should be flexible and visually appealing. The responsive table offers the most flexibility in regards to its content because all SAPUI5 controls, and even multiple controls, can be used. In addition, different rows can be based on different item templates.
The focus lies on working on line items, not on individual cells.
A main use case involves selecting one or more items, for which details are needed in order to choose the correct item.
Line items are independent of each other and no operation across columns is needed.
You want to have only one implementation for all devices.

Use the list if:

A simple data set is to be displayed.
A table would be too complex.
A list of actions is to be displayed.
Simple two-level hierarchies are required (by using grouping or navigation).
The main use case involves selecting one of several items with only a few details per item.

For these cases, use the list control instead.

Use the grid table if:

You need to display more than 1,000 rows at the same time.
The cell level and the spatial relationship between cells are more important than the line item, such as if users need to recognize patterns in the data, like in waterfall charts.
Comparing items is a major use case. The grid table layout remains stable irrespective of the screen width. In addition, a cell only ever contains one control.
You need an analytical table, but you cannot provide an analytical binding.

Note that the grid table is not fully responsive. It is available only for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

Use the tree table if:

Data needs to be displayed in a hierarchical manner.

Note that the tree table is not fully responsive. It is available only for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

Use the analytical table if:

You need multilevel grouping as well as grand totals and subtotals.

Note that the analytical table is not fully responsive. It is available only for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

Do not use a table at all if:

The main use case involves choosing one item from a very small number of items with no additional details. In this case, a select or combo box might be more suitable.
You need an overview of large amounts of data. In this case, use a chart.
You just need it for layout reasons. In this case, use a layout container, such as the grid layout.
You need read-only or editable field-value pairs. In this case, use a form instead.

Types

Fully Responsive Tables

Responsive Table (sap.m.Table)

This is the default table in SAP Fiori. If a table is needed, the responsive table should be the first choice. It is based on the list.

The responsive table provides

an optimized way to show a line item at a glance without the need for horizontal scrolling, no matter of the screen width
full flexibility in regards to content:
- any UI5 control can be used in a cell, including micro charts and forms
- by using layout containers (e.g. grid layout), more than one control can be used in a cell, thus the cell shows more than one data point.
- Support for several row templates: Different items can have different layouts. For example, this can be used to show editable items and read-only items in the same table without switching modes. In this case, the editable items could have a complete different layout than the read-only items.
- Items with different heights are supported. This allows for more dynamic content in cells, e.g. showing lists or using text controls which wrap instead of truncate.
Smooth scrolling. This is done by rendering all items on the application background. Thus, the responsive table does not have a scroll bar on its own but uses the scroll bar of the whole page.
A very lightweight design
Touch support

The responsive table is limited in the following way

Due to all items are rendered, the responsive table is limited to approximately 1000 items on one screen (pending on the complexity of the items and of the whole screen). Exceeding this number can lead to decreased rendering performance. On mobile devices, browsers can also run out of memory.

Responsive Table

List (sap.m.List)

The list is the basis for the responsive table. It should be used whenever a table is too complex.

The list provides:

Full flexibility in regards to its content:
- There are various specializations for specific list types.
- With a custom list item, all SAPUI5 controls can be used inside a list. Using layout containers allows more than one control to be used in a custom list item.
- Templates with multiple rows are supported, so different items can be shown in the same list.
- Items with different heights are supported.
Smooth scrolling. This is done by rendering all items on the application background. Thus, the list does not have its own scroll bar but uses the scroll bar of the whole page.
A very lean and lightweight design.
Touch support.

The list is limited in the following way:

Since all items are rendered, the list is limited to approximately 1,000 items on one screen (depending on the complexity of the items and the whole screen). Exceeding this number can lead to decreased rendering performance. On mobile devices, browsers can also run out of memory.

List

Desktop-Centric Tables

This group contains three different tables:

Grid table: This is the most basic table in this group.
Analytical table: This provides the following features on top of the grid table:
- Grouping by several levels.
- Automatic calculation of grand totals for a column and subtotals per group level.
Tree table: This provides a hierarchical view of the items.

Grid Table (sap.ui.table.Table)

The grid table provides

Optimized for large amounts of data. It supports an unlimited number of rows. In addition, it supports a very condensed display of line items on non-touch devices for displaying more rows on the same screen real estate.
Fixed control height, such supporting scrolling in horizontal and vertical direction (“viewport scrolling”). Thus you will have several vertical scrollbars on the screen (page and table) which might get cumbersome on smaller screen sizes
Touch devices are supported

The grid table is limited in the following way

Content layout is less flexible:
- the grid table supports only certain controls, mainly for displaying text or for getting single-line text input from users. For example, you cannot add micro charts.
- Only one control can be added per cell
- Supports only one row template.
- All items need to have the same height.
Vertical scrolling is not smooth. For performance reason, the content is not really scrolled but exchanged.
The design is more complex
Also touch is supported, the grid table works only on desktops and tablets. For phone, a fall-back solution is needed.

Grid Table

Analytical Table (sap.ui.table.AnalyticalTable)

The analytical table is based on the grid table and is therefore quite similar to it.

The analytical table provides:

Multilevel grouping
Display of grand totals per column and subtotals per group

The analytical table is limited in the same way as the grid table, with one addition:

The analytical table needs analytical binding.

Analytical table

Tree Table (sap.ui.table.TreeTable)

The tree table is based on the grid table and is therefore quite similar to it.

In addition to the grid table, the tree table provides:

One hierarchical column

The tree table is limited in the same way as the grid table.

Tree table

Resources

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

Elements and Controls

Responsive Table (guidelines)
List (guidelines)
Grid Table (guidelines)
Analytical Table (guidelines)
Tree Table (guidelines)

Implementation

No links

Breadcrumb

A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy, specifically in a drilldown scenario of object pages, tables, and charts.

Usage

Use a breadcrumb if:

You want to show secondary navigation on the object page.
You want to show navigation in a table.
You want to show navigation in charts.

Use a breadcrumb only in drilldown scenarios to related object pages, such as: Parent object page/Child object page 1/Child object page 2/Child object page 3.

Do not use a breadcrumb if:

You only have one level in your hierarchy.

Other instances:

Do not include other floorplans like overview pages and list reports in the breadcrumb path.
Do not include cross-application navigation to other object pages in the breadcrumb path.
Do not include standalone object pages like fact sheets in the breadcrumb path.

The above cases are covered in the global navigation concept for SAP Fiori 2.O.

Responsiveness

Breadcrumbs are responsive. If there is insufficient horizontal space, the links of the breadcrumb trail start to collapse into a dropdown menu (sap.m.Select) as follows:

The first link in the breadcrumb (the point of origin) collapses first, followed by the next link in the hierarchy.
The last element in the breadcrumb is always visible.
The last element should never collapse into the dropdown.
If there is insufficient horizontal space for the last element in the breadcrumb, text is truncated to fit the available screen real estate.

Breadcrumb – Size L

Breadcrumb – Size M

Breadcrumb – Size S

Breadcrumb – Size S (dropdown menu selected)

Layout

The horizontal layout of the breadcrumb never changes. The links always appear next to each other.

Types

There are two types of breadcrumbs:

Standard breadcrumb.
The standard breadcrumb shows the current page as the last item in the trail. This is the only item that is not a link, but plain text.
Breadcrumb without the current page. Use this breadcrumb only on the object page.
The breadcrumb shows the page’s position in the site hierarchy without the current page. All items in the breadcrumb are links.

Standard breadcrumb

Breadcrumb without the current page

Components

The breadcrumb can contain links and text or just links, depending on the type.

Behavior and Interaction

Navigation

The purpose of the breadcrumb is to trigger navigation. The action is triggered when the user clicks or taps a link in the breadcrumb trail.
For link behavior and interaction, see the article on links.

Styles

For information about the various styles of links, see the article on links.

Guidelines

In the dropdown menu on desktops and tablets, show only the links that are not visible in the breadcrumb trail.
In the dropdown menu on smartphones, show all the links in the breadcrumb trail in their hierarchical order.

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

Link (guidelines)
Text (guidelines)

Implementation

Breadcrumb (SAPUI5 samples)
Link (SAPUI5 samples)
Text (SAPUI5 samples)

Breadcrumb

A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy, specifically in a drilldown scenario of object pages, tables, and charts.

Usage

Use a breadcrumb if:

You want to show secondary navigation on the object page.
You want to show navigation in a table.
You want to show navigation in charts.

Use a breadcrumb only in drilldown scenarios to related object pages, such as: Parent object page/Child object page 1/Child object page 2/Child object page 3.

Do not use a breadcrumb if:

You only have one level in your hierarchy.

Other instances:

Do not include other floorplans like overview pages and list reports in the breadcrumb path.
Do not include cross-application navigation to other object pages in the breadcrumb path.
Do not include standalone object pages like fact sheets in the breadcrumb path.

The above cases are covered in the global navigation concept for SAP Fiori 2.O.

Responsiveness

Breadcrumbs are responsive. If there is insufficient horizontal space, the links of the breadcrumb trail start to collapse into a dropdown menu (sap.m.Select) as follows:

The first link in the breadcrumb (the point of origin) collapses first, followed by the next link in the hierarchy.
The last element in the breadcrumb is always visible.
The last element should never collapse into the dropdown.
If there is insufficient horizontal space for the last element in the breadcrumb, text is truncated to fit the available screen real estate.

Breadcrumb – Size L

Breadcrumb – Size M

Breadcrumb – Size S

Breadcrumb – Size S (dropdown menu selected)

Layout

The horizontal layout of the breadcrumb never changes. The links always appear next to each other.

Types

There are two types of breadcrumbs:

Standard breadcrumb.
The standard breadcrumb shows the current page as the last item in the trail. This is the only item that is not a link, but plain text.
Breadcrumb without the current page. Use this breadcrumb only on the object page.
The breadcrumb shows the page’s position in the site hierarchy without the current page. All items in the breadcrumb are links.

Standard breadcrumb

Breadcrumb without the current page

Components

The breadcrumb can contain links and text or just links, depending on the type.

Behavior and Interaction

Navigation

The purpose of the breadcrumb is to trigger navigation. The action is triggered when the user clicks or taps a link in the breadcrumb trail.
For link behavior and interaction, see the article on links.

Styles

For information about the various styles of links, see the article on links.

Guidelines

In the dropdown menu on desktops and tablets, show only the links that are not visible in the breadcrumb trail.
In the dropdown menu on smartphones, show all the links in the breadcrumb trail in their hierarchical order.

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

Link (guidelines)
Text (guidelines)

Implementation

Breadcrumb (SAPUI5 samples)
Link (SAPUI5 samples)
Text (SAPUI5 samples)

Invisible Text

The invisible text control provides a simple hidden text which can be used by assistive technologies such as screen readers to provide contextual information to sighted users.

Responsiveness

The invisible text control is not visible and therefore works on all devices.

Guidelines

Provide short and meaningful texts. Adhere to the text guidelines of labels.
Do not use an invisible text as a replacement for a label. (Property: text)
Just adding the invisible text control would not work. As with labels, developers need to assign the invisible text to the corresponding control. Unlike with labels, this does not happen automatically in forms.

Developer Hint

To assign the invisible text to a control, add the ID of the invisible text to the ariaLabelledBy association of the corresponding control.

Properties

The properties “busy”, “busyIndicatorDelay”, and “visible” do not have an effect. Therefore, do not use them.

Usage

When to Use Invisible Text

If you need to provide contextual information also for users of assistive technologies like screen readers.
If you need to provide a title (such as for a form or table), which sighted users do not need.

If you need to provide a label (such as for a group of radio buttons), which is not needed by sighted users.

A group with radio buttons without any visible label

If you need a form row with more than one form element. Use the concatenated label for sighted users, and use single invisible texts for users of assistive technologies.

A form with two fields in one row

If you need to explain a visual element without any kind of label, such as a loading animation.

If you build your own controls and need to provide information about uncommon states or properties.

Buttons use the invisible text control to announce their type

When Not to Use Invisible Text

If you want to provide additional information for users of assistive technologies which is not available for sighted users. While you should not discriminate users of assistive technologies, you should also not provide “privileges” to them.
If you want to hide information. It might still be available for users of assistive technologies.
If you want to hide long texts. The information is probably important enough to be shown! Furthermore, short texts are far more convenient, even for users of assistive technologies.

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

Label (guidelines)
Form (guidelines)

Implementation

Invisible Text (SAPUI5 samples)
Invisible Text (SAPUI5 API reference)

Invisible Text

The invisible text control provides a simple hidden text which can be used by assistive technologies such as screen readers to provide contextual information to sighted users.

Responsiveness

The invisible text control is not visible and therefore works on all devices.

Guidelines

Provide short and meaningful texts. Adhere to the text guidelines of labels.
Do not use an invisible text as a replacement for a label. (Property: text)
Just adding the invisible text control would not work. As with labels, developers need to assign the invisible text to the corresponding control. Unlike with labels, this does not happen automatically in forms.

Developer Hint

To assign the invisible text to a control, add the ID of the invisible text to the ariaLabelledBy association of the corresponding control.

Properties

The properties “busy”, “busyIndicatorDelay”, and “visible” do not have an effect. Therefore, do not use them.

Usage

When to Use Invisible Text

If you need to provide contextual information also for users of assistive technologies like screen readers.
If you need to provide a title (such as for a form or table), which sighted users do not need.

If you need to provide a label (such as for a group of radio buttons), which is not needed by sighted users.

A group with radio buttons without any visible label

If you need a form row with more than one form element. Use the concatenated label for sighted users, and use single invisible texts for users of assistive technologies.

A form with two fields in one row

If you need to explain a visual element without any kind of label, such as a loading animation.

If you build your own controls and need to provide information about uncommon states or properties.

Buttons use the invisible text control to announce their type

When Not to Use Invisible Text

If you want to provide additional information for users of assistive technologies which is not available for sighted users. While you should not discriminate users of assistive technologies, you should also not provide “privileges” to them.
If you want to hide information. It might still be available for users of assistive technologies.
If you want to hide long texts. The information is probably important enough to be shown! Furthermore, short texts are far more convenient, even for users of assistive technologies.

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

Label (guidelines)
Form (guidelines)

Implementation

Invisible Text (SAPUI5 samples)
Invisible Text (SAPUI5 API reference)

Object Display Components

There are three types of object display component: object status, object identifier and object number.

Object Status

The object status is a short text that represents the semantic status of an object. It has a semantic color and an optional icon. As such, you can generally find the object status in the object header and in the table as a status attribute of a line item.

Object Identifier

The object identifier is a short text that represents the key identifier of an object.

You can find the object identifier in a table as an identifier of the line item.

Object Number

The object number is a short text that represents the numeric (key) attribute of an object and its unit. The number has a semantic color, and the unit inherits the same color from its number. The number can be emphasized (default setting) when it is used for the key attribute, and non-emphasized when it is used for any other numeric attribute of the item.

The object number is generally used to indicate the key attribute of an object in the object header, and as an attribute of a line item in a table.

Object Marker

The object marker allows you to express the technical status of an object.

The technical status can be represented as icon, icon and text, or as text only, depending on the screen size. See the guidelines section below to find out when to use which visibility option.

Currently, the following technical statuses can be visualized by the object marker:

Flag
Favorite
Editing Status (Draft, Locked, Unsaved Changes)

Usage

Use the object status if:

You need to display the semantic status of an object: negative (property: error), critical (property: warning), positive (property: success), or neutral (property: none).
You need to show that the current object instance is locked by another user.

Use the object number if:

You want to display the key attribute of an object. In this case, keep the emphasized default setting (property: emphasized).
You need to display one or more numeric attributes of an object that, for example, you want to compare (property: emphasized set to “false”).

Use the object identifier if:

You want to indicate the key identifier of the object.

Do not use the object status or object number if:

You want to display system messages.

Do not use the object display components if:

They are for decoration purposes only.

Responsiveness

The object status wraps if it is too long for the screen width available.
The object identifier text wraps if the size of the screen becomes too small to display the entire text on one line.
The object number does not wrap or truncate. For large numbers, you need to consider using the appropriate formatting.

Components

Object Status

The object status consists of the following:

A semantically-colored text (property: text)
An optional icon (property: icon)
A title that serves as a label (property: title)

It is mainly used with semantically-colored text only.

Semantic colors for object status

Object Identifier

The object identifier has the following properties:

A title text (property: title)

Object identifier – Text only

An optional additional descriptive text (property: text)

Object identifier – With subtitle

The title can be set to active. In this case, it looks like a link and can fire an event (property: titleActive).

Object identifier – Actionable

Both texts wrap if the space available is insufficient to fit each of them on one line.

Object identifier – Long texts wrap

Object Number

The object number consists of the following:

A semantically-colored text (property: number), which can be set to non-emphasized when used in the content area (property: emphasized)
An optional unit (property: unit)

Object numbers

Guidelines

Object Status

Use semantic text only, and avoid using it with an icon.
Use the following semantics to indicate the status: negative (property: error), critical (property: warning), positive (property: success), and neutral (property: none).

Preferably use semantic text only

Only use icons if they are unambiguous and easily understood (such as a padlock for locked items). If you feel your icon would need a descriptive text to be understood, use text only.
For locked items, you may also add information about who is currently locking the item.

Status locked

Status locked by a certain user

Do not use the title of the object status outside the object header. Even though the title and the status text wrap, keep them both as short as possible.

Avoid long title and text where possible

When used in a table, the object status should be center-aligned.

Object status should be center-aligned

Object Identifier

The object identifier should be easily readable (preferably the display text and not the ID). If the ID is necessary to distinguish between items that use the same title, it should appear in brackets, such as Product ABC (1234567). Whether you include the ID in the text property can also depend on how long you expect the text to be.
The object identifier can also be shown as a link. In this case, the event opens the quick view of the object.

Object Number

Use the following semantics to indicate the status: negative (property: error), critical (property: warning), positive (property: success), and neutral (property: none).

Neutral object number (856.49 EUR) used as a key attribute in the object header

If the object number is the key attribute of the object inside the content area, the number should be emphasized when it is used as a line item status in a table.

Object number with key attribute

The object number can also be used to visualize other semantic numeric attributes. In this case, they are not emphasized unless they are the key attribute, such as a sum.

Object number used as an attribute (weight) and as a key attribute (price)

Resources

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

Elements and Controls

No link

Implementation

Object Status (SAPUI5 samples)
Object Status (SAPUI5 API reference)
Object Identifier (SAPUI5 samples)
Object Identifier (SAPUI5 API reference)
Object Number (SAPUI5 samples)
Object Number (SAPUI5 API reference)

Object Display Components

Obje

There are four types of object display component: object status, object identifier, object number and object marker.

Object Status

The object status is a short text that represents the semantic status of an object. It has a semantic color and an optional icon. As such, you can generally find the object status in the object header and in the table as a status attribute of a line item.

Object Identifier

The object identifier is a short text that represents the key identifier of an object.

You can find the object identifier in a table as an identifier of the line item.

Object Number

The object number is a short text that represents the numeric (key) attribute of an object and its unit. The number has a semantic color, and the unit inherits the same color from its number. The number can be emphasized (default setting) when it is used for the key attribute, and non-emphasized when it is used for any other numeric attribute of the item.

The object number is generally used to indicate the key attribute of an object in the object header, and as an attribute of a line item in a table.

Object Marker

The object marker allows you to express the technical status of an object.

The technical status can be represented as icon, icon and text, or as text only, depending on the screen size. See the guidelines section below to find out when to use which visibility option.

Currently, the following technical statuses can be visualized by the object marker:

Flag
Favorite
Editing Status (Draft, Locked, Unsaved Changes)

Usage

Use the object status if:

You need to display the semantic status of an object: negative (property: error), critical (property: warning), positive (property: success), or neutral (property: none).
You need to show that the current object instance is locked by another user.

Use the object number if:

You want to display the key attribute of an object. In this case, keep the emphasized default setting (property: emphasized).
You need to display one or more numeric attributes of an object that, for example, you want to compare (property: emphasized set to “false”).

Use the object identifier if:

You want to indicate the key identifier of the object.

Use the object marker if:

You want to display the technical state (locked, draft, unsaved changes, favorite, flagged) of an object. If you want to display the status of the object in the business lifecycle, consider using the object status display component instead.

Do not use an object display components if:

You want to display system messages.
They are for decoration purposes only.

Responsiveness

The object status wraps if it is too long for the screen width available.
The object identifier text wraps if the size of the screen becomes too small to display the entire text on one line.
The object number does not wrap or truncate. For large numbers, you need to consider using the appropriate formatting.
The object marker does not wrap or truncate. It comes with different display options. Depending on the screen size and the selected visibility option the object marker behaves as follows:
- On L/M size:
  - If the visibility is set to IconAndText is selected, both are displayed.
  - If the visibility is set to IconOnly is selected, only the icon is displayed.
  - If the visibility is set to Text is selected, only the text is displayed.
- On S size:
  - If the visibility is set to IconAndText is available, only the icon is displayed.
  - If the visibility is set to Icon is available, only the icon is displayed.
  - If the visibility is set to Text is available, only the text is displayed.

Components

Object Status

The object status consists of the following:

A semantically-colored text (property: text)
An optional icon (property: icon)
A title that serves as a label (property: title)

It is mainly used with semantically-colored text only.

Semantic colors for object status

Object Identifier

The object identifier has the following properties:

A title text (property: title)

Object identifier – Text only

An optional additional descriptive text (property: text)

Object identifier – With subtitle

The title can be set to active. In this case, it looks like a link and can fire an event (property: titleActive).

Object identifier – Actionable

Both texts wrap if the space available is insufficient to fit each of them on one line.

Object identifier – Long texts wrap

Object Number

The object number consists of the following:

A semantically-colored text (property: number), which can be set to non-emphasized when used in the content area (property: emphasized)
An optional unit (property: unit)

Object numbers

Object Marker

The object marker comes with the following characteristics:

Icon only (visibility: IconOnly)
Text only (visibility: TextOnly)
Icon and text (visibility: IconAndText)
Interactive
Non-interactive

The object marker is able to fire an an event when it is pressed (interactive). If the control is interactive and displayed as icon with text, the icon and text are one click area.

Favorite

Flagged

Draft

Unsaved changes

Locked

Guidelines

Object Status

Use semantic text only, and avoid using it with an icon.
Use the following semantics to indicate the status: negative (property: error), critical (property: warning), positive (property: success), and neutral (property: none).

Preferably use semantic text only

Only use icons if they are unambiguous and easily understood (such as a padlock for locked items). If you feel your icon would need a descriptive text to be understood, use text only.
For locked items, you may also add information about who is currently locking the item.

Status locked

Status locked by a certain user

Do not use the title of the object status outside the object header. Even though the title and the status text wrap, keep them both as short as possible.

Avoid long titles and long text where possible

When used in a table, the object status should be center-aligned.

Object status should be center-aligned

Object Identifier

The object identifier should be easily readable (preferably the display text and not the ID). If the ID is necessary to distinguish between items that use the same title, it should appear in brackets, such as Product ABC (1234567). The decision to include the ID in the text property can also depend on how long you expect the text to be.
The object identifier can also be shown as a link. In this case, the event opens the quick view of the object.

Object Number

Use the following semantics to indicate the status: negative (property: error), critical (property: warning), positive (property: success), and neutral (property: none).

Neutral object number (856.49 EUR) used as a key attribute in the object header

If the object number is the key attribute of the object inside the content area, the number should be emphasized when it is used as a line item status in a table.

Object number with key attribute

The object number can also be used to visualize other semantic numeric attributes. In this case, they are not emphasized unless they are the key attribute, such as a sum.

Object number used as an attribute (weight) and as a key attribute (price)

Object Marker

An object might contain multiple technical statuses at the same time. However, the editing statuses are mutually exclusive. As a result, an object can have a maximum of 3 technical status visible on the screen: Flag, Favorite and one Editing Status. The app developer is responsible for the technical statuses.

Every technical status has a default visualization that can be changed by the app developer depending on the usage context. See also “How to display the editing state” in the draft handling article.

Flag and Favorite are usually displayed as icon. The same applies to all screen sizes.

The default behavior for the editing status is as follows:

On L/M size:

Locked and Unsaved Changes are displayed as icon and text, while Draft is displayed as text.
Flag and Favorite are displayed as icons.

On S size:

Locked and Unsaved Changes are displayed as icon, while Draft is displayed as text.
Flag and Favorite are displayed as icons.

Object marker

Resources

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

Elements and Controls

No link

Implementation

Object Status (SAPUI5 samples)
Object Status (SAPUI5 API reference)
Object Identifier (SAPUI5 samples)
Object Identifier (SAPUI5 API reference)
Object Number (SAPUI5 samples)
Object Number (SAPUI5 API reference)
Object Number (SAPUI5 samples)

Object Display Components

There are four types of object display component: object status, object identifier, object number and object marker.

Object Status

The object status is a short text that represents the semantic status of an object. It has a semantic color and an optional icon. As such, you can generally find the object status in the object header and in the table as a status attribute of a line item.

Object Identifier

The object identifier is a short text that represents the key identifier of an object.

You can find the object identifier in a table as an identifier of the line item.

Object Number

The object number is a short text that represents the numeric (key) attribute of an object and its unit. The number has a semantic color, and the unit inherits the same color from its number. The number can be emphasized (default setting) when it is used for the key attribute, and non-emphasized when it is used for any other numeric attribute of the item.

The object number is generally used to indicate the key attribute of an object in the object header, and as an attribute of a line item in a table.

Object Marker

The object marker allows you to express the technical status of an object.

The technical status can be represented as icon, icon and text, or as text only, depending on the screen size. See the guidelines section below to find out when to use which visibility option.

Currently, the following technical statuses can be visualized by the object marker:

Flag
Favorite
Editing Status (Draft, Locked, Unsaved Changes)

Usage

Use the object status if:

You need to display the semantic status of an object: negative (property: error), critical (property: warning), positive (property: success), or neutral (property: none).
You need to show that the current object instance is locked by another user.

Use the object number if:

You want to display the key attribute of an object. In this case, keep the emphasized default setting (property: emphasized).
You need to display one or more numeric attributes of an object that, for example, you want to compare (property: emphasized set to “false”).

Use the object identifier if:

You want to indicate the key identifier of the object.

Use the object marker if:

You want to display the technical state (locked, draft, unsaved changes, favorite, flagged) of an object. If you want to display the status of the object in the business lifecycle, consider using the object status display component instead.

Do not use an object display components if:

You want to display system messages.
They are for decoration purposes only.

Responsiveness

The object status wraps if it is too long for the screen width available.
The object identifier text wraps if the size of the screen becomes too small to display the entire text on one line.
The object number does not wrap or truncate. For large numbers, you need to consider using the appropriate formatting.
The object marker does not wrap or truncate. It comes with different display options. Depending on the screen size and the selected visibility option the object marker behaves as follows:
- On L/M size:
  - If the visibility is set to IconAndText is selected, both are displayed.
  - If the visibility is set to IconOnly is selected, only the icon is displayed.
  - If the visibility is set to Text is selected, only the text is displayed.
- On S size:
  - If the visibility is set to IconAndText is available, only the icon is displayed.
  - If the visibility is set to Icon is available, only the icon is displayed.
  - If the visibility is set to Text is available, only the text is displayed.

Components

Object Status

The object status consists of the following:

A semantically colored text (property: text)
An optional icon (property: icon)
A title that serves as a label (property: title)

It is mainly used with semantically-colored text only.

Semantic colors for object status

Object Identifier

The object identifier has the following properties:

A title text (property: title)

Object identifier – Text only

An optional additional descriptive text (property: text)

Object identifier – With subtitle

The title can be set to active. In this case, it looks like a link and can fire an event (property: titleActive).

Object identifier – Actionable

Both texts wrap if the space available is insufficient to fit each of them on one line.

Object identifier – Long texts wrap

Object Number

The object number consists of the following:

A semantically-colored text (property: number), which can be set to non-emphasized when used in the content area (property: emphasized)
An optional unit (property: unit)

Object numbers

Object Marker

The object marker comes with the following characteristics:

Icon only (visibility: IconOnly)
Text only (visibility: TextOnly)
Icon and text (visibility: IconAndText)
Interactive
Non-interactive

The object marker is able to fire an an event when it is pressed (interactive). If the control is interactive and displayed as icon with text, the icon and text are one click area.

Draft

Favorite

Flagged

Unsaved changes

Locked

Guidelines

Object Status

Use semantic text only, and avoid using it with an icon.
Use the following semantics to indicate the status: negative (property: error), critical (property: warning), positive (property: success), and neutral (property: none).

Preferably use semantic text only

Only use icons if they are unambiguous and easily understood (such as a padlock for locked items). If you feel your icon would need a descriptive text to be understood, use text only.
For locked items, you may also add information about who is currently locking the item.

Status locked

Status locked by a certain user

Do not use the title of the object status outside the object header. Even though the title and the status text wrap, keep them both as short as possible.

Avoid long titles and long text where possible

When used in a table, center one-word information and icons. For the responsive table only, if status information is displayed as secondary information in a column, the status should follow the alignment of the main information.

Object Status in table with one-word center-aligned

Left-align the whole column if there is at least one status with more than two words in English.

Object Status in table with more than two words

Left-align status information containing an icon and a text.

Object Status in table with text and icon

Ascending tables should be sorted from positive to negative, with neutral last.

Sort - Ascending: From positive to negative

Descending tables should be sorted from negative to positive, with neutral first.

Sort - Descending: From negative to positive

Ascending tables should be sorted alphabetically within the states (from positive to negative, with neutral last).

Sort - Ascending alphabetically: From positive to negative

Descending tables should be sorted alphabetically within the states (from negative to positive, with neutral first).

Sort - Descending alphabetically: From negative to positive

Object Identifier

The object identifier should be easily readable (preferably the display text and not the ID). If the ID is necessary to distinguish between items that use the same title, it should appear in brackets, such as Product ABC (1234567). The decision to include the ID in the text property can also depend on how long you expect the text to be.
The object identifier can also be shown as a link. In this case, the event opens the quick view of the object.

Object Number

Use the following semantics to indicate the status: negative (property: error), critical (property: warning), positive (property: success), and neutral (property: none).

Neutral object number (856.49 EUR) used as a key attribute in the object header

If the object number is the key attribute of the object inside the content area, the number should be emphasized when it is used as a line item status in a table.

Object number with key attribute

The object number can also be used to visualize other semantic numeric attributes. In this case, they are not emphasized unless they are the key attribute, such as a sum.

Object number used as an attribute (weight) and as a key attribute (price)

Object Marker

An object might contain multiple technical statuses at the same time. However, the editing statuses are mutually exclusive. As a result, an object can have a maximum of 3 technical status visible on the screen: Flag, Favorite and one Editing Status. The app developer is responsible for the technical statuses.

Every technical status has a default visualization that can be changed by the app developer depending on the usage context. See also “How to display the editing state” in the draft handling article.

Flag and Favorite are usually displayed as icon. The same applies to all screen sizes.

The default behavior for the editing status is as follows:

On L/M size:

Locked and Unsaved Changes are displayed as icon and text, while Draft is displayed as text.
Flag and Favorite are displayed as icons.

On S size:

Locked and Unsaved Changes are displayed as icon, while Draft is displayed as text.
Flag and Favorite are displayed as icons.

Object marker

Resources

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

Elements and Controls

No link

Implementation

Object Status (SAPUI5 samples)
Object Status (SAPUI5 API reference)
Object Identifier (SAPUI5 samples)
Object Identifier (SAPUI5 API reference)
Object Number (SAPUI5 samples)
Object Number (SAPUI5 API reference)
Object Number (SAPUI5 samples)

Mask Input

The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users to easily enter data in a certain format and in a fixed-width input (such as a date, time, phone number, credit card number, currency, and IP address).

Usage

Use the mask input if:

You have to govern what a user is allowed to enter in an input field.
You have to enter data easily in a certain format and in a fixed-width input.
You have to enter input such as a date, time, phone number, serial number, ISBN, or product activation key.

Do not use the mask input if:

The mask prevents users from entering essential data.
The users need to enter data in a format other than the one used by the mask (for example, if users have to enter a phone number with a format for a different region).

Possible uses - may require additional coding

Responsiveness

The mask input extends the input control (sap.m.Input) and has all the normal properties of an input field.

Components

The mask input has a fixed length format based on instantiation, and the user’s input must conform to it. This may be particularly useful when the user needs to enter text or numbers with specific formatting, such as a phone number, postcal code, or credit card number.

Immutable Characters

When defining the mask format, the developer can place immutable characters, such as brackets and dashes, in specific positions. The format also specifies the range of valid characters for each separate position, thus preventing the user from entering invalid input.

For example, when the user enters a phone number, the area code in brackets and the space between the numbers are already present.

Note that the sap.m.MaskInput control extends sap.m.Input and has all the normal properties of an input field.

When creating a new mask, the developer can change the configuration of some default properties. For example, the default placeholder symbol “_” can be changed to something else.

Behavior and Interaction (incl. Gestures)

Entering Text

Mask string appears in the input field in focus.
The default placeholder symbol is “_” and can be changed to something else.

Copying and Pasting

Copying to a mask input field:

Users can copy both formatted and unformatted strings into a mask input field. When the texts are pasted, they take on the format defined for the mask input field.

Example: Mask input field for a number with the format: (000) 000 000000

Copied source string	Value in mask input field after pasting
(555) 333 123456	(555) 333 123456
555-333-123456	(555) 333 123456
555 (333) 12 34 56	(555) 333 123456

Copying from a mask input field:

If you copy a string from a mask input field and paste it elsewhere, the format of the mask input field is copied as well.

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.

Deleting Content

Select the entire string and delete it. The placeholders will reappear.
Deleting a character from the string leaves the input information unchanged, except for the deleted character, which is replaced by a placeholder. (The mask does not shift if a character is deleted.)

Deleting one/all characters in mask input

Guidelines

Validation Rules

Another option is to define new validation rules, such as allowing lowercase characters from “a” to “e” only. This is particularly flexible because these rules are defined with regular expression syntax.

The mask comes with two predefined validation rules: one for all characters in the English alphabet, and one for the numbers from zero to ten.

Therefore, when the mask format is being defined, the alphabetic rule is represented by the letter “a”, and the numeric rule by the number “9”. For example, a numeric mask format with a length of five characters would be specified as “99999”, a mask that accepts only alphabetical characters would be specified as “aaaaa”, and a mixed mask could be “aaa99”. In the mixed mask example, the user would not be able to enter numeric characters anywhere other than in the last two positions.

When you create the MaskInput instance, you can specify the following settings:

Mask: The format specification, such as (123) 999-999.
PlaceholderSymbol: A single character used to represent empty positions in a mask value, such as _ _ _ _ _.
Rules: A collection of sap.m.MaskInputRule instances.

Properties

Mask string

The mask is defined by its character type (or by its length, as applicable). You should consider the following important facts:

The mask characters normally correspond to an existing rule (one rule per unique character). Characters that do not are considered immutable characters. For example, the mask ‘2099’, where ‘9’ corresponds to a rule for digits, has ‘2’ and ‘0’ as immutable characters.
Adding a rule that corresponds to the symbol placeholder is not recommended and would lead to unpredictable behavior.

Placeholder symbol string “_”

This defines a placeholder symbol. It is shown in a position where there has not yet been any user input.

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)
Time Picker (guidelines)

Implementation

Mask Input (SAPUI5 samples)
Mask Input (SAPUI5 API reference)

Mask Input

Planning Calendar

The planning calendar allows users to see different appointments at the same time and to create new events. It allows the user to display appointments for several objects, such as a team calendar, and compare them with each other.

Usage

Use the planning calendar if:

You want to compare objects of the same type with each other over a period of time.

Do not use the planning calendar if:

You want to show a calendar for one object and a detailed overview of appointments over a long time interval.

Responsiveness

In size S, the control provides pop-in behavior, which allows the user to see as many appointments as possible and to connect them with the corresponding object. If the toolbar contains too many actions for the space available, the overflow icon (…) appears.

The interval section displaying the hours, days, and months is responsive and shows 12 values in large size, 8 values in medium size, and 6 values in small size. You can override this behavior, but you should then check that the responsiveness is still working.

Size S

Size M

Size L

Types

You can define what size of interval the calendar should show, and whether multi selection should be possible. Additionally, the row header and the interval appointments are optional.

The control allows multi-select mode to be shown for the list items. This can be used, for example, to delete multiple objects from the view.

The app development team must decide whether to show the planning calendar with or without multi-select mode, or whether users should be able to switch between the two modes. Hiding the interval appointments of every object is optional.

The example on the right shows what the interaction looks like if the user can trigger multi-select mode. When the user clicks or taps the button, a checkbox appears next to each list item and a Select All option is shown. Additional actions can appear or disappear in the calendar toolbar.

The planning calendar can also be shown in single-select mode. In this case, the row header disappears and only the appointments are visible. It can be used to show the calendar of one object. Note that the control was built mainly to compare time slots of different objects. For this reason, the time axis is shown horizontally and, depending on the interval, the appointments are truncated.

Components

This section describes the various components of the planning calendar.

The control consists of different parts:

Toolbar
Header
Calendar view
List item
Row header
Row
Appointment
Interval appointment

Parts of the planning calendar

1. Toolbar

The toolbar is optional and can contain a title as well as app-specific and generic actions.
If you have actions in the toolbar, we recommend that you use a title to describe the purpose of the planning calendar. For more information, check out the toolbar guideline article.

The generic actions are as follows:

Search
Add appointment (icon: add)
Add new contact (icon: add-contact)
Multi-select mode (icon: multi-select)
Legend (icon: legend)
Settings (icon: action-settings)
Full screen (icon: full-screen/exit-full-screen)

2. Header

The calendar header comprises the left part, which includes an optional switch to see the calendar in a different view (day, month, year), and the right part, which contains the calendar view.

3. Calendar view

The calendar view defines the granularity of the appointments shown. You can decide what kind of view (hours, days, or months) they need and how many values are shown. There is a default value for the number of values to be shown. App developers can change this value, but they should then ensure that the app is still responsive.

Users can also navigate to the next or previous view, and switch easily to another year, month, or day.

4. List item

The list item contains the row header, row, appointments, and interval appointments. Each row can show different working and non-working days. This is useful if users want to view calendars from different countries that have different weekends.

5. Row header

This identifies the object for which the appointments are shown. The row header pops in if there is not enough space. It can contain a picture or icon, a title, and a subtitle.

6. Row

All appointments that appear for an object are shown here.

7. Appointment

Appointments enable an icon or picture, a title, and a subtitle to be shown. If events appear simultaneously, they are shown under each other. App developers can define the colors of different event types, and events can be shown as tentative. The control can register the click event, and the app development team must define what happens next.
If the view changes and there are too many small appointments at one time, an aggregation is shown. Otherwise, the click/touch area would be too small.

8. Interval appointment

Each row can also have interval appointments. These are smaller and always appear at the top of the row. They can be used to show events that last for a prolonged period of time, such as vacations or workshops.

Developer Hint

To prevent waiting time, app developers should load the sap.ui.unified library.

Behavior and Interaction (incl. Gestures)

To create an event, the user must trigger an action by clicking the plus () icon in the toolbar.

To see the details of an appointment, the user selects the appointment, thus triggering a click event. The app development team must define what kind of information is then shown.

A multi-select toggle can also be provided in the toolbar. This can be used, for example, to select multiple people to delete them from the planning calendar.

Various tooltips can be shown, but you should not use them to show additional information because users cannot access this functionality on touch devices.

Depending on the current time interval, appointments can become truncated. However, this should not be an issue because the main use case is to see whether there is a free time slot. Additionally, the user can click or tap the appointment to see the details.

1. Switch

The switch is optional and allows users to switch between different views. For example, a user can get an overview of a whole year by selecting the year view.
The average length of appointments and the use case should decide which view is the most useful.

2. Today action

The user can trigger this action to go back to the current date.

3. Back and forward navigation

The arrows allow the user to navigate to the next or previous interval.

4. Day switch

The day switch is only available if the day view is selected. It enables the user to navigate to a different day.

5. Month switch

The month switch is available if the day or month view is selected. It allows the user to switch to a different month.

6. Year switch

Day, month, and year views enable the user to switch between different years.

Navigation parts

Interaction Flow for Switching Days

There are two ways in which the user can switch to a different day:

Click or tap the arrows to navigate to the next or previous interval.
Click or tap the current day to open the date picker. When the user selects a day, the picker closes and navigates the user to the selected value.

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

Overview Toolbar (guidelines)
Calendar Date Interval (guidelines)
Date Picker (guidelines)

Implementation

Planning Calendar (SAPUI5 test suite)
Planning Calendar Row (SAPUI5 API reference)
Planning Calendar View (SAPUI5 API reference)

Planning Calendar

The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments for several objects, such as a team calendar, and compare them with each other.

Usage

Use the planning calendar if:

You want to compare objects of the same type with each other over a period of time.
You require responsive behavior.
You have less than 100 lines in the calendar.

Do not use the planning calendar if:

You want to show a calendar for one object and a detailed overview of appointments over a long time interval.
You want to show a complex or graphical representation. In this case, please use the Gantt chart.
You have more than 100 lines in the calendar. In this case, please use the Gantt chart.

Responsiveness

In size S, the control provides pop-in behavior, which allows the user to see as many appointments as possible and to connect them with the corresponding object. If the toolbar contains too many actions for the space available, the overflow icon appears.

The interval section displaying the hours, days, and months is responsive and shows 12 values in large size, 8 values in medium size, and 6 values in small size. You can override this behavior, but you should then check that the responsiveness is still working.

Planning calendar - Size S

Planning calendar - Size M

Planning calendar - Size L

Types

You can define what size of interval the calendar should show, and whether multi selection should be possible. Additionally, the row header and the interval appointments are optional.

The control allows multi-select mode to be shown for the list items. This can be used, for example, to delete multiple objects from the view.

An app development team must decide whether to show the planning calendar with or without multi-select mode, or whether users should be able to switch between the two modes. Hiding the interval appointments of every object is optional.

The example opposite shows what the interaction looks like if the user can trigger multi-select mode. When the user clicks or taps the button, a checkbox appears next to each list item and a Select All option is shown. Additional actions can appear or disappear in the calendar toolbar.

The planning calendar can also be shown in single-select mode. In this case, the row header disappears and only the appointments are visible. It can be used to show the calendar of one object. Note that the control was built mainly to compare time slots of different objects. For this reason, the time axis is shown horizontally and, depending on the interval, the appointments are truncated.

Switching to multi-select mode

Components

This section describes the various components of the planning calendar.

The control consists of different parts:

Toolbar
Header
Calendar view
List item
Row header
Row
Appointment
Interval appointment

Parts of the planning calendar

1. Toolbar

The toolbar is optional and can contain a title as well as app-specific and generic actions.
If you have actions in the toolbar, we recommend that you use a title to describe the purpose of the planning calendar. For more information, check out the toolbar guideline article.

The generic actions are as follows:

Search
Add Appointment (icon: add)
Add New Contact (icon: add-contact)
Multi-select mode (icon: multi-select)
Legend (icon: legend)
Settings (icon: action-settings)
Full Screen (icon: full-screen/exit-full-screen)

2. Header

The calendar header comprises the left part, which includes an optional switch to see the calendar in a different view (day, month, year), and the right part, which contains the calendar view.

3. Calendar view

The calendar view defines the granularity of the appointments shown. You can decide what kind of view (hours, days, or months) they need and how many values are shown. There is a default value for the number of values to be shown. App developers can change this value, but they should then ensure that the app is still responsive.

Users can also navigate to the next or previous view, and switch easily to another year, month, or day.

4. List item

The list item contains the row header, row, appointments, and interval appointments. Each row can show different working and non-working days. This is useful if users want to view calendars from different countries that have different weekends.

5. Row header

This identifies the object for which the appointments are shown. The row header pops in if there is not enough space. It can contain a picture or icon, a title, and a subtitle.

6. Row

All appointments that appear for an object are shown here.

7. Appointment

Appointments enable an icon or picture, a title, and a subtitle to be shown. If appointments appear simultaneously, they are shown under each other. App developers can define the colors of different appointment types, and appointments can be shown as tentative. The control can register the click event, and the app development team must define what happens next.
If the view changes and there are too many small appointments at one time, an aggregation is shown. Otherwise, the click/touch area would be too small.

8. Interval appointment

Each row can also have interval appointments. These are smaller and always appear at the top of the row. They can be used to show appointments that last for a prolonged period of time, such as vacations or workshops.

Developer Hint

To prevent waiting time, app developers should load the sap.ui.unified library.

Behavior and Interaction

To create an appointment, the user must trigger an action by clicking the Add icon in the toolbar.

A user who wants to see the details of an appointment can click it, thus triggering a click event. The app development team must define what kind of information is then shown.

A multi-select toggle can also be provided in the toolbar. This can be used, for example, to select multiple people to delete them from the planning calendar.

Various tooltips can be shown, but you should not use them to show additional information because users cannot access this functionality on touch devices.

Depending on the current time interval, appointments can become truncated. However, this should not be an issue because the main use case is to see whether there is a free time slot. Additionally, the user can click or tap the appointment to see the details.

1. Switch

The switch is optional and allows users to switch between different views. For example, a user can get an overview of a whole year by selecting the year view. The average length of appointments and the use case should decide which view is the most useful.

2. Today action

The user can trigger this action to go back to the current date.

3. Back and forward navigation

The arrows allow the user to navigate to the next or previous interval.

4. Day switch

The day switch is only available if the day view is selected. It enables the user to navigate to a different day.

5. Month switch

The month switch is available if the day or month view is selected. It allows the user to switch to a different month.

6. Year switch

Day, month, and year views enable the user to switch between different years.

Navigation parts

Interaction Flow for Switching Days

There are two ways in which the user can switch to a different day:

Clicking or tapping the arrows to navigate to the next or previous interval.
Clicking or tapping the current day to open the date picker. When the user selects a day, the picker closes and navigates the user to the selected value.

Navigation Flow Switching a day

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

Overview Toolbar (guidelines)
Calendar Date Interval (guidelines)
Date Picker (guidelines)

Implementation

Planning Calendar (SAPUI5 test suite)
Planning Calendar Row (SAPUI5 API reference)
Planning Calendar View (SAPUI5 API reference)

Planning Calendar

The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments for several objects, such as a team calendar, and compare them with each other.

Usage

Use the planning calendar if:

You want to compare objects of the same type with each other over a period of time.
You require responsive behavior.
You have less than 100 lines in the calendar.

Do not use the planning calendar if:

You want to show a calendar for one object and a detailed overview of appointments over a long time interval.
You want to show a complex or graphical representation. In this case, please use the Gantt chart.
You have more than 100 lines in the calendar. In this case, please use the Gantt chart.

Responsiveness

In size S, the control provides pop-in behavior, which allows the user to see as many appointments as possible and to connect them with the corresponding object. If the toolbar contains too many actions for the space available, the overflow icon appears.

The interval section displaying the hours, days, and months is responsive and shows 12 values in large size, 8 values in medium size, and 6 values in small size. You can override this behavior, but you should then check that the responsiveness is still working.

Planning calendar - Size S

Planning calendar - Size M

Planning calendar - Size L

Types

You can define what size of interval the calendar should show, and whether multi selection should be possible. Additionally, the row header and the interval appointments are optional.

The control allows multi-select mode to be shown for the list items. This can be used, for example, to delete multiple objects from the view.

An app development team must decide whether to show the planning calendar with or without multi-select mode, or whether users should be able to switch between the two modes. Hiding the interval appointments of every object is optional.

The example opposite shows what the interaction looks like if the user can trigger multi-select mode. When the user clicks or taps the button, a checkbox appears next to each list item and a Select All option is shown. Additional actions can appear or disappear in the calendar toolbar.

The planning calendar can also be shown in single-select mode. In this case, the row header disappears and only the appointments are visible. It can be used to show the calendar of one object. Note that the control was built mainly to compare time slots of different objects. For this reason, the time axis is shown horizontally and, depending on the interval, the appointments are truncated.

Switching to multi-select mode

Components

This section describes the various components of the planning calendar.

The control consists of different parts:

Toolbar
Header
Calendar view
List item
Row header
Row
Appointment
Interval appointment

Parts of the planning calendar

1. Toolbar

The toolbar is optional and can contain a title as well as app-specific and generic actions.
If you have actions in the toolbar, we recommend that you use a title to describe the purpose of the planning calendar. For more information, check out the toolbar guideline article.

The generic actions are as follows:

Search
Add Appointment (icon: add)
Add New Contact (icon: add-contact)
Multi-sSelect Mode (icon: multi-select)
Legend (icon: legend)
Settings (icon: action-settings)
Full Screen (icon: full-screen/exit-full-screen)

2. Header

The calendar header comprises the left part, which includes an optional switch to see the calendar in a different view (day, month, year), and the right part, which contains the calendar view.

3. Calendar view

The calendar view defines the granularity of the appointments shown. You can decide what kind of view (hours, days, or months) they need and how many values are shown. There is a default value for the number of values to be shown. App developers can change this value, but they should then ensure that the app is still responsive.

Users can also navigate to the next or previous view, and switch easily to another year, month, or day.

4. List item

The list item contains the row header, row, appointments, and interval appointments. Each row can show different working and non-working days. This is useful if users want to view calendars from different countries that have different weekends.

5. Row header

This identifies the object for which the appointments are shown. The row header pops in if there is not enough space. It can contain a picture or icon, a title, and a subtitle.

6. Row

All appointments that appear for an object are shown here.

7. Appointment

Appointments enable an icon or picture, a title, and a subtitle to be shown. If appointments appear simultaneously, they are shown under each other. App developers can define the colors of different appointment types, and appointments can be shown as tentative. Appointments are fully colored. The control can register the click event, and the app development team must define what happens next.
If the view changes and there are too many small appointments at one time, an aggregation is shown. Aggregations show a number indicating how many appointments are not fully visible in this view. This functionality will be improved in future releases. Otherwise, the click/touch area would be too small.

There are two sizes of appointments – regular and half size. The half-sized appointments can save space, but also note that they do not show a second line for details of the appointment.

8. Interval appointment

Each row can also have interval appointments. These are smaller and always appear at the top of the row. They can be used to show appointments that last for a prolonged period of time, such as vacations or workshops.

Developer Hint

To prevent waiting time, app developers should load the sap.ui.unified library.

Behavior and Interaction

To create an appointment, the user must trigger an action by clicking the Add icon in the toolbar.

A user who wants to see the details of an appointment can click it, thus triggering a click event. The app development team must define what kind of information is then shown.

A multi-select toggle can also be provided in the toolbar. This can be used, for example, to select multiple people to delete them from the planning calendar.

Various tooltips can be shown, but you should not use them to show additional information because users cannot access this functionality on touch devices.

Depending on the current time interval, appointments can become truncated. However, this should not be an issue because the main use case is to see whether there is a free time slot. Additionally, the user can click or tap the appointment to see the details.

1. Switch

The switch is optional and allows users to switch between different views. For example, a user can get an overview of a whole year by selecting the year view. The average length of appointments and the use case should decide which view is the most useful.

2. Today action

The user can trigger this action to go back to the current date.

3. Back and forward navigation

The arrows allow the user to navigate to the next or previous interval.

4. Day switch

The day switch is only available if the day view is selected. It enables the user to navigate to a different day.

5. Month switch

The month switch is available if the day or month view is selected. It allows the user to switch to a different month.

6. Year switch

Day, month, and year views enable the user to switch between different years.

Navigation parts

Interaction Flow for Switching Days

There are two ways in which the user can switch to a different day:

Clicking or tapping the arrows to navigate to the next or previous interval.
Clicking or tapping the current day to open the date picker. When the user selects a day, the picker closes and navigates the user to the selected value.

Navigation Flow Switching a day

Behavior and Interaction

To create an appointment, the user must trigger an action by clicking the Add icon in the toolbar. Clicking directly on the row also created a new appointment.

The user can click on the appointment to see further details. The app development team must define what kind of information is then shown. For example, clicking on an appointment can trigger a popover with detailed information.

A multi-select toggle can also be provided in the toolbar. This can be used, for example, to select multiple people in order to delete them from the planning calendar.

Various tooltips can be shown, but you should not use them to show additional information because users cannot access this functionality on touch devices.

Depending on the current time interval, appointments can get truncated. However, this should not be an issue because the main use case is to see whether there is a free time slot. Additionally, the user can click or tap the appointment to see the details.

In the “months view”, appointments may appear as aggregations due to lack of space for detailed visualization. Aggregations show a number indicating how many appointments are not fully visible in this view. This functionality will be improved in future releases.

The “alternating rows” functionality gives users the possibility to row coloring on or off. By default, the alternating rows option is turned on.

Appointments in the calendar have two sizes, regular and half appointment. The exact sizes can be found in the visual specification. The app developer can choose the size that fits the use case, but keep in mind that the half-size appointment shows less information about the appointment.

With “hiding the interval header”, the user also has the option to hide the interval header and the space that is reserved for it. This option can be included as an icon in the toolbar.

1. Switch

The switch is optional and allows users to switch between different views. For example, a user can get an overview of a whole year by selecting the year view. The average length of appointments and the use case should decide which view is the most useful.

2. Today action

The user can trigger this action to go back to the current date.

3. Back and forward navigation

The arrows allow the user to navigate to the next or previous interval.

4. Day switch

The day switch is only available if the day view is selected. It enables the user to navigate to a different day.

5. Month switch

The month switch is available if the day or month view is selected. It allows the user to switch to a different month.

6. Year switch

Day, month, and year views enable the user to switch between different years.

Navigation parts

Interaction Flow for Switching Days

There are two ways in which the user can switch to a different day:

Clicking or tapping the arrows to navigate to the next or previous interval.
Clicking or tapping the current day to open the date picker. When the user selects a day, the picker closes and navigates the user to the selected value.

Navigation Flow Switching a day

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

Overview Toolbar (guidelines)
Calendar Date Interval (guidelines)
Date Picker (guidelines)

Implementation

Planning Calendar (SAPUI5 test suite)
Planning Calendar Row (SAPUI5 API reference)
Planning Calendar View (SAPUI5 API reference)

Planning Calendar

Cumulation (Waterfall Chart)

Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.

Examples

Profit and Loss

The margin is a cumulative value equal to the sum of all revenues (positive) and all costs (negative).

Profit and loss waterfall chart

Inventory over Time

The stock level is equal to the sum of all incoming stocks (positive) and outgoing stocks (negative).

Stock level over time waterfall chart

Orientation

The orientation of the waterfall chart (horizontal or vertical) should follow best practices of the business area from which the application is designed.

If the chart represents how a cumulative value changes over time period, it’s best to use a vertical waterfall chart (with vertical bars) and a horizontal time axis.

If not, you should use a horizontal waterfall chart (with horizontal bars) to avoid the undesirable effects that come as a result of displaying the category labels at 45°, which apart from making them hard to read, often leads to truncation of text.

Total and Subtotal

The initial and the final values are usually represented by an entire column starting from the zero axis. An intermediate total can be added.

Waterfall chart with an intermediate total

You can also add intermediate subtotals that are the sum of previous values.

Waterfall chart with an intermediate subtotal

Colors

Default Colors

By default, the chart use three colors based on the following semantic:

Positive values use a color defined by the property: plotArea.dataPoint.color.positive.
Negative values use a color defined by the property: plotArea.dataPoint.color.negative
Totals use a color defined by the property: plotArea.dataPoint.color.total

By default, these three colors are:

Blue (@sapUiChartPaletteSequentialHue1Light1)
Green (@sapUiChartPaletteSequentialHue2Light1)
Gray (@sapUiChartPaletteSequentialNeutral)

These colors are defined by the sequential palette, but can be customized.

Waterfall chart with default colors

Custom Colors

You can customize the colors in two ways:

Change the colors, or
Use your own rules.

Changing Colors

The colors color.positive, color.negative and color.total can be changed to any color from the chart palette. The chart will use these three colors based on the rules defined above.

Example: Positive and negative are blue, and total by gray.

Waterfall chart with custom colors

Example: Positive are green and negative are red. Total is gray.

Waterfall chart with semantic colors

Using your Own Rules

You can set any color to any bar based on your own rules. To define the rules, use the property dataPointStyle:rules.

Use dataPointStyle:others to define the colors for all data points that are not covered by the rules. If the color of a data point is not defined, the data point will be displayed with a black color to indicate that no color has been defined.

Example: Direct costs and indirect costs use different shades of green from the sequential palette.

Waterfall chart with colors based on business rules

Resources

Want to dive deeper? Follow the links below to find out the SAPUI5 implementation.

Elements and Controls

Chart (guidelines)
Chart – Color Palettes (guidelines)

Implementation

Horizontal Waterfall Chart (SAPUI5 samples)
Vertical Waterfall Chart (SAPUI5 samples)

Cumulation (Waterfall Chart)

Currency

Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.

Usage

Use the currency control if:

You need to display amounts with different currencies in a vertical layout, such as in a table, list, or form, and it is important that the user is able to compare the amounts.

Do not use the currency control if:

You need to display amounts with the same currency in a table. Use an object number instead.
You need to display a number with a unit of measurement that is not a currency. Use an object number instead.
You need to display an amount in a structure other than a list, table, or form.

Responsiveness

The currency control supports amounts smaller than 100 trillion, which still fit on a smartphone screen in portrait mode. For larger amounts, the unit of measurement wraps to the next line, which makes it difficult to compare the amounts.

Components

The currency control consists of:

An amount, which is formatted automatically according to the user’s locale (using delimiter symbols for the decimal point and thousand separators) and to the currency set for this specific number (number of decimal places). Property: value.
A currency expressed as a three-letter code. Property: currency.

Examples of the currency control

Guidelines

When you display a unit of measurement, always show the corresponding three-letter code. (property: useSymbol)
Display amounts with a maximum of three decimal places. More than three simply increases the white space between other numbers and their units of measurement with no further benefit. Less than three does not work for all currencies. (property: maxPrecision)

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

Form (guidelines)
Table (guidelines)
Object Display Components (guidelines)

Implementation

No links

Smart Table

The smart table is a wrapper around existing tables, and can be used together with the responsive table, grid table, analytical table, or tree table.

The smart table creates columns automatically based on the underlying OData service plus corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, and export to spreadsheet.

Everything that can be done using the smart table can also be achieved using the responsive table, grid table, analytical table, or tree table directly, but with more development effort. Therefore, the main purpose of the smart table is to reduce development effort. However, this comes at the expense of decreased flexibility.

Usage

Use the smart table if:

Data is fed into the table through OData services.
You need a simple table with limited flexibility to display its content. In this case, the smart table reduces development effort.
You need a table in which some columns provide flexible content. In this case, use the smart table together with a responsive table, and provide app-specific column definitions for these columns.

Do not use the smart table if:

You create your own UI coding, whereby the data is not fed through OData services. In this case, use the underlying table control directly.
The main use case involves selecting one item from very few items, with no additional details. In this case, a select or combo box might be more suitable.
The main use case involves selecting one item from several items, with only a few details per item. In this case, a list might be more suitable. Pay attention to the layout of the list item to provide a pleasant appearance (see, for example, the master list and the feed list item).
The table is displayed together with a chart inside a chart container. The smart table is not designed to work inside an existing chart container. In this case, use the underlying table control directly.
You need an overview of a large amount of data. In this case, use charts.
You just need it for layout reasons. In this case, use a layout container, such as the grid layout, instead.
You need read-only or editable field value pairs. In this case, use a form instead. Tables are not optimized for form-like input navigation.

Responsiveness

The responsiveness of the smart table depends on the encapsulated table. The table toolbar uses the overflow mechanism for adapting to the screen width.

Using the responsive table

The smart table offers a generic responsive behavior (sap.ui.comp.smarttable.SmartTable, property: smartFilterId, value: true):

For every 10 rem of screen width, one column stays in the tabular layout. All others are moved to the pop-in area. The columns are moved to the pop-in area from right to left, so the column furthest to the right moves to the pop-in first.
Exception: The first two columns always stay in the tabular layout. This works best if the smart table uses the whole screen width. It might not work well if the smart table uses far less space.

Using the grid table, analytical table, or tree table

The smart table works only on desktop and tablets, but not on smartphones. It supports touch devices, but is not optimized for small screens.
If you use a smart table in this configuration, ensure that you implement a fallback solution for small screens. This fallback solution does not need to support all use cases. You could create a fallback by using a responsive table. However, a completely different solution, such as showing charts in a read-only case, might be more suitable.

Size S with responsive table

Size M with responsive table

Size L with responsive table

Size M with grid table

Size L with grid table

Layout

The title bar contains the title of the smart table, the item count, variant management, and the toolbar itself. All of these elements are optional.
The table area shows the corresponding table (responsive table, grid table, analytical table, or tree table).

Schematic visualization of the smart table

Components

The title bar consists of a toolbar.

This can be the standard toolbar or a custom toolbar. The standard toolbar can contain a title text with or without item count, variant management, view switch (switching the table to edit mode), an entry point for the P13n dialog, and an Export to Spreadsheet action.

If you require additional functionality, you can use an app-specific toolbar. All toolbar options provided by the smart table can also be added to the app-specific toolbar. (Aggregation: customToolbar)

The table area consists of any of the following tables: responsive table, grid table, analytical table, or tree table.

Standard toolbar with everything enabled

Standard toolbar just with title and item count

Behavior and Interaction

The behavior is generally inherited from the underlying table, toolbar, variant management, and P13n dialog (see the corresponding articles for details.) Note that the smart table provides limited options and not all settings of the underlying controls are available.

Table Level

Table Type

The smart table can encapsulate the responsive table, grid table, analytical table, or tree table. (sap.ui.comp.smarttable.SmartTable, property: tableType)

Automatic Rendering of the Table

The smart table automatically creates columns and renders all items based on the metadata of the underlying OData service (sap.ui.comp.smarttable.SmartTable, property: smartFilterId).

To be more flexible in the table layout, the smart table also offers app-specific column templates for some or all columns. In this case, app developers must provide the definition for the underlying table and for the corresponding (but not necessarily for all) columns in the XML view. For this, the app development team must provide the column keys of the overridden columns via custom data.

Additional columns can also be added. Columns that are defined in this way retain all the options of the underlying table. This is especially useful with the responsive table, which offers complete flexibility in content design. Any columns that are not defined by the app development team are still rendered automatically by the smart table.

No Data

If there is no data to show, the smart table renders default text. This text can be overwritten by the app development team (aggregation: NoData).

Initially Visible Columns

The smart table enables you to define which columns are initially shown. Here, initially means that these columns are shown when the app is first launched. All other columns are initially hidden (annotation: PresentationVariant/ LineItem, property: initiallyVisibleColumns).

Persistency

End users can show additional columns if table personalization is provided. In this case, column settings are persisted. On consecutive startups, the columns are shown with the same settings as last defined by the user (property: persistenceKey).

Removing Columns

The smart table always shows all columns from the OData model. In some cases, columns needs to be in the model but should not be available on the front end at all. Examples of this include:

A column is needed to provide an ID which is used for navigation purposes, but the front end should only display the corresponding text, not the ID.
The values of a column are needed to perform calculations, but only the results should be shown on the UI.

In these cases, you can define which columns should not be available at all on the UI. These columns are not shown and are not available in the P13n dialog. You can also do this for columns that are added manually in the XML view (annotation: sap:visible, value:false).

P13n/personalization dialog

Filter Settings

The “Show Field as Column” option for newly added filters is switched on by default.

Sorting and Filtering

The smart table allows you to add sort and filter settings for each column. These settings enable the corresponding pages in the P13n dialog. For the grid table, analytical table, and tree table, sorting and filtering are also enabled on the column header. (Annotations: sap:sortable and sap:filterable)

Column header menu of the grid table

Smart Table and Smart Filter Bar

The smart table can be linked to a smart filter bar. If linked, filter bar settings are automatically used on the smart table. (sap.ui.comp.smarttable,SmartTable, property:smartFIlterId)

Aggregation

If used with the analytical table, the smart table allows total sums of measure columns to be calculated. The totals are shown in the usual way:

As the last row of the analytical table.
As the last row of each group if the group is expanded.
On the group header of each group if the group is collapsed.

Aggregation settings are not persisted (annotation: sap:aggregation-role, value:measure).

The total count be hidden via the column header menu.

Aggregation entry in column header menu of the grid table

Column Width

A default column width is calculated for each column based on the data displayed in it. Important: end users cannot change the column width in the responsive table (annotations: MaxLength, Precision, Scale).

Column Header

A column header text can be specified for each column (annotation: sap:label).

Persistence

The smart table allows you to persist sort, group, and filter column settings (such as by hidden columns) as well as variants (sap.ui.comp.smarttable.SmartTable, Property:persistenceyKey).

Content

The smart table provides two options to create columns automatically:

The smart table is rendered in either read-only or edit mode. In this case, the smart table renders the controls as described below. This is the default way of rendering content (property: editable)
If users need to switch between read-only and edit mode at runtime, the smart table allows smart fields to be rendered instead. You should use this if the edit button is added to the toolbar of the smart table (aggregation: customData key: useSmartField).

For option 1, the following controls are used:

To show currency amounts, the smart table allows the amount and the currency code to be displayed in a single cell. For read-only mode, the currency control is used. For edit mode, a single input field is used, and the currency itself is shown next to the input field as non-editable text (annotation: sap:semantics, value: currency-code).
To show links that open a quick view, the smart table supports the smart link.
To show static text, the smart table uses an input field in edit mode, and a text in read-only mode.
To show dates, the smart table uses a date picker in edit mode, and a text in read-only mode (annotation: sap:display-format, value:Date).
To show decimal numbers, the smart table uses an input field in edit mode, and a text in read-only mode (Annotations:Precision, Scale).
The smart table also provides an object status and object identifier control. For more information, see object display components.
Pictures and microcharts, as well as rating indicators and progress bars are available.

Amount formatting

Link formatting

Date formatting

Value Help

The smart table supports value help in the following ways (annotation: ValueList):

Input fields can show a value help button. Triggering this button opens a value help dialog. Within this dialog, you can provide a search field (annotation:ValueList, property: SearchSupported).
You can restrict the number of characters for the input field. Use this if no ValueList annotation is provided (annotation:MaxLength).

Toolbar Level

Table Title

The smart table can provide a title for the table within the toolbar (sap.ui.comp.smarttable.SmartTable, Property:header).

Table title

Item Count

Next to the table title, an item count can be shown (sap.ui.comp.smarttable.SmartTable, Property:showRowCount).

Table title with item count

Edit

The table toolbar can contain a button for toggling the table between read-only and edit modes. If smart fields are used, the smart table handles both modes automatically (sap.ui.comp.smarttable.SmartTable, Property:editTogglable, aggregation: customData, key: useSmartField).

Edit button

View Settings

The table toolbar can contain a button for opening the P13n dialog. This dialog provides extensive sort, group, and filter settings. It also allows columns to be shown, hidden, or rearranged (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Settings button

Export to Spreadsheet

If the back end supports the export of data to spreadsheet, the table toolbar can contain a corresponding button. When this button is triggered, the corresponding file is created and the download starts automatically (sap.ui.comp.smarttable.SmartTable, Property:useExportToExcel).

Export to Spreadsheet button

Full Screen Mode

Applications can implement a maximize button to run the table in full screen (Property: showFullScreenButton).

Maximize button

Footer Toolbar Level

Buttons in the footer toolbar can be set to emphasized to give them a brighter appearance.

Guidelines

In general, the guidelines for the underlying table, toolbar, variant management, and P13n dialog also apply to the smart table (see the corresponding articles for details). However, because the smart table does not offer the complete flexibility of the underlying controls, there are certain differences.

Table Type

The responsive table is the standard table for SAP Fiori. Use the responsive table whenever possible. It is the most flexible table in terms of how its content is displayed, it is fully responsive, and it can handle up to 1,000 line items.

If you cannot use the responsive table, consider using the grid table instead. The grid table can handle a large number of line Items. Compared to the responsive table, however, it is more restricted content-wise (only certain controls can be used to show the data, and only one control per cell), and it does not run on smartphones. If you use the grid table, you need to provide a fallback solution for smartphones, for example, by using the responsive table.

The analytical table is similar to the grid table, but adds several grouping levels and offers total sums on measure columns. The analytical table can also handle a large number of line Items. Compared to the responsive table, however, it is more restricted content-wise (only certain controls can be used to show the data, and only one control per cell), and it does not run on smartphones. If you use the analytical table, you need to provide a fallback solution for smartphones, for example, by using the responsive table.

The tree table is the only table for displaying hierarchical data. Like the grid table, it can handle a large number of line items, although it is restricted content-wise (only certain controls can be used to show the data, and only one control per cell), and it does not run on smartphones. If you use the tree table, you need to provide a fallback solution for smartphones, for example, by using the responsive table.

For more information about the different table controls, see the corresponding articles.

Table Title, Item Count, and Variant Management

Always show the item count together with the table title, unless this is expected to cause performance problems.
If used with the responsive table and if more than 200 items are generally expected, do not show the item count. In this case, the smart table displays a More button to load additional rows. Using the item count together with the More button might lead to confusion (sap.ui.comp.smarttable.SmartTable, Property:showRowCount).

Even if variant management is easy to implement, use it only if it is really needed. The variant management saves the whole page, including filter settings and table layouts.

Empty Tables

Try not to display an empty table. If there is no way around this, provide instructions on how to fill the table with data (aggregatrion: noData).

Columns – Best Practices

Keep the number of initially shown columns to a minimum. Avoid the need to scroll horizontally on a tablet screen size in default delivery (annotation: PresentationVariant/ LineItem).

Keep the number of additional (initially hidden) columns to a minimum. You can use the P13n dialog to show/hide the columns. Select the columns offered in the P13n dialog carefully. Do not just show all columns available in the backend tables (annotation: sap:visible, value:false).

For the grid table, analytical table, and tree table, the column widths are calculated automatically if the corresponding OData annotations are provided (annotations: MaxLength, Precision, Scale).

In contrast, the responsive table uses the same width for all columns.

If used with the responsive table, enable the pop-in behavior (sap.ui.comp.smarttable.SmartTable, property: smartFilterId, value: true).

Show the most important column on the left and the least important on the right. This ensures that the most important columns stay in the tabular layout as long as possible. The most important columns are those that contain the following information:

The column that identifies the line item
The column that contains the key attribute

(Annotation: PresentationVariant/ LineItem, Property: initiallyVisibleColumns)

Email column in the pop-in area of the responsive table

Provide a column header text for each column. Do not truncate the column header text in default delivery (annotation: sap:label).

Column header text

Content Alignment and Formatting

The smart table automatically takes care of content alignment and formatting in standard use cases. For this, the OData metadata needs to provide the correct information about the data types, semantics of, and value help for the data.
(Annotations such as: sap:semantics, value: currency-code, edm types, Annotation: sap:display-format, value:Date, Annotation:Precision, Annotation: Scale, Annotation: ValueList, Annotation: ValueList:semantics, value:fixed-values)

Actions

To trigger actions on multiple items, use a mutliselection smart table. Do not offer action triggering on multiple items if the table is expected to have fewer than 10 items in most cases.
While the grid table, analytical table, and tree table are multiselectable by default within the smart table, the responsive table is single-selectable. The selection mode can be changed (XMLView).

The following actions can be shown on the standard toolbar of the smart table:

Edit
Toggles the table between edit and read-only mode. This only works if smart fields are used inside the smart table (sap.ui.comp.smarttable.SmartTable, Property:editTogglable, aggregation: customData, key: useSmartField).

View Settings
This button opens the P13n dialog. Note that the P13n dialog is quite complex. Neither the simpler view settings dialog nor the table personalization dialog can be used without the app development team developing the entire view settings handling (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Export to Spreadsheet
Only use this option if your end users typically export the data shown in the table in order to work with it in a spreadsheet application. This is usually the case if data is collected from several systems and analyzed in the spreadsheet application. This is not usually the case for worklists, attachment lists, lists with only a few items, shopping carts, or data that does not need to be analyzed. This option is only available if the corresponding back end supports exporting to spreadsheet (sap.ui.comp.smarttable.SmartTable, property: useExportToExcel).

If additional actions are needed, use a custom toolbar for the table. The smart table can also add integrated functionality such as a table title, item count, variant management, edit and view settings, and export to spreadsheet to the custom toolbar (aggregation: customToolbar).

For navigation to line item details:

If used with the responsive table, use the navigation mode of the responsive table.
If used with the grid table, analytical table, or tree table, use a link for the attribute that identifies the row. The user can click this link to trigger the navigation.

Clicking a table row can trigger drill-in navigation to a deeper level of the object, as well as cross-navigation to another SAP Fiori app or even to another system.

Inline Actions

Actions that belong to single items can be placed within the row. They can be displayed as text or icons. Make sure the icon communicates the function clearly enough. Otherwise, use a textual button.

Editable Content

The smart table can be editable or read-only (sap.ui.comp.smarttable.SmartTable, property: editable).

The smart table selects the corresponding editable controls automatically based on the data type, semantic annotations, and value list annotations (annotations such as: sap:semantics, value: currency-code, edm types, Annotation: sap:display-format, value:Date, Annotation:Precision, Annotation: Scale, Annotation: ValueList, Annotation: ValueList:semantics, value:fixed-values).

If an edit mode is needed, the controls are automatically switched from read-only controls (such as text) to editable controls (such as input field or date picker) if smart fields are used inside the smart table (sap.ui.comp.smarttable.SmartTable, Property:editTogglablea, aggregation: customData, key: useSmartField).

Only use this if you need to toggle between both modes. In any other case, show only the mode you need (read-only or edit), but do not offer the switch.

View Settings: Sort, Filter, Group, and Column Settings

If view settings are enabled on the smart table, a settings button is available on the table toolbar. This button opens the P13n dialog. Neither the simpler view settings dialog nor table personalization dialog can be used without extra effort (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

The P13n dialog always enables the user to show, hide, and rearrange columns. Alternatively, it can contain settings for sorting, grouping, and/or filtering (annotations: sap:sortable, sap:filterable)

If the smart table uses the grid table, analytical table, or tree table, sort, filter, and group settings are also available in the column header menu.

Offer view settings only if they are really needed. For example, these settings do not make sense if the table contains only a few items and just a few columns.

Note that the P13n dialog is quite complex. It is ideal for tables with a vast number of items, but is quite cumbersome for handling just a few hundred items. Therefore, show only the settings (sort, group, filter) you really need. For example, do not offer grouping if it does not support your use case well.

If filtering is a main use case, do not offer filtering in the P13n dialog. Use the filter bar instead (annotation: sap:filterable)

Be persistent: When the app is reopened, the smart table is shown with the same view settings as last defined by the user (sap.ui.comp.smarttable.SmartTable, property: persistenceKey).

Sort

The current sort state is displayed as follows:

Using the responsive table, there is no indication that the table is currently sorted.
Using the grid table, analytical table, or tree table, an icon in the column header of the last sorted column indicates that the table is sorted and the direction in which it is sorted.

In default delivery, sort items in a meaningful order by the row-identifying column (usually the first column in default delivery). For example, use an alphabetical order for text, a numeric order for numbers, and a chronological order for dates (annotations: sap:sortable, PresentationVariant – SortOrder).

Filter

The current filter state is displayed as follows:

Using the responsive table, there is no indication that the table is currently filtered. The filter info bar can be added with additional effort.
Using the grid table, analytical table, or tree table, filtering is displayed by an icon on the column header of each filtered column (annotation: sap:filterable).

Group

Group headers display the current group state and are shown automatically. The following text should be shown on the group header:

[Label of the grouped column]: [Grouping value]
This can be done by the smart table, but only if the raw data from the model can be used. In other cases, app development teams must format the group header text. For example, the raw data carries IDs, while the table displays the corresponding names, which are provided by another data source. In this case, app developers must provide the formatting for the group header texts.

Within the responsive table, the grouped column keeps its visibility to reduce confusion after the group settings have been changed. If visible, it stays in the tabular layout even if grouped.

If used with the analytical table, grouping is not offered on measures. Therefore, you can have aggregations or grouping for a specific column.

Reasonable grouping can be offered by default via the property GroupBy.

Responsive table grouped by country

Aggregate

If used with the analytical table, aggregation settings can be provided on measure columns. These settings are only available in the column header menu.
To display the current aggregation state, the total sum of the corresponding column is shown at the bottom of the table.
If items are grouped, an intermediate sum is shown per group:

At the bottom of each group if the group is expanded.
In the group header if the group is collapsed.

Aggregations are only available on measures, but not on objects or attributes. If aggregation is enabled for a column, this column cannot be grouped.

Avoid aggregations on the first three columns for the default delivery. When grouping is used together with aggregations, collapsing a group shows the aggregation on the group header. This conflicts with the group name.

Where appropriate, offer reasonable aggregation by default (annotation: sap:aggregation-role, value: measure).

Column Settings

Only offer column settings if you need more columns than a tablet screen can display at a time (usually more than five).

If sorting, grouping, and/or filtering are needed, column settings must also be shown (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Add, Remove, Rearrange Columns

Use the P13n dialog to add, remove, and rearrange columns.

When used with the grid table, analytical table, or tree table, columns can also be rearranged by dragging and dropping the column header (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Resize Columns

When used with the grid table, analytical table, or tree table, columns can be resized on the column header (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Freeze Columns

When used with the grid table, analytical table, or tree table, app developers must manually add the options for freezing columns to the column header menu if necessary. They can do this by declaring the corresponding table inside the smart table in the XML view, and by using the corresponding settings on this inner table.

Selecting Freeze on a column freezes all columns from the first one to the one on which Freeze is selected. The menu entry on this column changes from Freeze to Unfreeze.

Properties

The following properties are available on sap.ui.comp.smarttable.SmartTable:

The property: ignoreFields defines the columns that are not available on the UI – neither in the initial visible columns nor in the P13n dialog.
The property: requestAtLeastFields can be used for requesting additional technical columns.
The property: ignoreFromPersonalization removes columns from the P13n dialog.
The property: toolbarStyleClass is deprecated. Do not use it.
The property: enableCustomFilter allows the filter menu item in the column header menu to be exchanged.
The property: useOnlyOneSolidToolbar is deprecated. Do not use it.
The property: currentVariantId defines the currently used variant.
The property: enableAutoBinding fetches the data automatically as soon as the corresponding OData model is initialized and the smart table is created.
The property: tableBindingPath defines the path from which the data is fetched.

The following aggregations are available:

The aggregation: semanticObjectController is used to customize smart links inside the smart table.
The aggregation: noData provides a text in case the table contains no line items. For example, this can be the case if the table is filtered. The text should provide context-specific instructions on how to get data into the table.

Resources

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

Elements and Controls

Responsive Table (guidelines)
Grid Table (guidelines)
Analytical Table (guidelines)
Tree Table (guidelines)
Table Overview (guidelines)
Table Toolbar (guidelines)
Variant Management (guidelines)
P13n-Dialog (guidelines)

Implementation

Smart Table (SAPUI5 samples)
Smart Table (SAPUI5 API reference)
Smart Table (Developer Guide)
P13n-Dialog (SAPUI5 samples)
P13n-Dialog (SAPUI5 API reference)
Toolbar (SAPUI5 samples)

Currency

Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.

Usage

Use the currency control if:

You need to display amounts with different currencies in a vertical layout, such as in a table, list, or form, and it is important that the user is able to compare the amounts.

Do not use the currency control if:

You need to display amounts with the same currency in a table. Use an object number instead.
You need to display a number with a unit of measurement that is not a currency. Use an object number instead.
You need to display an amount in a structure other than a list, table, or form.

Responsiveness

The currency control supports amounts smaller than 100 trillion, which still fit on a smartphone screen in portrait mode. For larger amounts, the unit of measurement wraps to the next line, which makes it difficult to compare the amounts.

Components

The currency control consists of:

An amount, which is formatted automatically according to the user’s locale (using delimiter symbols for the decimal point and thousand separators) and to the currency set for this specific number (number of decimal places). Property: value.
A currency expressed as a three-letter code. Property: currency.

Examples of the currency control

Guidelines

When you display a unit of measurement, always show the corresponding three-letter code. (property: useSymbol)
Display amounts with a maximum of three decimal places. More than three simply increases the white space between other numbers and their units of measurement with no further benefit. Less than three does not work for all currencies. (property: maxPrecision)

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

Form (guidelines)
Table (guidelines)
Object Display Components (guidelines)

Implementation

No links

Smart Table

The smart table is a wrapper around existing tables, and can be used together with the responsive table, grid table, analytical table, or tree table.

The smart table creates columns automatically based on the underlying OData service plus corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, and export to spreadsheet.

Everything that can be done using the smart table can also be achieved using the responsive table, grid table, analytical table, or tree table directly, but with more development effort. Therefore, the main purpose of the smart table is to reduce development effort. However, this comes at the expense of decreased flexibility.

Usage

Use the smart table if:

Data is fed into the table through OData services.
You need a simple table with limited flexibility to display its content. In this case, the smart table reduces development effort.
You need a table in which some columns provide flexible content. In this case, use the smart table together with a responsive table, and provide app-specific column definitions for these columns.

Do not use the smart table if:

You create your own UI coding, whereby the data is not fed through OData services. In this case, use the underlying table control directly.
The main use case involves selecting one item from very few items, with no additional details. In this case, a select or combo box might be more suitable.
The main use case involves selecting one item from several items, with only a few details per item. In this case, a list might be more suitable. Pay attention to the layout of the list item to provide a pleasant appearance (see, for example, the master list and the feed list item).
The table is displayed together with a chart inside a chart container. The smart table is not designed to work inside an existing chart container. In this case, use the underlying table control directly.
You need an overview of a large amount of data. In this case, use charts.
You just need it for layout reasons. In this case, use a layout container, such as the grid layout, instead.
You need read-only or editable field value pairs. In this case, use a form instead. Tables are not optimized for form-like input navigation.

Responsiveness

The responsiveness of the smart table depends on the encapsulated table. The table toolbar uses the overflow mechanism for adapting to the screen width.

Using the responsive table

The smart table offers a generic responsive behavior (sap.ui.comp.smarttable.SmartTable, property: smartFilterId, value: true):

For every 10 rem of screen width, one column stays in the tabular layout. All others are moved to the pop-in area. The columns are moved to the pop-in area from right to left, so the column furthest to the right moves to the pop-in first.
Exception: The first two columns always stay in the tabular layout. This works best if the smart table uses the whole screen width. It might not work well if the smart table uses far less space.

Using the grid table, analytical table, or tree table

The smart table works only on desktop and tablets, but not on smartphones. It supports touch devices, but is not optimized for small screens.
If you use a smart table in this configuration, ensure that you implement a fallback solution for small screens. This fallback solution does not need to support all use cases. You could create a fallback by using a responsive table. However, a completely different solution, such as showing charts in a read-only case, might be more suitable.

Size S with responsive table

Size M with responsive table

Size L with responsive table

Size M with grid table

Size L with grid table

Layout

The title bar contains the title of the smart table, the item count, variant management, and the toolbar itself. All of these elements are optional.
The table area shows the corresponding table (responsive table, grid table, analytical table, or tree table).

Schematic visualization of the smart table

Components

The title bar consists of a toolbar.

This can be the standard toolbar or a custom toolbar. The standard toolbar can contain a title text with or without item count, variant management, view switch (switching the table to edit mode), an entry point for the P13n dialog, and an Export to Spreadsheet action.

If you require additional functionality, you can use an app-specific toolbar. All toolbar options provided by the smart table can also be added to the app-specific toolbar. (Aggregation: customToolbar)

The table area consists of any of the following tables: responsive table, grid table, analytical table, or tree table.

Standard toolbar with everything enabled

Standard toolbar just with title and item count

Behavior and Interaction

The behavior is generally inherited from the underlying table, toolbar, variant management, and P13n dialog (see the corresponding articles for details.) Note that the smart table provides limited options and not all settings of the underlying controls are available.

Table Level

Table Type

The smart table can encapsulate the responsive table, grid table, analytical table, or tree table. (sap.ui.comp.smarttable.SmartTable, property: tableType)

Automatic Rendering of the Table

The smart table automatically creates columns and renders all items based on the metadata of the underlying OData service (sap.ui.comp.smarttable.SmartTable, property: smartFilterId).

To be more flexible in the table layout, the smart table also offers app-specific column templates for some or all columns. In this case, app developers must provide the definition for the underlying table and for the corresponding (but not necessarily for all) columns in the XML view. For this, the app development team must provide the column keys of the overridden columns via custom data.

Additional columns can also be added. Columns that are defined in this way retain all the options of the underlying table. This is especially useful with the responsive table, which offers complete flexibility in content design. Any columns that are not defined by the app development team are still rendered automatically by the smart table.

No Data

If there is no data to show, the smart table renders default text. This text can be overwritten by the app development team (aggregation: NoData).

Initially Visible Columns

The smart table enables you to define which columns are initially shown. Here, initially means that these columns are shown when the app is first launched. All other columns are initially hidden (annotation: PresentationVariant/ LineItem, property: initiallyVisibleColumns).

Persistency

End users can show additional columns if table personalization is provided. In this case, column settings are persisted. On consecutive startups, the columns are shown with the same settings as last defined by the user (property: persistenceKey).

Removing Columns

The smart table always shows all columns from the OData model. In some cases, columns needs to be in the model but should not be available on the front end at all. Examples of this include:

A column is needed to provide an ID which is used for navigation purposes, but the front end should only display the corresponding text, not the ID.
The values of a column are needed to perform calculations, but only the results should be shown on the UI.

In these cases, you can define which columns should not be available at all on the UI. These columns are not shown and are not available in the P13n dialog. You can also do this for columns that are added manually in the XML view (annotation: sap:visible, value:false).

P13n/personalization dialog

Filter Settings

The “Show Field as Column” option for newly added filters is switched on by default.

Sorting and Filtering

The smart table allows you to add sort and filter settings for each column. These settings enable the corresponding pages in the P13n dialog. For the grid table, analytical table, and tree table, sorting and filtering are also enabled on the column header. (Annotations: sap:sortable and sap:filterable)

Column header menu of the grid table

Smart Table and Smart Filter Bar

The smart table can be linked to a smart filter bar. If linked, filter bar settings are automatically used on the smart table. (sap.ui.comp.smarttable,SmartTable, property:smartFIlterId)

Aggregation

If used with the analytical table, the smart table allows total sums of measure columns to be calculated. The totals are shown in the usual way:

As the last row of the analytical table.
As the last row of each group if the group is expanded.
On the group header of each group if the group is collapsed.

Aggregation settings are not persisted (annotation: sap:aggregation-role, value:measure).

The total count be hidden via the column header menu.

Aggregation entry in column header menu of the grid table

Column Width

A default column width is calculated for each column based on the data displayed in it. Important: end users cannot change the column width in the responsive table (annotations: MaxLength, Precision, Scale).

Column Header

A column header text can be specified for each column (annotation: sap:label).

Persistence

The smart table allows you to persist sort, group, and filter column settings (such as by hidden columns) as well as variants (sap.ui.comp.smarttable.SmartTable, Property:persistenceyKey).

Content

The smart table provides two options to create columns automatically:

The smart table is rendered in either read-only or edit mode. In this case, the smart table renders the controls as described below. This is the default way of rendering content (property: editable)
If users need to switch between read-only and edit mode at runtime, the smart table allows smart fields to be rendered instead. You should use this if the edit button is added to the toolbar of the smart table (aggregation: customData key: useSmartField).

For option 1, the following controls are used:

To show currency amounts, the smart table allows the amount and the currency code to be displayed in a single cell. For read-only mode, the currency control is used. For edit mode, a single input field is used, and the currency itself is shown next to the input field as non-editable text (annotation: sap:semantics, value: currency-code).
To show links that open a quick view, the smart table supports the smart link.
To show static text, the smart table uses an input field in edit mode, and a text in read-only mode.
To show dates, the smart table uses a date picker in edit mode, and a text in read-only mode (annotation: sap:display-format, value:Date).
To show decimal numbers, the smart table uses an input field in edit mode, and a text in read-only mode (Annotations:Precision, Scale).
The smart table also provides an object status and object identifier control. For more information, see object display components.
Pictures and microcharts, as well as rating indicators and progress bars are available.

Amount formatting

Link formatting

Date formatting

Value Help

The smart table supports value help in the following ways (annotation: ValueList):

Input fields can show a value help button. Triggering this button opens a value help dialog. Within this dialog, you can provide a search field (annotation:ValueList, property: SearchSupported).
You can restrict the number of characters for the input field. Use this if no ValueList annotation is provided (annotation:MaxLength).

Toolbar Level

Table Title

The smart table can provide a title for the table within the toolbar (sap.ui.comp.smarttable.SmartTable, Property:header).

Table title

Item Count

Next to the table title, an item count can be shown (sap.ui.comp.smarttable.SmartTable, Property:showRowCount).

Table title with item count

Edit

The table toolbar can contain a button for toggling the table between read-only and edit modes. If smart fields are used, the smart table handles both modes automatically (sap.ui.comp.smarttable.SmartTable, Property:editTogglable, aggregation: customData, key: useSmartField).

Edit button

View Settings

The table toolbar can contain a button for opening the P13n dialog. This dialog provides extensive sort, group, and filter settings. It also allows columns to be shown, hidden, or rearranged (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Settings button

Export to Spreadsheet

If the back end supports the export of data to spreadsheet, the table toolbar can contain a corresponding button. When this button is triggered, the corresponding file is created and the download starts automatically (sap.ui.comp.smarttable.SmartTable, Property:useExportToExcel).

Export to Spreadsheet button

Full Screen Mode

Applications can implement a maximize button to run the table in full screen (Property: showFullScreenButton).

Maximize button

Footer Toolbar Level

Buttons in the footer toolbar can be set to emphasized to give them a brighter appearance.

Guidelines

In general, the guidelines for the underlying table, toolbar, variant management, and P13n dialog also apply to the smart table (see the corresponding articles for details). However, because the smart table does not offer the complete flexibility of the underlying controls, there are certain differences.

Table Type

The responsive table is the standard table for SAP Fiori. Use the responsive table whenever possible. It is the most flexible table in terms of how its content is displayed, it is fully responsive, and it can handle up to 1,000 line items.

If you cannot use the responsive table, consider using the grid table instead. The grid table can handle a large number of line Items. Compared to the responsive table, however, it is more restricted content-wise (only certain controls can be used to show the data, and only one control per cell), and it does not run on smartphones. If you use the grid table, you need to provide a fallback solution for smartphones, for example, by using the responsive table.

The analytical table is similar to the grid table, but adds several grouping levels and offers total sums on measure columns. The analytical table can also handle a large number of line Items. Compared to the responsive table, however, it is more restricted content-wise (only certain controls can be used to show the data, and only one control per cell), and it does not run on smartphones. If you use the analytical table, you need to provide a fallback solution for smartphones, for example, by using the responsive table.

The tree table is the only table for displaying hierarchical data. Like the grid table, it can handle a large number of line items, although it is restricted content-wise (only certain controls can be used to show the data, and only one control per cell), and it does not run on smartphones. If you use the tree table, you need to provide a fallback solution for smartphones, for example, by using the responsive table.

For more information about the different table controls, see the corresponding articles.

Table Title, Item Count, and Variant Management

Always show the item count together with the table title, unless this is expected to cause performance problems.
If used with the responsive table and if more than 200 items are generally expected, do not show the item count. In this case, the smart table displays a More button to load additional rows. Using the item count together with the More button might lead to confusion (sap.ui.comp.smarttable.SmartTable, Property:showRowCount).

Even if variant management is easy to implement, use it only if it is really needed. The variant management saves the whole page, including filter settings and table layouts.

Empty Tables

Try not to display an empty table. If there is no way around this, provide instructions on how to fill the table with data (aggregatrion: noData).

Columns – Best Practices

Keep the number of initially shown columns to a minimum. Avoid the need to scroll horizontally on a tablet screen size in default delivery (annotation: PresentationVariant/ LineItem).

Keep the number of additional (initially hidden) columns to a minimum. You can use the P13n dialog to show/hide the columns. Select the columns offered in the P13n dialog carefully. Do not just show all columns available in the backend tables (annotation: sap:visible, value:false).

For the grid table, analytical table, and tree table, the column widths are calculated automatically if the corresponding OData annotations are provided (annotations: MaxLength, Precision, Scale).

In contrast, the responsive table uses the same width for all columns.

If used with the responsive table, enable the pop-in behavior (sap.ui.comp.smarttable.SmartTable, property: smartFilterId, value: true).

Show the most important column on the left and the least important on the right. This ensures that the most important columns stay in the tabular layout as long as possible. The most important columns are those that contain the following information:

The column that identifies the line item
The column that contains the key attribute

(Annotation: PresentationVariant/ LineItem, Property: initiallyVisibleColumns)

Email column in the pop-in area of the responsive table

Provide a column header text for each column. Do not truncate the column header text in default delivery (annotation: sap:label).

Column header text

Content Alignment and Formatting

The smart table automatically takes care of content alignment and formatting in standard use cases. For this, the OData metadata needs to provide the correct information about the data types, semantics of, and value help for the data.
(Annotations such as: sap:semantics, value: currency-code, edm types, Annotation: sap:display-format, value:Date, Annotation:Precision, Annotation: Scale, Annotation: ValueList, Annotation: ValueList:semantics, value:fixed-values)

Actions

To trigger actions on multiple items, use a mutliselection smart table. Do not offer action triggering on multiple items if the table is expected to have fewer than 10 items in most cases.
While the grid table, analytical table, and tree table are multiselectable by default within the smart table, the responsive table is single-selectable. The selection mode can be changed (XMLView).

The following actions can be shown on the standard toolbar of the smart table:

Edit
Toggles the table between edit and read-only mode. This only works if smart fields are used inside the smart table (sap.ui.comp.smarttable.SmartTable, Property:editTogglable, aggregation: customData, key: useSmartField).

View Settings
This button opens the P13n dialog. Note that the P13n dialog is quite complex. Neither the simpler view settings dialog nor the table personalization dialog can be used without the app development team developing the entire view settings handling (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Export to Spreadsheet
Only use this option if your end users typically export the data shown in the table in order to work with it in a spreadsheet application. This is usually the case if data is collected from several systems and analyzed in the spreadsheet application. This is not usually the case for worklists, attachment lists, lists with only a few items, shopping carts, or data that does not need to be analyzed. This option is only available if the corresponding back end supports exporting to spreadsheet (sap.ui.comp.smarttable.SmartTable, property: useExportToExcel).

If additional actions are needed, use a custom toolbar for the table. The smart table can also add integrated functionality such as a table title, item count, variant management, edit and view settings, and export to spreadsheet to the custom toolbar (aggregation: customToolbar).

For navigation to line item details:

If used with the responsive table, use the navigation mode of the responsive table.
If used with the grid table, analytical table, or tree table, use a link for the attribute that identifies the row. The user can click this link to trigger the navigation.

Clicking a table row can trigger drill-in navigation to a deeper level of the object, as well as cross-navigation to another SAP Fiori app or even to another system.

Inline Actions

Actions that belong to single items can be placed within the row. They can be displayed as text or icons. Make sure the icon communicates the function clearly enough. Otherwise, use a textual button.

Editable Content

The smart table can be editable or read-only (sap.ui.comp.smarttable.SmartTable, property: editable).

The smart table selects the corresponding editable controls automatically based on the data type, semantic annotations, and value list annotations (annotations such as: sap:semantics, value: currency-code, edm types, Annotation: sap:display-format, value:Date, Annotation:Precision, Annotation: Scale, Annotation: ValueList, Annotation: ValueList:semantics, value:fixed-values).

If an edit mode is needed, the controls are automatically switched from read-only controls (such as text) to editable controls (such as input field or date picker) if smart fields are used inside the smart table (sap.ui.comp.smarttable.SmartTable, Property:editTogglablea, aggregation: customData, key: useSmartField).

Only use this if you need to toggle between both modes. In any other case, show only the mode you need (read-only or edit), but do not offer the switch.

View Settings: Sort, Filter, Group, and Column Settings

If view settings are enabled on the smart table, a settings button is available on the table toolbar. This button opens the P13n dialog. Neither the simpler view settings dialog nor table personalization dialog can be used without extra effort (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

The P13n dialog always enables the user to show, hide, and rearrange columns. Alternatively, it can contain settings for sorting, grouping, and/or filtering (annotations: sap:sortable, sap:filterable)

If the smart table uses the grid table, analytical table, or tree table, sort, filter, and group settings are also available in the column header menu.

Offer view settings only if they are really needed. For example, these settings do not make sense if the table contains only a few items and just a few columns.

Note that the P13n dialog is quite complex. It is ideal for tables with a vast number of items, but is quite cumbersome for handling just a few hundred items. Therefore, show only the settings (sort, group, filter) you really need. For example, do not offer grouping if it does not support your use case well.

If filtering is a main use case, do not offer filtering in the P13n dialog. Use the filter bar instead (annotation: sap:filterable)

Be persistent: When the app is reopened, the smart table is shown with the same view settings as last defined by the user (sap.ui.comp.smarttable.SmartTable, property: persistenceKey).

Sort

The current sort state is displayed as follows:

Using the responsive table, there is no indication that the table is currently sorted.
Using the grid table, analytical table, or tree table, an icon in the column header of the last sorted column indicates that the table is sorted and the direction in which it is sorted.

In default delivery, sort items in a meaningful order by the row-identifying column (usually the first column in default delivery). For example, use an alphabetical order for text, a numeric order for numbers, and a chronological order for dates (annotations: sap:sortable, PresentationVariant – SortOrder).

Filter

The current filter state is displayed as follows:

Using the responsive table, there is no indication that the table is currently filtered. The filter info bar can be added with additional effort.
Using the grid table, analytical table, or tree table, filtering is displayed by an icon on the column header of each filtered column (annotation: sap:filterable).

Group

To display the current group state, group headers are shown automatically. The following text should be shown on the group header:
[Label of the grouped column]: [Grouping value]
This can be done by the smart table, but only if the raw data from the model can be used. In other cases, app development teams must format the group header text. For example, the raw data carries IDs, while the table displays the corresponding names, which are provided by another data source. In this case, app developers must provide the formatting for the group header texts.

Within the responsive table, the grouped column keeps its visibility to reduce confusion after the group settings have been changed. If visible, it stays in the tabular layout even if grouped.

If used with the analytical table, grouping is not offered on measures. Therefore, you can have aggregations or grouping on a specific column.

If appropriate, offer reasonable grouping by default.

Responsive table grouped by country

Aggregate

If used with the analytical table, aggregation settings can be provided on measure columns. These settings are only available in the column header menu.
To display the current aggregation state, the total sum of the corresponding column is shown at the bottom of the table.
If items are grouped, an intermediate sum is shown per group:

At the bottom of each group if the group is expanded.
In the group header if the group is collapsed.

Aggregations are only available on measures, but not on objects or attributes. If aggregation is enabled for a column, this column cannot be grouped.

Avoid aggregations on the first three columns for the default delivery. When grouping is used together with aggregations, collapsing a group shows the aggregation on the group header. This conflicts with the group name.

Where appropriate, offer reasonable aggregation by default (annotation: sap:aggregation-role, value: measure).

Column Settings

Only offer column settings if you need more columns than a tablet screen can display at a time (usually more than five).

If sorting, grouping, and/or filtering are needed, column settings must also be shown (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Add, Remove, Rearrange Columns

Use the P13n dialog to add, remove, and rearrange columns.

When used with the grid table, analytical table, or tree table, columns can also be rearranged by dragging and dropping the column header (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Resize Columns

When used with the grid table, analytical table, or tree table, columns can be resized on the column header (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Freeze Columns

When used with the grid table, analytical table, or tree table, app developers must manually add the options for freezing columns to the column header menu if necessary. They can do this by declaring the corresponding table inside the smart table in the XML view, and by using the corresponding settings on this inner table.

Selecting Freeze on a column freezes all columns from the first one to the one on which Freeze is selected. The menu entry on this column changes from Freeze to Unfreeze.

Properties

The following properties are available on sap.ui.comp.smarttable.SmartTable:

The property: ignoreFields defines the columns that are not available on the UI – neither in the initial visible columns nor in the P13n dialog.
The property: requestAtLeastFields can be used for requesting additional technical columns.
The property: ignoreFromPersonalization removes columns from the P13n dialog.
The property: toolbarStyleClass is deprecated. Do not use it.
The property: enableCustomFilter allows the filter menu item in the column header menu to be exchanged.
The property: useOnlyOneSolidToolbar is deprecated. Do not use it.
The property: currentVariantId defines the currently used variant.
The property: enableAutoBinding fetches the data automatically as soon as the corresponding OData model is initialized and the smart table is created.
The property: tableBindingPath defines the path from which the data is fetched.

The following aggregations are available:

The aggregation: semanticObjectController is used to customize smart links inside the smart table.
The aggregation: noData provides a text in case the table contains no line items. For example, this can be the case if the table is filtered. The text should provide context-specific instructions on how to get data into the table.

Resources

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

Elements and Controls

Responsive Table (guidelines)
Grid Table (guidelines)
Analytical Table (guidelines)
Tree Table (guidelines)
Table Overview (guidelines)
Table Toolbar (guidelines)
Variant Management (guidelines)
P13n-Dialog (guidelines)

Implementation

Smart Table (SAPUI5 samples)
Smart Table (SAPUI5 API reference)
Smart Table (Developer Guide)
P13n-Dialog (SAPUI5 samples)
P13n-Dialog (SAPUI5 API reference)
Toolbar (SAPUI5 samples)

Smart Table

The smart table is a wrapper around existing tables, and can be used together with the responsive table, grid table, analytical table, or tree table.

The smart table creates columns automatically based on the underlying OData service plus corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, and export to spreadsheet.

Everything that can be done using the smart table can also be achieved using the responsive table, grid table, analytical table, or tree table directly, but with more development effort. Therefore, the main purpose of the smart table is to reduce development effort. However, this comes at the expense of decreased flexibility.

Usage

Use the smart table if:

Data is fed into the table through OData services.
You need a simple table with limited flexibility to display its content. In this case, the smart table reduces development effort.
You need a table in which some columns provide flexible content. In this case, use the smart table together with a responsive table, and provide app-specific column definitions for these columns.

Do not use the smart table if:

You create your own UI coding, whereby the data is not fed through OData services. In this case, use the underlying table control directly.
The main use case involves selecting one item from very few items, with no additional details. In this case, a select or combo box might be more suitable.
The main use case involves selecting one item from several items, with only a few details per item. In this case, a list might be more suitable. Pay attention to the layout of the list item to provide a pleasant appearance (see, for example, the master list and the feed list item).
The table is displayed together with a chart inside a chart container. The smart table is not designed to work inside an existing chart container. In this case, use the underlying table control directly.
You need an overview of a large amount of data. In this case, use charts.
You just need it for layout reasons. In this case, use a layout container, such as the grid layout, instead.
You need read-only or editable field value pairs. In this case, use a form instead. Tables are not optimized for form-like input navigation.

Responsiveness

The responsiveness of the smart table depends on the encapsulated table. The table toolbar uses the overflow mechanism for adapting to the screen width.

Using the responsive table

The smart table offers a generic responsive behavior (sap.ui.comp.smarttable.SmartTable, property: smartFilterId, value: true):

For every 10 rem of screen width, one column stays in the tabular layout. All others are moved to the pop-in area. The columns are moved to the pop-in area from right to left, so the column furthest to the right moves to the pop-in first.
Exception: The first two columns always stay in the tabular layout. This works best if the smart table uses the whole screen width. It might not work well if the smart table uses far less space.

Using the grid table, analytical table, or tree table

The smart table works only on desktop and tablets, but not on smartphones. It supports touch devices, but is not optimized for small screens.
If you use a smart table in this configuration, ensure that you implement a fallback solution for small screens. This fallback solution does not need to support all use cases. You could create a fallback by using a responsive table. However, a completely different solution, such as showing charts in a read-only case, might be more suitable.

Size S with responsive table

Size M with responsive table

Size M with grid table

Size L with grid table

Layout

The title bar contains the title of the smart table, the item count, variant management, and the toolbar itself. All of these elements are optional.
The table area shows the corresponding table (responsive table, grid table, analytical table, or tree table).

Schematic visualization of the smart table

Components

The title bar consists of a toolbar.

This can be the standard toolbar or a custom toolbar. The standard toolbar can contain a title text with or without item count, variant management, view switch (switching the table to edit mode), an entry point for the P13n dialog, and an Export to Spreadsheet action.

If you require additional functionality, you can use an app-specific toolbar. All toolbar options provided by the smart table can also be added to the app-specific toolbar. (Aggregation: customToolbar)

The table area consists of any of the following tables: responsive table, grid table, analytical table, or tree table.

Standard toolbar with everything enabled

Standard toolbar just with title and item count

Behavior and Interaction

The behavior is generally inherited from the underlying table, toolbar, variant management, and P13n dialog (see the corresponding articles for details.) Note that the smart table provides limited options and not all settings of the underlying controls are available.

Table Level

Table Type

The smart table can encapsulate the responsive table, grid table, analytical table, or tree table. (sap.ui.comp.smarttable.SmartTable, property: tableType)

Automatic Rendering of the Table

The smart table automatically creates columns and renders all items based on the metadata of the underlying OData service (sap.ui.comp.smarttable.SmartTable, property: smartFilterId).

To be more flexible in the table layout, the smart table also offers app-specific column templates for some or all columns. In this case, app developers must provide the definition for the underlying table and for the corresponding (but not necessarily for all) columns in the XML view. For this, the app development team must provide the column keys of the overridden columns via custom data.

Additional columns can also be added. Columns that are defined in this way retain all the options of the underlying table. This is especially useful with the responsive table, which offers complete flexibility in content design. Any columns that are not defined by the app development team are still rendered automatically by the smart table.

No Data

If there is no data to show, the smart table renders default text. This text can be overwritten by the app development team (aggregation: NoData).

Initially Visible Columns

The smart table enables you to define which columns are initially shown. Here, initially means that these columns are shown when the app is first launched. All other columns are initially hidden (annotation: PresentationVariant/ LineItem, property: initiallyVisibleColumns).

Persistency

End users can show additional columns if table personalization is provided. In this case, column settings are persisted. On consecutive startups, the columns are shown with the same settings as last defined by the user (property: persistenceKey).

Removing Columns

The smart table always shows all columns from the OData model. In some cases, columns needs to be in the model but should not be available on the front end at all. Examples of this include:

A column is needed to provide an ID which is used for navigation purposes, but the front end should only display the corresponding text, not the ID.
The values of a column are needed to perform calculations, but only the results should be shown on the UI.

In these cases, you can define which columns should not be available at all on the UI. These columns are not shown and are not available in the P13n dialog. You can also do this for columns that are added manually in the XML view (annotation: sap:visible, value:false).

P13n dialog

Filter Settings

The “Show Field as Column” option for newly added filters is switched on by default.

Sorting and Filtering

The smart table allows you to add sort and filter settings for each column. These settings enable the corresponding pages in the P13n dialog. For the grid table, analytical table, and tree table, sorting and filtering are also enabled on the column header. (Annotations: sap:sortable and sap:filterable)

Column header menu of the grid table

Smart Table and Smart Filter Bar

The smart table can be linked to a smart filter bar. If linked, filter bar settings are automatically used on the smart table. (sap.ui.comp.smarttable,SmartTable, property:smartFIlterId)

Aggregation

If used with the analytical table, the smart table allows total sums of measure columns to be calculated. The totals are shown in the usual way:

As the last row of the analytical table.
As the last row of each group if the group is expanded.
On the group header of each group if the group is collapsed.

Aggregation settings are not persisted (annotation: sap:aggregation-role, value:measure).

The total count be hidden via the column header menu.

Aggregation entry in column header menu of the grid table

Column Width

A default column width is calculated for each column based on the data displayed in it. Important: end users cannot change the column width in the responsive table (annotations: MaxLength, Precision, Scale).

Column Header

A column header text can be specified for each column (annotation: sap:label).

Persistence

The smart table allows you to persist sort, group, and filter column settings (such as by hidden columns) as well as variants (sap.ui.comp.smarttable.SmartTable, Property:persistenceyKey).

Content

The smart table provides two options to create columns automatically:

The smart table is rendered in either read-only or edit mode. In this case, the smart table renders the controls as described below. This is the default way of rendering content (property: editable)
If users need to switch between read-only and edit mode at runtime, the smart table allows smart fields to be rendered instead. You should use this if the edit button is added to the toolbar of the smart table (aggregation: customData key: useSmartField).

For option 1, the following controls are used:

To show currency amounts, the smart table allows the amount and the currency code to be displayed in a single cell. For read-only mode, the currency control is used. For edit mode, a single input field is used, and the currency itself is shown next to the input field as non-editable text (annotation: sap:semantics, value: currency-code).
To show links that open a quick view, the smart table supports the smart link.
To show static text, the smart table uses an input field in edit mode, and a text in read-only mode.
To show dates, the smart table uses a date picker in edit mode, and a text in read-only mode (annotation: sap:display-format, value:Date).
To show decimal numbers, the smart table uses an input field in edit mode, and a text in read-only mode (Annotations:Precision, Scale).
The smart table also provides an object status and object identifier control. For more information, see object display components.
Pictures and microcharts, as well as rating indicators and progress bars are available.

Amount formatting

Link formatting

Date formatting

Value Help

The smart table supports value help in the following ways (annotation: ValueList):

Input fields can show a value help button. Triggering this button opens a value help dialog. Within this dialog, you can provide a search field (annotation:ValueList, property: SearchSupported).
You can restrict the number of characters for the input field. Use this if no ValueList annotation is provided (annotation:MaxLength).

Toolbar Level

Table Title

The smart table can provide a title for the table within the toolbar (sap.ui.comp.smarttable.SmartTable, Property:header).

Table title

Item Count

Next to the table title, an item count can be shown (sap.ui.comp.smarttable.SmartTable, Property:showRowCount).

Table title with item count

Edit

The table toolbar can contain a button for toggling the table between read-only and edit modes. If smart fields are used, the smart table handles both modes automatically (sap.ui.comp.smarttable.SmartTable, Property:editTogglable, aggregation: customData, key: useSmartField).

Edit button

View Settings

The table toolbar can contain a button for opening the P13n dialog. This dialog provides extensive sort, group, and filter settings. It also allows columns to be shown, hidden, or rearranged (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Settings button

Export to Spreadsheet

If the back end supports the export of data to spreadsheet, the table toolbar can contain a corresponding button. When this button is triggered, the corresponding file is created and the download starts automatically (sap.ui.comp.smarttable.SmartTable, Property:useExportToExcel).

Export to Spreadsheet button

Full Screen Mode

Applications can implement a maximize button to run the table in full screen (Property: showFullScreenButton).

Maximize button

Footer Toolbar Level

Buttons in the footer toolbar can be set to emphasized to give them a brighter appearance.

Guidelines

In general, the guidelines for the underlying table, toolbar, variant management, and P13n dialog also apply to the smart table (see the corresponding articles for details). However, because the smart table does not offer the complete flexibility of the underlying controls, there are certain differences.

Table Type

The responsive table is the standard table for SAP Fiori. Use the responsive table whenever possible. It is the most flexible table in terms of how its content is displayed, it is fully responsive, and it can handle up to 1,000 line items.

If you cannot use the responsive table, consider using the grid table instead. The grid table can handle a large number of line Items. Compared to the responsive table, however, it is more restricted content-wise (only certain controls can be used to show the data, and only one control per cell), and it does not run on smartphones. If you use the grid table, you need to provide a fallback solution for smartphones, for example, by using the responsive table.

The analytical table is similar to the grid table, but adds several grouping levels and offers total sums on measure columns. The analytical table can also handle a large number of line Items. Compared to the responsive table, however, it is more restricted content-wise (only certain controls can be used to show the data, and only one control per cell), and it does not run on smartphones. If you use the analytical table, you need to provide a fallback solution for smartphones, for example, by using the responsive table.

The tree table is the only table for displaying hierarchical data. Like the grid table, it can handle a large number of line items, although it is restricted content-wise (only certain controls can be used to show the data, and only one control per cell), and it does not run on smartphones. If you use the tree table, you need to provide a fallback solution for smartphones, for example, by using the responsive table.

For more information about the different table controls, see the corresponding articles.

Table Title, Item Count, and Variant Management

Always show the item count together with the table title, unless this is expected to cause performance problems.
If used with the responsive table and if more than 200 items are generally expected, do not show the item count. In this case, the smart table displays a More button to load additional rows. Using the item count together with the More button might lead to confusion (sap.ui.comp.smarttable.SmartTable, Property:showRowCount).

Even if variant management is easy to implement, use it only if it is really needed. The variant management saves the whole page, including filter settings and table layouts.

Empty Tables

Try not to display an empty table. If there is no way around this, provide instructions on how to fill the table with data (aggregatrion: noData).

Columns – Best Practices

Keep the number of initially shown columns to a minimum. Avoid the need to scroll horizontally on a tablet screen size in default delivery (annotation: PresentationVariant/ LineItem).

Keep the number of additional (initially hidden) columns to a minimum. You can use the P13n dialog to show/hide the columns. Select the columns offered in the P13n dialog carefully. Do not just show all columns available in the backend tables (annotation: sap:visible, value:false).

For the grid table, analytical table, and tree table, the column widths are calculated automatically if the corresponding OData annotations are provided (annotations: MaxLength, Precision, Scale).

In contrast, the responsive table uses the same width for all columns.

If used with the responsive table, enable the pop-in behavior
(sap.ui.comp.smarttable.SmartTable, property: smartFilterId, value: true).

Show the most important column on the left and the least important on the right. This ensures that the most important columns stay in the tabular layout as long as possible. The most important columns are those that contain the following information:

The column that identifies the line item
The column that contains the key attribute

(Annotation: PresentationVariant/ LineItem, Property: initiallyVisibleColumns)

Email column in the pop-in area of the responsive table

Provide a column header text for each column. Do not truncate the column header text in default delivery (annotation: sap:label).

Column header text

Content Alignment and Formatting

The smart table automatically takes care of content alignment and formatting in standard use cases. For this, the OData metadata needs to provide the correct information about the data types, semantics of, and value help for the data.
(Annotations such as: sap:semantics, value: currency-code, edm types, Annotation: sap:display-format, value:Date, Annotation:Precision, Annotation: Scale, Annotation: ValueList, Annotation: ValueList:semantics, value:fixed-values)

Actions

To trigger actions on multiple items, use a mutliselection smart table. Do not offer action triggering on multiple items if the table is expected to have fewer than 10 items in most cases.
While the grid table, analytical table, and tree table are multiselectable by default within the smart table, the responsive table is single-selectable. The selection mode can be changed (XMLView).

The following actions can be shown on the standard toolbar of the smart table:

Edit
Toggles the table between edit and read-only mode. This only works if smart fields are used inside the smart table (sap.ui.comp.smarttable.SmartTable, Property:editTogglable, aggregation: customData, key: useSmartField).

View Settings
This button opens the P13n dialog. Note that the P13n dialog is quite complex. Neither the simpler view settings dialog nor the table personalization dialog can be used without the app development team developing the entire view settings handling (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Export to Spreadsheet
Only use this option if your end users typically export the data shown in the table in order to work with it in a spreadsheet application. This is usually the case if data is collected from several systems and analyzed in the spreadsheet application. This is not usually the case for worklists, attachment lists, lists with only a few items, shopping carts, or data that does not need to be analyzed. This option is only available if the corresponding back end supports exporting to spreadsheet (sap.ui.comp.smarttable.SmartTable, property: useExportToExcel).

If additional actions are needed, use a custom toolbar for the table. The smart table can also add integrated functionality such as a table title, item count, variant management, edit and view settings, and export to spreadsheet to the custom toolbar (aggregation: customToolbar).

For navigation to line item details:

If used with the responsive table, use the navigation mode of the responsive table.
If used with the grid table, analytical table, or tree table, use a link for the attribute that identifies the row. The user can click this link to trigger the navigation.

Clicking a table row can trigger drill-in navigation to a deeper level of the object, as well as cross-navigation to another SAP Fiori app or even to another system.

Inline Actions

Actions that belong to single items can be placed within the row. They can be displayed as text or icons. Make sure the icon communicates the function clearly enough. Otherwise, use a textual button.

Editable Content

The smart table can be editable or read-only (sap.ui.comp.smarttable.SmartTable, property: editable).

The smart table selects the corresponding editable controls automatically based on the data type, semantic annotations, and value list annotations (annotations such as: sap:semantics, value: currency-code, edm types, Annotation: sap:display-format, value:Date, Annotation:Precision, Annotation: Scale, Annotation: ValueList, Annotation: ValueList:semantics, value:fixed-values).

If an edit mode is needed, the controls are automatically switched from read-only controls (such as text) to editable controls (such as input field or date picker) if smart fields are used inside the smart table (sap.ui.comp.smarttable.SmartTable, Property:editTogglablea, aggregation: customData, key: useSmartField).

Only use this if you need to toggle between both modes. In any other case, show only the mode you need (read-only or edit), but do not offer the switch.

View Settings: Sort, Filter, Group, and Column Settings

If view settings are enabled on the smart table, a settings button is available on the table toolbar. This button opens the P13n dialog. Neither the simpler view settings dialog nor table personalization dialog can be used without extra effort (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

The P13n dialog always enables the user to show, hide, and rearrange columns. Alternatively, it can contain settings for sorting, grouping, and/or filtering (annotations: sap:sortable, sap:filterable)

If the smart table uses the grid table, analytical table, or tree table, sort, filter, and group settings are also available in the column header menu.

Offer view settings only if they are really needed. For example, these settings do not make sense if the table contains only a few items and just a few columns.

Note that the P13n dialog is quite complex. It is ideal for tables with a vast number of items, but is quite cumbersome for handling just a few hundred items. Therefore, show only the settings (sort, group, filter) you really need. For example, do not offer grouping if it does not support your use case well.

If filtering is a main use case, do not offer filtering in the P13n dialog. Use the filter bar instead (annotation: sap:filterable)

Be persistent: When the app is reopened, the smart table is shown with the same view settings as last defined by the user (sap.ui.comp.smarttable.SmartTable, property: persistenceKey).

Sort

The current sort state is displayed as follows:

Using the responsive table, there is no indication that the table is currently sorted.
Using the grid table, analytical table, or tree table, an icon in the column header of the last sorted column indicates that the table is sorted and the direction in which it is sorted.

In default delivery, sort items in a meaningful order by the row-identifying column (usually the first column in default delivery). For example, use an alphabetical order for text, a numeric order for numbers, and a chronological order for dates (annotations: sap:sortable, PresentationVariant – SortOrder).

Filter

The current filter state is displayed as follows:

Using the responsive table, there is no indication that the table is currently filtered. The filter info bar can be added with additional effort.
Using the grid table, analytical table, or tree table, filtering is displayed by an icon on the column header of each filtered column (annotation: sap:filterable).

Group

To display the current group state, group headers are shown automatically. The following text should be shown on the group header:
[Label of the grouped column]: [Grouping value]
This can be done by the smart table, but only if the raw data from the model can be used. In other cases, app development teams must format the group header text. For example, the raw data carries IDs, while the table displays the corresponding names, which are provided by another data source. In this case, app developers must provide the formatting for the group header texts.

Within the responsive table, the grouped column keeps its visibility to reduce confusion after the group settings have been changed. If visible, it stays in the tabular layout even if grouped.

If used with the analytical table, grouping is not offered on measures. Therefore, you can have aggregations or grouping on a specific column.

If appropriate, offer reasonable grouping by default.

Responsive table grouped by country

Aggregate

If used with the analytical table, aggregation settings can be provided on measure columns. These settings are only available in the column header menu.
To display the current aggregation state, the total sum of the corresponding column is shown at the bottom of the table.
If items are grouped, an intermediate sum is shown per group:

At the bottom of each group if the group is expanded.
In the group header if the group is collapsed.

Aggregations are only available on measures, but not on objects or attributes. If aggregation is enabled for a column, this column cannot be grouped.

Avoid aggregations on the first three columns for the default delivery. When grouping is used together with aggregations, collapsing a group shows the aggregation on the group header. This conflicts with the group name.

Where appropriate, offer reasonable aggregation by default (annotation: sap:aggregation-role, value: measure).

Column Settings

Only offer column settings if you need more columns than a tablet screen can display at a time (usually more than five).

If sorting, grouping, and/or filtering are needed, column settings must also be shown (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Add, Remove, Rearrange Columns

Use the P13n dialog to add, remove, and rearrange columns.

When used with the grid table, analytical table, or tree table, columns can also be rearranged by dragging and dropping the column header (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Resize Columns

When used with the grid table, analytical table, or tree table, columns can be resized on the column header (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Freeze Columns

When used with the grid table, analytical table, or tree table, app developers must manually add the options for freezing columns to the column header menu if necessary. They can do this by declaring the corresponding table inside the smart table in the XML view, and by using the corresponding settings on this inner table.

Selecting Freeze on a column freezes all columns from the first one to the one on which Freeze is selected. The menu entry on this column changes from Freeze to Unfreeze.

Properties

The following properties are available on sap.ui.comp.smarttable.SmartTable:

The property: ignoreFields defines the columns that are not available on the UI – neither in the initial visible columns nor in the P13n dialog.
The property: requestAtLeastFields can be used for requesting additional technical columns.
The property: ignoreFromPersonalization removes columns from the P13n dialog.
The property: toolbarStyleClass is deprecated. Do not use it.
The property: enableCustomFilter allows the filter menu item in the column header menu to be exchanged.
The property: useOnlyOneSolidToolbar is deprecated. Do not use it.
The property: currentVariantId defines the currently used variant.
The property: enableAutoBinding fetches the data automatically as soon as the corresponding OData model is initialized and the smart table is created.
The property: tableBindingPath defines the path from which the data is fetched.

The following aggregations are available:

The aggregation: semanticObjectController is used to customize smart links inside the smart table.
The aggregation: noData provides a text in case the table contains no line items. For example, this can be the case if the table is filtered. The text should provide context-specific instructions on how to get data into the table.

Resources

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

Elements and Controls

Responsive Table (guidelines)
Grid Table (guidelines)
Analytical Table (guidelines)
Tree Table (guidelines)
Table Overview (guidelines)
Table Toolbar (guidelines)
Variant Management (guidelines)
P13n-Dialog (guidelines)

Implementation

Smart Table (SAPUI5 samples)
Smart Table (SAPUI5 API reference)
Smart Table (Developer Guide)
P13n-Dialog (SAPUI5 samples)
P13n-Dialog (SAPUI5 API reference)
Toolbar (SAPUI5 samples)

Smart Table

The smart table is a wrapper around existing tables, and can be used together with the responsive table, grid table, analytical table, or tree table.

The smart table creates columns automatically based on the underlying OData service plus corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, and export to spreadsheet.

Everything that can be done using the smart table can also be achieved using the responsive table, grid table, analytical table, or tree table directly, but with more development effort. Therefore, the main purpose of the smart table is to reduce development effort. However, this comes at the expense of decreased flexibility.

Usage

Use the smart table if:

Data is fed into the table through OData services.
You need a simple table with limited flexibility to display its content. In this case, the smart table reduces development effort.
You need a table in which some columns provide flexible content. In this case, use the smart table together with a responsive table, and provide app-specific column definitions for these columns.

Do not use the smart table if:

You create your own UI coding, whereby the data is not fed through OData services. In this case, use the underlying table control directly.
The main use case involves selecting one item from very few items, with no additional details. In this case, a select or combo box might be more suitable.
The main use case involves selecting one item from several items, with only a few details per item. In this case, a list might be more suitable. Pay attention to the layout of the list item to provide a pleasant appearance (see, for example, the master list and the feed list item).
The table is displayed together with a chart inside a chart container. The smart table is not designed to work inside an existing chart container. In this case, use the underlying table control directly.
You need an overview of a large amount of data. In this case, use charts.
You just need it for layout reasons. In this case, use a layout container, such as the grid layout, instead.
You need read-only or editable field value pairs. In this case, use a form instead. Tables are not optimized for form-like input navigation.

Responsiveness

The responsiveness of the smart table depends on the encapsulated table. The table toolbar uses the overflow mechanism for adapting to the screen width.

Using the responsive table

The smart table offers a generic responsive behavior (sap.ui.comp.smarttable.SmartTable, property: smartFilterId, value: true):

For every 10 rem of screen width, one column stays in the tabular layout. All others are moved to the pop-in area. The columns are moved to the pop-in area from right to left, so the column furthest to the right moves to the pop-in first.
Exception: The first two columns always stay in the tabular layout. This works best if the smart table uses the whole screen width. It might not work well if the smart table uses far less space.

Using the grid table, analytical table, or tree table

The smart table works only on desktop and tablets, but not on smartphones. It supports touch devices, but is not optimized for small screens.
If you use a smart table in this configuration, ensure that you implement a fallback solution for small screens. This fallback solution does not need to support all use cases. You could create a fallback by using a responsive table. However, a completely different solution, such as showing charts in a read-only case, might be more suitable.

Size S with responsive table

Size M with responsive table

Size M with grid table

Size L with grid table

Layout

The title bar contains the title of the smart table, the item count, variant management, and the toolbar itself. All of these elements are optional.
The table area shows the corresponding table (responsive table, grid table, analytical table, or tree table).

Schematic visualization of the smart table

Components

The title bar consists of a toolbar.

This can be the standard toolbar or a custom toolbar. The standard toolbar can contain a title text with or without item count, variant management, view switch (switching the table to edit mode), an entry point for the P13n dialog, and an Export to Spreadsheet action.

If you require additional functionality, you can use an app-specific toolbar. All toolbar options provided by the smart table can also be added to the app-specific toolbar. (Aggregation: customToolbar)

The table area consists of any of the following tables: responsive table, grid table, analytical table, or tree table.

Standard toolbar with everything enabled

Standard toolbar just with title and item count

Behavior and Interaction

The behavior is generally inherited from the underlying table, toolbar, variant management, and P13n dialog (see the corresponding articles for details.) Note that the smart table provides limited options and not all settings of the underlying controls are available.

Table Level

Table Type

The smart table can encapsulate the responsive table, grid table, analytical table, or tree table. (sap.ui.comp.smarttable.SmartTable, property: tableType)

Automatic Rendering of the Table

The smart table automatically creates columns and renders all items based on the metadata of the underlying OData service (sap.ui.comp.smarttable.SmartTable, property: smartFilterId).

To be more flexible in the table layout, the smart table also offers app-specific column templates for some or all columns. In this case, app developers must provide the definition for the underlying table and for the corresponding (but not necessarily for all) columns in the XML view. For this, the app development team must provide the column keys of the overridden columns via custom data.

Additional columns can also be added. Columns that are defined in this way retain all the options of the underlying table. This is especially useful with the responsive table, which offers complete flexibility in content design. Any columns that are not defined by the app development team are still rendered automatically by the smart table.

No Data

If there is no data to show, the smart table renders default text. This text can be overwritten by the app development team (aggregation: NoData).

Initially Visible Columns

The smart table enables you to define which columns are initially shown. Here, initially means that these columns are shown when the app is first launched. All other columns are initially hidden (annotation: PresentationVariant/ LineItem, property: initiallyVisibleColumns).

Persistency

End users can show additional columns if table personalization is provided. In this case, column settings are persisted. On consecutive startups, the columns are shown with the same settings as last defined by the user (property: persistenceKey).

Removing Columns

The smart table always shows all columns from the OData model. In some cases, columns needs to be in the model but should not be available on the front end at all. Examples of this include:

A column is needed to provide an ID which is used for navigation purposes, but the front end should only display the corresponding text, not the ID.
The values of a column are needed to perform calculations, but only the results should be shown on the UI.

In these cases, you can define which columns should not be available at all on the UI. These columns are not shown and are not available in the P13n dialog. You can also do this for columns that are added manually in the XML view (annotation: sap:visible, value:false).

P13n dialog

Sorting and Filtering

The smart table allows you to add sort and filter settings for each column. These settings enable the corresponding pages in the P13n dialog. For the grid table, analytical table, and tree table, sorting and filtering are also enabled on the column header. (Annotations: sap:sortable and sap:filterable)

Column header menu of the grid table

Smart Table and Smart Filter Bar

The smart table can be linked to a smart filter bar. If linked, filter bar settings are automatically used on the smart table. (sap.ui.comp.smarttable,SmartTable, property:smartFIlterId)

Aggregation

If used with the analytical table, the smart table allows total sums of measure columns to be calculated. The totals are shown in the usual way:

As the last row of the analytical table.
As the last row of each group if the group is expanded.
On the group header of each group if the group is collapsed.

Aggregation settings are not persisted (annotation: sap:aggregation-role, value:measure).

Aggregation entry in column header menu of the grid table

Column Width

A default column width is calculated for each column based on the data displayed in it. Important: end users cannot change the column width in the responsive table (annotations: MaxLength, Precision, Scale).

Column Header

A column header text can be specified for each column (annotation: sap:label).

Persistence

The smart table allows you to persist sort, group, and filter column settings (such as by hidden columns) as well as variants (sap.ui.comp.smarttable.SmartTable, Property:persistenceyKey).

Content

The smart table provides two options to create columns automatically:

The smart table is rendered in either read-only or edit mode. In this case, the smart table renders the controls as described below. This is the default way of rendering content (property: editable)
If users need to switch between read-only and edit mode at runtime, the smart table allows smart fields to be rendered instead. You should use this if the edit button is added to the toolbar of the smart table (aggregation: customData key: useSmartField).

For option 1, the following controls are used:

To show currency amounts, the smart table allows the amount and the currency code to be displayed in a single cell. For read-only mode, the currency control is used. For edit mode, a single input field is used, and the currency itself is shown next to the input field as non-editable text (annotation: sap:semantics, value: currency-code).
To show links that open a quick view, the smart table supports the smart link.
To show static text, the smart table uses an input field in edit mode, and a text in read-only mode.
To show dates, the smart table uses a date picker in edit mode, and a text in read-only mode (annotation: sap:display-format, value:Date).
To show decimal numbers, the smart table uses an input field in edit mode, and a text in read-only mode (annotations:Precision, Scale).

Amount formatting

Link formatting

Date formatting

Value Help

The smart table supports value help in the following ways (annotation: ValueList):

Input fields can show a value help button. Triggering this button opens a value help dialog. Within this dialog, you can provide a search field (annotation:ValueList, property: SearchSupported).
You can restrict the number of characters for the input field. Use this if no ValueList annotation is provided (annotation:MaxLength).

Toolbar Level

Table Title

The smart table can provide a title for the table within the toolbar (sap.ui.comp.smarttable.SmartTable, Property:header).

Table title

Item Count

Next to the table title, an item count can be shown (sap.ui.comp.smarttable.SmartTable, Property:showRowCount).

Table title with item count

Variant Management

The table title can provide variant management for the table (sap.ui.comp.smarttable.SmartTable, Property:useVariantManagement).

Table title with item count and variant management

Edit

The table toolbar can contain a button for toggling the table between read-only and edit modes. If smart fields are used, the smart table handles both modes automatically (sap.ui.comp.smarttable.SmartTable, Property:editTogglable, aggregation: customData, key: useSmartField).

Edit button

View Settings

The table toolbar can contain a button for opening the P13n dialog. This dialog provides extensive sort, group, and filter settings. It also allows columns to be shown, hidden, or rearranged (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Settings button

Export to Spreadsheet

If the back end supports the export of data to spreadsheet, the table toolbar can contain a corresponding button. When this button is triggered, the corresponding file is created and the download starts automatically (sap.ui.comp.smarttable.SmartTable, Property:useExportToExcel).

Export to Spreadsheet button

Applications can implement a maximize button to run the table in full screen (Property: showFullScreenButton).

Maximize button

Guidelines

In general, the guidelines for the underlying table, toolbar, variant management, and P13n dialog also apply to the smart table (see the corresponding articles for details). However, because the smart table does not offer the complete flexibility of the underlying controls, there are certain differences.

Table Type

The responsive table is the standard table for SAP Fiori. Use the responsive table whenever possible. It is the most flexible table in terms of how its content is displayed, it is fully responsive, and it can handle up to 1,000 line items.

If you cannot use the responsive table, consider using the grid table instead. The grid table can handle a large number of line Items. Compared to the responsive table, however, it is more restricted content-wise (only certain controls can be used to show the data, and only one control per cell), and it does not run on smartphones. If you use the grid table, you need to provide a fallback solution for smartphones, for example, by using the responsive table.

The analytical table is similar to the grid table, but adds several grouping levels and offers total sums on measure columns. The analytical table can also handle a large number of line Items. Compared to the responsive table, however, it is more restricted content-wise (only certain controls can be used to show the data, and only one control per cell), and it does not run on smartphones. If you use the analytical table, you need to provide a fallback solution for smartphones, for example, by using the responsive table.

The tree table is the only table for displaying hierarchical data. Like the grid table, it can handle a large number of line items, although it is restricted content-wise (only certain controls can be used to show the data, and only one control per cell), and it does not run on smartphones. If you use the tree table, you need to provide a fallback solution for smartphones, for example, by using the responsive table.

For more information about the different table controls, see the corresponding articles.

Table Title, Item Count, and Variant Management

Always show the item count together with the table title, unless this is expected to cause performance problems.
If used with the responsive table and if more than 200 items are generally expected, do not show the item count. In this case, the smart table displays a More button to load additional rows. Using the item count together with the More button might lead to confusion (sap.ui.comp.smarttable.SmartTable, Property:showRowCount).

Even if variant management is easy to implement, use it only if it is really needed. For example, if the smart table is used together with the filter bar and the filter bar already implements variant management, an additional variant management on the table is only needed in special cases.
Note that the smart filter bar cannot persist both the smart table settings and the filter settings (sap.ui.comp.smarttable.SmartTable, Property:useVariantManagement).

Empty Tables

Try not to display an empty table. If there is no way around this, provide instructions on how to fill the table with data (aggregatrion: noData).

Columns – Best Practices

Keep the number of initially shown columns to a minimum. Avoid the need to scroll horizontally on a tablet screen size in default delivery (annotation: PresentationVariant/ LineItem).

Keep the number of additional (initially hidden) columns to a minimum. You can use the P13n dialog to show/hide the columns. Select the columns offered in the P13n dialog carefully. Do not just show all columns available in the backend tables (annotation: sap:visible, value:false).

For the grid table, analytical table, and tree table, the column widths are calculated automatically if the corresponding OData annotations are provided (annotations: MaxLength, Precision, Scale).

In contrast, the responsive table uses the same width for all columns.

If used with the responsive table, enable the pop-in behavior
(sap.ui.comp.smarttable.SmartTable, property: smartFilterId, value: true).

Show the most important column on the left and the least important on the right. This ensures that the most important columns stay in the tabular layout as long as possible. The most important columns are those that contain the following information:

The column that identifies the line item
The column that contains the key attribute

(Annotation: PresentationVariant/ LineItem, Property: initiallyVisibleColumns)

Email column in the pop-in area of the responsive table

Provide a column header text for each column. Do not truncate the column header text in default delivery (annotation: sap:label).

Column header text

Content Alignment and Formatting

The smart table automatically takes care of content alignment and formatting in standard use cases. For this, the OData metadata needs to provide the correct information about the data types, semantics of, and value help for the data.
(Annotations such as: sap:semantics, value: currency-code, edm types, Annotation: sap:display-format, value:Date, Annotation:Precision, Annotation: Scale, Annotation: ValueList, Annotation: ValueList:semantics, value:fixed-values)

Actions

To trigger actions on multiple items, use a mutliselection smart table. Do not offer action triggering on multiple items if the table is expected to have fewer than 10 items in most cases.
While the grid table, analytical table, and tree table are multiselectable by default within the smart table, the responsive table is single-selectable. The selection mode can be changed (XMLView).

The following actions can be shown on the standard toolbar of the smart table:

Edit
Toggles the table between edit and read-only mode. This only works if smart fields are used inside the smart table (sap.ui.comp.smarttable.SmartTable, Property:editTogglable, aggregation: customData, key: useSmartField).

View Settings
This button opens the P13n dialog. Note that the P13n dialog is quite complex. Neither the simpler view settings dialog nor the table personalization dialog can be used without the app development team developing the entire view settings handling (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Export to Spreadsheet
Only use this option if your end users typically export the data shown in the table in order to work with it in a spreadsheet application. This is usually the case if data is collected from several systems and analyzed in the spreadsheet application. This is not usually the case for worklists, attachment lists, lists with only a few items, shopping carts, or data that does not need to be analyzed. This option is only available if the corresponding back end supports exporting to spreadsheet (sap.ui.comp.smarttable.SmartTable, property: useExportToExcel).

If additional actions are needed, use a custom toolbar for the table. The smart table can also add integrated functionality such as a table title, item count, variant management, edit and view settings, and export to spreadsheet to the custom toolbar (aggregation: customToolbar).

For navigation to line item details:

If used with the responsive table, use the navigation mode of the responsive table.
If used with the grid table, analytical table, or tree table, use a link for the attribute that identifies the row. The user can click this link to trigger the navigation.

Editable Content

The smart table can be editable or read-only (sap.ui.comp.smarttable.SmartTable, property: editable).

The smart table selects the corresponding editable controls automatically based on the data type, semantic annotations, and value list annotations (annotations such as: sap:semantics, value: currency-code, edm types, Annotation: sap:display-format, value:Date, Annotation:Precision, Annotation: Scale, Annotation: ValueList, Annotation: ValueList:semantics, value:fixed-values).

If an edit mode is needed, the controls are automatically switched from read-only controls (such as text) to editable controls (such as input field or date picker) if smart fields are used inside the smart table (sap.ui.comp.smarttable.SmartTable, Property:editTogglablea, aggregation: customData, key: useSmartField).

Only use this if you need to toggle between both modes. In any other case, show only the mode you need (read-only or edit), but do not offer the switch.

View Settings: Sort, Filter, Group, and Column Settings

If view settings are enabled on the smart table, a settings button is available on the table toolbar. This button opens the P13n dialog. Neither the simpler view settings dialog nor table personalization dialog can be used without extra effort (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

The P13n dialog always enables the user to show, hide, and rearrange columns. Alternatively, it can contain settings for sorting, grouping, and/or filtering (annotations: sap:sortable, sap:filterable)

If the smart table uses the grid table, analytical table, or tree table, sort, filter, and group settings are also available in the column header menu.

Offer view settings only if they are really needed. For example, these settings do not make sense if the table contains only a few items and just a few columns.

Note that the P13n dialog is quite complex. It is ideal for tables with a vast number of items, but is quite cumbersome for handling just a few hundred items. Therefore, show only the settings (sort, group, filter) you really need. For example, do not offer grouping if it does not support your use case well.

If filtering is a main use case, do not offer filtering in the P13n dialog. Use the filter bar instead (annotation: sap:filterable)

Be persistent: When the app is reopened, the smart table is shown with the same view settings as last defined by the user (sap.ui.comp.smarttable.SmartTable, property: persistenceKey).

Sort

The current sort state is displayed as follows:

Using the responsive table, there is no indication that the table is currently sorted.
Using the grid table, analytical table, or tree table, an icon in the column header of the last sorted column indicates that the table is sorted and the direction in which it is sorted.

In default delivery, sort items in a meaningful order by the row-identifying column (usually the first column in default delivery). For example, use an alphabetical order for text, a numeric order for numbers, and a chronological order for dates (annotations: sap:sortable, PresentationVariant – SortOrder).

Filter

The current filter state is displayed as follows:

Using the responsive table, there is no indication that the table is currently filtered. The filter info bar can be added with additional effort.
Using the grid table, analytical table, or tree table, filtering is displayed by an icon on the column header of each filtered column (annotation: sap:filterable).

Group

To display the current group state, group headers are shown automatically. The following text should be shown on the group header:
[Label of the grouped column]: [Grouping value]
This can be done by the smart table, but only if the raw data from the model can be used. In other cases, app development teams must format the group header text. For example, the raw data carries IDs, while the table displays the corresponding names, which are provided by another data source. In this case, app developers must provide the formatting for the group header texts.

Within the responsive table, the grouped column keeps its visibility to reduce confusion after the group settings have been changed. If visible, it stays in the tabular layout even if grouped.

If used with the analytical table, grouping is not offered on measures. Therefore, you can have aggregations or grouping on a specific column.

If appropriate, offer reasonable grouping by default.

Responsive table grouped by country

Aggregate

If used with the analytical table, aggregation settings can be provided on measure columns. These settings are only available in the column header menu.
To display the current aggregation state, the total sum of the corresponding column is shown at the bottom of the table.
If items are grouped, an intermediate sum is shown per group:

At the bottom of each group if the group is expanded.
In the group header if the group is collapsed.

Aggregations are only available on measures, but not on objects or attributes. If aggregation is enabled for a column, this column cannot be grouped.

Avoid aggregations on the first three columns for the default delivery. When grouping is used together with aggregations, collapsing a group shows the aggregation on the group header. This conflicts with the group name.

Where appropriate, offer reasonable aggregation by default (annotation: sap:aggregation-role, value: measure).

Column Settings

Only offer column settings if you need more columns than a tablet screen can display at a time (usually more than five).

If sorting, grouping, and/or filtering are needed, column settings must also be shown (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Add, Remove, Rearrange Columns

Use the P13n dialog to add, remove, and rearrange columns.

When used with the grid table, analytical table, or tree table, columns can also be rearranged by dragging and dropping the column header (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Resize Columns

When used with the grid table, analytical table, or tree table, columns can be resized on the column header (sap.ui.comp.smarttable.SmartTable, Property:useTablePersonalisation).

Freeze Columns

When used with the grid table, analytical table, or tree table, app developers must manually add the options for freezing columns to the column header menu if necessary. They can do this by declaring the corresponding table inside the smart table in the XML view, and by using the corresponding settings on this inner table.

Selecting Freeze on a column freezes all columns from the first one to the one on which Freeze is selected. The menu entry on this column changes from Freeze to Unfreeze.

Properties

The following properties are available on sap.ui.comp.smarttable.SmartTable:

The property: ignoreFields defines the columns that are not available on the UI – neither in the initial visible columns nor in the P13n dialog.
The property: requestAtLeastFields can be used for requesting additional technical columns.
The property: ignoreFromPersonalization removes columns from the P13n dialog.
The property: toolbarStyleClass is deprecated. Do not use it.
The property: enableCustomFilter allows the filter menu item in the column header menu to be exchanged.
The property: useOnlyOneSolidToolbar is deprecated. Do not use it.
The property: currentVariantId defines the currently used variant.
The property: enableAutoBinding fetches the data automatically as soon as the corresponding OData model is initialized and the smart table is created.
The property: tableBindingPath defines the path from which the data is fetched.

The following aggregations are available:

The aggregation: semanticObjectController is used to customize smart links inside the smart table.
The aggregation: noData provides a text in case the table contains no line items. For example, this can be the case if the table is filtered. The text should provide context-specific instructions on how to get data into the table.

Resources

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

Elements and Controls

Responsive Table (guidelines)
Grid Table (guidelines)
Analytical Table (guidelines)
Tree Table (guidelines)
Table Overview (guidelines)
Table Toolbar (guidelines)
Variant Management (guidelines)
P13n-Dialog (guidelines)

Implementation

Smart Table (SAPUI5 samples)
Smart Table (SAPUI5 API reference)
Smart Table (Developer Guide)
P13n-Dialog (SAPUI5 samples)
P13n-Dialog (SAPUI5 API reference)
Toolbar (SAPUI5 samples)

Smart Table

Smart Link

Similar to the quick view, the smart link triggers a popover from a text link. This popover offers links to related apps for the user to take action, and shows the user additional information such as simple object details.
The smart link is a smart control. It uses metadata annotations to offer the user specific navigation. It analyzes the user’s assigned apps and offers only relevant navigation targets.

Usage

Use the smart link to offer direct navigation to related apps. For example to navigate from a product list to the relevant app to change the pricing, or from a sales order list to the app to see a customer’s balance.

Use the smart link if:

You want to offer related apps for navigation.
You want to offer simple object details.

Do not use the smart link if:

You want to display more or complex information about an object. Use the object page or charts instead.
There is no metadata accessible, and only a direct link to a website, document or application is needed. Use the standard link instead.
You need to structure information in a deeper hierarchy. Use the quick view or a list drill down instead.
You want to display contact details. Use the quick view instead.
You need to show related information (such as an image). Use the popover or quick view instead.

Responsiveness

The responsiveness of the smart link is based on the responsiveness of the popover and overlays the content.

Clicking the background closes the popover on desktop and smartphones.

Size S - On smartphones, the smart link overlays the content

Size M - Smart link on a tablet device

Size L - Smart link in a table on a desktop device

Layout

The smart link contains the following areas:

The header bar of the smart link popover describes the type of information offered.
The title area provides space for a label and a main link. By default, the title and the link description of the link that triggers the popover are the same. However, both can be edited (for example, the title could display the company’s name while the link description is a customer ID).
In the content area, the application can show any control depending on the use case.
The Related Apps area offers links to all relevant applications of a user role. The title Related Apps cannot be changed.

The four different areas cannot be rearranged. The header bar is mandatory, while all other sections are optional. Depending on the use case, the application could only offer a Related Apps section, for example. The offered content in the popover must contain a link; otherwise the popover will not open. We do not recommend offering only one link within the popover – please use the standard link control to offer direct navigation instead.

The four areas of the smart link

Behavior and Interaction

The smart link and its popover are always triggered by clicking or tapping a text element that appears as a link. This text element can be placed in any list, table, or other container. The link label can be individually set. Clicking or tapping the background closes the popover.

If the semantic object annotation is not set, the smart link is rendered as sap.m.Text by default. However, app developers can also decide to render any other control.

Smart Link Interaction

The Related App Area

The title Related Apps cannot be changed. In breakout scenarios and custom applications, the links offered in this section can be freely chosen. The smart link control will suggest semantic objects that are modifiable. It’s possible to link to any website or app.

The Smart Link in a Smart Table

Within a smart table, the link label of the smart link is automatically set depending on the semantic object annotation. This means that the description cannot be changed in a smart table. Inside the smart table, the smart link is rendered as sap.m.Text if there are no navigation targets.

Guidelines

If you only need to offer one link to navigate, please use the standard link instead as this supports direct navigation without opening a popover.
Please check the related apps you offer carefully. Only display the ones that are relevant to the user.

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

Quickview (guidelines)
Popover (guidelines)

Implementation

Smart Link (SAPUI5 samples)
Smart Link (SAPUI5 API reference)

Smart Link

Similar to the quick view, the smart link triggers a popover from a text link. This popover offers links to related apps for the user to take action, and shows the user additional information such as simple object details.
The smart link is a smart control. It uses metadata annotations to offer the user specific navigation. It analyzes the user’s assigned apps and offers only relevant navigation targets.

Usage

Use the smart link to offer direct navigation to related apps. For example to navigate from a product list to the app to change the pricing, or from a sales order list to the app to see a customer’s balance.

Use the smart link if:

You want to offer related apps for navigation.
You want to offer simple object details.

Do not use the smart link if:

You want to display more or complex information about an object. Use the object page or charts instead.
There is no metadata accessible, and only a direct link to a website, document or application is needed. Use the standard link instead.
You need to structure information in a deeper hierarchy. Use the quick view or a list drilldown instead.

Responsiveness

The responsiveness of the smart link is based on the responsiveness of the popover and overlays the content.

Clicking the background closes the popover on desktop and smartphones.

On mobile devices, the smart link opens a dialog that overlays the entire content. Since the content beneath the popover is no longer directly visible to the end user, the dialog has a header that shows the object type. Users close the dialog by clicking the close icon () in the header.

The responsiveness of the smart link is based on the responsiveness of the popover and overlays the content.

A click into the background closes the popover on desktop.

On mobile devices, the smart link opens a dialog that overlays the entire content. Because there the content underneath the popover is no longer directly visible to the end user, the dialog acquires a header and shows the object type. The dialog can be closed by clicking the close icon () in the header.

Size S – On smartphones, the smart link overlays the content

Sizs M/ L - Smart link shown in a table on a desktop device

Layout

The smart link contains the following areas:

The header bar of the smart link popover tells the user the type of information offered and is only shown on mobile devices.
The title area contains a title and a subtitle. The title can also be shown as a link, which can be used to navigate to the corresponding object or factsheet. The subtitle can be used to show the ID of the object for example.
The content area shows object related information. That could be for example more details about a product or/ and contact information. The application can show any control depending on the use case.
The link area offers links to all relevant applications of a user role. Applications should take care of the amount of link that will be shown here. All semantic objects are shown here.

The header bar is mandatory (for mobile devices), while the other sections are optional. Depending on the use case, the application can offer only a content or a link section, for example.

The areas of the smart link (header bar not shown)

Behavior and Interaction

The smart link and its popover are always triggered by clicking or tapping a text element that appears as a link. This text element can be placed in any list, table, or other container. The link label can be individually set. Clicking or tapping the background closes the popover. If only one link is offered with no additional information, the smart link navigates directly to the target without opening the popover.

If the semantic object annotation is not set, the smart link is rendered as sap.m.Text by default. However app developers can also decide to render any other control.

The Related App Area

In breakout scenarios and custom applications, the links offered in this section can be freely chosen. The smart link control will suggest semantic objects that are modifiable. It’s possible to link to any website or app.

The Smart Link in a Smart Table

Within a smart table, the link label of the smart link is automatically set depending on the semantic object annotation. This means that the description cannot be changed in a smart table. Inside the smart table, the smart link is rendered as sap.m.Text if there are no navigation targets.

Guidelines

Please check the related apps you offer carefully. Only display the ones that are relevant to the user.
Use comprehensible link names in the link area. Do not use the same link name more than once in the link area. Rename the links if needed (for example, “Add Product” if the link navigates to the app “Manage Products”).

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

Quickview (guidelines)
Popover (guidelines)

Implementation

Smart Link (SAPUI5 samples)
Smart Link (SAPUI5 API reference)

Chart – Variation through Time

This article illustrates the different ways you can visualize changes of measures through time. The exact type of chart depends on the type of change you want to visualize and the number of time periods.

Time Category and Time Axis

By convention, time is represented horizontally from left to right which means it’s best to use the horizontal axis to represent the time in chart visualizations. We recommend using the time axis which has three main advantages:

It allows you to display dates and times in a responsive manner.
All the complexity involved with formatting the axis labels is automatically taken care of.
The physical spacing between the data points accurately respects the time scale, as opposed to just displaying them equidistantly.

Additional Categories

In addition to the time category, there are additional categories that contain an intrinsic order and that that carry the notion of progression or trend.

For example, age, time period, or a rating.

As such, the rest of this article also applies to these categories.

Column or Line Chart?

Use a line chart if you want to emphasize the trend through time.
Use a column chart if you want to emphasize the values themselves.

In the figure below, you can see that the trend of the values immediately stands out in the line chart, while we need to make an effort to visualize the trend of the values in the column chart. At the same time, the values can be compared more easily in the column chart.

Emphasize on trend

Emphasize on values

One Set of Values

Illustrating the Trend

As previously stated, the line chart is the best way to illustrate a trend through time.

Trend through time with a moving average

Sometimes it’s difficult to see the global trend when the values vary a lot. In these circumstances you can display a moving average in the same chart as illustrated below. You can see the three month moving average of the total demand of ice cream displayed as a black line. Please note that you should avoid using a straight line to represent the global trend because the inclination depends too much on the start date and end date and is therefore misleading.

Trend through time with a moving average

Variation

If you want to display how closely clustered or spread out a set of data is through time, use a line chart as illustrated below. However, as you can see the values fall within a range of 250M to 350M and the vertical axis begins at zero. This results in a small magnitude (which is not good for appreciating the variation) and a lot of wasted space below the blue value line.

Variability through time

Now look at the chart below where we have altered the scale on the vertical axis (effectively zooming in on it), thereby increasing the magnitude of the line to emphasize the variation. Also note how we’ve started the vertical axis at 200M instead of zero to eliminate the wasted space. You can see how these improvements emphasize the variability and use the available space more effectively.

Variability through time with non 0 scale

Multiple Sets of Values

Illustrating Trends with Multiple Measures

You can display multiple lines in order to compare the trend of multiple values as illustrated in the chart below.

However, you can see that the measures do not have a similar magnitude in the chart below on the left. Not only is it hard to see the trend for the smallest measure (pizza), it is also difficult to compare both trends. Now look at the chart below to the right where we’ve transformed the actual sales figures into percentage figures. You will notice that it’s easier to recognize the trend for pizza, and it’s now much easier to compare trends.

Don't

Trend of two measures with vastly different orders of magnitude

Do

Trend of the same two measures now expressed in percentage

Illustrating Trends with Different Units

If you want to compare the trend of measures that have different units, it’s best to avoid using a line chart with a dual axis because they confuse the interpretation of the variation of values. It’s better use two separate line values which share the same horizontal axis as illustrated below.

Trend of two measures with different units

If you cannot display two separate values that share the same horizontal axis as illustrated above, but you have no option other than to display two measures in the same chart, we recommend using a combined column and line chart with a dual axis. In the chart below, the trend for Sales (in units) and the Cost (in USD) are clearly isolated from each other.

Trend of two measures with different units-combined column and line

Example of What Not To Do

You may be tempted to place two lines in the same chart to show two measures which have different units. However, you can see how confusing this would be in the chart below – the lines overlap, but that has absolutely no meaning and is very misleading.

Do not display two measures with different units in the same chart

Combining Trends: Actual, Plan, Budget and Target

This section describes how to visualize the trend of values while comparing them with reference values such as plan, budget or target. The bullet chart below displays actual and target values for four years.

Trend of actual values

If you want to mix actual values with values that represent a projection in the future like a forecast or estimation, you can use a hatch pattern as represented below. For more information, see semantic patterns.

Trend of actual and forecast values

Note that in the bullet chart above, the most prominent element is the vertical bar, which represents the actual value or forecast value. This works well if you want to emphasize the actual or forecast. However, if the trend of the target is an important thing to visualize and there are many time periods, it makes more sense to display two lines to represent the trend of the two measures. In the example below, the black dotted line represents the evolution of the target through time.

Trend of actual and plan values

Trend of Deviation

If you want to show how the deviation between two measures evolves through the time, please refer to the deviation article (see: time deviation).

Multiple Rates of Change

If you want to compare the rate of change of two measures over time, you can use percentages to express the rate of change and start from the initial date of the series. The chart below represents the rate of change of ice cream and the rate of change of pizza displayed in percentage from the original date.

Rate of change expressed in %

Sum of Values

This section shows you how to visualize the variation through time of a sum of values. One solution would be to use a stacked column chart with each measure is stacked on top of each other.

The chart below is used in Sentiment Analysis, which enables product managers to view sentiment information for multiple products by analyzing the number of mentions in social media broken down by how positive, neutral and negative they were. You can see how the sum of the positive, negative and neutral mentions provides a good indication of the “buzz” around each product, independently of how good or bad it was.

However, this approach does not make it easy to compare multiple values within a series. You can see how hard it is to see whether the negative mentions have increased or decreased.

Sum of values through time

You can make it easier to compare multiple values within a series by using two line charts stacked on top of each other as illustrated below. The first line chart represents the total number of mentions and the second chart displays one line per type of mention. Now we can see better that the number of negative mentions has decreased.

Sum of values through time - trend of each values

Part to Whole

Check out the part to whole article (see section: through time).

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

Chart (guidelines)
Time Axis (guidelines)
Chart – Semantic Patterns (guidelines)

Implementation

No links.

Chart – Correlation

This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.

Scatter charts and bubble charts are the most frequently used charts to visualize a correlation, although using a line chart or bar chart side-by-side is also an acceptable solution.

Two Datasets

The scatter plot is the most efficient chart to show the correlation between two sets of numerical values. The chart below illustrates the correlation between age and income.

Correlation with a scatter plot

You can also group all the data points in ranges and display one average value per range, as illustrated below.

Correlation with a line chart

Few Items

When you have a small number of items, you can display the datasets in two sets of bars. This allows you to display the item name just once. Both sets of bars should be sorted by the first set or the second set to make the relationship easily visible by comparing the two shapes.

In the chart below, we can easily see that there is a direct correlation between Revenue and Margin, although ‘Servers’ is an outlier.

Correlation between 2 sets of values in bar chart

Three Datasets

You can use a bubble chart to show the correlation between three sets of numerical values. One set can be displayed in the horizontal axis, another set can be displayed in the vertical axis, and the third set can be represented by the size of the bubbles.

It’s difficult to precisely compare the size of bubbles. Therefore, it’s better to only use the Bubble chart when you want people to grasp a rough approximation of the values represented by the size of the bubbles.

The bubble chart below shows how the probability of the sales opportunty relates to the estimated close date and the expected revenue which is represented by the size of the bubble. In this context, the sales opportunity bubble usually begins in the bottom right quadrant, and moves to the top left quadrant of the chart over time.

Correlation with a bubble chart

Resources

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

Elements and Controls

Chart (guidelines)

Implementation

No links.

Chart – Ranking

Chart – Distribution

This page will help you choose an appropriate chart for visualizing how values are distributed within a set.

For example: You want to visualize how the number of employees are distributed across different salary ranges, or you want to compare the distribution of salaries across different job levels.

Single Distribution

You can use a histogram or a frequency polygon to visualize how values are distributed within one set of values.

Histogram

A histogram is used to display a number of values distributed across a series of ranges. Histograms are extremely useful for emphasizing the number of values.

The convention for a histogram is to remove the gaps between the bars or columns. However, as this chart is not yet available in SAP Fiori, you can use a classic column chart or bar chart instead.

The chart below shows how the rating of a product is distributed.

Histogram with vertical bars

If the labels of the ranges are long compared to the width of the chart, it’s better to use horizontal bars as illustrated below. If you follow this advice, you will avoid the undesirable effects that come as a result of displaying the category labels at 45°, making them hard to read and frequently leading to truncation of text.

Histogram with horizontal bar

Frequency Polygon

If you want to emphasize the shape of the distribution more than the number of values, then use a ‘frequency polygon’ which is really just a line chart that shows the distribution of a frequency of something. The chart below shows how salaries are distributed within a company.

Frequency polygon

Multiple Distribution

You can use a frequency polygon with multiple lines if you want to compare the distribution of multiple sets of values. The chart below compares the distribution of salaries between two countries.

Frequency polygon with two series

You can use a ‘stacked histogram’ if you want to split the distribution into multiple parts, as illustrated below.

Stacked histogram with two series

Box Plot

The Box plot is an ideal chart if you want to display how a distribution changes over time, or you want to compare many distributions. The example below illustrates a typical box plot with the median including the lower and higher quartiles and the highest and lowest value.

Please note that the box plot is not yet available in the SAP Fiori chart library.

Box plot

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

Chart (guidelines)

Implementation

No links.

Chart – Ranking

This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the largest or smallest values.

By Category

We recommend using a bar chart to display a list of category items sorted by value (for example, a product ranking by revenue).

In the chart below, it is easy to:

Understand that the category items are sorted by values.
Identify the top-ranking countries and the lowest-ranking countries.
See that all the countries in the middle have values that are very close together.

Category items ranked by value

If you’re also interested in seeing how the values are distributed among category items, you can display a reference line that indicates the median.

Category items ranked by value, with median

Bar Chart vs. Column Chart

It’s worth noting that you can use a column chart or a bar chart, but if the category is not time-based (or does not have an intrinsic order), we recommend using a bar chart. If you follow this advice, you will avoid the undesirable effects that come as a result of displaying the category labels at 45°, which as well as making them hard to read, also often leads to truncation of text. See the example below with the truncated ‘Great Britain’ label.

Bar chart with nicely displayed labels

Column chart with truncated labels at 45°

Within a Hierarchy

You can rank items within groups of the hierarchy.

In the example below, the countries are ranked inside their respective continents which makes it easy to compare each continent and each country within each continent.

Ranked groups inside a hierachy

Flat Hierarchy

When the hierarchy does not contain many items, you can flatten it and use color to identify the first level of the hierarchy.

In the chart below, you can immediately grasp which top 3 countries have the highest values and that America has the smallest values.

Ranked items in a flat hierachy

The chart below is used in the Cash Management app and displays the liquidity forecast by outcome and income. Displaying the outcome and income seperately helps to identify which income and outcome are the biggest.

Positive and negative items ranked separately

Ranking and Parts to Whole

If you want to know which items have the biggest values and how much of these items contribute to the total of the values, you can use a Pareto chart which is designed to illustrate the well-known 80%/20% rule (that is, 20% of the items contribute to 80% of the total).

The chart below displays the number of defects by type of defect, and we can see that 80% of the defects come from the first four types of defect.

Pareto chart

Resources

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

Elements and Controls

Chart (guidelines)

Implementation

No links.

Chart – Distribution

Analytical Card

The analytical card is used for data visualization. It consist of two areas: a header area that displays the aggregated value of a key measure (KPI), and a chart area that displays a visual representation of the data. It is a single object card and does not contain a footer area. The analytical card can only be used in the overview page (OVP).

The KPI header area includes:

Title (mandatory)
A KPI with the respective unit (mandatory)
A subtitle (optional)
- The subtitle can show the filter criteria used for the chart, and can contain up to two lines of text
A percentage (optional)
A triangle indicator (optional, showing upward or downward trend)

The KPI itself adopts the semantic colors red (negative), green (positive), or gray (neutral).

KPI header

Responsiveness

The analytical card has a uniform horizontal width of either 20 or 25 rem, depending on the screen size. The vertical height is flexible. The VizFrame charts within the cards are fully responsive.

Types

There are eight chart types currently supported by the analytical card:

Line
Bubble
Column
Stacked column
Vertical bullet
Donut
Combined
Scatter plot

Information

You can find additional information about the different chart types, as well as tips for choosing the correct chart type, in the following articles:

Line Chart

In general, the line chart is the most efficient chart for showing the evolution of a trend over a period of time.

Avoid showing more than four lines in the same card.
When showing more than one line in the chart, different units should not be displayed. All the lines should use the same unit, such as “Euro”.

Use the line chart if…

You want to emphasize the evolution of a trend over a period of time.
You want to visualize data that contains an intrinsic order, such as age, a range, or a rating (but excluding time). In this case, there is an idea of a progression or trend, and the best way to represent these values is to use the horizontal axis.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Do not use the line chart if…

You want to emphasize the values themselves. Use a column chart instead.
The data does not contain an intrinsic order.

Analytical card with line chart and view switch

Bubble Chart

A bubble chart displays the correlation between three sets of numerical values. One set is represented in the horizontal axis, another set is represented in the vertical axis, and the third set is encoded in the size of the bubbles.

We recommend showing only one or two series. Because series are represented by specific bubble colors, having too many series/colors can make the chart hard to read.

The sizes of the bubbles are determined by the values in the third data series. The measure that is represented by the bubble size is defined below the chart.

Color

If the goal is to isolate outliers within a cloud of other bubbles, use the same color for all bubbles.
If the goal is to group bubbles that have the same characteristic, use one color per group. Warning: Too many colors can make the chart hard to read.
If the goal is to compare bubbles individually, then use one color per bubble. Only use this option if there are very few bubbles.

Use the bubble chart if…

You need a rough approximation of the values encoded in the bubble size.
You want to represent data with three dimensions on a 2D chart.
You want to compare and show the relationships between labeled/categorized circles, by the use of positioning and proportions.
You want to display the correlation between three sets of numerical values.

Do not use the bubble chart if…

You need to represent information only with two dimensions.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Analytical card with bubble chart

Column Chart

Column charts are used to compare multiple values over time or over values containing an intrinsic order (such as age).

Columns are clustered side-by-side along the horizontal axis and are color-coded by series.

We recommend using no more than two series and a maximum of four category items.
If you want to show the trend over time of two series, you can use the line chart with two lines instead of two series of columns.

Use the column chart if…

Category items represent a time series. The natural orientation for time is from left to right.
Category items contain an intrinsic order. For example, age, range, and ranking.
You want to emphasize the values themselves rather than the trends.

Do not use the column chart if…

Your data is not related to a time category or to a category with an intrinsic order.
You want the emphasis to fall on the trend. Use the line chart instead.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

For more detailed information, see column chart.

Analytical card with column chart

Stacked Column Chart

This type of visualization depicts items stacked on top of one other in columns, with the item categories differentiated by colored bars or strips.

This chart works only for time series and categories with an intrinsic order.

Use the stacked column chart if…

You want to display variation of the sum of measures over a period of time.
The sum of the values is as important as the individual items.

Do not use the stacked column chart if…

Accuracy or comparisons are of primary importance. In this case, a line graph might be the better option.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Analytical card with stacked column chart

Vertical Bullet Chart

The bullet chart is used to compare a primary value to a secondary over time or over a category containing an intrinsic order, such as age, range, or ranking.

The bullet chart supports primary values, comparison values and additional values. For more information, see bullet chart.

Use the bullet chart if…

You want to compare a primary value to a secondary value using a reference point. For example, if you want to compare actual and planned costs per quarter.
The category items represent a time series. The natural orientation for time is from left to right.
The category items contain an intrinsic order.

Do not use the bullet chart if…

Your data does not contain an intrinsic order.
You have only one series of data.
There is no data series that act as a reference point for the other data series.

Analytical card with bullet chart

Donut Chart

The donut chart is used for representing parts of a whole, and the whole should always represent 100%. The data is displayed in rings, where each ring represents a data series.

We recommend using a maximum of four sections in the donut chart.

Use the donut chart if…

You want to visualize the part to whole as a percentage.
You have one or more category items that you want to plot.

Do not use the donut chart if…

You want to plot negative or zero values.
You have more than four categories or sections.
You want to compare data over time. You can use the column chart, line chart, stacked column chart, or bullet chart instead.

Analytical card with donut chart

Combined Column and Line Chart

Combined column and line charts are used to compare two sets of values over time or over a category containing an intrinsic order, such as age, range, or ranking.

You could also use a column chart or a line chart for that, but using a combined column and line chart is the better choice if you want to clearly distinguish between the two sets of values, or if the values represent different measures, such as revenue and profit.

Use the combined column and line chart if…

You want to compare values in different categories.
You want to give a clear view of which category is higher or lower.
You want to use more than one measure.

Do not use the combined column and line chart if…

The combination data between line and column is not logical.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Analytical card with combined column and line chart

Scatter Plot Chart

A scatter plot chart is a type of chart that displays the correlation between two sets of numerical values. The data is displayed as a set of points plotted on a horizontal and vertical axis.

We recommend showing only one or two series. Because bubbles in a series are color-coded, having too many series/bubbles can make the chart hard to read.

Use the scatter plot chart if…

You want to show the correlation between two sets of numerical values (for example, the correlation between age and income).

Do not use the scatter plot chart if…

You want to show the correlation between three sets of numerical values. Use the bubble chart instead.

Analytical card with scatter plot chart

Behavior and Interaction

The entire header area of the card is selectable. It serves as navigation to the specific app or view from which the card content originates. If the application needs to show detailed information about a specific data point, the single selection mode can be used. It is up to the app developer to provide meaningful navigation. For example, clicking/tapping on a section from the donut chart can navigate the user to an object page providing more information.

There are two selection modes for the charts: single selection and no selection. Clicking or tapping a blank area on the chart does not trigger any action.

Single Selection

In the single selection mode, clicking or tapping a data point selects the data point and navigates to a more detailed screen.

No Selection

In this mode, data points cannot be selected individually and therefore no actions can be triggered from a data point.

Guidelines

Number of Data Points

There is no technical limitation regarding the number of data points, but be aware that the user experience can be very degraded when there are too many data points. For example, labels in the horizontal axis will be displayed at 45⁰. In the bubble chart, too much bubbles might lead to unreadable information.

Chart Title

The chart title is always visible for each chart type. It is used to describe the axis titles within the chart. For example, Revenue by quarter conveys that the y-axis represents the revenue and x-axis represents the quarters.

Time Axis

The time axis is more responsive and shows information in much better manner compared to the category axis. Currently the time axis is supported for the line, column, stacked column, bubble and combination charts. You could use these chart types either with the category or with the time axis. We recommend using the time axis when the category items represent a time series.

The time axis has three main advantages:

It allows you to display dates and times in a responsive manner.
All the complexity involved with formatting the axis labels is automatically taken care of.
The physical spacing between the data points accurately represents the time scale, as opposed to being equidistant.

Axis Title

The axis titles are always hidden, except in the bubble and scatter plot chart. Instead use the chart title of the Analytical Card to convey this information. For example, Revenue by quarter conveys that the y-axis represents the revenue and x-axis represents the quarters.

Axis Labels

Try to avoid displaying labels at 45⁰. Use abbreviations for dates, such as Jan or Feb for months, or Q1 or Q2 for quarters.

Semantic Colors Based on Values

Use semantic coloring based on values when you want to show data points that are bad, medium or good. Based on the defined threshold values the color of each data points could be red, green, or orange.

Legend

Colors are automatically assigned and cannot be customized.

View Switch

The view switch functionality provides the user with different views of the data in one card. It can be used for filtering, sorting, or grouping (such as by supplier or material group). The view switch is optional.

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

SAP Fiori Element – Overview Page (guidelines)

Implementation

No links

Analytical Card

The analytical card is used for data visualization. It consist of two areas – a header area (either a standard header or a KPI header) and a chart area that displays a visual representation of the data. It is a single object card and does not contain a footer area. The analytical card can only be used in the overview page (OVP).

Responsiveness

The analytical card has a uniform horizontal width of either 20 or 25 rem, depending on the screen size. The vertical height is flexible. The VizFrame charts within the cards are fully responsive.

Header Area

There are two header types that could be used with the analytical card depending on the use case:

Standard Header

Title (mandatory): The title symbolizes the most important information. We recommend using a single-line text, but it is possible to wrap the title to two lines.
Subtitle (optional): The subtitle gets truncated after one line. If the subtitle contains multiple qualifiers, separate them with comma. Do not repeat the chart title here.

Standard header

KPI Header

Title (mandatory): The title symbolizes the most important information. We recommend using a single-line text, but it is possible to wrap the title to two lines.
Subtitle (optional): The subtitle gets truncated after one line. If the subtitle contains multiple qualifiers, separate them with comma. Do not repeat the chart title here.
KPI area, containing the following elements:
- Trend arrow (optional)
- KPI value (mandatory) – the KPI value uses semantic colors
- Percentage symbol (optional)
- Target and deviation (both mandatory) – the deviation could be a relative or absolute value.

KPI header

Types

There are eight chart types currently supported by the analytical card:

Line
Bubble
Column
Stacked column
Vertical bullet
Donut
Combined
Scatter plot

Information

You can find additional information about the different chart types, as well as tips for choosing the correct chart type, in the following articles:

Line Chart

In general, the line chart is the most efficient chart for showing the evolution of a trend over a period of time.

Avoid showing more than four lines in the same card.
When showing more than one line in the chart, different units should not be displayed. All the lines should use the same unit, such as “Euro”.

Use the line chart if…

You want to emphasize the evolution of a trend over a period of time.
You want to visualize data that contains an intrinsic order, such as age, a range, or a rating (but excluding time). In this case, there is an idea of a progression or trend, and the best way to represent these values is to use the horizontal axis.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Do not use the line chart if…

You want to emphasize the values themselves. Use a column chart instead.
The data does not contain an intrinsic order.

Analytical card with line chart and view switch

Bubble Chart

A bubble chart displays the correlation between three sets of numerical values. One set is represented in the horizontal axis, another set is represented in the vertical axis, and the third set is encoded in the size of the bubbles.

We recommend showing only one or two series. Because series are represented by specific bubble colors, having too many series/colors can make the chart hard to read.

The sizes of the bubbles are determined by the values in the third data series. The measure that is represented by the bubble size is defined below the chart.

Color

If the goal is to isolate outliers within a cloud of other bubbles, use the same color for all bubbles.
If the goal is to group bubbles that have the same characteristic, use one color per group. Warning: Too many colors can make the chart hard to read.
If the goal is to compare bubbles individually, then use one color per bubble. Only use this option if there are very few bubbles.

Use the bubble chart if…

You need a rough approximation of the values encoded in the bubble size.
You want to represent data with three dimensions on a 2D chart.
You want to compare and show the relationships between labeled/categorized circles, by the use of positioning and proportions.
You want to display the correlation between three sets of numerical values.

Do not use the bubble chart if…

You need to represent information only with two dimensions.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Analytical card with bubble chart

Column Chart

Column charts are used to compare multiple values over time or over values containing an intrinsic order (such as age).

Columns are clustered side-by-side along the horizontal axis and are color-coded by series.

We recommend using no more than two series and a maximum of four category items.
If you want to show the trend over time of two series, you can use the line chart with two lines instead of two series of columns.

Use the column chart if…

Category items represent a time series. The natural orientation for time is from left to right.
Category items contain an intrinsic order. For example, age, range, and ranking.
You want to emphasize the values themselves rather than the trends.

Do not use the column chart if…

Your data is not related to a time category or to a category with an intrinsic order.
You want the emphasis to fall on the trend. Use the line chart instead.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

For more detailed information, see column chart.

Analytical card with column chart

Stacked Column Chart

This type of visualization depicts items stacked on top of one other in columns, with the item categories differentiated by colored bars or strips.

This chart works only for time series and categories with an intrinsic order.

Use the stacked column chart if…

You want to display variation of the sum of measures over a period of time.
The sum of the values is as important as the individual items.

Do not use the stacked column chart if…

Accuracy or comparisons are of primary importance. In this case, a line graph might be the better option.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Analytical card with stacked column chart

Vertical Bullet Chart

The bullet chart is used to compare a primary value to a secondary over time or over a category containing an intrinsic order, such as age, range, or ranking.

The bullet chart supports primary values, comparison values and additional values. For more information, see bullet chart.

Use the bullet chart if…

You want to compare a primary value to a secondary value using a reference point. For example, if you want to compare actual and planned costs per quarter.
The category items represent a time series. The natural orientation for time is from left to right.
The category items contain an intrinsic order.

Do not use the bullet chart if…

Your data does not contain an intrinsic order.
You have only one series of data.
There is no data series that act as a reference point for the other data series.

Analytical card with bullet chart

Donut Chart

The donut chart is used for representing parts of a whole, and the whole should always represent 100%. The data is displayed in rings, where each ring represents a data series.

We recommend using a maximum of four sections in the donut chart.

Use the donut chart if…

You want to visualize the part to whole as a percentage.
You have one or more category items that you want to plot.

Do not use the donut chart if…

You want to plot negative or zero values.
You have more than four categories or sections.
You want to compare data over time. You can use the column chart, line chart, stacked column chart, or bullet chart instead.

Analytical card with donut chart

Combined Column and Line Chart

Combined column and line charts are used to compare two sets of values over time or over a category containing an intrinsic order, such as age, range, or ranking.

You could also use a column chart or a line chart for that, but using a combined column and line chart is the better choice if you want to clearly distinguish between the two sets of values, or if the values represent different measures, such as revenue and profit.

Use the combined column and line chart if…

You want to compare values in different categories.
You want to give a clear view of which category is higher or lower.
You want to use more than one measure.

Do not use the combined column and line chart if…

The combination data between line and column is not logical.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Analytical card with combined column and line chart

Scatter Plot Chart

A scatter plot chart is a type of chart that displays the correlation between two sets of numerical values. The data is displayed as a set of points plotted on a horizontal and vertical axis.

We recommend showing only one or two series. Because bubbles in a series are color-coded, having too many series/bubbles can make the chart hard to read.

Use the scatter plot chart if…

You want to show the correlation between two sets of numerical values (for example, the correlation between age and income).

Do not use the scatter plot chart if…

You want to show the correlation between three sets of numerical values. Use the bubble chart instead.

Analytical card with scatter plot chart

Behavior and Interaction

The entire header area of the card is selectable. It serves as navigation to the specific app or view from which the card content originates. If the application needs to show detailed information about a specific data point, the single selection mode can be used. It is up to the app developer to provide meaningful navigation. For example, clicking/tapping on a section from the donut chart can navigate the user to an object page providing more information.

There are two selection modes for the charts: single selection and no selection. Clicking or tapping a blank area on the chart does not trigger any action.

Single Selection

In the single selection mode, clicking or tapping a data point selects the data point and navigates to a more detailed screen.

No Selection

In this mode, data points cannot be selected individually and therefore no actions can be triggered from a data point.

Guidelines

Number of Data Points

There is no technical limitation regarding the number of data points, but be aware that the user experience can be very degraded when there are too many data points. For example, labels in the horizontal axis will be displayed at 45⁰. In the bubble chart, too much bubbles might lead to unreadable information.

Chart Title

The chart title is always visible for each chart type. It is used to describe the axis titles within the chart. For example, Revenue by quarter conveys that the y-axis represents the revenue and x-axis represents the quarters.

Time Axis

The time axis is more responsive and shows information in much better manner compared to the category axis. Currently the time axis is supported for the line, column, stacked column, bubble and combination charts. You could use these chart types either with the category or with the time axis. We recommend using the time axis when the category items represent a time series.

The time axis has three main advantages:

It allows you to display dates and times in a responsive manner.
All the complexity involved with formatting the axis labels is automatically taken care of.
The physical spacing between the data points accurately represents the time scale, as opposed to being equidistant.

Axis Title

The axis titles are always hidden, except in the bubble and scatter plot chart. Instead use the chart title of the Analytical Card to convey this information. For example, Revenue by quarter conveys that the y-axis represents the revenue and x-axis represents the quarters.

Axis Labels

Try to avoid displaying labels at 45⁰. Use abbreviations for dates, such as Jan or Feb for months, or Q1 or Q2 for quarters.

Semantic Patterns

The analytical card supports semantic patterns, such as dashes, dots, or hatches, in order to distinguish:

Actual values: What values are (solid pattern).
Projected values:What values might be (dashed line, hatched areas).

Currently, semantic patterns are supported for the following chart types: line chart, column chart, and vertical bullet chart.

Semantic Colors Based on Values

Use semantic coloring based on values when you want to show data points that are positive, neutral, or negative. Based on the defined threshold values, the color of each data point could be red, green, or orange. For more information on color use, see colors.

Legend

Colors are automatically assigned and cannot be customized.

View Switch

The view switch functionality provides the user with different views of the data in one card. It can be used for filtering, sorting, or grouping (such as by supplier or material group). The view switch is optional.

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

SAP Fiori Element – Overview Page (guidelines)

Implementation

No links.

Analytical Card

The analytical card is used for data visualization. It consist of two areas: a header area that displays the aggregated value of a key measure (KPI), and a chart area that displays a visual representation of the data. It is a single object card and does not contain a footer area. The analytical card can only be used in the overview page (OVP).

The KPI header area includes:

Title (mandatory)
A KPI with the respective unit (mandatory)
A subtitle (optional)
- The subtitle can show the filter criteria used for the chart, and can contain up to two lines of text
A percentage (optional)
A triangle indicator (optional, showing upward or downward trend)

The KPI itself adopts the semantic colors red (negative), green (positive), or gray (neutral).

KPI header

Responsiveness

The analytical card has a uniform horizontal width of either 20 or 25 rem, depending on the screen size. The vertical height is flexible. The VizFrame charts within the cards are fully responsive.

Types

There are six chart types currently supported by the analytical card:

Line
Bubble
Column
Stacked column
Vertical bullet
Donut

Information

You can find additional information about the different chart types, as well as tips for choosing the correct chart type, in the following articles:

Line Chart

In general, the line chart is the most efficient chart for showing the evolution of a trend over a period of time.

Avoid showing more than four lines in the same card.
When showing more than one line in the chart, different units should not be displayed. All the lines should use the same unit, such as “Euro”.

Use the line chart if…

You want to emphasize the evolution of a trend over a period of time.
You want to visualize data that contains an intrinsic order, such as age, a range, or a rating (but excluding time). In this case, there is an idea of a progression or trend, and the best way to represent these values is to use the horizontal axis.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Do not use the line chart if…

You want to emphasize the values themselves. Use a column chart instead.
The data does not contain an intrinsic order.

Analytical card with line chart

Bubble Chart

A bubble chart is a type of chart that displays the correlation between three sets of numerical values. One set is represented in the horizontal axis, another set is represented in the vertical axis and the third set is encoded in the size of the bubbles.

We recommend showing only one or two series. Because series are represented by specific bubble colors, having too many series/colors can make the chart hard to read. The sizes of the bubbles are determined by the values in the third data series. The measure that is represented in the bubble size should be explained in the title.

Color

If the goal is to isolate outliers within a cloud of other bubbles, use the same color for all bubbles.
If the goal is to group bubbles that have the same characteristic, use one color per group. Warning: Too many colors can make the chart hard to read.
If the goal is to compare bubbles individually, then use one color per bubble. Warning: Use only this option if there are very few bubbles. Too many bubbles can make the chart hard to read.

Use the bubble chart if…

You need a rough approximation of the values encoded in the bubble size.
You want to represent data with three dimensions on a 2D chart.
You want to compare and show the relationships between labeled/categorized circles, by the use of positioning and proportions.
You want to display the correlation between three sets of numerical values.

Do not use the bubble chart if…

You need to represent information only with two dimensions.

Analytical card with bubble chart

Column Chart

Column charts are used to compare multiple values over time or over values containing an intrinsic order (such as age).

Columns are clustered side-by-side along the horizontal axis and are color-coded by series.

We recommend using no more than two series and a maximum of four category items.
If you want to show the trend over time of two series, you can use the line chart with two lines instead of two series of columns.

Use the column chart if…

Category items represent a time series. The natural orientation for time is from left to right.
Category items contain an intrinsic order. For example, age, range, and ranking.
You want to emphasize the values themselves rather than the trends.

Do not use the column chart if…

Your data is not related to a time category or to a category with an intrinsic order.
You want to emphasize the evolution of the trend over a period of time. Use the line chart instead.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

For more detailed information, see column chart.

Analytical card with column chart

Stacked Column Chart

This type of visualization depicts items stacked on top of one other in columns, with the item categories differentiated by colored bars or strips.

This chart works only for time series and categories with an intrinsic order.

Use the stacked column chart if…

You want to display variation of the sum of measures over a period of time.
The sum of the values is as important as the individual items.

Do not use the stacked column chart if…

Accuracy or comparisons are of primary importance. In this case, a line graph might be the better option.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Analytical card with stacked column chart

Vertical Bullet Chart

The bullet chart is used to compare a primary value to a secondary over time or over a category containing an intrinsic order, such as age, range, or ranking.

The bullet chart supports primary values, comparison values and additional values. For more information, see bullet chart.

Use the bullet chart if…

You want to compare a primary value to a secondary value using a reference point. For example, if you want to compare actual and planned costs per quarter.
The category items represent a time series. The natural orientation for time is from left to right.
The category items contain an intrinsic order.

Do not use the bullet chart if…

Your data does not contain an intrinsic order.
You have only one series of data.
There is no data series that act as a reference point for the other data series.

Analytical card with bullet chart

Donut Chart

The donut chart is used for representing parts of a whole, and the whole should always represent 100%. The data is displayed in rings, where each ring represents a data series.

We recommend using a maximum of four sections in the donut chart.

Use the donut chart if…

You want to visualize the part to whole as a percentage.
You have one or more category items that you want to plot.

Do not use the donut chart if…

You want to plot negative or zero values.
You have more than four categories or sections.
You want to compare data over time. You can use the column chart, line chart, stacked column chart, or bullet chart instead.

Analytical card with donut chart

Behavior and Interaction

In the analytical card, sections of charts can be tapped or clicked in order to display additional information via navigation to a more detailed screen. It is up to the app developer to provide meaningful navigation. For example, tapping or clicking on a section of a donut chart allows the user to navigate to an object page for more information.

Selecting data points individually is the only interaction that is provided within the charts of the card. Otherwise, clicking or tapping a blank area does not trigger any action.

Guidelines

Number of Data Points

There is no technical limitation regarding the number of data points, but be aware that the user experience can be very degraded when there are too many data points. For example, labels in the horizontal axis will be displayed at 45⁰. In the bubble chart, too much bubbles might lead to unreadable information.

Axis Title

The axis titles are always hidden, except in the bubble chart. Use the title or the subtitle of the analytical card to convey this information. For example, Revenue by quarter conveys that the y-axis represents the revenue and x-axis represents the quarters.

Axis Labels

Try to avoid displaying labels at 45⁰. Use abbreviations for dates, such as Jan or Feb for months, or Q1 or Q2 for quarters.

Legend

Colors are automatically assigned and cannot be customized.

Resources

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

Elements and Controls

Smart Template – Overview Page (guidelines)

Implementation

No links

Analytical Card

Choosing the Correct Chart Type

Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to illustrate when choosing the correct chart type.

Ranking

Rank items from highest to lowest, or vice versa.
For example: Rank countries by market share.

For more information, see ranking.

Comparison

Compare values of items in a list that has no particular order.
For example: Compare revenues in a list of products, or transaction volumes in a list of banks.

For more information, see comparison.

Variation through Time

Show the variation of values though time.
For example: Show stock level through time, or expenses by month compared to budget.

For more information, see variation through time.

Part to Whole

Display contribution of individual values to the whole.
For example: Show the percentage of sales attributed to various regions.

For more information, see part to whole.

Deviation

Show the deviation, difference, or gap between two sets of values.
For example: Show the deviation between actual revenue and target revenue by product.

For more information, see deviation.

Distribution

Show distribution within a set of values.
For example: Show how exam scores are spread or grouped around the median score.

For more information, see distribution.

Correlation

Show correlation between two or three sets of values.
For example: Show how sales revenues are impacted by customer age.

For more information, see correlation.

Cumulation

Show the accumulation of successive values.
For example: Show cumulation of stock day by day, or cumulation of revenues and cost for profit and loss.

For more information, see cumulation.

Geographical Values

Use a map to show the values associated with geographical areas.
For example: Show revenues by country on a map.

For more information, see maps.

Recources

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

Chart (guidelines)

Implementation

No links.

Range Slider

A range slider is a user interface control that enables the user to select a value range in a predefined numerical interval.

Range slider

Usage

Use the range slider if you want to select a value range in a predefined numerical interval. If you want to specify only a single value in a predefined numerical interval, use the slider instead.

Responsiveness

The range slider itself is not responsive. It adjusts to the responsiveness of its parent container by recalculating and resizing the width of the control. The range slider supports the cozy and compact form factors.

Types

Only a horizontal range slider is available.

Components

The range slider consists of:

Progress line
Minimum and maximum values
Grips
Tooltips

Range slider components

Behavior and Interaction

Adjusting the Values

If the range slider is editable, the hand cursor appears when hovering over the range slider with the mouse. A tooltip also appears when hovering, displaying the current values of each grip. The grips move together with the corresponding tooltips.

The value range of the slider can be changed when the grips are adjusted via drag and drop. The grips can be moved with or without increments based on the predefined steps. The value range can be changed by clicking or tapping the bar outside of it. The corresponding grip then moves to this new position.

Range slider - hovered

Equal values

The grips of the range slider can be positioned on the same value.

Range slider - equal values

Overlapping

The grips of the range slider can be moved across each other. The minimum can become the maximum and vice versa.

Properties

The step property must be positive. If a negative number is provided, the default value 1 is used instead.
The minimum, maximum, and value properties can be decimals (float values). The slider automatically sets the minimum value to 0 and the maximum value to 100 by default.
The width of the control can be provided in percentage (%), em, px, and all possible CSS units. The slider automatically sets the width of the slider to 100% by default.
The range property determines the range in which the user can select values. If the value is lower/higher than the allowed minimum/maximum, a warning message will be sent to the console.

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

Slider (guidelines)

Implementation

Range Slider (SAPUI5 samples)
Range Slider (SAPUI5 API reference)

Range Slider

A range slider is a user interface control that enables the user to select a value range in a predefined numerical interval.

Range slider

Usage

Use the range slider if you want to select a value range in a predefined numerical interval. If you want to specify only a single value in a predefined numerical interval, use the slider instead.

Responsiveness

The range slider itself is not responsive. It adjusts to the responsiveness of its parent container by recalculating and resizing the width of the control. The range slider supports the cozy and compact form factors.

Types

Only a horizontal range slider is available.

Components

The range slider consists of:

Progress line
Minimum and maximum value
Grips
Tooltips or input fields

Range slider components

Behavior and Interaction

Changing Values

If the range slider is editable, the hand cursor appears when hovering over the range slider with the mouse. A tooltip also appears when hovering, displaying the current values of each grip. The grips move together with the corresponding tooltips.

The value range of the slider can be changed when the grips are adjusted via drag and drop. The grips can be moved with or without increments based on the predefined steps. The value range can be changed by clicking or tapping the bar outside of it. The corresponding grip then moves to this new position.

Range Slider - hovered

Range Slider With Input Fields

The range slider can be used with input fields instead of tooltips.

Range slider with input fields

Moving the Entire Range

The value range can be changed when the progress line is adjusted via drag and drop.

Range slider - Moving the entire range

Equal Values

The grips of the range slider can be positioned on the same value.

Range slider - equal values

Overlapping

The grips of the range slider can be moved across each other. The minimum can become the maximum and vice versa.

Properties

The step property must be positive. If a negative number is provided, the default value 1 is used instead.
The minimum, maximum, and value properties can be decimals (float values). The slider automatically sets the minimum value to 0 and the maximum value to 100 by default.
The width of the control can be provided in percentage (%), em, px, and all possible CSS units. The slider automatically sets the width of the slider to 100% by default.
The range property determines the range in which the user can select values. If the value is lower/higher than the allowed minimum/maximum, a warning message will be sent to the console.
The inputsAsTooltips property indicates whether input fields should be used as tooltips for the grips.

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

Slider (guidelines)
Input Field (guidelines)

Implementation

Range Slider (SAPUI5 samples)
Range Slider (SAPUI5 API reference)

Range Slider

Chart – Deviation

This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two years, or the difference between actual expenses and target expenses for different cost centers.

The first two sections address deviations within a non-time category. The last two sections are dedicated to time-category.

All figures that represent a deviation should include a + or – sign. They can appear in the value axis, close to the data points in the plot area, and in popovers.

Deviation Only

This section explains how to visualize the deviation (difference) between two measures, and only the deviation. The chart below shows the difference between the actual cost and budgeted cost for multiple cost centers.

Deviation between two measures

Deviation in Percentage

It’s a good idea to consider whether the actual value can be given as a percentage when displaying a deviation. The chart below displays the same information as the chart above, but the deviation is expressed in percentage.

Deviation in percentage between 2 measures

If the order is not important, you can also rank items to make the values easy to compare, as illustrated below.

Ranked Deviation in % between 2 measures

Deviation and Measures

Sometimes you may want to display two measures and the variance (deviation) between them.

The best way to achieve this is by displaying two charts side-by-side: a bullet chart to display the two measures, and a bar chart to display the deviation. Placing the variance (deviation) in a separate chart makes it easy to compare the variance.

The chart below displays the variance between actual expenses and planned expenses for different cost centers and the deviation between them.

Actual and Budget and their deviation

For the same reason mentioned above, you should consider displaying the deviation in percentages as illustrated below:

Actual and Budget and their deviation in percentage

Time Deviation Only

This section explains how to show the deviation through time between two measures, and only the deviation. If you want to show the measures as well, please proceed to the the next section called ‘Time Deviation and Measures’.

Focus on Value

You can use a column chart when the value of the variance is more important than the trend of the variance.

Deviation through time in a column chart

Focus on Trend

Use a line chart if you want to focus on the trend of the variation, as illustrated below.

Trend of a deviation through time using actual values

Sometimes, it’s better to see the deviation as a percentage. In these circumstances, choose one measure as the reference and express the deviation as a percentage of the reference. The chart below contains the same information as the chart above, but with the variation expressed in percentage. You can now see that the deviation in March and June were very high.

Trend of the deviation through time given as a percentage

Time Deviation and Measures

If you want to display two measures and the deviation in the same visualization, you can use two charts one above the other. And, if the trend of the measures and the variation is important, or if there are many data points, you can use two line charts as illustrated below.

Deviation and measures through time - deviation in a line

When the value of the variance is more important than the trend of the variance, you can use a bullet chart and a column chart side by side. The chart below displays Actual and Target through time, as well as the deviation for each time period.

Actual and target through time - deviation in columns

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

Chart (guidelines)

Implementation

No links.

Chart – Part to Whole

This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).

Example use case: The regional sales revenue contribution shown in comparison to the total sales revenue of a company.

Information

For more information about the different charts mentioned in this article, see chart types.

Bar Charts

When designers think about visualising parts of a whole, they are invariably drawn toward the trusty pie chart. However, in many cases simple bars are in fact a far better option because you can:

Compare parts to each other.
Display category labels and value labels associated with each part.
Display multiple values.
Display small values in a better way.
Avoid having to use multiple colors and a corresponding legend.

The first chart in this example below represents the cash position by currency.

If the order of the category items is not important, you should rank the items from the biggest value to the lowest value as illustrated below. This makes it easy to compare items and see the highest values and smallest values.

Part to whole shown using bars

Part to whole in bars, ranked by percentage

Pie Charts

The pie chart (donut chart) is best used when there are only two or three slices to display, and when it’s not important to immediately have the exact value of each slice. Note that the values are ranked from the largest to the smallest to make reading and comparison easier, although you can use a different order if it’s important in the context of your application.

Part to whole in a pie chart

Pie charts are great to use if you’re primarily interested in seeing how much the largest values compare to the rest in percentage. In the chart below, a company has ten stores, but we are most interested in seeing how much percentage the three biggest stores represent. The rest of the stores have been grouped under a slice called ‘Others’. You can easily see that the first three stores represent approximatively 75-80%.

Pie chart with a slice “Other”

Variations through Time

If you want to show how a part to whole evolves through time, you can use a line chart, multiple bar charts, or stacked columns. Generally speaking, the line chart is the best solution where you can use one line for each part of the whole as illustrated below.

Part to whole through time - line chart

When there are a small number of time periods (between 2 and 4), you can use bar charts side by side as illustrated below. In this example, the chart represents the contribution of six product lines to the total revenue of a company over a period of four years. Because the first chart is ranked by percentage, you can easily identify when the shape of the different parts changes through time. You can see the contribution made by ‘Flat Screen TVs’ has increased over the last two years compared to the other product lines.

Part to whole through time with few time periods

If there are only two parts in the whole, you can use a stacked column as illustrated below. Here the evolution of each part is immediately visible.

Part to whole through time - stacked bar with 2 bars

If there are more than two parts in the whole, the first and last values are easy to compare. However, it’s hard to grasp the evolution of parts that exist between the first and last parts. In the chart below the ‘neutral mentions’ are less important so it’s acceptable not to be able to compare them very easily, and only have a rough approximation of their evolution.

Part to whole through time - stacked bar with 3 bars

Comparison

If you want to compare the composition of a whole between few items, use bar charts side by side. The chart below illustrates the contribution that five product lines make to the total revenue of three sales regions. Note that the first sales region is ranked by percentage, which makes easy to compare the shape of each chart.

Part to whole comparison between few category items

Stacked bars work well when you have only two parts. The chart below is used in the Cash Management app and displays the import status of bank statements for some banks expressed in percentages.

Comparison of part to whole - 2 parts

If there is no reason to display the items in a specific order, you can rank by one of the measures. The chart below contains the same information as the chart above, except now the banks have been ranked according to the successful import rate.

Comparison of part to whole - 2 ranked parts

If there are more than two parts in the whole, the first and last values are easy to compare. However, it’s hard to grasp the evolution of parts that exist between the first and last parts.

The chart below displays the revenue contribution made by three sales regions of each for five product lines. In the context of the application, the ‘Asia’ sales region is less important so it’s acceptable not to be able to compare the values very easily, and only have a rough approximation of their evolution. The American sales region is also the most important, so it is displayed first in order to rank the product lines.

Comparison of part to whole - 3 parts

If you want to know which items have the biggest values and how many of these items contribute to the total of the values, you can use a Pareto chart which is designed to illustrate the well-known 80%/20% rule. That is, 20% of the items contribute to 80% of the total.

The chart below displays the number of defects by type of defect, and we can see that 80% of the defects come from the first four types of defect.

Part to whole - Pareto chart

Resources

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

Elements and Controls

Chart (guidelines)

Implementation

No links.

Chart – Semantic Patterns

Chart – Part to Whole

Chart – Semantic Patterns

This article explains how to use patterns like dashes, dots or hatches in order to distinguish:

Actual Values: What values are (solid pattern).
Projected Values: What values might be (dashed line, hatched areas).
Reference Values: What values should be (dotted line with empty circles, empty areas).

Actual Values

Actual values register facts that happened in the past and utilize the solid pattern for areas and lines, as illustrated below.

Line Chart with actual values

Column Chart with actual values

Projected Values

Projected values are estimates of what might happen in the future such as a forecast, estimation or prediction. They indicate what the actual values will be in the future, and the projection can be calculated by the system, extrapolated from previous time periods, or entered manually by a user.

Example:

Revenue forecast calculated from previous months.
Adjusted revenue forecast that has been manually adjusted based on the current context.
Cost for projects that are committed, but not yet delivered.

Dashed Line

Use dashed lines to show projected values as illustrated below.

Line chart with actual and forecast values

A line can change from solid to dashed when the line needs to display actual values followed by projected values. In the example below, the line connecting the last actual value (2015) to the first projected value (2016) is dashed to indicate that the line is a projection.

Line chart with actual values followed by forecast values

Hatched Area

Use the hatched pattern in columns and bars to display projected values, as illustrated below.

Column chart with actual and forecast values

Stacked bar chart with actual and forecast values

A series of columns with the solid pattern can be followed by a series of columns with the hatched pattern when a series displays actual values followed by projected values, as illustrated below.

Column chart with actual values followed by forecast values

Bullet chart with actual values followed by forecast values

Reference Values

Some values represent a reference for other values (such as a threshold that should be reached or should not be reached) depending on the use case. Here are some examples:

A target revenue that must be reached.
An expense budget that should not be exceeded.
The share price of a competitor to use as a benchmark.
The number of new customers acquired last year that needs to be exceeded this year.

The bullet chart is the ideal chart to compare values with reference values. The reference value is displayed by the black horizontal lines as illustrated in the chart below.

Bullet chart with actual and target values

Dotted Line and Empty Circle

Warning

Please note that the dotted lines are supported starting from SAPUI5 version 1.40 and higher only.

Reference values displayed as a line should use a dotted line and empty circles for the data points as illustrated below.

Line chart with actual and target values

When there are many data points, the circles are automatically hidden, as illustrated below.

Line chart with plenty of actual and target values

When the chart contains one actual value and one reference value (such as a target), you should use color sapUiChartPaletteSequentialNeutralDark2 for the reference line and the first color from the Qualitative palette for the actual value, as illustrated below.

Colors used in a line chart with actual and target values

When the chart combines a single reference value (such as a target) with multiple actual values, you should use color sapUiChartPaletteSequentialNeutralDark2 for the reference line and colors from the qualitative palette for the actual values, as illustrated below.

Line chart with one single target value for multiple actual values

When the chart contains multiple pairs of actual values and reference values, you should use a darker color for the reference value and a light color for the actual value with the same hue.

Colors for the Reference Values in the chart below:

sapUiChartPaletteSequentialHue1Dark1
sapUiChartPaletteSequentialHue2Dark1
sapUiChartPaletteSequentialHue3Dark1

Colors for the Actual Values in the chart below:

sapUiChartPaletteSequentialHue1Light1
sapUiChartPaletteSequentialHue2Light1
sapUiChartPaletteSequentialHue3Light1

Line chart with multiple pairs of actual and target values

When the reference values and the actual values do not have a direct relationship, you should use colors from the qualitative palette and all the lines should all have different colors, as illustrated below.

Line chart with multiple actual values and multiple target values

Empty Area

Please note that empty areas are not supported in version 1.38 of SAPUI5 and lower.

When columns or bars are used to display reference values such as a target, plan or budget you should use the empty pattern. You should also use the color sapUiChartPaletteSequentialNeutralDark2 for the reference value and the first color from the qualitative palette for the actual value as illustrated below.

Column chart with actual values and target values

When the chart contains a reference value (like a target) for multiple actual values, you should use color sapUiChartPaletteSequentialNeutralDark2 for the reference value and colors from the qualitative palette for the actual values, as illustrated below.

Column chart with one single target value for multiple actual values

When the chart contains multiple sets of linked actual values and reference values, you should use a darker color for the reference value and a light color for the actual value with the same hue.

Colors for the Reference Values in the chart below:

sapUiChartPaletteSequentialHue1Dark1
sapUiChartPaletteSequentialHue2Dark1
sapUiChartPaletteSequentialHue3Dark1

Colors for the Actual Values in the chart below:

sapUiChartPaletteSequentialHue1Light1
sapUiChartPaletteSequentialHue2Light1
sapUiChartPaletteSequentialHue3Light1

Column chart with multiple pairs of actual and target values

When multiple reference values and multiple actual values do not have a direct relationship, you should use colors from the qualitative palette. Columns for the reference values and columns for the actual values should all have different colors, as illustrated below.

Column char with multiple actual vales and multiple target values

Resources

Elements and Controls

Chart (guidelines)

Implementation

Multiple Measure In one Series (SAPUI5 samples)

Chart – Semantic Patterns

This article explains how to use patterns like dashes, dots or hatches in order to distinguish:

Actual Values: What values are (solid pattern).
Projected Values: What values might be (dashed line, hatched areas).
Reference Values: What values should be (dotted line with empty circles, empty areas).

Actual Values

Actual values register facts that happened in the past and utilize the solid pattern for areas and lines, as illustrated below.

Line Chart with actual values

Column Chart with actual values

Projected Values

Projected values are estimates of what might happen in the future such as a forecast, estimation or prediction. They indicate what the actual values will be in the future, and the projection can be calculated by the system, extrapolated from previous time periods, or entered manually by a user.

Example:

Revenue forecast calculated from previous months.
Adjusted revenue forecast that has been manually adjusted based on the current context.
Cost for projects that are committed, but not yet delivered.

Dashed Line

Use dashed lines to show projected values as illustrated below.

Line chart with actual and forecast values

A line can change from solid to dashed when the line needs to display actual values followed by projected values. In the example below, the line connecting the last actual value (2015) to the first projected value (2016) is dashed to indicate that the line is a projection.

Line chart with actual values followed by forecast values

Hatched Area

Use the hatched pattern in columns and bars to display projected values, as illustrated below.

Column chart with actual and forecast values

Stacked bar chart with actual and forecast values

A series of columns with the solid pattern can be followed by a series of columns with the hatched pattern when a series displays actual values followed by projected values, as illustrated below.

Column chart with actual values followed by forecast values

Bullet chart with actual values followed by forecast values

Reference Values

Some values represent a reference for other values (such as a threshold that should be reached or should not be reached) depending on the use case. Here are some examples:

A target revenue that must be reached.
An expense budget that should not be exceeded.
The share price of a competitor to use as a benchmark.
The number of new customers acquired last year that needs to be exceeded this year.

The bullet chart is the ideal chart to compare values with reference values. The reference value is displayed by the black horizontal lines as illustrated in the chart below.

Bullet chart with actual and target values

Dotted Line and Empty Circle

Reference values displayed as a line should use a dotted line and empty circles for the data points as illustrated below.

Line chart with actual and target values

When there are many data points, the circles are automatically hidden, as illustrated below.

Line chart with plenty of actual and target values

When the chart contains one actual value and one reference value (such as a target), you should use color sapUiChartPaletteSequentialNeutralDark2 for the reference line and the first color from the Qualitative palette for the actual value, as illustrated below.

Colors used in a line chart with actual and target values

When the chart combines a single reference value (such as a target) with multiple actual values, you should use color sapUiChartPaletteSequentialNeutralDark2 for the reference line and colors from the qualitative palette for the actual values, as illustrated below.

Line chart with one single target value for multiple actual values

When the chart contains multiple pairs of actual values and reference values, you should use a darker color for the reference value and a light color for the actual value with the same hue.

Colors for the Reference Values in the chart below:

sapUiChartPaletteSequentialHue1Dark1
sapUiChartPaletteSequentialHue2Dark1
sapUiChartPaletteSequentialHue3Dark1

Colors for the Actual Values in the chart below:

sapUiChartPaletteSequentialHue1Light1
sapUiChartPaletteSequentialHue2Light1
sapUiChartPaletteSequentialHue3Light1

Line chart with multiple pairs of actual and target values

When the reference values and the actual values do not have a direct relationship, you should use colors from the qualitative palette and all the lines should all have different colors, as illustrated below.

Line chart with multiple actual values and multiple target values

Empty Area

When columns or bars are used to display reference values such as a target, plan or budget you should use the empty pattern. You should also use the color sapUiChartPaletteSequentialNeutralDark2 for the reference value and the first color from the qualitative palette for the actual value as illustrated below.

Column chart with actual values and target values

When the chart contains a reference value (like a target) for multiple actual values, you should use color sapUiChartPaletteSequentialNeutralDark2 for the reference value and colors from the qualitative palette for the actual values, as illustrated below.

Column chart with one single target value for multiple actual values

When the chart contains multiple sets of linked actual values and reference values, you should use a darker color for the reference value and a light color for the actual value with the same hue.

Colors for the Reference Values in the chart below:

sapUiChartPaletteSequentialHue1Dark1
sapUiChartPaletteSequentialHue2Dark1
sapUiChartPaletteSequentialHue3Dark1

Colors for the Actual Values in the chart below:

sapUiChartPaletteSequentialHue1Light1
sapUiChartPaletteSequentialHue2Light1
sapUiChartPaletteSequentialHue3Light1

Column chart with multiple pairs of actual and target values

When multiple reference values and multiple actual values do not have a direct relationship, you should use colors from the qualitative palette. Columns for the reference values and columns for the actual values should all have different colors, as illustrated below.

Column char with multiple actual vales and multiple target values

Resources

Elements and Controls

Chart (guidelines)

Implementation

Pattern (SAPUI5 samples)

Chart – Comparison

This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular order. This type of comparison is also called nominal comparison, category comparison, or structure analysis. These chart types can be used to compare items such as revenues in a list of products, or transaction volumes in a list of banks.

If the items you want to compare have an intrinsic order such as dates, age, or time periods, please see the Chart – Variation through Time page.

One Set of Values

If you want to compare items based on one type of value, we recommend using a bar chart as shown in the example below.

You can make it easy to compare items by ranking them in order of the largest value to the smallest value as illustrated below, or vice versa if you wish. Learn more about ranking on the Chart – Ranking page.

Countries ranked by value

Why we recommend using a bar chart instead of a column chart

It’s worth noting that you can use a column chart or a bar chart, but if you use a bar chart you will avoid the undesirable effects that come as a result of displaying the category labels at 45°, making them hard to read and frequently leading to truncation of text.

Column chart with truncated labels at 45°

Hierarchical Categories

You can compare items within groups of the hierarchy.

In the example below, the countries are ranked inside their respective continents which makes it easy to compare each continent and each country within each continent.

Items grouped in hierarchical categories, with items ranked within each category

Multiple Sets of Values

Compare Values Individually

We recommend using a bar chart to compare values within item categories. If one of the values acts as a point of reference, please refer to the section below on comparison with a point of reference.

The chart below compares the revenues of USA and Germany for nine product lines.

Two sets of values compared in a bar chart

As previously stated, you can make it easy to compare items by ranking them in order of the largest value to the smallest value as illustrated below, or vice versa if you wish.

In the example below, the ranking allows us to clearly see that the top three products in USA are also the top three products in Germany.

Two sets of values in a bar chart, ranked by value

Comparing with a Reference Point

Sometimes you might want to see how close a value is to reaching or exceeding a reference point. Typical examples of reference points are target, plan and budget. A benchmark or a value from the previous year can also be considered as reference points.

The chart below compares actual and planned costs for four lines of business.

Actual and planned costs displayed in a bullet chart

Comparing Two Entire Sets of Values

If you need to compare two entire sets of values, we recommend using two bar charts side by side. You can order the items in one of the datasets in order to better highlight the differences between the two datasets.

In the example below, we can easily see that the margin for ‘Servers’ is much higher than other product lines that have a similar revenue.

Comparison between two sets of values in bar chart

If there are many items within categories, you could also use a scatter plot or a bubble chart which are designed to illustrate correlation between datasets.

Comparing Values that have Different Units

If the values being compared have different units, you can either convert the values to a common unit such as the percentage, or you can use multiple charts side by side.

The example below displays two sets of values, the transaction volume and the transaction amount for four banks. With this type of visualization, it’s easy to spot that Bank C is the odd one out when comparing the bars.

Good example of comparison between two sets of values with different units

What Not to do: Take a look at the chart below. It contains the same information as the two charts above, but with a dual axis. It looks like the Transaction Amounts for Bank C and Bank D are bigger than their Transaction Volumes, but this is meaningless because the axes use completely different scales.

Bad example of comparison between two sets of values with different units

Comparing Sum of Values (Stacked Bars)

The following section illustrates how to visualize the sum of values inside and across different category items using a stacked chart. In the example below the number of ‘imported successfully’ bank accounts are stacked on top of number of ‘imported with errors’ bank accounts. However, please notice that this approach does not make it easy to compare the number of ‘Imported with Errors’.

Comparison chart showing sum of values in a stacked bar

The chart below is used in the Analyze Sentiments app which enables product managers to view sentiment information for multiple products by analyzing the number of mentions in social media broken down by how positive, neutral and negative they were. You can see how the sum of the positive, negative and neutral mentions provides a good indication of the “buzz” around each product, independently of how good or bad it was.

Chart comparing sum of values in a stacked bar

If you want to see which products received the most mentions overall, as well as the most positive, negative, and neutral mentions, then an ideal solution would be to split this information into four separate charts. However, you need to make sure that the four charts use the same horizontal scale.

In the example below, you can easily see that the product line ‘PDAs & Organizers’ received a lot of mentions, although a large percentage of them were actually negative.

Sum of multiple sets of values - bar chart side by side

An alternative solution would be to use a table with bars inside each column.

Two Categories

You can use bar charts placed side by side if you want to compare values across two categories, such as revenue by products and by country. You do not need to repeat the list of category items on the vertical axis. However, you must make sure that all the charts use the same horizontal scale!

Please be aware that this layout only works well:

for a limited number of charts (between 2 and 5),
when vertical scrolling is not required,
on large screens.

The chart below shows the revenue of each product line for three different countries. You can easily see that the revenue for ‘computer system accessories’ is exceptional high in Asia and you can easily compare values within each business area, although you cannot easily compare values between different business areas.

This chart compares values among two categories and uses few category items

Two Categories Containing Many Items

You can use a heatmap if the categories you’re comparing contain many items, and you’re just interested in showing approximate values. The heatmap is a two-dimensional representation of data where values are represented just by color. The heatmap below visualises gross sales of products items by month.

Heatmap with sequential colors ranked by value

In the example below, a heatmap is used by an IT department to visualize response times in ms throughout the weekdays and working hours using semantic colors to differentiate between response times.

Heatmap with sequential colors ranked by value

If you have a lot of categories, be aware that the heatmap might not render correctly on small devices. This is because all content on the screen will be resized proportionally and the category labels may by hidden due to lack of space.

Three Categories

If you want to compare three categories such as product, region and quarter, we recommend displaying multiple charts in a matrix. All you need to do is make sure the charts all use the same scale.

Be aware that this layout only works well:

with a limited number of charts,
on large screens

The chart below shows the percentage deviation of actual revenue versus target revenue, by country and product line, for the last four quarters. It’s immediately obvious that the first quarters have frequently fallen below target, and that ‘graphic cards’ did not perform well in all the countries.

Matrix comparing 3 categories

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

Chart (guidelines)
Chart – Variation through Time (guidelines)

Implementation

No links.

Chart – Comparison

Menu Button

The menu button differs visually from a regular button by featuring an expand icon, which triggers a dropdown menu (sap.ui.unified.Menu). By default, this menu is positioned below the button, but it can also be displayed above if there is not enough space.

Usage

Use the menu button if:

You need a menu that provides more than one option.

Do not use the menu button if:

The menu provides only one option. In this case, consider using a button instead.

Responsiveness

On smartphones (size S), the menu opens in a full screen dialog. The button label becomes the title of the dialog. The footer contains a Cancel button. Navigation is available with a “back” button.

On tablet and desktop devices (Size M/L), the menu button triggers a cascading dropdown menu.

Menu button, split mode – Size M/L

Menu button, regular mode – Size M/L

Layout

The menu button consists of a button with a label and an expand icon that indicates a menu.

The button has two different modes:

Regular button mode (default): The menu button appears as a regular button. The user clicks or taps it to open a menu. In regular mode, you can use an icon in front of the label description.

Split button mode: The menu button appears as a split button. The user clicks or taps the button to fire the menu’s default action, and clicking/tapping the arrow opens the menu.

The split button is separated into two areas: the label and the icon. The separator between them signals that the two areas result in different actions. The split button supports the emphasized, positive, and negative states of the regular button. The split button consolidates a set of command variations, especially when one of the commands is used more often.

In split mode, the label depends on the default action. If the default action is displayed with an icon only, all the menu items must contain icons.

Menu button layout in compact mode

Menu button layout in cozy mode

For more information about cozy and compact modes, see content density.

Types

Regular menu button

Default, regular type – the user clicks/taps the button to open the menu.

Split menu button

The user clicks/taps the button to fire the default action; clicking/tapping the arrow icon opens a menu.

Regular and split menu button types

Components

The menu button consists of a button with a label and/or icon and an expanding icon that indicates that a menu is available.

In split mode, the two basic elements – the label and the expanding icon – are separated.

Menu button components

Behavior and Interaction

On Tablets and Desktops

The menu button displays a dropdown menu (sap.ui.unified.Menu) as currently implemented.

If the user clicks/taps the menu button, it displays a dropdown menu.
If the user selects a menu item, the action is triggered and the menu closes.
The menu also closes if the user clicks/taps outside the menu, or if the user clicks/taps the button a second time while the menu is open.
The dropdown menu must be displayed in direct connection to the menu button.
The dropdown menu must be positioned below the menu button by default. If there is not enough space below, you may display it above the menu button.

On Smartphones

The menu opens in a full screen dialog. The button’s label becomes the title of the dialog.

To allow the user to navigate out of the menu, use a Cancel button in the footer.
Items with submenus become navigable. Navigation is similar to that used in a popover (sap.m.MessagePopover), in which a “back” button is provided.
When the dialog is reopened, it starts again at the top level.

Split Button

Clicking/tapping the label area triggers one of two types of behavior, which the app developer can configure individually:

It always triggers the default action set by the app developer. If no default item has been defined, the first item in the menu list becomes the default.
It triggers the last action chosen by the user. Initially, it is the default action until the user makes a different selection which then becomes default. The button label changes accordingly. The button has a fixed size and truncates the text if the menu item is longer (as with the combo box).

Expand Icon

If the user clicks or taps the expand icon, the dropdown menu opens.

Styles

The menu button supports all the states of the button (sap.m.button): emphasized, positive, and negative.

All menu button styles in cozy mode

All menu button styles in compact mode

Resources

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

Elements and Controls

No links

Implementation

Menu Button (SAPUI5 samples)
Menu Button (SAPUI5 API reference)
Menu Button Mode (SAPUI5 API reference)
Menu (SAPUI5 samples)

Menu Button

The menu button differs visually from a regular button by featuring an expand icon, which triggers a dropdown menu (sap.ui.unified.Menu). By default, this menu is positioned below the button, but it can also be displayed above if there is not enough space.

Usage

Use the menu button if:

You need a menu that provides more than one option.

Do not use the menu button if:

The menu provides only one option. In this case, consider using a button instead.

Responsiveness

On smartphones (size S), the menu opens in a full screen dialog. The button label becomes the title of the dialog. The footer contains a Cancel button. Navigation is available with a Back button.

Menu button – Size S

On tablet and desktop devices (Size M/L), the menu button triggers a cascading dropdown menu.

Menu button, split and regular mode – Size M/L and Size S

Layout

The menu button consists of a button with a label and an expand icon that indicates a menu.

The button has two different modes:

Regular button mode (default): The menu button appears as a regular button. The user clicks or taps it to open a menu. In regular mode, you can use an icon in front of the label description.

Split button mode: The menu button appears as a split button. The user clicks or taps the button to fire the menu’s default action, and clicking/tapping the arrow opens the menu.

The split button is separated into two areas: the label and the icon. The separator between them signals that the two areas result in different actions. The split button supports the emphasized, positive, and negative states of the regular button. The split button consolidates a set of command variations, especially when one of the commands is used more often.

In split mode, the label depends on the default action. If the default action is displayed with an icon only, all the menu items must contain icons.

For more information about cozy and compact modes, see content density.

Menu button layout in compact and cozy modes

Types

Regular menu button

Regular type (default): The user clicks/taps the button to open the menu.

Split menu button

The user clicks/taps the button to fire the default action. Clicking/tapping the arrow icon opens a menu.

Regular and split menu button types

Components

The menu button consists of a button with a label and/or icon and an expanding icon that indicates that a menu is available.

In split mode, the two basic elements – the label and the expanding icon – are separated.

Menu button components

Behavior and Interaction

On Tablets and Desktops

The menu button displays a dropdown menu (sap.ui.unified.Menu) as currently implemented.

If the user clicks/taps the menu button, it displays a dropdown menu.
If the user selects a menu item, the action is triggered and the menu closes.
The menu also closes if the user clicks/taps outside the menu, or if the user clicks/taps the button a second time while the menu is open.
The dropdown menu must be displayed in direct connection to the menu button.
The dropdown menu must be positioned below the menu button by default. If there is not enough space below, you may display it above the menu button.

On Smartphones

The menu opens in a full screen dialog. The button’s label becomes the title of the dialog.

To allow the user to navigate out of the menu, use a Cancel button in the footer.
Items with submenus become navigable. Navigation is similar to that used in a popover (sap.m.MessagePopover), in which a “back” button is provided.
When the dialog is reopened, it starts again at the top level.

Split Button

Clicking/tapping the label area triggers one of two types of behavior, which the app developer can configure individually:

It always triggers the default action set by the app developer. If no default item has been defined, the first item in the menu list becomes the default.
It triggers the last action chosen by the user. Initially, it is the default action until the user makes a different selection which then becomes default. The button label changes accordingly. The button has a fixed size and truncates the text if the menu item is longer (as with the combo box).

Expand Icon

If the user clicks or taps the expand icon, the dropdown menu opens.

Styles

The menu button supports all the states of the button (sap.m.button): emphasized, positive, and negative.

Resources

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

Elements and Controls

No links

Implementation

Menu Button (SAPUI5 samples)
Menu Button (SAPUI5 API reference)
Menu Button Mode (SAPUI5 API reference)
Menu (SAPUI5 samples)

Menu Button

Map Container

Chart – Color Palettes

This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.

Palette Overview

For color names and HEX values, see palette colors – values and names.

Semantic Color Palette

Designed to communicate good, bad, critical and neutral values.

Sequential Color Palette

Designed to visualize high to low values using six shades for up to three measures.

Qualitative Color Palette

Designed to provide visual differentiation between data points using a specific sequence of colors.

Rules

Only use colors contained in the SAP Fiori chart palettes
You should only use colors from the SAP Fiori color palettes to ensure that we maintain visual design consistency across all charts used in all SAP Fiori applications.
Only use one palette per chart
Do not combine colors from different palettes in the same chart. Each palette has been carefully designed to serve a distinct purpose.
Ensure color names are referenced in the code – not HEX values!
Colors are defined by names in order to support our theming capabilities. This means that the HEX values of the colors may not be exactly the same in past, present and future SAP Fiori visual design themes. This flexibility is made possible by the fact that the color names will stay the same across all past, present and future SAP Fiori visual design themes. You can get the color names and corresponding HEX values from the article on color palettes – values and names.
Do not use color to distinguish between forecast, actual and target values
Use sematic patterns instead.

Default Colors

By default every chart type comes with built in colors which are automatically applied according to your dataset. Here are three examples:

1. When only one series is displayed, the first color from the qualitative palette is automatically applied to each item.

Column chart: One series

2. When a multiple series is displayed, more colors from the qualitative palette are automatically applied to each item in the predetermined sequence.

Column chart: Three series

3. Colors from the sequential palette are automatically applied to the heatmap.

Default colors in a heatmap

Changing the Colors

There are three ways to change the colors in charts:

By Category Item

In the example below, one category has been highlighted using the second color from the qualitative palette.

Column chart with a highlighted category

By Series

In the example below, the series use different shade of the same color because one series must be more visible than the other.

Two series column chart

Based on Value

In the example below, the data points are red if their value is below a certain threshold, green if their value is above another threshold, and orange if their value is between the two.

Column chart with encoded values

Developer Hint

You can customize chart colors using the property: plotArea.dataPointStyle.
When you customize the colors, you must define colors for all your data points.
If no color has been assigned to a particular data point, the chart component automatically assigns the color black to indicate that no color has been assigned.
If for some reason multiple colors are assigned to the same data point, the last assigned color will be applied.
You must manually define the labels that are associated with the colors in the legend as the chart components cannot automatically do this.

Qualitative Palette

The colors in the qualitative palette do not carry semantic meaning. The palette has been designed to provide visual differentiation between data points by virtue of the fact that each color is visually distinct.

Therefore, we recommend using the colors in the sequence illustrated above as opposed to using any colors simply because you prefer them.

If you have more than 11 categories, all you need to do is recycle the palette.

Below are two examples which illustrate how the qualitative color palette can be used.

qualitative palette

For color names and HEX values, see palette colors – values and names.

Highlight Category Items

By default all the categories will use the first color from the qualitative palette. However, you can use other colors from the qualitative palette if you want to highlight category items.

Using the qualitative palette to focus on a category item

Group Items by Color

You can use the qualitative palette to group items into categories. In this example, we use orange for Europe, blue for America, and green for Asia.

Using the qualitative palette to show a hierarchy

Semantic Palette

The semantic palette is designed to communicate good, bad, critical and neutral values using three universally recognized colors in six shades so you can visualize each semantic level.

Here are some ways you can use the palette:

Semantic palette

For color names and HEX values, see palette colors – values and names.

Illustrate the Top Three Values

This column chart uses the semantic palette to display sales revenue per month. The color green is used to highlight the top three months with the highest revenue.

Column chart: Top three values

Show Positive and Negative Series

These stacked bars represent the availability of materials. The available series is green, the inspection series is orange, and the blocked series is red.

Stacked bars: Good and bad values

Denote Good or Bad Values

Each data point has a color based on its value. Data points are now red if their value is below a certain threshold, green if their value is above another threshold, and orange if their value is between the two.

Column chart: Good and bad values

Visualize Different Levels

In this geomap, green is used to indicate states with good performance, and red is used to indicate states with bad performance. In this example the different shades express different levels of good and bad performance.

Geomap: Levels of performance

Default Color Shade Names

The default color shade names are:

sapUiChartPaletteSemanticNeutral
sapUiChartPaletteSemanticGood
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticCritical

Column chart: Level 1 of the semantic palette

Selecting the Correct Combination of Shades (Semantic Palette)

The semantic palette contains six shades of each color so you can express up to six levels of each semantic. Therefore, it’s important to select the correct combination of shades according to the number of levels you want to express. The table below shows you how to do this for bad – the same principle can be applied to good and critical.

Number of Levels

Shades to Use

Color Names

One Level

sapUiChartPaletteSemanticBad

Two Levels

sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBad

Three Levels

sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticBadDark2

Four Levels

sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBadLight1
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticBadDark1

Five Levels

sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBadLight1
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticBadDark1
sapUiChartPaletteSemanticBadDark2

Six Levels

sapUiChartPaletteSemanticBadLight3
sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBadLight1
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticBadDark1
sapUiChartPaletteSemanticBadDark2

Sequential Palette

The sequential color palette is designed to visualize high to low values for up to three measures.

Generally speaking, the lighter the shade, the lower the value. The darker the shade, the higher the value. Use gray for neutral elements in your visualizations.

Here some ways you can use the palette:

Sequential palette

For color names and HEX values, see palette colors – values and names.

Distinguish between Past and Present

These two series use different shades of the same color to distinguish between last year and the current year.

Column chart: Two series

Show Time Gradation

These stacked bars represent payable aging by country. The different gradations of brightness are used to represent different time periods.

Stacked bars: Time gradation

Visualize Different Levels

This bullet chart shows direct costs in a dark shade and indirect costs in a light shade.

Bullet chart: Different levels

This geomap contains two measures. Shades of blue are used to visualize high and low values for one measure while shades of orange are used to visualize high and low values for the other measure.

Geomap: Multiple levels in two groups

Ranked Values

In this bubble chart, the size of the bubbles represents future sales deals. The probability of converting these deals is expressed using different shades of blue.

Bubble chart: Ranked values

Selecting the Correct Combination of Shades (Sequential Palette)

The sequential palette contains six shades of each color so you can express up to six different values per measure. Therefore, it’s important to select the correct combination of shades according to the number of values you need to express. The table below shows how to do this for the blue category item color – the same principle can be applied to the other colors in the palette.

Number of Values

Shades to Use

Color Names

One Value

sapUiChartPaletteSequentialHue1

Two Values

sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1

Three Values

sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1
sapUiChartPaletteSequentialHue1Dark2

Four Values

sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1Light1
sapUiChartPaletteSequentialHue1
sapUiChartPaletteSequentialHue1Dark1

Five Values

sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1Light1
sapUiChartPaletteSequentialHue1
sapUiChartPaletteSequentialHue1Dark1
sapUiChartPaletteSequentialHue1Dark2

Six Values

sapUiChartPaletteSequentialHue1Light3
sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1Light1
sapUiChartPaletteSequentialHue1
sapUiChartPaletteSequentialHue1Dark1
sapUiChartPaletteSequentialHue1Dark2

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

Chart (guidelines)
Chart – Color Palette – Values and Names (guidelines)

Implementation

No links.

Map Container

The map container is a predefined feature set for maps. It fits most use cases and makes it easier for app developers to work with maps.

If you wish to display a geomap or an analytic map without using the map container features, the app developer can also opt to use the analytic map or geomap control.

Components

Overview of map container components

The map container includes the following components:

A map (geomap or analytic map)
Transparent toolbar containing the following buttons:
- View switch (optional), such as between geomaps and analytic maps
- Selection menu (optional)
- Personalization/settings (optional)
- Full-screen mode
- Overflow toolbar (generic)
A list panel stack, which can be used for a legend or other application-specific content
Navigation tools such as:
- Measure
- Scale
- Zoom in/zoom out, including rectangular zoom
- Home Button

View Switch (optional)

View switches are optional. They allow the user to switch between different map types, charts, and table layouts. You should consider using a view switch for accessibility reasons. For example, users with visual impairments might have a hard time working with subtle color differences or specific color gradients, and might prefer switching to a table view instead.

We recommend using no more than three types of alternate visualization. The segmented button control is used to display the types of visualization available in the view switch, and highlights the type of visualization that is being currently displayed.

The button control gives the user the option to switch between the geomap and analytic map views

Menu for Selection Modes (optional)

The menu for selection modes enables the user to switch between the available selection modes: single, rectangular, and lasso. The button can be hidden.

Selection menu

Personalization (optional)

A personalization button is provided and can be enabled/disabled by the app developer. The corresponding popover and details need to be implemented by the app developer.

The personalization/settings button can be used to show or hide a legend and labels, for example.

Personalization/settings button

Full-Screen Mode

The map container can be viewed on full-screen mode (property: fullScreen). For desktop and tablet, the full-screen button is always placed at the top right of the transparent toolbar.

The user can toggle between embedded and full-screen mode via the maximize full-screen toggle button. In full-screen mode, the map container occupies the entire width and height. The toolbar replaces the page header bar, and the minimize icon appears.

For smartphones, the full-screen button is disabled as the map container is used in full-screen mode by default.

Initiate full-screen button

Minimize full-screen button

Overflow (Generic)

The overflow is activated if there is not enough space on the screen for all the chart bar actions. It is generated automatically.

When the user clicks or taps the overflow button, a popover appears. In this action sheet, all icon buttons are labeled with text.

All buttons go into the overflow from right to left.

Overflow button

Prioritization

You can also prioritize the actions in the toolbar by applying one of five different statuses to them:

Always overflow: The action will always move into the overflow.
Disappear: This applies to actions that are not very relevant for the user, and which can disappear if space is limited.
Low: This applies to actions that the user seldom needs; these actions then move first into the overflow.
High: These actions remain visible until all actions that are tagged ‘disappear’, ‘low’, or that are untagged, have moved into the overflow.
Never overflow: These actions will always visible in the toolbar.

All items have equal priority by default. If two items have the same priority, the one on the right overflows first.

Grouping

Items can overflow together, even if they are in different positions. Elements that belong to a group should not have ‘always overflow’ or ‘never overflow’ statuses as these priorities force the items to remain either in the toolbar or in the overflow area. When group elements have different statuses, the priority of the group is defined by the highest priority of its elements.

List Panel Stack (Optional)

The list panel stack is aligned to the left in the toolbar. It can be used for a legend and other application-specific content. The list panel stack can be collapsed in a way that only the icons of the different list panels will be seen. We recommend using icons that are easy to understand for each panel, as these icons will be the only visible element when the panels are collapsed. The collapsed list panels serve as quick access to the clicked panel icon.

If you are not using icons for the panels, do not allow the panels to collapse.

The default width of the list panel stack is auto. We recommend defining a precise width to avoid having the width permanently change according to the content. The list panel stack will remain visible on the map, whereas the toolbar buttons will be hidden.

As a general rule, avoid using too many panels as too much scrolling will increase the complexity of the application.

The list panel provides the same features as the standard list item:

Grouping
Select items
Include Icons/color markers or pictures
Show counter

Collapsed list panel stack (desktop)

Expanded list panel stack (desktop)

Legend

We recommend to include the map legend in the list panel. All necessary features for a legend are provided through the list panel stack (see above).

If your specific use case does not allow you to include the legend in the list panel, you can also use the map legend.

Navigation Tools

Zoom In/ Zoom Out

The map container provides zoom in () and zoom out () buttons, which are positioned bottom right of the map. When the user clicks or taps the zoom in or zoom out icon, the chart automatically zooms in or out to the most appropriate scale.

By default, the ‘’ and ‘‘ buttons are enabled.

Zoom in and out button

Rectangular Zoom

The rectangular zoom can be used to zoom to a specific position. The rectangular zoom is enabled for the compact form factor by default, and disabled for the cozy form factor. Learn more about content density factors here.

Rectangular zoom button

Home Button

The map container provides a Home button. Clicking on the Home button leads to the initial zoom position.

Home button

Responsiveness & Adaptiveness

The width and height of the map container are defined by the surrounding application layout.

The map container uses the overflow toolbar control. This control is based on the sap.m.Toolbar and provides overflow when the contents do not fit in the visible area.

Map container displayed on a desktop

The map container is displayed on a smartphone. Because of the small screen size, the list panel stack is displayed as a menu button.

The map container displayed on a tablet.

Behavior and Interaction

For overflow, the buttons have default priority. The application developer can change this priority. High-prioritized buttons will overflow last.

On desktop and tablet, the list panel stack will always be visible, whereas the transparent toolbar overflows. The navigation control will hide behind the panel list stack.

On a smartphone, the list panel stack is minimized to a menu button on the top left. The menu icon always remains on the screen, whereas the transparent toolbar buttons overflow. Clicking on the menu button, the list panel stack opens in full screen mode.

We generally recommend using either icon buttons or text buttons within the transparent toolbar, but not both. Icons and text should not be combined into one button. Buttons with icon and text appear only in the overflow menu. Buttons are always aligned to the right.

Guidelines

Think carefully about what actions you really need in the transparent map toolbar – do not overload the map toolbar with actions.
Think carefully about what content you really need in the panel list stack – do not overload the panel with content.
Think carefully about which features make sense on the map if the map is not used in full screen. For example, it wouldn’t make sense for a map to have a list panel stack if it is being featured on a card of an overview page.
Use tooltips for switchable content. For example, label icon buttons as “geomap” or “analytic map” in the 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

Map Control (guidelines)
Standard List Item (guidelines)

Implementation

Map Container (SAPUI5 samples)
Map Container (SAPUI5 API reference)

Implementation

No Links.

Chart – Color Palettes

This article explains how to use the three chart color palettes: semantic, sequential and qualitative. For color names and HEX values, see palette colors – values and names.

Palette Overview

Semantic Color Palette

Used to visualize the notion of good or bad.

Sequential Color Palette

Used to visualize increases and decreases.

Qualitative Color Palette

Used to differentiate data points.

Default Colors

By default every chart type comes with built in colors which are automatically applied according to your dataset. Here are three examples:

1. When only one series is displayed, the first color from the qualitative palette is automatically applied to each item.

Column chart: One series

2. When a multiple series is displayed, more colors from the qualitative palette are automatically applied to each item in the predetermined sequence.

Column chart: Three series

3. Colors from the sequential palette are automatically applied to the heatmap.

Default colors in a heatmap

Changing the Colors

There are three main reasons why you might want to change the colors in charts:

Highlight A Category

In this example, one category has been highlighted using the second color from the qualitative palette.

Column chart with one color for one specific category

Compare Series

In this example, two series use different shades of the same color hue.

Column chart with two series with two different colors.

Encode Values

In this example, the semantic color palette has been applied to the chart so that the data points are now red if their value is below a certain threshold, green if their value is above another threshold, and orange if their value is between the two.

Column chart with colors based on values

Developer Hint

Custom colors need to be defined in the property: plotArea.dataPointStyle. When you use custom colors, you should define colors for all data points. If no color has been assigned to a particular data point, the chart component automatically assigns the color black to indicate that no color has been assigned. If for some reason multiple colors are assigned to the same data point, the last assigned color will be applied. Lastly, you must manually define the labels that are associated with the colors in the legend as the chart components cannot automatically do this.

Rules

1) Only use colors contained in the Fiori chart palettes

You should only use colors from the SAP Fiori color palettes to ensure that we maintain visual design consistency across all charts used in all SAP Fiori applications.

2) Only use one palette per chart

Each palette has been carefully designed to serve a distinct purpose. If you combine colors from different palettes in the same chart, you will the defeat their purpose.

3) Use color names – Don’t use HEX values!

Colors are defined by names in order to support our theming capabilities. This means that the HEX values of the colors may not be exactly the same in past, present and future SAP Fiori visual design themes. This flexibility is made possible by the fact that the color names will stay the same across all past, present and future SAP Fiori visual design themes. You can get the color names and corresponding HEX values from the article on color palettes – values and names.

Qualitative Palette

There are are eleven colors in the qualitative color palette which are used to differentiate data points without carrying any semantic meaning. The palette has been carefully designed so that each colour is visually distinct from each other.

This means that you should not choose to use a particular color simply because you would prefer it over the others. We recommend that you use the colors in the sequence illustrated above.

Below are two examples of how the qualitative color palette can be used.

qualitative palette

Highlight Category Items

By default all the categories will use the first color from the qualitative palette. However, you can use other colors from the qualitative palette if you want to highlight category items.

Using the qualitative palette to focus on a category item

Group Items by Color

You can use the qualitative palette to group items into categories. In this example, we use orange for Europe, blue for America, and green for Asia.

Using the qualitative palette to show a hierarchy

Semantic Palette

The semantic color palette is used to visualize the notion of good or bad through three universally-recognized semantic color hues in six shades. These shades allow you to express degrees (such as good or bad, safe or critical, and so on). Gray can be applied to neutral values.

Here some ways that you can use the semantic color palette:

Semantic palette

Illustrate the Top Three Values

This column chart uses the semantic palette to display sales revenue per month. The color green is used to highlight the top three months with the highest revenue.

Column chart: Top three values

Show Positive and Negative Series

These stacked bars represent the availability of materials. The available series is green, the inspection series is orange, and the blocked series is red.

Stacked bars: Good and bad values

Vizualize Good or Bad Values

Each data point has a color based on its value. Data points are now red if their value is below a certain threshold, green if their value is above another threshold, and orange if their value is between the two.

Column chart: Good and bad values

Default Shades

The default shades are:

sapUiChartPaletteSemanticNeutral
sapUiChartPaletteSemanticGood
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticCritical

Column chart: Level 1 of the semantic palette

Picking the Correct Shade

Please note that the system described below also applies to the other color hues in the semantic palette.

Number of Degrees

Shades to Use

Color Names

One Degree

sapUiChartPaletteSemanticBad

Two Degrees

sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBad

Three Degrees

sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticBadDark2

Four Degrees

sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBadLight1
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticBadDark1

Five Degrees

sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBadLight1
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticBadDark1
sapUiChartPaletteSemanticBadDark2

Six Degrees

sapUiChartPaletteSemanticBadLight3
sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBadLight1
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticBadDark1
sapUiChartPaletteSemanticBadDark2

Sequential Palette

The sequential color palette consists of four color hues: blue, green, yellow and gray.

The first three color hues carry no semantic meaning. The semantic meaning is purely communicated through six shades that can be used to express different values. The gray hue does carry semantic meaning of neutral.

Indeed, even if customers change the color hues, there will always be six shades in their new palette. This means that you should not choose to use a particular color simply because you prefer it over the others. Therefore, we recommend that you use blue for one sequence, with green if you have two sequences, and yellow if you have three sequences.

Here some ways you can use the sequential color palette:

Sequential palette

Distinguish Past and Present

These two series use the same hue (the first hue of the sequential palette). Use different gradations of brightness to distinguish between last year and the current year.

Column chart: Two series

Show Time Gradation

These stacked bars represent payable aging by country. The different gradations of brightness are used to represent different time periods.

Stacked bars: Time gradation

Show Different Levels

This bullet chart shows direct costs in a dark shade and indirect costs in a light shade.

Bullet chart: Different levels

Ranked Values

In this bubble chart, the size of the bubbles represents future sales deals. The probability of converting these deals is expressed using different shades of blue.

Bubble chart: Ranked values

Choosing the Correct Shade for Multiple Levels

Please note that the system described below also applies to the other color hues in the sequential palette.

Number of Levels

Shades to Use

Color Names

One level

sapUiChartPaletteSequentialHue1

Two levels

sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1

Three levels

sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1
sapUiChartPaletteSequentialHue1Dark2

Four levels

sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1Light1
sapUiChartPaletteSequentialHue1
sapUiChartPaletteSequentialHue1Dark1

Five levels

sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1Light1
sapUiChartPaletteSequentialHue1
sapUiChartPaletteSequentialHue1Dark1
sapUiChartPaletteSequentialHue1Dark2

Six levels

sapUiChartPaletteSequentialHue1Light3
sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1Light1
sapUiChartPaletteSequentialHue1
sapUiChartPaletteSequentialHue1Dark1
sapUiChartPaletteSequentialHue1Dark2

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

Chart (guidelines)

Chart – Color Palettes

This article explains how to use the three chart color palettes: semantic, sequential and qualitative. For color names and HEX values, see palette colors – values and names.

Palette Overview

Semantic Color Palette

Used to visualize the notion of good or bad.

Sequential Color Palette

Used to visualize increases and decreases.

Qualitative Color Palette

Used to differentiate data points.

Default Colors

By default every chart type comes with built in colors which are automatically applied according to your dataset. Here are three examples:

1. When only one series is displayed, the first color from the qualitative palette is automatically applied to each item.

Column chart: One series

2. When a multiple series is displayed, more colors from the qualitative palette are automatically applied to each item in the predetermined sequence.

Column chart: Three series

3. Colors from the sequential palette are automatically applied to the heatmap.

Default colors in a heatmap

Changing the Colors

There are three main reasons why you might want to change the colors in charts:

Highlight A Category

In this example, one category has been highlighted using the second color from the qualitative palette.

Column chart with one color for one specific category

Compare Series

In this example, two series use different shades of the same color hue.

Column chart with two series with two different colors.

Encode Values

In this example, the semantic color palette has been applied to the chart so that the data points are now red if their value is below a certain threshold, green if their value is above another threshold, and orange if their value is between the two.

Column chart with colors based on values

Developer Hint

Custom colors need to be defined in the property: plotArea.dataPointStyle. When you use custom colors, you should define colors for all data points. If no color has been assigned to a particular data point, the chart component automatically assigns the color black to indicate that no color has been assigned. If for some reason multiple colors are assigned to the same data point, the last assigned color will be applied. Lastly, you must manually define the labels that are associated with the colors in the legend as the chart components cannot automatically do this.

Rules

1) Only use colors contained in the Fiori chart palettes

You should only use colors from the SAP Fiori color palettes to ensure that we maintain visual design consistency across all charts used in all SAP Fiori applications.

2) Only use one palette per chart

Each palette has been carefully designed to serve a distinct purpose. If you combine colors from different palettes in the same chart, you will the defeat their purpose.

3) Use color names – Don’t use HEX values!

Colors are defined by names in order to support our theming capabilities. This means that the HEX values of the colors may not be exactly the same in past, present and future SAP Fiori visual design themes. This flexibility is made possible by the fact that the color names will stay the same across all past, present and future SAP Fiori visual design themes. You can get the color names and corresponding HEX values from the article on color palettes – values and names.

Qualitative Palette

There are are eleven colors in the qualitative color palette which are used to differentiate data points without carrying any semantic meaning. The palette has been carefully designed so that each colour is visually distinct from each other.

This means that you should not choose to use a particular color simply because you would prefer it over the others. We recommend that you use the colors in the sequence illustrated above.

Below are two examples of how the qualitative color palette can be used.

qualitative palette

Highlight Category Items

By default all the categories will use the first color from the qualitative palette. However, you can use other colors from the qualitative palette if you want to highlight category items.

Using the qualitative palette to focus on a category item

Group Items by Color

You can use the qualitative palette to group items into categories. In this example, we use orange for Europe, blue for America, and green for Asia.

Using the qualitative palette to show a hierarchy

Semantic Palette

The semantic color palette is used to visualize the notion of good or bad through three universally-recognized semantic color hues in six shades. These shades allow you to express degrees (such as good or bad, safe or critical, and so on). Gray can be applied to neutral values.

Here some ways that you can use the semantic color palette:

Semantic palette

Illustrate the Top Three Values

This column chart uses the semantic palette to display sales revenue per month. The color green is used to highlight the top three months with the highest revenue.

Column chart: Top three values

Show Positive and Negative Series

These stacked bars represent the availability of materials. The available series is green, the inspection series is orange, and the blocked series is red.

Stacked bars: Good and bad values

Vizualize Good or Bad Values

Each data point has a color based on its value. Data points are now red if their value is below a certain threshold, green if their value is above another threshold, and orange if their value is between the two.

Column chart: Good and bad values

Visualize Degrees

In this geomap, green is used to indicate states with good performance, and red is used to indicate states with bad performance. The different shades of each color hue express different levels of good and bad performance.

Geomap: Levels of performance

Default Shades

The default shades are:

sapUiChartPaletteSemanticNeutral
sapUiChartPaletteSemanticGood
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticCritical

Column chart: Level 1 of the semantic palette

Picking the Correct Shade

Please note that the system described below also applies to the other color hues in the semantic palette.

Number of Degrees

Shades to Use

Color Names

One Degree

sapUiChartPaletteSemanticBad

Two Degrees

sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBad

Three Degrees

sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticBadDark2

Four Degrees

sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBadLight1
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticBadDark1

Five Degrees

sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBadLight1
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticBadDark1
sapUiChartPaletteSemanticBadDark2

Six Degrees

sapUiChartPaletteSemanticBadLight3
sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBadLight1
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticBadDark1
sapUiChartPaletteSemanticBadDark2

Sequential Palette

The sequential color palette consists of four color hues: blue, green, yellow and gray.

The first three color hues carry no semantic meaning. The semantic meaning is purely communicated through six shades that can be used to express different values. The gray hue does carry semantic meaning of neutral.

Indeed, even if customers change the color hues, there will always be six shades in their new palette. This means that you should not choose to use a particular color simply because you prefer it over the others. Therefore, we recommend that you use blue for one sequence, with green if you have two sequences, and yellow if you have three sequences.

Here some ways you can use the sequential color palette:

Sequential palette

Distinguish Past and Present

These two series use the same hue (the first hue of the sequential palette). Use different gradations of brightness to distinguish between last year and the current year.

Column chart: Two series

Show Time Gradation

These stacked bars represent payable aging by country. The different gradations of brightness are used to represent different time periods.

Stacked bars: Time gradation

Show Different Levels

This bullet chart shows direct costs in a dark shade and indirect costs in a light shade.

Bullet chart: Different levels

Ranked Values

In this bubble chart, the size of the bubbles represents future sales deals. The probability of converting these deals is expressed using different shades of blue.

Bubble chart: Ranked values

Multiple Levels in Two Groups

In this geomap, one color hue from the palette is used for some of the states and different color hue is used for all the other states. The different shades express different levels.

Geomap: Multiple levels in two groups

Choosing the Correct Shade for Multiple Levels

Please note that the system described below also applies to the other color hues in the sequential palette.

Number of Levels

Shades to Use

Color Names

One level

sapUiChartPaletteSequentialHue1

Two levels

sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1

Three levels

sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1
sapUiChartPaletteSequentialHue1Dark2

Four levels

sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1Light1
sapUiChartPaletteSequentialHue1
sapUiChartPaletteSequentialHue1Dark1

Five levels

sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1Light1
sapUiChartPaletteSequentialHue1
sapUiChartPaletteSequentialHue1Dark1
sapUiChartPaletteSequentialHue1Dark2

Six levels

sapUiChartPaletteSequentialHue1Light3
sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1Light1
sapUiChartPaletteSequentialHue1
sapUiChartPaletteSequentialHue1Dark1
sapUiChartPaletteSequentialHue1Dark2

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

Chart (guidelines)

Step Input

The step input control allows the user to change the input values in predefined increments (steps).

Usage

Use the step input if:

The user needs to adjust amounts, quantities, or other values quickly.
The user needs to adjust values for a specific step (for example, in a shopping cart).

Do not use the step input if:

The user needs to enter a static number (for example, postal code, phone number, or ID). In this case, use the regular input field control instead.
You want to display a value that rarely needs to be adjusted and does not pertain to a particular step. In this case, use the regular input field control instead.
You want the user to enter dates and times. In this case, use the date picker, date range selection, time picker, or date/time picker instead.

Responsiveness

Size S and M (Smartphone and Tablet)

On smartphones and tablets, the step input is shown in cozy mode. When the focus is in the input field, the keyboard layout for numeric input is displayed.

Size L (Desktop)

On desktop devices, the step input is shown in compact mode.

For more information on the cozy and compact modes, see content density.

Step input - size S/M

Step input - size L

Components

The step input consists of an input field and buttons with icons to decrease or increase the value.

Step input areas

Behavior and Interaction

Default Value

The step input always contains a value. When no value is set, the default value is generally 0. However, app developers can set a different default value (property: value).

If the minimum value is larger than 0, the generic value is the minimum value set by the app team.

Changing the Value

The user changes the value:

By pressing the increase/decrease buttons
By typing a number
With keyboard shortcuts (up/down, page up/down)
With the mouse scroll wheel

On desktop devices, clicking the input field places the cursor in the input field. On mobile devices, tapping the input field displays the numeric keyboard.

Clicking the buttons changes the value by a step and does not place the caret in the input field.

When the user clears the value and leaves the input field, the value in the field becomes 0 or the minimum if the minimum is larger than 0.

If the user enters an invalid value, the invalid value remains in the input field. An error state is displayed.

Increasing the Step

To allow the user to change values by a larger step with keyboard shortcuts, app developers can set a multiple of the step (property: largerStep). The default value is two times the set step.

Minimum and Maximum Values

App developers can set a maximum and minimum value for the step input.

When reaching the maximum/minimum values, the increase/decrease button and up/down keyboard navigation are disabled.

Step input at maximum value (max = 100)

Step input at minimum value (min = -100)

Styles

The step input has different styles for its four states: default, warning, error, and success.

Default state

Warning state with value state text

Error state with value state text

Guidelines

Always provide a meaningful label for the step input.

Width

By default the width of the step input is set to 100% of the container. Avoid setting a fixed width, but rather embed the control in a proper layout such as a form, simple form, or grid layout, and use the layout data property where the width is defined by the 12-column approach to define the responsive behavior for sizes S, M, and L.

When used in forms, the width of the step input control comes from the label:field ratio of the form. The app development team should be able to restrict the width to a proper number of columns (12-grid responsive layout) so that the step input is not too wide.

Ensure an appropriate width for the range of values to be entered for all the sizes S, M, and L. Avoid a larger width than necessary.

Keep in mind the varying lengths of decimals. Limit the number of digits after the floating point if possible in your use case. For more information, have a look at the article on formatting numbers.

Properties

Minimum

Sets the minimum possible value of the defined range.

Maximun

Sets the maximum possible value of the defined range.

Step

Increases/decreases the value of the input. The step can be a floating-point value.

Larger Step

Increases/decreases the value with a larger value than the set step (only when using keyboard shortcuts). The default value is two times larger than the set step.

Value

Determines the value of the step input. App developers can set default initial value.

Width

Determines the width of the control.

Value States

The step input control offers the four value states listed below. For the error and warning states, you can show an additional value state text when the focus is on the input field.

None (default): No value state message is shown
Warning
Error
Success: No value state message is shown

For more guidance on when to use which state, see message handling. For more information on showing value states in a form, see form field validation.

Default state

Warning state

Error state

Editable and Enabled States

Editable

Property settings: editable = true, enabled = true

The step input control is enabled and editable by default. Set the control to editable to allow the user to enter a value.

Not Editable

Property settings: editable = false, enabled = true

Use this state, for example, to display data only.

Disabled

Property settings: editable = not relevant, enabled = false

Set the control to disabled in an edit scenario to indicate that the user cannot change the control, for example, due to missing access rights or previous conditions not having been fulfilled or selected.

Read-only state

Disabled state

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)
Button (guidelines)

Implementation

Step Input (SAPUI5 samples)
Step Input (SAPUI5 API reference)

Date/Time Picker

The date/time picker allows users to select date and time values in a combined input.

Usage

Use the date/time picker if:

You need a combined date and time input control.

Do not use the date time picker if:

You want to use either a date or a time value. In this case, use the date picker or the time picker instead.

Responsiveness

The date/time picker runs on all form factors and fully adapts to all devices.

The date/time picker opens in a popover for sizes M and L (for a tablet or desktop, for example)

The date/time picker opens in a popover for mobile size (for a smartphone, for example)

Behavior and Interaction

Selecting Date and Time Values

Sizes M and L/XL

The date/time picker appears as a popover when the user clicks or taps a date (input field) on the calendar, The user can then select the desired date from the calendar, and the time from the rotating wheel.

When the user clicks or taps the OK button, the popover closes and the selected date and time appear in the input field. When the user selects Cancel, the action is aborted and the input field remains unchanged.

Date/time picker – Open

Date/time picker – Closed

Size S and Mobile Size

On smaller devices, the user can choose the date and time value in arbitrary order by tapping the segmented button on top of the screen. Be aware that the popover is superimposed on the input field during the selection process for mobile/S sizes.

The user can select the desired date from the calendar, and the time from the rotating time wheel. Clicking a date in the calendar automatically leads the user to the time selection screen.

When the user selects OK, the popover closes and the selected date and time appear in the input field. When the user selects Cancel, the action is aborted and the input field remains unchanged.

Date/time picker opens in a popup for size S.

Date/time picker opens in a popover for mobile size (for a smartphone, for example)

Scrolling

Within the date/time input popover, each area can be scrolled individually by dragging and dropping the areas.
On large devices, the user can also use the standard scrolling mechanism.

Date/time input – Scrolling by swiping

Guidelines

Date Picker and Time Picker

In general, we recommend separating the date/time picker controls as the time picker supports the mask input function and the date picker allows the user to enter date in different formats. This makes it easier and more convenient for the user to enter the desired values. For additional guidelines and information on the individual controls, see the resources section below.

Default Values

Independently of the chosen control, set the default values of the date/time picker carefully to avoid unnecessary scrolling. It often makes sense to set the default for the time to the full or half hour, setting the minutes to 00 or 30. Sometimes, it may also make sense to use the current time and date.

Formatting Dates and Times

For guidelines and information on the SAPUI5 date formatters, see formatting dates.

For guidelines and information on the SAPUI5 time formatters, see formatting times.

Properties

AM and PM are locale-dependent. The locale can be set using the property “localeId”.

You can set the display format (property: displayFormat) to define the format in which the time input field and the time picker dropdown display the time.

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

Time Picker (guidelines)
Date Picker (guidelines)
Formatting Time (guidelines)
Formatting Dates (guidelines)

Implementation

Date Time Picker (SAPUI5 samples)
Date Time Picker (SAPUI5 API reference)

Smart Filter Bar Annotations

Information

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

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

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

These annotations let you:

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

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

Warning

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

Usage

Use the smart filter bar if:

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

Do not use the smart filter bar if:

You need to make extensive changes to the filter bar.

Components

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

Expanded Filter Bar

Smart filter bar - Properties for the expanded filter bar

1 enableBasicSearch

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

2 FilterRestrictions/NonFilterableProperties

Defines whether a property is available as a filter criterion.

3 FilterRestrictions/RequiredProperties

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

4 ValueList

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

5 FilterExpressionType/MultiValue

Defines whether multiple values can be used in a single filter.

6 FilterExpressionType/SingleValue

Restricts the filter to allow only one value entry.

7 LineItem/Label

A short, human-readable text for the filter name.

8 FilterExpressionType/SingleInterval

Restricts the filter to a specified interval, such as a date interval.

8 insertDefaultFilterValue

Inserts a default filter value into the aggregation defaultFilterValues.

9 liveMode

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

Filter Dialog

1 FilterRestrictions/RequiredProperties

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

2 FieldControlType/Hidden

Defines whether the filter is initially visible on the expanded filter bar.

3 SelectionFields

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

4 FieldGroup

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

5 FilterRestrictions/NonFilterableProperties

Defines whether a property is available as a filter criterion.

6 LineItem/Label

A short, human-readable text for the filter name.

SmartFilterBar Properties on the Filter Dialog

Data Types

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

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

General Data Types

DataType ODataMetadata Additional Configuration Edit type Display type Notes

* * Input Text

DateTime – sap:display-format=”Date” DatePicker Text

Decimal – Precision=”3″ Scale=”0″ Input Text

All – Input (with VHD) Text If a matching ValueList annotation is found, the ValueHelp for the Input is enabled.
A ValueHelp Dialog is created automatically, based on the data in the ValueList annotation.

All –
sap:semantics=”fixed-values” on the ValueList entity
ComboBox Text If a matching ValueList annotation is found, and the ValueList entity has the semantics=”fixed-values”, a dropdown list is shown.

Filter Bar-Specific Data Types

Input Type sap:filter-restriction display-format hasValueHelpDialog controlType Resulting Control Type

* * controlType/filterType is specified As specified in additional configuration

DateTime “interval” “Date” NA Date Range Selection

DateTime “anything other than interval” or empty “Date” NA Date Picker

String “single-value” “true” / none Input Field With Value Help Dialog
(with typeAhead according to hasTypeAhead flag)

String “single-value” “false” not specified/input Input Field
(with typeAhead according to hasTypeAhead flag)

String “single-value” “false” dropDownList; hasTypeAhead is not considered here ComboBox

* “single-value” Input Field

String empty or no filter-restriction “true” / none Multi Input Field with Value Help Dialog

String “multi-value” “true” / none If no VL Annotation is found – only show the range selection part

String “multi-value” / empty “false” If no VL Annotation is found – hide the ValueHelpDialog icon

String “multi-value” / empty “false” dropDownList MultiComboBox

* “multi-value” Input Field

* “interval” NA A single Input Field that allows the “-” shortcut notation for intervals

Properties

FilterBar

Filter Bar Properties

persistencyKey
Data type: string
Key used to access personalization data.

advancedMode
Data type: boolean
The advanced mode overwrites the standard behavior and is used in the value help scenario.
Default value is false.

expandAdvancedArea
Data type: boolean
Defines whether the advanced area is expanded when the filter bar is used within the value help dialog.
Default value is false.

searchEnabled
Data type: boolean
Enables/disables the Search button in advanced mode.
Default value is true.

filterBarExpanded
Data type: boolean
Shows/hides the expanded filter bar.
Default value is true.

considerGroupTitle
Data type: boolean
If this property is set, the label for filters is prefixed with the group title.
Default value is false.

showClearButton
Data type: boolean
Handles visibility of the Clear button on the Filters dialog.
Default value is false.

showRestoreButton
Data type: boolean
Handles visibility of the Restore button on the Filters dialog.
Default value is true.

showGoOnFB
Data type: boolean
Handles visibility of the Go button on the filter bar.
Default value is true.

showRestoreOnFB
Data type: boolean
Handles visibility of the Restore button on the filter bar.
Default value is false.

showClearOnFB
Data type: boolean
Handles visibility of the Clear button on the filter bar.
Default value is false.

showGoButton
Data type: boolean
Handles visibility of the Go button on the filter bar.

deltaVariantMode
Data type: boolean
Stores the delta as compared to the standard variant.
Default value is true.

filterContainerWidth
Data type: string
Sets the width of the filter container.
Default value is 12rem.

useToolbar
Data type: boolean
Determines what design should be used. Default is the design with the toolbar. In mobile scenarios this property is ignored – the design with the toolbar is always used.
Default value is true.

header
Data type: string
Specifies the header text that is shown in the toolbar on the first position. This property is ignored, when useToolbar is set to false.

showFilterConfiguration
Data type: boolean
Handles visibility of the Filters button on the filter bar.
Default value is true.

Smart Filter Bar

Smart Filter Bar Properties

entitySet
Data type: string
The OData entity set whose metadata is used to create the SmartFilterBar. Note: Changing this value after the SmartFilterBar is initialized (initialize event was fired) has no effect.

basicSearchFieldName
Data type: string
Name of the field that has to be the focus of the basic search. This is only relevant for SmartFilterBar in combination with ValueHelpDialog.

enableBasicSearch
Data type: boolean
Enables the basic search field in the SmartFilterBar control. This must only be enabled for entities that support such search behavior.
Default value is false.

liveMode
Data type: boolean
Defines the live mode. The live mode only operates on non-phone scenarios.
Default value is false.

showMessages
Data type: boolean
If set to false, any errors that occur during the search will not be displayed in a message box.
Default value is true.

considerAnalyticalParameters
Data type: boolean
Indicates if the analytical parameters (SelectionVariant) must be taken into consideration.
Default value is false.

Smart Filter Bar Annotations

FilterRestrictions/NonFilterableProperties
Defines whether a Property can be used for filtering data.

FieldGroup
Defines a group for a filter field.

TextArrangement
Describes the arrangement of a code value and its text.

FieldControlType/Hidden
Defines whether the filter is visible.

ValueList
Contains annotations that provide information for rendering a ValueHelpList that has been set for a Property.

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

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

FilterRestrictions/RequiredProperties
Defines the filter field as mandatory filter.

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

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

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

SelectionFields
Defines whether certain fields should be initially visible in the SmartFilterBar control.

Control Configuration

Control Configuration Properties

key
The key property corresponds to the field name from the OData service metadata document.
Default value is string

groupId
The groupId can be used to move a field from one group to another. The groupId corresponds to the EntityName from the OData metadata. It is also possible to move a field from the advanced area to the basic area by specifying the groupId _BASIC.
Default value is string

label
You can use this property to overwrite the label of a filter field in the SmartFilterBar.
Default value is string

visible
Data type: boolean
You can use this flag to hide fields from the OData metadata.
Default value is true

hasValueHelpDialog
Data type: boolean
Specifies whether a value help dialog is available or not.
Default value is true

controlType
Data type: sap.ui.comp.smartfilterbar.ControlType
The SmartFilterBar calculates which kind of control will be used for a filter field, based on multiple OData attributes and annotations. You can use this property to overwrite the OData metadata.
Default value is auto

filterType
Data type: sap.ui.comp.smartfilterbar.FilterType
The filter type specifies whether the filter field is for a single value, multiple values, or an interval. The filter type calculated by the SmartFilterBar is based on the OData metadata. You can use this property to configure the filter type manually.
Default value is auto

index
Data type: int
You can use the zero-based index to specify the initial order of fields (without any variants).
Default value is -1

Control Configuration Properties

hasTypeAhead
Data type: boolean
You can use this property to enable the TypeAhead service. Note that TypeAhead does not work with all controls (for example, it is not supported for the DropDownListbox).
Default value is true

mandatory
Data type: sap.ui.comp.smartfilterbar.MandatoryType
You can use this property to overwrite the mandatory state of a filter field. This property can only be set during initialization. Changes at runtime will be ignored.
Default value is auto

width
Default value is string
The width of the filter field in a CSS compatible format. The width can be set only once during initialization. Changes at runtime will not be reflected. The width is not applied to custom controls.

visibleInAdvancedArea
Data type: boolean
If set to true, this field will be added to the advanced area (aka. Dynamic Selection) by default.
Default value is false

preventInitialDataFetchInValueHelpDialog
Data type: boolean
If value help annotations are available for this filter field, you can prevent the the table in the value help dialog for this field from being filled with the initial data fetch.
Default value is true

displayBehaviour
Data type: sap.ui.comp.smartfilterbar.DisplayBehaviour
The displayBehaviour specifies how to display the content on certain controls. For example: DescriptionOnly for Combobox (DropDown text), Description and ID for MultiInput (token text)
Default value is auto

conditionType
Data type: any
The condition Type class name to use for this filter item. Implementation should derive from sap.ui.comp.config.condition.Type.

Group Configuration

Group Configuration Properties

key
Data type: string
The key property shall correspond to the name EntityTypeName from the OData service $metadata document.

index
Data type: any
Zero-based integer index. The index can be used to specify the order of groups. If no index is specified, the order defined by the OData metadata will be used.
Default value is undefined

label
Data type: any
You can use this property to overwrite the label of a group in the advanced area of the SmartFilterBar.
Default value is undefined

Resources

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

Elements and Controls

Filter Bar/ Smart Filter Bar (guidelines)

Implementation

Smart Filter Bar (SAPUI5 samples)

Smart Filter Bar (SAPUI5 API reference)

UI Development Toolkit (SAPUI5 samples)

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

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