The following chart types are available in vizFrame:
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The contextual filter allows you to show a prefiltered view of a list, such as a master list.
The contextual filter (sap.m.toolbar) spans the whole width of the list or table it is attached to, while its height remains unchanged. Text inside the bar does not wrap if there is insufficient space, but becomes truncated.
The contextual filter is shown as a bar directly above the master list. It comprises two parts:
The following example shows a prefiltered master list and explains how to change the filter criterion.
The user opens the app and sees a prefiltered list of objects. The bar on top of the master list indicates that the list is filtered and by which criteria.
When the user clicks or taps the bar, a screen (on phones) or popup (on desktops/tablets) appears on which the user can select another criterion.
In this use case, the user should not be able to disable the filter because there is no way to reset it.
Other master list functions (such as Search or Refresh) are still available and remain unaffected by the contextual filter.
Once a criterion has been selected, the user is taken back to the master list (on phones) or the popup closes (on desktops/tablets). The list is now filtered by the newly selected criterion.
Do not use the contextual filter in place of the regular filter in the footer bar. The regular filter is much more versatile and can also be deactivated by the user.
Also note that the contextual and the regular filter both use the same bar to visualize the filter criteria. If the contextual filter is being used, the regular filter can no longer be visualized. Although both filters can technically be used in parallel, we highly recommend that you avoid having both in one list.
Use an icon that is unique and visually represents the current filter criterion.
Do not use any of the generic filter icons because they may be confused with the user-triggered filters.
The contextual filter is not a separate control. To build a contextual filter, you need to use the sap.m.OverflowToolbar control. The filtering itself must be carried out by the app.
There is one exception when the contextual filter can actually be cancelled by the user. In this special case, the contextual filter is used to prefilter the listed items in a select dialog.
This use of the contextual filter conveniently offers users a narrowed down list based on their previous selection.
(1) Initial situation: The user is about to select an account and a contact.
(2) The user selects “Best Electronics” and then clicks or taps the value help icon in the Contact field.
(3) The value help dialog appears showing a list of contacts. These are prefiltered (using the contextual filter) to show only contacts from “Best Electronics” (the company the user selected previously).
Note that this time the icon in the filter’s toolbar does not show an account icon, but a Remove icon instead. This allows the user to cancel the filter if he or she wants to add a contact that is not associated with the account selected previously.
When the user clicks or taps the Remove icon , the filter is removed and the entire contact list is shown.
Once the user has selected a contact, the dialog closes and the name is added to the relevant field on the main page.
Opening the value help again resets the dialog to its initial state with the filter set to “Best Electronics”.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The contextual filter allows you to show a prefiltered view of a list, such as a master list.
The contextual filter (sap.m.toolbar) spans the whole width of the list or table it is attached to, while its height remains unchanged. Text inside the bar does not wrap if there is insufficient space, but becomes truncated.
The contextual filter is shown as a bar directly above the master list. It comprises two parts:
The following example shows a prefiltered master list and explains how to change the filter criterion.
The user opens the app and sees a prefiltered list of objects. The bar on top of the master list indicates that the list is filtered and by which criteria.
When the user clicks or taps the bar, a screen (on phones) or popup (on desktops/tablets) appears on which the user can select another criterion.
In this use case, the user should not be able to disable the filter because there is no way to reset it.
Other master list functions (such as Search or Refresh) are still available and remain unaffected by the contextual filter.
Once a criterion has been selected, the user is taken back to the master list (on phones) or the popup closes (on desktops/tablets). The list is now filtered by the newly selected criterion.
Do not use the contextual filter in place of the regular filter in the footer bar. The regular filter is much more versatile and can also be deactivated by the user.
Also note that the contextual and the regular filter both use the same bar to visualize the filter criteria. If the contextual filter is being used, the regular filter can no longer be visualized. Although both filters can technically be used in parallel, we highly recommend that you avoid having both in one list.
Use an icon that is unique and visually represents the current filter criterion.
Do not use any of the generic filter icons because they may be confused with the user-triggered filters.
The contextual filter is not a separate control. To build a contextual filter, you need to use the sap.m.OverflowToolbar control. The filtering itself must be carried out by the app.
There is one exception when the contextual filter can actually be cancelled by the user. In this special case, the contextual filter is used to prefilter the listed items in a select dialog.
This use of the contextual filter conveniently offers users a narrowed down list based on their previous selection.
(1) Initial situation: The user is about to select an account and a contact.
(2) The user selects “Best Electronics” and then clicks or taps the value help icon in the Contact field.
(3) The value help dialog appears showing a list of contacts. These are prefiltered (using the contextual filter) to show only contacts from “Best Electronics” (the company the user selected previously).
Note that this time the icon in the filter’s toolbar does not show an account icon, but a Remove icon instead. This allows the user to cancel the filter if he or she wants to add a contact that is not associated with the account selected previously.
When the user clicks or taps the Remove icon , the filter is removed and the entire contact list is shown.
Once the user has selected a contact, the dialog closes and the name is added to the relevant field on the main page.
Opening the value help again resets the dialog to its initial state with the filter set to “Best Electronics”.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
This article explains some differences between the bubble chart and the time bubble chart.
Even though times and dates can be used with the standard bubble chart, the time bubble chart must be used when representing time on the horizontal axis. This is because units such as hours, days and months may be mistakenly displayed twice using the standard bubble chart.
The chart component calculates the ticks automatically trying to avoid decimal points.
You can customize the format of the values that appear on the axis, but cannot use date format.
The property fixedTick defines how the ticks are displayed on the horizontal time axis.
The combo box control allows users to select an item from a predefined list.
The control provides an editable input field for filtering the list, and a dropdown menu with a list of the available options.
The input field (1) can display a placeholder (2), or the selected value. Users can type any character to filter the option list.
The dropdown menu’s arrow (3) collapses and expands the option list.
The option list (4) contains a list of values (5) that users can choose from.
Use the combo box with a two-column layout if you need to display additional information to your options, such as currencies for countries or abbreviations for systems.
Note: You can only filter for entries in the first column of the option list. Filtering for the second column is not possible.
There are three ways to select an item from the list:
Clicking the input field places the cursor in the field (1). Clicking the arrow opens the option list (2). Typing into the input field starts filtering the list accordingly; the first value is highlighted and auto-complete suggestions appear in the input field (3). Up/down moves the highlight in the list and populates the value in the field (4). Selecting a value closes the option list (5).
When the first few letters are typed in the input field, the control performs auto-complete to help users to easily select one item from the option list.
The option list displays all available items the user can choose from. The selection is always highlighted. Selecting another option from the list moves the highlight to the newly selected option.
Clicking the arrow opens the option list below the field. An exception is made when there is not enough space to display the dropdown list. In this case, the list is displayed over the input field.
The width of the option list adapts to its content. The minimum width is the input field plus the dropdown arrow. The maximum width is the part of the screen furthest to the right. If the option list content requires even more width, entries become truncated.
The user can enter text into the input field (supported by auto-completion). When the user clicks or taps the dropdown arrow of the combo box (1), the option list opens in full width (2). Now the user can modify the selected entry by tapping the input field of the combo box. The keyboard is then displayed, and the user can begin to enter a new term to filter the option list, also supported by auto-completion (3). The option list closes when the user clicks or taps the Close button at the bottom of the list (4) or selects an item in the list (5).
A combo box has different styles for its different states. Here are some examples:
The combo box control can be displayed with or without a label. If the field is attached to another field, you do not need to define a second label. For more information, see the article on how to use labels in SAP Fiori.
Do not use the placeholder attribute as an alternative to a label. This is important because the placeholder text is overwritten as soon as the form is filled out. Labels are necessary to indicate the meaning of the form fields when the placeholders are no longer visible. Show a placeholder only if the user needs a hint on data entry. Do not repeat the content of the label. A hint could be a sample value or a brief description of the expected format. Read more about how to use placeholders.
The option list contains only text values. Keep the text values short as the list is represented using only single lines. Values that are too long might be truncated.
If you need to express that none of the selection options are selected, show a blank input field. Define a default selection whenever possible.
The combo box list cannot display columns. If you want to show two values within the option list, show the leading information first, followed by the secondary information in parentheses, such as “Walldorf (Germany)”. Typing into the input field returns all items whose names start with the search text.
We recommend sorting options alphabetically to help users find the right option quickly. For more sorting rules, check out the guidelines for the select control.
You can adjust the width of the option list to some extent.
The combo box control is usually used in forms, where the width is determined by the form element or container in which the combo box control is embedded. Therefore, we do not recommend defining a fixed width, but rather working with proper layout containers that have a defined width, such as the following properties: “form”, “simpleform”, “responsivegridlayout”, and “layoutdata” .
If you need to restrict the width to a defined value, set the width accordingly.
Keep in mind that there is no horizontal scrolling in the option list. Entries in the list that are too long become truncated and users may not be able to read them.
If localized text is not an issue, consider using a smaller width.
When you select a value, there are two events:
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The combo box control allows users to select an item from a predefined list.
The control provides an editable input field for filtering the list, and a dropdown menu with a list of the available options.
The input field (1) can display a placeholder (2), or the selected value. Users can type any character to filter the option list.
The dropdown menu’s arrow (3) collapses and expands the option list.
The option list (4) contains a list of values (5) that users can choose from.
Use the combo box with a two-column layout if you need to display additional information to your options, such as currencies for countries or abbreviations for systems.
Note: You can only filter for entries in the first column of the option list. Filtering for the second column is not possible.
There are three ways to select an item from the list:
Clicking the input field places the cursor in the field (1). Clicking the arrow opens the option list (2). Typing into the input field starts filtering the list accordingly; the first value is highlighted and auto-complete suggestions appear in the input field (3). Up/down moves the highlight in the list and populates the value in the field (4). Selecting a value closes the option list (5).
When the first few letters are typed in the input field, the control performs auto-complete to help users to easily select one item from the option list.
The option list displays all available items the user can choose from. The selection is always highlighted. Selecting another option from the list moves the highlight to the newly selected option.
Clicking the arrow opens the option list below the field. An exception is made when there is not enough space to display the dropdown list. In this case, the list is displayed over the input field.
The width of the option list adapts to its content. The minimum width is the input field plus the dropdown arrow. The maximum width is the part of the screen furthest to the right. If the option list content requires even more width, entries become truncated.
The user can enter text into the input field (supported by auto-completion). When the user clicks or taps the dropdown arrow of the combo box (1), the option list opens in full width (2). Now the user can modify the selected entry by tapping the input field of the combo box. The keyboard is then displayed, and the user can begin to enter a new term to filter the option list, also supported by auto-completion (3). The option list closes when the user clicks or taps the Close button at the bottom of the list (4) or selects an item in the list (5).
A combo box has different styles for its different states. Here are some examples:
The combo box control can be displayed with or without a label. If the field is attached to another field, you do not need to define a second label. For more information, see the article on how to use labels in SAP Fiori.
Do not use the placeholder attribute as an alternative to a label. This is important because the placeholder text is overwritten as soon as the form is filled out. Labels are necessary to indicate the meaning of the form fields when the placeholders are no longer visible. Show a placeholder only if the user needs a hint on data entry. Do not repeat the content of the label. A hint could be a sample value or a brief description of the expected format. Read more about how to use placeholders.
The option list contains text values only. Keep the text values short because the list is represented using only single lines. Values that are too long might be truncated.
If you need to express that none of the selection options are selected, show a blank input field. Define a default selection whenever possible.
We recommend sorting options alphabetically to help users find the right option quickly. For more sorting rules, check out the guidelines for the select control.
You can adjust the width of the option list to some extent.
The combo box control is usually used in forms, where the width is determined by the form element or container in which the combo box control is embedded. Therefore, we do not recommend defining a fixed width, but rather working with proper layout containers that have a defined width, such as the following properties: “form”, “simpleform”, “responsivegridlayout”, and “layoutdata” .
If you need to restrict the width to a defined value, set the width accordingly.
Keep in mind that there is no horizontal scrolling in the option list. Entries in the list that are too long become truncated and users may not be able to read them.
If localized text is not an issue, consider using a smaller width.
When you select a value, there are two events:
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The combo box control allows users to select an item from a predefined list.
The control provides an editable input field for filtering the list, and a dropdown menu with a list of the available options.
The input field (1) can display a placeholder (2), or the selected value. Users can type any character to filter the option list.
The dropdown menu’s arrow (3) collapses and expands the option list.
The option list (4) contains a list of values (5) that users can choose from.
Use the combo box with a two-column layout if you need to display additional information to your options, such as currencies for countries or abbreviations for systems.
Note: You can only filter for entries in the first column of the option list. Filtering for the second column is not possible.
There are three ways to select an item from the list:
Clicking the input field places the cursor in the field (1). Clicking the arrow opens the option list (2). Typing into the input field starts filtering the list accordingly; the first value is highlighted and auto-complete suggestions appear in the input field (3). Up/down moves the highlight in the list and populates the value in the field (4). Selecting a value closes the option list (5).
When the first few letters are typed in the input field, the control performs auto-complete to help users to easily select one item from the option list.
The option list displays all available items the user can choose from. The selection is always highlighted. Selecting another option from the list moves the highlight to the newly selected option.
Clicking the arrow opens the option list below the field. An exception is made when there is not enough space to display the dropdown list. In this case, the list is displayed over the input field.
The width of the option list adapts to its content. The minimum width is the input field plus the dropdown arrow. The maximum width is the part of the screen furthest to the right. If the option list content requires even more width, entries become truncated.
The user can enter text into the input field (supported by auto-completion). When the user clicks or taps the dropdown arrow of the combo box (1), the option list opens in full width (2). Now the user can modify the selected entry by tapping the input field of the combo box. The keyboard is then displayed, and the user can begin to enter a new term to filter the option list, also supported by auto-completion (3). The option list closes when the user clicks or taps the Close button at the bottom of the list (4) or selects an item in the list (5).
A combo box has different styles for its different states. Here are some examples:
The combo box control can be displayed with or without a label. If the field is attached to another field, you do not need to define a second label. For more information, see the article on how to use labels in SAP Fiori.
Do not use the placeholder attribute as an alternative to a label. This is important because the placeholder text is overwritten as soon as the form is filled out. Labels are necessary to indicate the meaning of the form fields when the placeholders are no longer visible. Show a placeholder only if the user needs a hint on data entry. Do not repeat the content of the label. A hint could be a sample value or a brief description of the expected format. Read more about how to use placeholders.
The option list contains text values only. Keep the text values short because the list is represented using only single lines. Values that are too long might be truncated.
If you need to express that none of the selection options are selected, show a blank input field. Define a default selection whenever possible.
We recommend sorting options alphabetically to help users find the right option quickly. For more sorting rules, check out the guidelines for the select control.
You can adjust the width of the option list to some extent.
The combo box control is usually used in forms, where the width is determined by the form element or container in which the combo box control is embedded. Therefore, we do not recommend defining a fixed width, but rather working with proper layout containers that have a defined width, such as the following properties: “form”, “simpleform”, “responsivegridlayout”, and “layoutdata” .
If you need to restrict the width to a defined value, set the width accordingly.
Keep in mind that there is no horizontal scrolling in the option list. Entries in the list that are too long become truncated and users may not be able to read them.
If localized text is not an issue, consider using a smaller width.
When you select a value, there are two events:
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The combo box control allows users to select an item from a predefined list.
The control provides an editable input field for filtering the list, and a dropdown menu with a list of the available options.
A descriptive heading (1).
The input field (2) can display the selected value. Users can type any character to filter the option list.
The dropdown menu’s arrow (3) collapses and expands the option list.
The option list (4) contains a list of values (5) that users can choose from.
Use the combo box with a two-column layout if you need to display additional information to your options, such as currencies for countries or abbreviations for systems.
Note: You can only filter for entries in the first column of the option list. Filtering for the second column is not possible.
There are three ways to select an item from the list:
Clicking the input field places the cursor in the field (1). Clicking the arrow opens the option list (2). Typing into the input field starts filtering the list accordingly; the first value is highlighted and auto-complete suggestions appear in the input field (3). Up/down moves the highlight in the list and populates the value in the field (4). Selecting a value closes the option list (5).
When the first few letters are typed in the input field, the control performs auto-complete to help users to easily select one item from the option list.
The option list displays all available items the user can choose from. The selection is always highlighted. Selecting another option from the list moves the highlight to the newly selected option.
Clicking the arrow opens the option list below the field. An exception is made when there is not enough space to display the dropdown list. In this case, the list is displayed over the input field.
The width of the option list adapts to its content. The minimum width is the input field plus the dropdown arrow. The maximum width is the part of the screen furthest to the right. If the option list content requires even more width, entries become truncated.
The user can enter text into the input field (supported by auto-completion). When the user clicks or taps the dropdown arrow of the combo box (1), the option list opens in full width (2). Now the user can modify the selected entry by tapping the input field of the combo box. The keyboard is then displayed, and the user can begin to enter a new term to filter the option list, also supported by auto-completion (3). The option list closes when the user clicks or taps the Close button at the bottom of the list (4) or selects an item in the list (5).
A combo box has different styles for its different states. Here are some examples:
The combo box control can be displayed with or without a label. If the field is attached to another field, you do not need to define a second label. For more information, see the article on how to use labels in SAP Fiori.
Do not use the placeholder attribute as an alternative to a label. This is important because the placeholder text is overwritten as soon as the form is filled out. Labels are necessary to indicate the meaning of the form fields when the placeholders are no longer visible. Show a placeholder only if the user needs a hint on data entry. Do not repeat the content of the label. A hint could be a sample value or a brief description of the expected format. Read more about how to use placeholders.
The option list contains text values only. Keep the text values short because the list is represented using only single lines. Values that are too long might be truncated.
If you need to express that none of the selection options are selected, show a blank input field. Define a default selection whenever possible.
We recommend sorting options alphabetically to help users find the right option quickly. For more sorting rules, check out the guidelines for the select control.
You can adjust the width of the option list to some extent.
The combo box control is usually used in forms, where the width is determined by the form element or container in which the combo box control is embedded. Therefore, we do not recommend defining a fixed width, but rather working with proper layout containers that have a defined width, such as the following properties: “form”, “simpleform”, “responsivegridlayout”, and “layoutdata” .
If you need to restrict the width to a defined value, set the width accordingly.
Keep in mind that there is no horizontal scrolling in the option list. Entries in the list that are too long become truncated and users may not be able to read them.
If localized text is not an issue, consider using a smaller width.
When you select a value, there are two events:
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The combo box control allows users to select an item from a predefined list.
The control provides an editable input field for filtering the list, and a dropdown menu with a list of the available options.
The input field (1) can display a placeholder (2), or the selected value. Users can type any character to filter the option list.
The dropdown menu’s arrow (3) collapses and expands the option list.
The option list (4) contains a list of values (5) that users can choose from.
Use the combo box with a two-column layout if you need to display additional information to your options, such as currencies for countries or abbreviations for systems.
Note: You can only filter for entries in the first column of the option list. Filtering for the second column is not possible.
There are three ways to select an item from the list:
Clicking the input field places the cursor in the field (1). Clicking the arrow opens the option list (2). Typing into the input field starts filtering the list accordingly; the first value is highlighted and auto-complete suggestions appear in the input field (3). Up/down moves the highlight in the list and populates the value in the field (4). Selecting a value closes the option list (5).
When the first few letters are typed in the input field, the control performs auto-complete to help users to easily select one item from the option list.
The option list displays all available items the user can choose from. The selection is always highlighted. Selecting another option from the list moves the highlight to the newly selected option.
Clicking the arrow opens the option list below the field. An exception is made when there is not enough space to display the dropdown list. In this case, the list is displayed over the input field.
The width of the option list adapts to its content. The minimum width is the input field plus the dropdown arrow. The maximum width is the part of the screen furthest to the right. If the option list content requires even more width, entries become truncated.
The user can enter text into the input field (supported by auto-completion). When the user clicks or taps the dropdown arrow of the combo box (1), the option list opens in full width (2). Now the user can modify the selected entry by tapping the input field of the combo box. The keyboard is then displayed, and the user can begin to enter a new term to filter the option list, also supported by auto-completion (3). The option list closes when the user clicks or taps the Close button at the bottom of the list (4) or selects an item in the list (5).
A combo box has different styles for its different states. Here are some examples:
The combo box control can be displayed with or without a label. If the field is attached to another field, you do not need to define a second label. For more information, see the article on how to use labels in SAP Fiori.
Do not use the placeholder attribute as an alternative to a label. This is important because the placeholder text is overwritten as soon as the form is filled out. Labels are necessary to indicate the meaning of the form fields when the placeholders are no longer visible. Show a placeholder only if the user needs a hint on data entry. Do not repeat the content of the label. A hint could be a sample value or a brief description of the expected format. Read more about how to use placeholders.
The option list contains only text values. Keep the text values short as the list is represented using only single lines. Values that are too long might be truncated.
If you need to express that none of the selection options are selected, show a blank input field. Define a default selection whenever possible.
The combo box list cannot display columns. If you want to show two values within the option list, show the leading information first, followed by the secondary information in parentheses, such as “Walldorf (Germany)”. Typing into the input field returns all items whose names start with the search text.
We recommend sorting options alphabetically to help users find the right option quickly. For more sorting rules, check out the guidelines for the select control.
You can adjust the width of the option list to some extent.
The combo box control is usually used in forms, where the width is determined by the form element or container in which the combo box control is embedded. Therefore, we do not recommend defining a fixed width, but rather working with proper layout containers that have a defined width, such as the following properties: “form”, “simpleform”, “responsivegridlayout”, and “layoutdata” .
If you need to restrict the width to a defined value, set the width accordingly.
Keep in mind that there is no horizontal scrolling in the option list. Entries in the list that are too long become truncated and users may not be able to read them.
If localized text is not an issue, consider using a smaller width.
When you select a value, there are two events:
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The only way to change the HEX values is to create a completely new visual design theme using the theme designer. If you’re undertaking such a project, here are some things to consider to ensure everything works correctly.
Each color must be visually distinct from each other while carrying the same saturation and brightness.
The first three colors in your sequential palette should be the same color hue as the first three colors in your qualitative palette so they work together.
The colors in your sequential and semantic palettes should have the same saturation and brightness as each shade for each hue.
Your semantic palette should contain four hues that represent good, bad, critical and neutral.
This page provides all the color names in the chart palettes.
Colors are defined by names in order to support our theming capabilities. They are derived from themable base colors and then the associated HEX values depend on the current theme.
You cannot change the HEX values unless you create a new theme.
| Color Name | Example: Belize (light flavor) | |
| sapUiChartPaletteQualitativeHue1 | #5cbae6 | |
| sapUiChartPaletteQualitativeHue2 | #b6d957 | |
| sapUiChartPaletteQualitativeHue3 | #fac364 | |
| sapUiChartPaletteQualitativeHue4 | #8cd3ff | |
| sapUiChartPaletteQualitativeHue5 | #d998cb | |
| sapUiChartPaletteQualitativeHue6 | #f2d249 | |
| sapUiChartPaletteQualitativeHue7 | #93b9c6 | |
| sapUiChartPaletteQualitativeHue8 | #ccc5a8 | |
| sapUiChartPaletteQualitativeHue9 | #52bacc | |
| sapUiChartPaletteQualitativeHue10 | #dbdb46 | |
| sapUiChartPaletteQualitativeHue11 | #98aafb |
| Color Name | Example: Belize (light flavor) | |
| sapUiChartPaletteSemanticBadLight3 | #f99494 | |
| sapUiChartPaletteSemanticBadLight2 | #f66364 | |
| sapUiChartPaletteSemanticBadLight1 | #f33334 | |
| sapUiChartPaletteSemanticBad | #dc0d0e | |
| sapUiChartPaletteSemanticBadDark1 | #b90c0d | |
| sapUiChartPaletteSemanticBadDark2 | #930a0a | |
| sapUiChartPaletteSemanticCriticalLight3 | #f8cc8c | |
| sapUiChartPaletteSemanticCriticalLight2 | #f5b04d | |
| sapUiChartPaletteSemanticCriticalLight1 | #f29b1d | |
| sapUiChartPaletteSemanticCritical | #de890d | |
| sapUiChartPaletteSemanticCriticalDark1 | #c67a0c | |
| sapUiChartPaletteSemanticCriticalDark2 | #a4650a | |
| sapUiChartPaletteSemanticGoodLight3 | #a1dbb1 | |
| sapUiChartPaletteSemanticGoodLight2 | #71c989 | |
| sapUiChartPaletteSemanticGoodLight1 | #4cba6b | |
| sapUiChartPaletteSemanticGood | #3fa45b | |
| sapUiChartPaletteSemanticGoodDark1 | #358a4d | |
| sapUiChartPaletteSemanticGoodDark2 | #2a6d3c | |
| sapUiChartPaletteSemanticNeutralLight3 | #d5dadc | |
| sapUiChartPaletteSemanticNeutralLight2 | #bac1c4 | |
| sapUiChartPaletteSemanticNeutralLight1 | #9ea8ad | |
| sapUiChartPaletteSemanticNeutral | #848f94 | |
| sapUiChartPaletteSemanticNeutralDark1 | #69767c | |
| sapUiChartPaletteSemanticNeutralDark2 | #596468 |
| Color Name | Example: Belize (light flavor) | |
| sapUiChartPaletteSequentialHue1Light3 | #abdbf2 | |
| sapUiChartPaletteSequentialHue1Light2 | #84caec | |
| sapUiChartPaletteSequentialHue1Light1 | #5cbae5 | |
| sapUiChartPaletteSequentialHue1 | #27a3dd | |
| sapUiChartPaletteSequentialHue1Dark1 | #1b7eac | |
| sapUiChartPaletteSequentialHue1Dark2 | #156489 | |
| sapUiChartPaletteSequentialHue2Light3 | #d7eaa2 | |
| sapUiChartPaletteSequentialHue2Light2 | #c6e17d | |
| sapUiChartPaletteSequentialHue2Light1 | #b6d957 | |
| sapUiChartPaletteSequentialHue2 | #9dc62d | |
| sapUiChartPaletteSequentialHue2Dark1 | #759422 | |
| sapUiChartPaletteSequentialHue2Dark2 | #5b731a | |
| sapUiChartPaletteSequentialHue3Light3 | #fde5bd | |
| sapUiChartPaletteSequentialHue3Light2 | #fbd491 | |
| sapUiChartPaletteSequentialHue3Light1 | #fac364 | |
| sapUiChartPaletteSequentialHue3 | #f8ac29 | |
| sapUiChartPaletteSequentialHue3Dark1 | #dd8e07 | |
| sapUiChartPaletteSequentialHue3Dark2 | #b57506 | |
| sapUiChartPaletteSequentialNeutralLight3 | #d5dadc | |
| sapUiChartPaletteSequentialNeutralLight2 | #bac1c4 | |
| sapUiChartPaletteSequentialNeutralLight1 | #9ea8ad | |
| sapUiChartPaletteSequentialNeutral | #848f94 | |
| sapUiChartPaletteSequentialNeutralDark1 | #69767c | |
| sapUiChartPaletteSequentialNeutralDark2 | #596468 |
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The legend explains the meaning of all the visual elements contained in the plot area.
You can decide where you want to legend to be positioned. By default, it is displayed to the right of the plot area, but it can also be displayed below it when the chart scrolls horizontally. However, we recommend displaying to the right of the plot area when you have many legend items.
When the legend is displayed to the right of the plot area, it automatically moves to the bottom when the horizontal space is reduced as illustrated below.
The legend can be hidden or shown via a dedicated standard button in the chart toolbar (not a toggle button). The visibility of the legend changes each time the button is pressed.
Clicking (or tapping) on a legend item selects or deselects all the associated data points. It does not show or hide them, although this functionality is in the roadmap for this control.
By default, the chart component displays a legend based on the dataset and the colors used by the chart. All colors displayed in the chart are listed in the legend.
By default, the order of the legend item is the same as the order used to render the dataset, although the order and labels of legend items can be customized.
The order of the legend items can be customized to help users read it. In the example below, the default order does not respect the chronological order (which makes the legend difficult to read). Changing the order helps users recognize the information better.
It is not possible to customize the legend labels when colors are automatically assigned by the chart component. When the colors are set programmatically (such as by using value-based colors), it’s possible to customize the legend items in order to clearly describe the meaning of the color.
By default, the legend does not display a title, although a title can be displayed manually on top of the legend. However, we recommend only displaying a title if doing so will help users understand the legend items or make the legend item labels shorter.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
All the values and calculation below are for the blue crystal theme.
| Color Name | Derived from | Color | Value Hex | Value RGB |
| sapUiChartPaletteQualitativeHue1 | @sapUiChart1 | #5cbae6 | rgb(92,186,230) | |
| sapUiChartPaletteQualitativeHue2 | @sapUiChart2 | #b6d957 | rgb(182,217,87) | |
| sapUiChartPaletteQualitativeHue3 | @sapUiChart3 | #fac364 | rgb(250,195,100) | |
| sapUiChartPaletteQualitativeHue4 | @sapUiChart4 | #8cd3ff | rgb(140,211,255) | |
| sapUiChartPaletteQualitativeHue5 | @sapUiChart5 | #d998cb | rgb(217,152,203) | |
| sapUiChartPaletteQualitativeHue6 | @sapUiChart6 | #f2d249 | rgb(242,210,73) | |
| sapUiChartPaletteQualitativeHue7 | @sapUiChart7 | #93b9c6 | rgb(147,185,198) | |
| sapUiChartPaletteQualitativeHue8 | @sapUiChart8 | #ccc5a8 | rgb(204,197,168) | |
| sapUiChartPaletteQualitativeHue9 | @sapUiChart9 | #52bacc | rgb(82,186,204) | |
| sapUiChartPaletteQualitativeHue10 | @sapUiChart10 | #dbdb46 | rgb(219,219,70) | |
| sapUiChartPaletteQualitativeHue11 | @sapUiChart11 | #98aafb | rgb(152,170,251) |
| Color Name | Derived from | Color | Value Hex | Value RGB |
| sapUiChartPaletteSemanticBadLight3 | lighten(@sapUiChartBad,30) | #f09ca4 | rgb(240,156,164) | |
| sapUiChartPaletteSemanticBadLight2 | lighten(@sapUiChartBad,20) | #e9707b | rgb(233,112,123) | |
| sapUiChartPaletteSemanticBadLight1 | lighten(@sapUiChartBad,10) | #e34352 | rgb(227,67,82) | |
| sapUiChartPaletteSemanticBad | @sapUiChartBad | #d32030 | rgb(211,32,48) | |
| sapUiChartPaletteSemanticBadDark1 | darken(@sapUiChartBad,10) | #a71926 | rgb(167,25,38) | |
| sapUiChartPaletteSemanticBadDark2 | darken(@sapUiChartBad,15) | #911621 | rgb(145,22,33 | |
| sapUiChartPaletteSemanticCriticalLight3 | lighten(@sapUiChartCritical,30) | #f3caab | rgb(243,202,171) | |
| sapUiChartPaletteSemanticCriticalLight2 | lighten(@sapUiChartCritical,20) | #edb17e | rgb(237,177,126) | |
| sapUiChartPaletteSemanticCriticalLight1 | lighten(@sapUiChartCritical,10) | #e79651 | rgb(231,150,81) | |
| sapUiChartPaletteSemanticCritical | @sapUiChartCritical | #e17b24 | rgb(225,123,36) | |
| sapUiChartPaletteSemanticCriticalDark1 | darken(@sapUiChartCritical,10) | #b96319 | rgb(185,99,25) | |
| sapUiChartPaletteSemanticCriticalDark2 | darken(@sapUiChartCritical,15) | #a25716 | rgb(162,87,22) | |
| sapUiChartPaletteSemanticGoodLight3 | lighten(@sapUiChartGood,30) | #bedbba | rgb(190,219,186) | |
| sapUiChartPaletteSemanticGoodLight2 | lighten(@sapUiChartGood,20) | #9fca98 | rgb(159,202,152) | |
| sapUiChartPaletteSemanticGoodLight1 | lighten(@sapUiChartGood,10) | #80b877 | rgb(128,184,119) | |
| sapUiChartPaletteSemanticGood | @sapUiChartGood | #61a656 | rgb(97,166,86) | |
| sapUiChartPaletteSemanticGoodDark1 | darken(@sapUiChartGood,10) | #4d8445 | rgb(77,132,69) | |
| sapUiChartPaletteSemanticGoodDark2 | darken(@sapUiChartGood,15) | #44743c | rgb(68,116,60) | |
| sapUiChartPaletteSemanticNeutralLight3 | saturate(lighten(@sapUiChartNeutral,30),1) | #d5dadc | rgb(213, 218, 220) | |
| sapUiChartPaletteSemanticNeutralLight2 | saturate(lighten(@sapUiChartNeutral,20),1) | #bac1c4 | rgb(186, 193, 196) | |
| sapUiChartPaletteSemanticNeutralLight1 | saturate(lighten(@sapUiChartNeutral,10),1) | #9ea8ad | rgb(158, 168, 173) | |
| sapUiChartPaletteSemanticNeutral | @sapUiChartNeutral | #848f94 | rgb(132,143,148) | |
| sapUiChartPaletteSemanticNeutralDark1 | saturate(darken(@sapUiChartNeutral,10),1) | #69767c | rgb(105, 118, 124) | |
| sapUiChartPaletteSemanticNeutralDark2 | saturate(darken(@sapUiChartNeutral,15),1) | #5e696e | rgb(94, 105, 110) |
| Color Name | Derived from | Color | Value Hex | Value RGB |
| sapUiChartPaletteSequentialHue1Light3 | lighten(@sapUiChartSequence1,30) | #abdbf2 | rgb(171, 219, 242) | |
| sapUiChartPaletteSequentialHue1Light2 | lighten(@sapUiChartSequence1,21) | #84caec | rgb(132, 202, 236) | |
| sapUiChartPaletteSequentialHue1Light1 | lighten(@sapUiChartSequence1,12) | #5cbae5 | rgb(92, 186, 229) | |
| sapUiChartPaletteSequentialHue1 | @sapUiChartSequence1 | #27a3dd | rgb(39,163,221) | |
| sapUiChartPaletteSequentialHue1Dark1 | darken(@sapUiChartSequence1,12) | #1b7eac | rgb(27,126,172) | |
| sapUiChartPaletteSequentialHue1Dark2 | darken(@sapUiChartSequence1,20) | #156489 | rgb(213, 218, 220) | |
| sapUiChartPaletteSequentialHue2Light3 | lighten(@sapUiChartSequence2,30) | #d7eaa2 | rgb(215, 234, 162) | |
| sapUiChartPaletteSequentialHue2Light2 | lighten(@sapUiChartSequence2,21) | #c6e17d | rgb(198, 225, 125) | |
| sapUiChartPaletteSequentialHue2Light1 | lighten(@sapUiChartSequence2,12) | #b6d957 | rgb(182, 217, 87) | |
| sapUiChartPaletteSequentialHue2 | @sapUiChartSequence2 | #9dc62d | rgb(157,198,45) | |
| sapUiChartPaletteSequentialHue2Dark1 | darken(@sapUiChartSequence2,12) | #759422 | rgb(117, 148, 34) | |
| sapUiChartPaletteSequentialHue2Dark2 | darken(@sapUiChartSequence2,20) | #5b731a | rgb(91, 115, 26) | |
| sapUiChartPaletteSequentialHue3Light3 | lighten(@sapUiChartSequence3,30) | #fde5bd | rgb(253, 229, 189) | |
| sapUiChartPaletteSequentialHue3Light2 | lighten(@sapUiChartSequence3,21) | #fbd491 | rgb(251, 212, 145) | |
| sapUiChartPaletteSequentialHue3Light1 | lighten(@sapUiChartSequence3,12) | #fac364 | rgb(250, 195, 100) | |
| sapUiChartPaletteSequentialHue3 | @sapUiChartSequence3 | #f8ac29 | rgb(248,172,41) | |
| sapUiChartPaletteSequentialHue3Dark1 | darken(@sapUiChartSequence3,12) | #dd8e07 | rgb(221, 142, 7) | |
| sapUiChartPaletteSequentialHue3Dark2 | darken(@sapUiChartSequence3,20) | #b57506 | rgb(181, 117, 6) | |
| sapUiChartPaletteSequentialNeutralLight3 | saturate(lighten(@sapUiChartSequenceNeutral,30),1 | #d5dadc | rgb(213, 218, 220) | |
| sapUiChartPaletteSequentialNeutralLight2 | saturate(lighten(@sapUiChartSequenceNeutral,20),1) | #bac1c4 | rgb(186, 193, 196) | |
| sapUiChartPaletteSequentialNeutralLight1 | saturate(lighten(@sapUiChartSequenceNeutral,10),1) | #9ea8ad | rgb(158, 168, 173) | |
| sapUiChartPaletteSequentialNeutral | @sapUiChartSequenceNeutral | #848f94 | rgb(132,143,148) | |
| sapUiChartPaletteSequentialNeutralDark1 | saturate(darken(@sapUiChartSequenceNeutral,10),1) | #69767c | rgb(105, 118, 124) | |
| sapUiChartPaletteSequentialNeutralDark2 | saturate(darken(@sapUiChartSequenceNeutral,15),1) | #5e696e | rgb(94, 105, 110) |
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The legend explains the meaning of all the visual elements contained in the plot area.
The legend is always displayed vertically, on the right hand side of the chart. In future wave, it will be possible to display the legend on top or at the bottom of the chart.
When the chart is too narrow, the legend is displayed in an overlay above the chart, so that all legend items can be read. This is particularly important for smartphones.
By default, the legend must always be hidden on small screens.
The legend can be hidden or shown via a dedicated standard button in the chart toolbar (not a toggle button). The visibility of the legend changes each time the button is pressed.
Clicking (or tapping) on a legend item selects or deselects all the associated data points. It does not show or hide them, although this functionality is in the roadmap for this control.
By default, the chart component displays a legend based on the data set and the colors used by the chart. All colors displayed in the chart are listed in the legend.
By default, the order of the legend item is the same as the order used to render the data set, although the order and labels of legend items can be customized.
The order of the legend items can be customized to help users read it. In the example below, the default order does not respect the chronological order (which makes the legend difficult to read). Changing the order helps users recognize the information better.
It is not possible to customize the legend labels when colors are automatically assigned by the chart component. When the colors are set programmatically (such as by using value-based colors), it’s possible to customize the legend items in order to clearly describe the meaning of the color.
By default, the legend does not display a title, although a title can be displayed manually on top of the legend. However, we recommend only displaying a title if doing so will help users understand the legend items or make the legend item labels shorter.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
This article describes the size of data points for charts containing bars.
The following applies to all charts that contain bars (the horizontal bar chart, vertical bar chart, stacked bar chart, bullet chart, and the combined chart):
When the minimum width is reached, a scroll bar allows to scroll and see all data points.
When there is enough space to show all data points, the width of the data point adapts proportionally to the width of the chart container.
A reference line can be added to highlight a particular value. Reference lines can be added only to continuous axes, but not to categorical axes.
The vertical axis of the column chart is continuous and thus can have a reference line.
The horizontal axis of the time bubble chart is a continuous time axis and thus it and can have a reference line.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
A link (also known as hyperlink) is a clickable text element. The link control is used for navigation, but can also trigger an event. Links are visualized to stand out from standard, non-clickable text.
A link can react to insufficient room in two different ways:
The purpose of a link is to trigger navigation or an event. The action is triggered when the user clicks or taps the link. For navigation links, you can specify a target to define where the linked content should open (property: target).
When the mouse pointer is positioned over a link, the user gets additional visual feedback (underlining) to emphasize that the text is a clickable link.
A link can have a disabled state to indicate that it is currently not clickable. Only disable a link if the user has other options for accessing the function behind the deactivated link.
Besides the standard link visualization, there are two more styles: subtle and emphasized.
You can use subtle links to distinguish between important and less important (subtle) links (property: subtle). This allows you to improve the visual hierarchy in large data lists.
Do not use subtle links for any other use cases.
If the standard link visualization is not sufficient to attract the user’s attention, you can highlight the link (property: emphasized).
Use a meaningful link text that indicates what will happen when the user clicks the link (for example, Open Sales Order). Avoid texts such as Click Here or Link, as these do not meet accessibility standards.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and select multiple ranges. The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.
The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.
The value help dialog contains the following components:
The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.
Depending on the device, the following controls are used to display the content of the value help dialog:
Search templates allow the user to display different or additional fields in the advanced search field and the results list. Depending on the use case, the user can switch between the different search templates in order to use different fields when searching. For example, the search template “Customer (by company code)” displays the additional field “Company code” in the advanced search and result list.
It’s mandatory to display the basic search in the value help dialog. Position the basic search on the right of the search template control. If there’s no search template control, the basic search is displayed left-aligned.
For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:
The selected/excluded item row is displayed in the panel container (see panel for more information). Each item or range that is selected or excluded is displayed as a token in the selected or excluded item row.
The footer bar includes OK and Cancel buttons.
In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:
Each range is displayed as a token in the selected or excluded item row.
The user can select single and multiple items, as well as single and multiple ranges. Items and ranges can also be excluded.
A single item or a range can be selected in single selection cases:
For the selection of a single item, the value help dialog is opened by clicking the value help icon of the input field. The Select from List tab is then displayed. As soon as one item is selected, the value help dialog closes automatically.
For the selection of a single item, the value help dialog is opened by clicking the value help icon of the input field. In this case only, the content of the Select from List tab is displayed. The icon tab bar and the selected/excluded item row are hidden. As soon as one item is selected, the value help dialog closes automatically.
For the selection of a single range, the value help dialog is opened by clicking the value help icon of the input field. The Define Condition tab is then displayed.
For the selection of a single range, the value help dialog is opened by clicking the value help icon of the input field. In this case only, the content of the Define Conditions tab is displayed.
The icon tab bar and the selected/excluded item row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.
Users can select multiple items and ranges in range selection cases:
For selection of multiple items and multiple ranges, the value help dialog is opened by clicking the value help icon of the input field. The start dialog is then displayed.
Use the Select from List tab to select multiple items. Use the Define Conditions tab to select and exclude ranges. Both are added as tokens to the selected/excluded items row on the bottom of the start dialog.
For selection of multiple items and multiple ranges, the value help dialog is opened by clicking the value help icon of the input field. The icon tab bar with the Select from List tab and the Define Conditions tab are displayed.
Use the Select from List tab to select multiple items. Use the Define Conditions tab to select and exclude ranges. Both are added as tokens to the selected/excluded items row on the bottom of the screen.
For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.
In this case only, the start dialog and the Define Conditions tab are displayed.
For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.
In this case only, the content of the Define Conditions tab is displayed. The icon tab bar is hidden and the selected/excluded item row is displayed.
The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values (copied from clipboard) at once.
In both areas, the Value input field allows the user to paste more than one value into an input field. In this case, the condition row will be repeated with the previously selected condition and shows one value per row.
If there are more than 10 rows of conditions, pagination will be added to the screen, displaying a toolbar to allow the user to navigate back and forth between the different pages. A token will appear next to each pasted value on the selected/excluded items row at the bottom of the value help dialog.
The dialog title differs depending on the device and whether multiple or single selection is used.
For smartphones:
For tablets and desktops:
If necessary, also provide value help for fields offered in the advanced search. However, do not provide the full value help dialog for the ID and description fields of the business object that is being selected. For these two fields, make sure that the value help icon opens only the Define Conditions screen (range selection).
For example, in a value help dialog for selecting the customer, do not offer full value help for the Customer ID and Customer Name fields. Instead, try to use the value help in combination with a helpful suggestion.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
A link (also known as hyperlink) is a clickable text element. The link control is used for navigation, but can also trigger an event. Links are visualized to stand out from standard, non-clickable text.
A link can react to insufficient room in two different ways:
The purpose of a link is to trigger navigation or an event. The action is triggered when the user clicks or taps the link. For navigation links, you can specify a target to define where the linked content should open (property: target).
When the mouse pointer is positioned over a link, the user gets additional visual feedback (underlining) to emphasize that the text is a clickable link.
A link can have a disabled state to indicate that it is currently not clickable. Only disable a link if the user has other options for accessing the function behind the deactivated link.
Besides the standard link visualization, there are two more styles: subtle and emphasized.
You can use subtle links to distinguish between important and less important (subtle) links (property: subtle). This allows you to improve the visual hierarchy in large data lists.
Do not use subtle links for any other use cases.
If the standard link visualization is not sufficient to attract the user’s attention, you can highlight the link (property: emphasized).
Use a meaningful link text that indicates what will happen when the user clicks the link (for example, Open Sales Order). Avoid texts such as Click Here or Link, as these do not meet accessibility standards.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and select multiple ranges. The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.
The value help dialog control is currently not responsive and only available for desktop and tablet devices!
For smartphones, use the select dialog (sap.m.SelectDialog) as a simple version of the value help dialog.
The value help dialog contains an icon tab bar with the following two tabs:
The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.
Search templates allow the user to display different or additional fields in the advanced search field and the results list. Depending on the use case, the user can switch between the different search templates in order to use different fields when searching. For example, the search template “Customer (by company code)” displays the additional field “Company code” in the advanced search and result list.
The footer bar includes OK and Cancel buttons.
In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:
Each range is displayed as a token in the selected or excluded item row.
The user can select single and multiple items, as well as single and multiple ranges. Items and ranges can also be excluded.
A single item or a range can be selected in single selection cases:
1.1 Single Item Selection
For the selection of a single item, the value help dialog is opened by clicking the value help icon of the input field. In this case only, the content of the Select From List tab is displayed.
The icon tab bar and the selected/excluded item row are hidden. As soon as one item is selected, the value help dialog closes automatically.
1.2 Single Range Selection
For the selection of a single range, the value help dialog is opened by clicking the value help icon of the input field. In this case only, the content of the Define Conditions tab is displayed.
The icon tab bar and the selected/excluded item row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.
Users can select multiple items and ranges in range selection cases:
2.1 Multi Item and Multi Range Selection
For selection of multiple items and multiple ranges, the value help dialog is opened by clicking the value help icon of the input field. The icon tab bar with the Select From List tab and the Define Conditions tab are displayed.
Use the Select From List tab to select multiple items. Use the Define Conditions tab to select and exclude ranges. Both are added as tokens to the selected/excluded items row at the bottom of the screen.
2.2 Multi Range Selection
For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.
In this case only, the content of the Define Conditions tab is displayed. The icon tab bar is hidden and the selected/excluded item row is displayed.
The dialog title differs for multiple and single selection:
If necessary, also provide value help for fields offered in the advanced search. However, do not provide the full value help dialog for the ID and description fields of the business object that is being selected. For these two fields, make sure that the value help icon opens only the Define Conditions screen (range selection).
Example: In a value help dialog for selecting the customer, do not provide full value help for the Customer ID and Customer Name fields.
Try to use the value help in combination with a suggest.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and select multiple ranges. The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.
The behavior of the value help dialog on a phone differs from its behavior on a tablet or desktop device. Both the navigation and the positioning of the selection area differ depending on the device.
The value help dialog contains the following components:
The header bar contains the dialog title. For guidelines on the dialog title, see the Guidelines section of this article.
Depending on the device, the following controls are used to display the content of the value help dialog:
Search templates allow the user to display different or additional fields in the advanced search field and the results list. Depending on the use case, the user can switch between the different search templates in order to use different fields when searching. For example, the search template “Customer (by company code)” displays the additional field “Company code” in the advanced search and result list.
It’s mandatory to display the basic search in the value help dialog. Position the basic search on the right of the search template control. If there’s no search template control, the basic search is displayed left-aligned.
For implementation of the basic and advanced search, the filter bar (sap.ui.comp.filterbar.FilterBar) is used in advanced mode. Advanced mode differs from basic mode in the following ways:
The selected/excluded item row is displayed in the panel container (see panel for more information). Each item or range that is selected or excluded is displayed as a token in the selected or excluded item row.
The footer bar includes OK and Cancel buttons.
In the Include and Exclude areas of the Define Conditions tab, you can define single and multiple ranges with the following operators:
Each range is displayed as a token in the selected or excluded item row.
The user can select single and multiple items, as well as single and multiple ranges. Items and ranges can also be excluded.
A single item or a range can be selected in single selection cases:
For the selection of a single item, the value help dialog is opened by clicking the value help icon of the input field. The Select From List tab is then displayed. As soon as one item is selected, the value help dialog closes automatically.
For the selection of a single item, the value help dialog is opened by clicking the value help icon of the input field. In this case only, the content of the Select From List tab is displayed. The icon tab bar and the selected/excluded item row are hidden. As soon as one item is selected, the value help dialog closes automatically.
For the selection of a single range, the value help dialog is opened by clicking the value help icon of the input field. The Define Condition tab is then displayed.
For the selection of a single range, the value help dialog is opened by clicking the value help icon of the input field. In this case only, the content of the Define Conditions tab is displayed.
The icon tab bar and the selected/excluded item row are hidden. The Add and Delete icons for adding and deleting ranges are also hidden.
Users can select multiple items and ranges in range selection cases:
For selection of multiple items and multiple ranges, the value help dialog is opened by clicking the value help icon of the input field. The start dialog is then displayed.
Use the Select From List tab to select multiple items. Use the Define Conditions tab to select and exclude ranges. Both are added as tokens to the selected/excluded items row on the bottom of the start dialog.
For selection of multiple items and multiple ranges, the value help dialog is opened by clicking the value help icon of the input field. The icon tab bar with the Select From List tab and the Define Conditions tab are displayed.
Use the Select From List tab to select multiple items. Use the Define Conditions tab to select and exclude ranges. Both are added as tokens to the selected/excluded items row on the bottom of the screen.
For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.
In this case only, the start dialog and the Define Conditions tab are displayed.
For selection of multiple ranges, the value help dialog is opened by clicking the value help icon of the input field.
In this case only, the content of the Define Conditions tab is displayed. The icon tab bar is hidden and the selected/excluded item row is displayed.
The Include and Exclude areas on the Define Conditions tab allow the user to enter multiple values (copied from clipboard) at once.
In both areas, the Value input field allows the user to paste more than one value into an input field. In this case, the condition row will be repeated with the previously selected condition and shows one value per row.
If there are more than 10 rows of conditions, pagination will be added to the screen, displaying a toolbar to allow the user to navigate back and forth between the different pages. A token will appear next to each pasted value on the selected/excluded items row at the bottom of the value help dialog.
The dialog title differs depending on the device and whether multiple or single selection is used.
For smartphones:
For tablets and desktops:
If necessary, also provide value help for fields offered in the advanced search. However, do not provide the full value help dialog for the ID and description fields of the business object that is being selected. For these two fields, make sure that the value help icon opens only the Define Conditions screen (range selection).
For example, in a value help dialog for selecting the customer, do not offer full value help for the Customer ID and Customer Name fields. Instead, try to use the value help in combination with a helpful suggestion.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and select multiple ranges. The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.
The value help dialog control is currently not responsive and only available for desktop devices!
For smartphones, use the select dialog (sap.m.SelectDialog) as a simple version of the value help dialog.
The value help dialog has two screens:
Users can navigate between the two screens using links in the header area (in-place navigation):
The sections below describe how to implement the different components of the value help dialog.
On the Define Conditions screen, users can select multiple ranges and define exclusions. Depending on the use case, you can show or hide this link and corresponding page.
Each item and range which is selected or excluded on the Define Conditions screen will be displayed as token in the selected/ excluded item row.
The footer bar will show an OK and Cancel button.
The basic search (mandatory) and advanced search (optional) will be triggered by clicking the search button. The search results will be shown in the result list below the search area.
The user can select items out of the list. All selected items will appear as token in the selected items row.
A single item or a range can be selected in single selection cases:
For selection of a single item the value help dialog will be opened by clicking the value help icon of the input field. The Define Conditions link in the header bar, as well as the selected/ excluded item row will be hidden. As soon as one item is selected, the value help dialog will be closed automatically.
For selection of a single range, the Define Conditions screen will be opened by clicking the value help icon of the input field without the back navigation in the header bar.
For multi selection it is possible to select more than one item, range and exclusion.
For selection of multiple items the value help dialog will be opened by clicking the value help icon of the input field. The Define Conditions link in the header will navigate to the Define Conditions screen.
By clicking the Define Conditions link in the header bar, the Define Conditions screen will be displayed to define and select ranges as well as exclusions. Both will also be added to the selected/ excluded items row on the bottom of the screen.
If necessary, also provide value help for fields offered in the advanced search. However, do not provide the full value help dialog for the ID and description fields of the business object that is being selected. For these two fields, make sure that the value help icon only opens the Define Conditions screen (range selection).
Example: In a value help dialog for selecting the customer, do not offer full value help for the “Customer ID” and “Customer Name” fields.
Try to use the value help in combination with suggest.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.
The width and height of the chart container are never defined explicitly by the app. They are always set by the container itself.
The chart container automatically sets the width of the charts to 100%, regardless of the width manually set to each individual chart. That means when using the chart container, the app cannot change the width of the charts.
You can choose to have the height of the chart automatically adjusted by the chart container, depending on the property autoAdjustHeight.
Always use autoAdjustHeight = false when the charts are embedded in a vertically scrolled page.
When autoAdjustHeight = false, the size of each chart needs to be set manually and the height of the chart container will adapt to the height of each chart.
Always use autoAdjustHeight = true when the charts are embedded in a frame.
When autoAdjustHeight = true, the height of the chart container is set to 100% of its parent.
Each chart is automatically resized so that it uses 100% of the chart container.
No setting is required on the chart level, since everything is done automatically.
Please consider:
For more details refer to the resources below.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
This article provides guidelines for using color to indicate primary and projected values for bullet charts.
By default, the sequential palette is used.
For primary values, use the level @sapUiChartPaletteSequentialHueLight1 as described below.
| Primary value | @sapUiChartPaletteSequentialHue1Light1 |
| Projected value | @sapUiChartPaletteSequentialNeutralLight3 |
You can make use of different colors to differentiate between categories.
If the colors have no semantic meaning, but are just used to distinguish between categories, use the first hues of the sequential palette.
In this example, “Country 2” is set to green to highlight this category.
| Primary value | @sapUiChartPaletteSequentialHue1Light1 |
| Primary value (highlighted) | @sapUiChartPaletteSequentialHue2Light1 |
| Projected value | @sapUiChartPaletteSequentialNeutralLight3 |
When using semantic colors for the primary value, use a neutral color for the projected value:
| Primary value | @sapUiChartPaletteSemanticBad / @sapUiChartPaletteSemanticGood / @sapUiChartPaletteSemanticCritical |
| Projected value | @sapUiChartPaletteSemanticNeutralLight3 |
By default, the semantic palette is used:
| Primary value | @sapUiChartPaletteSemanticNeutralDark1 |
| Gap above comparison value | @sapUiChartPaletteSemanticBad or @sapUiChartPaletteSemanticGood |
| Projected value | @sapUiChartPaletteSemanticNeutralLight3 |
When showing projected values, avoid having gaps below the comparison value.
By default, the sequential palette is used.
Use the level @sapUiChartPaletteSequentialHueLight1 for primary values and additional values as described below.
| Primary value | @sapUiChartPaletteSequentialHue1Light1 |
| Additional value | @sapUiChartPaletteSequentialHue2Light1 |
| Projected value | @sapUiChartPaletteSequentialNeutralLight3 |
If the additional value represents something less important that doesn’t need to be clearly visible at first glance, you can use a lighter shade to represent the additional value.
For more information about shades, see color palettes.
| Primary value | @sapUiChartPaletteSequentialHue1 |
| Additional value | @sapUiChartPaletteSequentialHue1Light2 |
| Projected value | @sapUiChartPaletteSequentialNeutralLight3 |
When displaying two series of measures, each one with additional values, use two different colors to distinguish between the series.
Use a darker shade for the actual values and a lighter shade for the additional values.
For more information about shades, see color palettes.
| Primary value | @sapUiChartPaletteSequentialHue1 & @sapUiChartPaletteSequentialHue2 |
| Additional value | @sapUiChartPaletteSequentialHue1Light2 & @sapUiChartPaletteSequentialHue2Light2 |
| Projected value | @sapUiChartPaletteSequentialNeutralLight3 |
When using semantic colors for the projected value, use a neutral color for the primary value.
Never use semantic colors for both the primary and the projected value.
| Primary value | @sapUiChartPaletteSemanticNeutralDark1 |
| Projected value | @sapUiChartPaletteSemanticGoodLight3 or @sapUiChartPaletteSemanticBadLight3 or @sapUiChartPaletteSemanticCriticalLight3 |
This article provides guidelines for using color to indicate primary values in bullet charts.
By default, the chart will automatically assign the first color of the qualitative palette to all the bars.
If the colors have no semantic meaning, but are just used to distinguish between categories, use the qualitative palette.
Use the colors from the qualitative palette in the prescribed order (blue first, green next, and so on), unless you have a good reason to defer from the default sequence.
In the example, “Country 2” is set to green to highlight this category.
By default, use the qualitative palette. Use the first color on the palette for the primary value and the second color for the additional value.
If you need another color for the additional value, you can assign it manually.
If the additional value represents something less important that doesn’t need to be clearly visible at first glance, you can use a lighter shade from the sequential palette to represent the additional value.
For more information about shades, see color palettes.
| Primary value | sapUiChartPaletteSequentialHue1 |
| Additional value | sapUiChartPaletteSequentialHue1Light2 |
If the sum of the primary value and the additional value is the most important information, then use the qualitative palette. Use the first color for the primary value and the second color for the additional value.
For more information about shades, see color palettes.
Semantic colors can be used to show how the primary value compares in regards to the comparison value.
| Primary value | sapUiChartPaletteSemanticBad / sapUiChartPaletteSemanticGood |
| Additional value | sapUiChartPaletteSemanticNeutralLight2 |
Semantic colors can also be used to show how the sum of the values (primary plus additional value) compares in regards to the comparison value.
In order to do so, use a dark color for the primary value and a light color for the additional value.
| Primary value | sapUiChartPaletteSemanticBad / sapUiChartPaletteSemanticGood |
| Additional value | sapUiChartPaletteSemanticBadLight2 / sapUiChartPaletteSemanticGoodLight2 |
Avoid using semantic colors for the additional value only. This is misleading in the context of a bullet chart where the main focus should be the comparison with the comparison value.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
This article provides guidelines for using color to indicate primary values and quantitative ranges.
By default, use the sequential palette.
| Primary value | @sapUiChartPaletteSequentialHue1Light1 |
| Quantitative range values | @sapUiChartPaletteSequentialNeutralLight1 & @sapUiChartPaletteSequentialNeutralLight2 & @sapUiChartPaletteSequentialNeutralLight3 |
Not available yet!
Define which semantic color you want for the part above the comparison value.
| Primary value | @sapUiChartPaletteSemanticNeutralDark1 |
| Quantitative range values | @sapUiChartPaletteSemanticNeutralLight1 & @sapUiChartPaletteSemanticNeutralLight2 & @sapUiChartPaletteSemanticNeutralLight3 |
| Gap primary value above comparison value | @sapUiChartPaletteSemanticBad or @sapUiChartPaletteSemanticGood |
Not available yet!
Only show gaps above the comparison value. Displaying gaps below the comparison value makes it difficult to read the chart.
When using quantitative ranges, it is possible to use semantic colors for the primary value.
| Primary value | @sapUiChartPaletteSemanticBad / @sapUiChartPaletteSemanticGood / @sapUiChartPaletteSemanticCritical |
| Quantitative range values | @sapUiChartPaletteSemanticNeutralLight1 & @sapUiChartPaletteSemanticNeutralLight2 & @sapUiChartPaletteSemanticNeutralLight3 |
Not available yet!
By default, use the sequential palette.
Use the level @sapUiChartPaletteSequentialHueLight1 for primary and additional values as described below.
| Primary value | @sapUiChartPaletteSequentialHue1 |
| Additional value | @sapUiChartPaletteSequentialHue2 |
| Quantitative range values | @sapUiChartPaletteSequentialNeutralLight1 & @sapUiChartPaletteSequentialNeutralLight2 & @sapUiChartPaletteSequentialNeutralLight3 |
Not available yet!
If the additional value represents something less important that doesn’t need to be clearly visible at first glance, you can use a lighter shade to represent the additional value.
For more information about shades, see color palettes.
| Primary value | @sapUiChartPaletteSequentialHue1 |
| Additional value | @sapUiChartPaletteSequentialHue1Light2 |
| Quantitative range values | @sapUiChartPaletteSequentialNeutralLight1 & @sapUiChartPaletteSequentialNeutralLight2 & @sapUiChartPaletteSequentialNeutralLight3 |
Not available yet!
If semantic colors are used for the quantitative ranges, use the neutral color for the primary value.
| Primary value | @sapUiChartPaletteSemanticNeutralDark1 |
| Quantitative range values | @sapUiChartPaletteSemanticBadLight3 & @sapUiChartPaletteSemanticCriticalLight3 & @sapUiChartPaletteSemanticGoodLight3 |
Not available yet!
Never use “good”, “critical” or “bad” colors for the primary values if semantic colors are also used for qualitative ranges.
The text control is used to display text. It generally contains the text that developers want apps to display (property: text).
The text control is fully adaptive to all screen sizes. You can also set a specific width and overwrite the default value. The resizing behavior depends on the settings that the apps use for the text.
You can define whether the text should wrap or directly truncate (property: wrapping).
You can also define how often the text should wrap before it truncates (property: maxLines).
Note: The truncation indicator for multiple lines depends on the browser line clamping support. For browsers that support it, this will be shown as an ellipsis (…), whereas in other browsers, the overflowing text will just be cut off.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The text control is used to display text. It generally contains the text that developers want apps to display (property: text).
The text control is fully adaptive to all screen sizes. You can also set a specific width and overwrite the default value. The resizing behavior depends on the settings that the apps use for the text.
You can define whether the text should wrap or directly truncate (property: wrapping).
You can also define how often the text should wrap before it truncates (property: maxLines).
Note: The truncation indicator for multiple lines depends on the browser line clamping support. For browsers that support it, this will be shown as ellipsis (…), whereas in other browsers, the overflowing text will just be cut off.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
A label is the name or title of a control or group of related controls.
To indicate that a field is mandatory, you can set the property “required”. An asterisk will be automatically set in front of the label.
Note: A colon is automatically set in front of the label when used in forms.
The layout can sometimes be simplified by using a placeholder instead of the label control. This exception can be applied in the following cases:
A label is the name or title of a control or group of related controls.
To indicate that a field is mandatory, you can set the property “required”. An asterisk will be automatically set in front of the label.
Note: A colon is automatically set in front of the label when used in forms.
The layout can sometimes be simplified by using a placeholder instead of the label control. This exception can be applied in the following cases:
Buttons allow users to trigger an action – either by clicking on or tapping the button, or by pressing certain keys such as Enter or the space bar.
Use buttons for typical actions, such as:
The different button styles are designed to give the appropriate feedback to users. Don’t use them for decoration purposes.
If you want the user to select one option from a small group, offer a segmented button in the toolbar or footer toolbar.
For example:
Use toggle buttons in a toolbar or footer toolbar to activate or deactivate an object or element. You can also use toggle buttons to switch between different states.
The buttons themselves are not responsive. The button text and position depend on the settings for the parent container. In a responsive container or control, the button text may become truncated, or the button may move to another position.
All three button types support the cozy and compact form factors. The compact form factor is used for apps running on a mouse and keyboard-operated device. For more information, check out the article on content density.
Clicking or tapping a standard button triggers an action.
Clicking or tapping a toggle button changes its state to “pressed”. The button returns to its initial state when the user clicks or taps it again. The toggle button is comparable to a checkbox control.
A segmented button shows a group of options. When the user clicks or taps one of the options, it remains in a pressed state. The segmented button is comparable to a radio button group control.
A button can contain an icon or a text. For more information about icons, check out the article on iconography.
Buttons can be enabled or disabled. Enabled buttons can be clicked or tapped. They also have “hover” and “pressed” states that give feedback to the user.
Disabled buttons are shown as inactive and cannot be clicked or tapped.
The appearance of a button can change depending on where it’s used (for example, in a toolbar, footer toolbar, popup, or dialog box).
No special styles apply to segmented buttons. As a result, they look almost the same as the default style for standard buttons.
By default, the control for segmented buttons calculates the button width and applies it to all buttons within the group. You can change this by setting the width for individual buttons.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Buttons allow users to trigger an action – either by clicking on or tapping the button, or by pressing certain keys such as Enter or the space bar.
Use buttons for typical actions, such as:
The different button styles are designed to give the appropriate feedback to users. Don’t use them for decoration purposes.
If you want the user to select one option from a small group, offer a segmented button in the toolbar or footer toolbar. For example:
Use toggle buttons in a toolbar or footer toolbar to activate or deactivate an object or element. You can also use toggle buttons to switch between different states.
The buttons themselves are not responsive. The button text and position depend on the settings for the parent container. In a responsive container or control, the button text may become truncated, or the button may move to another position.
All three button types support the cozy and compact form factors. The compact form factor is used for apps running on a mouse and keyboard-operated device. For more information, check out the article on content density.
Clicking or tapping a standard button triggers an action.
Clicking or tapping a toggle button changes its state to “pressed”. The button returns to its initial state when the user clicks or taps it again. The toggle button is comparable to a checkbox control.
A segmented button shows a group of options. When the user clicks or taps one of the options, it stays in a pressed state. The segmented button is comparable to a radio button group control.
A button can contain an icon or a text. For more information about icons, check out the article on iconography.
Buttons can be enabled or disabled.
The appearance of a button can change depending on where it’s used (for example, in a toolbar, footer toolbar, popup, or dialog box).
No special styles apply to segmented buttons. As a result, they look almost the same as the default style for standard buttons.
By default, the control for segmented buttons calculates the button width and applies it to all buttons within the group. You can change this by setting the width for individual buttons.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
A slider is a control that enables the user to adjust values in a specified numerical range.
Use the slider to change values with graphical support.
The slider itself is not responsive. It adjusts to the responsiveness of its parent container by recalculating and resizing the width of the control.
The slider supports the cozy and compact form factors. The compact form factor is used for apps that run on a mouse and keyboard operated device.
Only a horizontal slider is available.
The slider can be shown with or without a progress bar. By default, the progress bar is shown.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Buttons allow users to trigger an action – either by clicking on or tapping the button, or by pressing certain keys such as Enter or the space bar.
Use buttons for typical actions, such as:
The different button styles are designed to give the appropriate feedback to users. Don’t use them for decoration purposes.
If you want the user to select one option from a small group, offer a segmented button in the toolbar or footer toolbar.
For example:
Use toggle buttons in a toolbar or footer toolbar to activate or deactivate an object or element. You can also use toggle buttons to switch between different states.
The buttons themselves are not responsive. The button text and position depend on the settings for the parent container. In a responsive container or control, the button text may become truncated, or the button may move to another position.
All three button types support the cozy and compact form factors. The compact form factor is used for apps running on a mouse and keyboard-operated device. For more information, check out the article on content density.
Clicking or tapping a standard button triggers an action.
Clicking or tapping a toggle button changes its state to “pressed”. The button returns to its initial state when the user clicks or taps it again. The toggle button is comparable to a checkbox control.
A segmented button shows a group of options. When the user clicks or taps one of the options, it remains in a pressed state. The segmented button is comparable to a radio button group control.
A button can contain an icon or a text. For more information about icons, check out the article on iconography.
Buttons can be enabled or disabled. Enabled buttons can be clicked or tapped. They also have “hover” and “pressed” states that give feedback to the user.
Disabled buttons are shown as inactive and cannot be clicked or tapped.
The appearance of a button can change depending on where it’s used (for example, in a toolbar, footer toolbar, popup, or dialog box).
No special styles apply to segmented buttons. As a result, they look almost the same as the default style for standard buttons.
By default, the control for segmented buttons calculates the button width and applies it to all buttons within the group. You can change this by setting the width for individual buttons.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The date picker lets users select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker.
Use this control if the user needs to enter a single date or a date range. The control also allows users to navigate directly from one month or year to another.
The date picker provides responsive behavior that allows for simple operation on all devices. It is smaller in compact mode and provides a touch-friendly size in cozy mode.
With one click on the input field, the date picker opens in full screen. To close the window, the user can select a date (which triggers the close event), or click Cancel without selecting a date.
The date picker has two components: the date input field and the date picker button. On all devices users can either use the input field to type a date or use the date picker button to open the date picker calendar.
In the input field, the user can enter a date directly or select it using the date picker. The system validates the entry and provides the user with feedback. You can also show placeholder text in the field.
With the date picker, the user can see a day view, month view, or year view. The current day and the selected date are highlighted. The calendar week is also visible in the day view. The calendar closes when a final day is selected. The user can click or tap the arrows to navigate to the previous and the next day, month, or year view depending on the current view.
The selected date is shown with a blue background. The current day is indicated with a purple border.
The user selects a date by clicking or tapping the date. After the user selects a day, the calendar closes and the date appears in the date input field.
Clicking or tapping the arrow shows the next day, month, or year view.
If the current month is clicked, the view changes to the month view and the user can change the month.
By clicking on a month, the user changes the month and the view changes to the day view.
The user can similarly change the year. By clicking the current year, the view changes to the year view. After the user selects a year, the view changes back to the day view.
After the user selects a year, the view changes back to the day view. The date in the date input field stays the same until the user selects a new date.
Use the long date format for master list/object list item/title and object header/title. Here are some examples:
Use the short date format for master list/object list item/list of object attributes if space is a concern. For example, you might need to save space if there is a label with the date. Here are some examples of the short date format:
If appropriate, use a relative format for master list/object list item/list of object status. For example: today, 1 day ago, 2 days ago, and so on up to 6 days ago. After 6 days, use an absolute date with the medium format.
Use the absolute date with medium format in the corresponding object header in the details area. Do not use the relative format here.
If screen space is at a premium (for example, if there are too many columns), use the short date format in table cells. Otherwise use the medium format.
If you need to display the weekday, use the full format. For example:
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.
The message toast has the same behavior on all devices. However, you can adjust the width of the control, for example, for use on a desktop device.
The message toast is always positioned horizontally centered at the bottom of the screen.
The basic width of the toast is 15 rem. Although the app can adjust the width, we recommend setting it to no more than 35 rem.
When success messages are longer, however, the width should be adjusted to create a message box that is easily readable, for example, on a desktop device.
Following a successful response from the system, the message text is displayed in the message toast. The message toast fades in based on the time defined by the app, and then fades out again automatically.
In some scenarios, the action that triggers the message toast also triggers navigation to a different page (for example, a save or submit action).
In this case, always navigate first, and then show the message toast on the target page.
Only show the message toast on the same page if no navigation is involved.
If you need to interrupt users before they leave the current page, do not use the message toast, but a message box (sap.m.MessageBox, property: type – success), which includes a success message. For more information, see message box.
The message does not react to the user’s focus. Therefore, you must set the duration of the animation according to the length of the message text: the longer the text, the longer the duration should be.
The app can change the values of the following properties. Only change the values if it makes sense; otherwise, keep the recommended standard values.
Position: We recommend that you always use the initial value (horizontally centered, vertically at the bottom of the page).
Duration: The standard value is 3,000 ms. You can adjust the duration to more than 3,000 ms, but do not use less than 3,000 ms.
Width: The standard width is 15 em. You can choose a larger width, but do not use more than 35 em.
Offset: Do not change this value.
Auto-close: True/false
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.
The message toast has the same behavior on all devices. However, you can adjust the width of the control, for example, for use on a desktop device.
The message toast is always positioned horizontally centered at the bottom of the screen.
The basic width of the toast is 15 rem. Although the app can adjust the width, we recommend setting it to no more than 35 rem.
When success messages are longer, however, the width should be adjusted to create a message box that is easily readable, for example, on a desktop device.
Following a successful response from the system, the message text is displayed in the message toast. The message toast fades in based on the time defined by the app, and then fades out again automatically.
In some scenarios, the action that triggers the message toast also triggers navigation to a different page (for example, a save or submit action).
In this case, always navigate first, and then show the message toast on the target page.
Only show the message toast on the same page if no navigation is involved.
If you need to interrupt users before they leave the current page, do not use the message toast, but a message box (sap.m.MessageBox, property: type – success), which includes a success message. For more information, see message box.
The message does not react to the user’s focus. Therefore, you must set the duration of the animation according to the length of the message text: the longer the text, the longer the duration should be.
The app can change the values of the following properties. Only change the values if it makes sense; otherwise, keep the recommended standard values.
Position: We recommend that you always use the initial value (horizontally centered, vertically at the bottom of the page).
Duration: The standard value is 3,000 ms. You can adjust the duration to more than 3,000 ms, but do not use less than 3,000 ms.
Width: The standard width is 15 em. You can choose a larger width, but do not use more than 35 em.
Offset: Do not change this value.
Auto-close: True/false
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The date picker lets users select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker.
Use this control if the user needs to enter a single date or a date range. The control also allows users to navigate directly from one month or year to another.
The date picker provides responsive behavior that allows for simple operation on all devices. It is smaller in compact mode and provides a touch-friendly size in cozy mode.
With one click on the input field, the date picker opens in full screen. To close the window, the user can select a date (which triggers the close event), or click Cancel without selecting a date.
The date picker has two components: the date input field and the date picker button. On all devices, users can either use the input field to type a date or use the date picker button to open the date picker calendar.
In the input field, the user can enter a date directly or select it using the date picker. The system validates the entry and provides the user with feedback. You can also show placeholder text in the field.
With the date picker, the user can see a day view, month view, or year view. The current day and the selected date are highlighted. The calendar week is also visible in the day view. The calendar closes when a final day is selected. The user can click or tap the arrows to navigate to the previous and the next day, month, or year view depending on the current view.
The selected date is shown with a blue background. The current day is indicated with a purple border.
The user selects a date by clicking or tapping the date.
Clicking or tapping the arrow shows the next day, month, or year view.
After the user selects a day, the calendar closes and the date appears in the date input field.
If the current month is clicked, the user can change the month. By clicking on a month, the view changes to the day view.
After the user selects a day, the year view closes and the date appears in the date input field.
By clicking the current year, the view changes to the year view. After the user selects a year, the view changes to the day view.
Use the long date format for master list/object list item/title and object header/title. Here are some examples:
Use the short date format for master list/object list item/list of object attributes if space is a concern. For example, you might need to save space if there is a label with the date. Here are some examples of the short date format:
If appropriate, use a relative format for master list/object list item/list of object status. For example: today, 1 day ago, 2 days ago, and so on up to 6 days ago. After 6 days, use an absolute date with the medium format.
Use the absolute date with medium format in the corresponding object header in the details area. Do not use the relative format here.
If screen space is at a premium (for example, if there are too many columns), use the short date format in table cells. Otherwise use the medium format.
If you need to display the weekday, use the full format. For example:
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.
There are two key use cases:
In both cases, the user switches between tab pages by clicking or tapping the respective tab.
The icon tab bar stretches horizontally, and soon runs out of space on small screens. It responds to limited space by offering a scrolling mechanism.
The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from. These are described in detail below.
You can use the icon tab bar control to build the following types of tab bars:
The text-only variant is one of the most common types. It allows longer labels, and can also display counters above the text to indicate the number of items on the tab page.
Unlike all other tab variants, the labels do not get truncated. The full text is always shown. As a result, you need to ensure that your labels are not too long. They should still be easy to read on smaller screens.
If you use text-only tabs, make sure to put the titles in UPPERCASE LETTERS.
Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.
Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.
Please note that labels under the tabs do not wrap. Texts that exceed the width of the tab are truncated.
If you need longer labels, put the labels next to the tabs. If they are still truncated, use shorter labels or text-only tabs.
If you build the tab bar as a filter, it can contain two parts:
You can also use the tab bar to depict a process. In this case, each tab stands for one step.
To connect the steps, use the triple-chevron icon ( ) from the SAP icon font (technical name: process).
Test whether your labels and their translations are displayed in full, and do not get truncated.
To navigate through the views, the user clicks or taps the tabs.
Optional behavior: If the user clicks or taps a tab that’s already open, the container collapses. It opens again when the user clicks any tab.
Use the “expandable” property to specify whether users can collapse the tab container (default = true):
The “expandable” property controls the initial state of the container. Do not change the default state (true).
The two different styles (round tabs and text only) are discussed in the Types section.
In both cases, you can use colors to give users additional orientation.
Only use semantic colors if it is important for users to know that they need to take action (for example, to indicate errors or critical situations requiring action). Otherwise, use the neutral default colors.
This example shows a process where one step is indicating an error. Since the other tabs have neutral colors, it is clear that they do not contain errors. Coloring them green to show that they are OK is unnecessary, and would reduce the severity of the red tab.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.
There are two key use cases:
In both cases, the user switches between tab pages by clicking or tapping the respective tab.
The icon tab bar stretches horizontally, and soon runs out of space on small screens. It responds to limited space by offering a scrolling mechanism.
The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from. These are described in detail below.
You can use the icon tab bar control to build the following types of tab bars:
The text-only variant is one of the most common types. It allows longer labels, and can also display counters above the text to indicate the number of items on the tab page.
Unlike all other tab variants, the labels do not get truncated. The full text is always shown. As a result, you need to ensure that your labels are not too long. They should still be easy to read on smaller screens.
If you use text-only tabs, make sure to put the titles in UPPERCASE LETTERS.
Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.
Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.
Please note that labels under the tabs do not wrap. Texts that exceed the width of the tab are truncated.
If you need longer labels, put the labels next to the tabs. If they are still truncated, use shorter labels or text-only tabs.
If you build the tab bar as a filter, it can contain two parts:
You can also use the tab bar to depict a process. In this case, each tab stands for one step.
To connect the steps, use the triple-chevron icon ( ) from the SAP icon font (technical name: process).
Test whether your labels and their translations are displayed in full, and do not get truncated.
To navigate through the views, the user clicks or taps the tabs.
Optional behavior: If the user clicks or taps a tab that’s already open, the container collapses. It opens again when the user clicks any tab.
Use the “expandable” property to specify whether users can collapse the tab container (default = true):
The “expandable” property controls the initial state of the container. Do not change the default state (true).
The two different styles (round tabs and text only) are discussed in the Types section.
In both cases, you can use colors to give users additional orientation.
Only use semantic colors if it is important for users to know that they need to take action (for example, to indicate errors or critical situations requiring action). Otherwise, use the neutral default colors.
This example shows a process where one step is indicating an error. Since the other tabs have neutral colors, it is clear that they do not contain errors. Coloring them green to show that they are OK is unnecessary, and would reduce the severity of the red tab.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.
There are two key use cases:
In both cases, the user switches between tab pages by clicking or tapping the respective tab.
The icon tab bar stretches horizontally, and soon runs out of space on small screens. It responds to limited space by offering a scrolling mechanism.
The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from. These are described in detail below.
You can use the icon tab bar control to build the following types of tab bars:
The text-only variant is one of the most common types. It allows longer labels, and can also display counters above the text to indicate the number of items on the tab page.
Unlike all other tab variants, the labels do not get truncated. The full text is always shown. As a result, you need to ensure that your labels do not become too long. They should still be easy to read on smaller screens.
If you use text-only tabs, make sure that the property UpperCase is disabled and that you enter the labels in title case (Example: Approval Flow).
If counters are used, set the property HeaderMode to Inline so the counters appear in brackets after the labels.
Please do not use the old layout that shows the counters on top of the labels (Headermode = Standard).
Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.
Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.
Please note that starting with SAPUI5 version 1.40, you should only use the horizontal type of label (icon and label side by side).
If your labels get truncated, consider using shorter labels or text tabs (without icons), as text tabs cannot get truncated.
If you build the tab bar as a filter, it can comprise two parts:
You can also use the tab bar to depict a process. In this case, each tab stands for one step.
To connect the steps, use the triple-chevron icon ( ) from the SAP icon font (technical name: process).
Test whether your labels and their translations are displayed in full, and do not get truncated.
To navigate through the views, the user clicks or taps the tabs.
Optional behavior: If the user clicks or taps a tab that’s already open, the container collapses. It opens again when the user clicks any tab.
Use the “expandable” property to specify whether users can collapse the tab container (default = true):
The “expandable” property controls the initial state of the container. Do not change the default state (true).
The two different styles (round tabs and text only) are discussed in the Types section.
In both cases, you can use colors to give users additional orientation.
Only use semantic colors if it is important for users to know that they need to take action (for example, to indicate errors or critical situations requiring action). Otherwise, use the neutral default colors.
This example shows a process where one step is indicating an error. Since the other tabs have neutral colors, it is clear that they do not contain errors. Coloring them green to show that they are OK is unnecessary, and would reduce the severity of the red tab.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.
There are two key use cases:
In both cases, the user switches between tab pages by clicking or tapping the respective tab.
The icon tab bar stretches horizontally, and soon runs out of space on small screens. It responds to limited space by offering a scrolling mechanism.
The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from. These are described in detail below.
You can use the icon tab bar control to build the following types of tab bars:
The text-only variant is one of the most common types. It allows longer labels, and can show counters above the text to indicate the number of items on the tab page.
If you use text-only tabs, make sure to put the titles in UPPER CASE LETTERS.
Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.
Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.
Please note that labels under the tabs do not wrap. Texts that exceed the width of the tab are truncated.
If you need longer labels, put the labels next to the tabs. If they are still truncated, use shorter labels or text-only tabs.
If you build the tab bar as a filter, it can contain two parts:
You can also use the tab bar to depict a process. In this case, each tab stands for one step.
To connect the steps, use the triple-chevron icon ( ) from the SAP icon font (technical name: process).
Test whether your labels and their translations are displayed in full, and do not get truncated.
To navigate through the views, the user clicks or taps the tabs.
Optional behavior: If the user clicks or taps a tab that’s already open, the container collapses. It opens again when the user clicks any tab.
Use the “expandable” property to specify whether users can collapse the tab container (default = true):
The “expandable” property controls the initial state of the container. Do not change the default state (true).
The two different styles (round tabs and text only) are discussed in the Types section.
In both cases, you can use colors to give users additional orientation.
Only use semantic colors if it is important for users to know that they need to take action (for example, to indicate errors or critical situations requiring action). Otherwise, use the neutral default colors.
This example shows a process where one step is indicating an error. Since the other tabs have neutral colors, it is clear that they do not contain errors. Coloring them green to show that they are OK is unnecessary, and would reduce the severity of the red tab.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The date/time input control allows users to select a date, time, or both, from a corresponding pad. However, SAP Fiori uses this control for time input only. Do not use this control for entering a date or a combination of date and time (see the Usage section below).
The date/time input runs on all form factors and therefore works on all devices.
By clicking or tapping the date/time input field, the date/time input appears. The user can select a time by rotating the wheel.
When the user clicks the OK button, the popup/popover closes and the selected date and/or time appears in the input field. When the user clicks Cancel, the action is aborted and the input field remains unchanged.
Within the date/time input popup/popover, each area can be scrolled individually by dragging and dropping the areas.
When moving to the respective area in a desktop scenario, the user can also scroll by clicking the arrows that appear on hover. In a touch scenario, this functionality is disabled.
Set the default values of the date/time input 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.
The control may only be used to display and select a time or a duration (property: type).
If you need a control to enter a date/time combination and two separate fields are not enough, you can use the date/time input to support this combined input.
Keyboard entry is not supported by the date/time input control.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The text area is an input control that allows the user to enter multiple lines of text.
Use the text area if you want to enter multiple lines of text. If you only want to enter a single line of text, use the text control instead.
You can set the maximum number of lines to be shown. The amount of text depends on the size of the screen. On smaller screens, the user can scroll down the text area to see the entire text. To indicate that the text continues, the control shows only half of the last line. This also applies for mobile devices.
The text area allows the user to enter multiple lines of text.
You can also set a placeholder (input prompt), which is inherited from sap.m.InputBase; property: placeholder. The prompt text is displayed when the input field is empty.
The user can enter text. As soon as the user starts typing, the placeholder disappears. It appears again when the user removes all the content from the text area.
You can also limit the number of characters a user can enter. In this case, the text area prevents the user from adding more characters than the maximum value defined (property: maxLength).
You can set the text area to non-editable (property: editable). This mode still allows the user to scroll to the text that is currently hidden.
You can also set the text area to disabled. In this case, the user cannot edit or scroll (property: enabled).
As with any other input control, you can validate the fields and show the result as a value state (property: valueState) of the control (such as error, warning, success, or none).
For more information, see form field validation.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The text area is an input control that allows the user to enter multiple lines of text.
Use the text area if you want to enter multiple lines of text. If you only want to enter a single line of text, use the text control instead.
You can set the maximum number of lines to be shown. The amount of text depends on the size of the screen. On smaller screens, the user can scroll down the text area to see the entire text. To indicate that the text continues, the control shows only half of the last line. This also applies for mobile devices.
The text area allows the user to enter multiple lines of text.
You can also set a placeholder (input prompt), which is inherited from sap.m.InputBase; property: placeholder. The prompt text is displayed when the input field is empty.
The user can enter text. As soon as the user starts typing, the placeholder disappears. It appears again when the user removes all the content from the text area.
You can also limit the number of characters a user can enter. In this case, the text area prevents the user from adding more characters than the maximum value defined (property: maxLength).
You can set the text area to non-editable (property: editable). This mode still allows the user to scroll to the text that is currently hidden.
You can also set the text area to disabled. In this case, the user cannot edit or scroll (property: enabled).
As with any other input control, you can validate the fields and show the result as a value state (property: valueState) of the control (such as error, warning, success, or none).
For more information, see form field validation.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The text area is an input control that allows the user to enter multiple lines of text.
Use the text area if you want to enter multiple lines of text. If you only want to enter a single line of text, use the text control instead.
You can set the maximum number of lines to be shown. The amount of text depends on the size of the screen. On smaller screens, the user can scroll down the text area to see the entire text. To indicate that the text continues, the control shows only half of the last line. This also applies for mobile devices.
The text area allows the user to enter multiple lines of text.
You can also set a placeholder (input prompt), which is inherited from sap.m.InputBase; property: placeholder. The prompt text is displayed when the input field is empty.
The user can enter text. As soon as the user starts typing, the placeholder disappears. It appears again when the user removes all the content from the text area.
You can also limit the number of characters a user can enter. In this case, the text area prevents the user from adding more characters than the maximum value defined (property: maxLength).
You can set the text area to non-editable (property: editable). This mode still allows the user to scroll to the text that is currently hidden.
You can also set the text area to disabled. In this case, the user cannot edit or scroll (property: enabled).
With SAPUI5 version 1.38, the text area control acquired a growing property. It gives the control the ability to automatically grow and shrink with its content while the user is typing.
The maximum height of the text area is configurable but should be defined properly, that is, according to the space where the control will be located.
As with any other input control, you can validate the fields and show the result as a value state (property: valueState) of the control (error, warning, success, or none).
For more information, see form field validation.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.
Formulate messages in plain language (no code), describe the issue precisely, and suggest a constructive solution. Always help your user to recognize, diagnose, and recover from messages. Bear in mind that no message is always preferable to even a good message. When you design your apps, aim to prevent problems from occurring in the first place.
The sap.m.MessageBox control has the same responsive behavior as the sap.m.Dialog control. The message box should only be opened in modal mode. Its basic width is 25 em. For more information, see dialog.
The following categories of messages are available:
Error messages can be triggered after the user has entered incorrect data or a system error has occurred. They should interrupt the user by displaying a dialog. A final action such as Submit cannot be carried out until the user has rectified the error.
Control: sap.m.MessageBox
Icon: sap-icon://message-error
Title: Error
Stretch: false (no full screen on all devices)
Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios.
Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Warning
Stretch: false (no full screen on all devices)
a) No decision required: formulate the message as a statement.
Button(s): OK
b) Decision to continue required: formulate the message as a statement.
Button(s): OK, Cancel
c) Specific decision requried with one action
Use a relevant action button. The message may also be formulated as a question.
Button(s): <Action1>, Cancel
Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message.
Control: sap.m.MessageBox
Icon: sap-icon://message-success
Title: Success
Stretch: false (no full screen on all devices)
Button(s): OK
Information messages provide information the user needs to acknowledge, but that does not involve a decision. The message provides information that is useful and relevant, but never critical.
Control: sap.m.MessageBox
Icon: sap-icon://message-information
Title: Information
Stretch: false (no full screen on all devices)
Button(s): OK
Confirmation messages prompt users to confirm an action that they have triggered. The title of the message box already includes the action that has to be confirmed, such as an intended deletion or an approval.
Control: sap.m.MessageBox
Icon: sap-icon://message-question
Title: <action> (such as “Approve”, “Reject”, or “Delete”)
Stretch: false (no full screen on all devices)
Button(s): <Action>, Cancel
If the user clicks or taps Delete, display a “Delete” dialog that confirms the delete action.
Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Delete
Stretch: false (no full screen on all devices)
Button(s): Delete, Cancel
The message displayed for the user should provide sufficient information to ensure that the user knows what happened.
A message box without an explicit details section should be sufficient.
Therefore, the Show Details link is only shown if detailed information is available that differs from the message text and is important for the user.
If details are available, they appear in a text area as part of the message box.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.
Formulate messages in plain language (no code), describe the issue precisely, and suggest a constructive solution. Always help your user to recognize, diagnose, and recover from messages. Bear in mind that no message is always preferable to even a good message. When you design your apps, aim to prevent problems from occurring in the first place.
The sap.m.MessageBox control has the same responsive behavior as the sap.m.Dialog control. The message box should only be opened in modal mode. Its basic width is 25 em. For more information, see dialog.
The following categories of messages are available:
Error messages can be triggered after the user has entered incorrect data or a system error has occurred. They should interrupt the user by displaying a dialog. A final action such as Submit cannot be carried out until the user has rectified the error.
Control: sap.m.MessageBox
Icon: sap-icon://message-error
Title: Error
Stretch: false (no full screen on all devices)
Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios.
Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Warning
Stretch: false (no full screen on all devices)
a) No decision required: formulate the message as a statement.
Button(s): OK
b) Decision to continue required: formulate the message as a statement.
Button(s): OK, Cancel
c) Specific decision requried with one action
Use a relevant action button. The message may also be formulated as a question.
Button(s): <Action1>, Cancel
Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message.
Control: sap.m.MessageBox
Icon: sap-icon://message-success
Title: Success
Stretch: false (no full screen on all devices)
Button(s): OK
Information messages provide information the user needs to acknowledge, but that does not involve a decision. The message provides information that is useful and relevant, but never critical.
Control: sap.m.MessageBox
Icon: sap-icon://message-information
Title: Information
Stretch: false (no full screen on all devices)
Button(s): OK
Confirmation messages prompt users to confirm an action that they have triggered. The title of the message box already includes the action that has to be confirmed, such as an intended deletion or an approval.
Control: sap.m.MessageBox
Icon: sap-icon://message-question
Title: <action> (such as “Approve”, “Reject”, or “Delete”)
Stretch: false (no full screen on all devices)
Button(s): <Action>, Cancel
If the user clicks or taps Delete, display a “Delete” dialog that confirms the delete action.
Control: sap.m.MessageBox
Icon: sap-icon://message-warning
Title: Delete
Stretch: false (no full screen on all devices)
Button(s): Delete, Cancel
The message displayed for the user should provide sufficient information to ensure that the user knows what happened.
A message box without an explicit details section should be sufficient.
Therefore, the Show Details link is only shown if detailed information is available that differs from the message text and is important for the user.
If details are available, they appear in a text area as part of the message box.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, or by selecting a date range in the calendar. They can also navigate directly from one month or year to another.
The date range selection is fully responsive. It is smaller in compact mode and provides a touch-friendly size in cozy mode. For more information about cozy and compact modes, see the article on content density.
The date range selection consists of two components: the date range input field and the date range picker.
The user can type the date directly into the input field, or use the date picker. You can also show a prompt text in the field (property: placeholder). The system validates the date and gives the user feedback.
With the date range picker, the user can see a day view, month view, or year view. The current day and the selected date are highlighted. The calendar week is also visible in the day view. The calendar closes when a final day is selected. The user can click the arrows to view the previous and next days, months, or years (depending on the current view).
The selected date is shown with a blue background. The current day is indicated with a purple border in the calendar.
The user can type two dates into the date range input field or click the calendar icon to open the calendar and select a date. These two possibilities work for all devices – desktops, tablets, and smartphones.
Clicking an arrow shows the next or previous day, month, or year.
Clicking the month shows an overview of all months.
If the current month is clicked, the user can change the month. When the user selects a month, the view changes to the day view.
By clicking the current year, the view changes to the year view. When the user selects a year, the view changes to the day view.
When the user selects an end date, the calendar closes.
After the user selects a range, the calendar closes and the range appears in the date input field.
The date range selection also allows the user to input single dates. The user can type one date into the input field, or select the same day as a start and end date in the calendar.
The delimiter visualizes the start and end date. If no delimiter is given, the app uses the one defined for the used locale.
If no range is selected, show a placeholder text to indicate the correct format. If no placeholder is defined, the control shows the default locale placeholder format. You can define your own placeholder, but you must also take localized versions into account.
Use in-line validation to give the user feedback, especially in the form of errors and warnings. Possible warning states are warning, error, and success. The date range input field in question is highlighted by a frame in the corresponding color. If the focus is inside the field, an explanation is shown. Ensure that this explanation is as specific as possible.
You can choose whether the displayed texts are to be shown in short, medium, or long format, or in another date format like dd–MM–yyyy. However, other date formats (besides short, medium, and long) should be used carefully due to local dependencies.
The following input types are available. (Note: these examples show German date formats for January 14, 2014.)
Use the long date format for master list/object list item/title and object header/title. Here are some examples:
Use the short date format for master list/object list item/list of object attributes if space is a concern. For example, you might need to save space if there is a label with the date. Here are some examples of the short date format:
If appropriate, use a relative format for master list/object list item/list of object status. For example: today, 1 day ago, 2 days ago, and so on up to 6 days ago. After 6 days, use an absolute date with the medium format.
Use the absolute date with medium format in the corresponding object header in the details area. Do not use the relative format here.
If screen space is at a premium (for example, if there are too many columns), use the short date format within table cells. Otherwise, use the medium format.
If you need to display the weekday, use the full format. For example:
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The busy indicator informs the user about an ongoing operation.
The ongoing operation covers only a part of the screen with multiple controls, and:
Take a look at the example on the right. The file upload dialog consists of multiple upload operations. The user must be able to cancel each operation. Since the operation is related only to one row and not to the full app, there is no need to block the whole screen. The user still needs to interact with the system, in this case to select the next file upload.
Since each control of SAPUI5 provides a busy state by default, you could also set the busy state at row level. In this case, however, there would be no option to cancel the operation.
The busy indicator is a blue circle and can also display a text description.
The size of the busy indicator can also be changed.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, or by selecting a date range in the calendar. They can also navigate directly from one month or year to another.
The date range selection is fully responsive. It is smaller in compact mode and provides a touch-friendly size in cozy mode. For more information about cozy and compact modes, see the article on content density.
The date range selection consists of two components: the date range input field and the date range picker.
The user can type the date directly into the input field, or use the date picker. You can also show a prompt text in the field (property: placeholder). The system validates the date and gives the user feedback.
With the date range picker, the user can see a day view, month view, or year view. The current day and the selected date are highlighted. The calendar week is also visible in the day view. The calendar closes when a final day is selected. The user can click the arrows to view the previous and next days, months, or years (depending on the current view).
The selected date is shown with a blue background. The current day is indicated with a purple border in the calendar.
The user can type two dates into the date range input field or click the calendar icon to open the calendar and select a date. These two possibilities work for all devices – desktops, tablets, and smartphones.
Clicking an arrow shows the next or previous day, month, or year.
Clicking the month shows an overview of all months.
If the current month is clicked, the user can change the month. When the user selects a month, the view changes to the day view.
By clicking the current year, the view changes to the year view. When the user selects a year, the view changes to the day view.
When the user selects an end date, the calendar closes.
After the user selects a range, the calendar closes and the range appears in the date input field.
The date range selection also allows the user to input single dates. The user can type one date into the input field, or select the same day as a start and end date in the calendar.
The delimiter visualizes the start and end date. If no delimiter is given, the app uses the one defined for the used locale.
If no range is selected, show a placeholder text to indicate the correct format. If no placeholder is defined, the control shows the default locale placeholder format. You can define your own placeholder, but you must also take localized versions into account.
Use in-line validation to give the user feedback, especially in the form of errors and warnings. Possible warning states are warning, error, and success. The date range input field in question is highlighted by a frame in the corresponding color. If the focus is inside the field, an explanation is shown. Ensure that this explanation is as specific as possible.
You can choose whether the displayed texts should be shown in short, medium, or long format, or in another date format such as dd–MM–yyyy. However, other date formats (besides short, medium, and long) should be used carefully due to local dependencies.
The following input types are available. (Note: these examples show German date formats for January 14, 2014.)
Use the long date format for master list/object list item/title and object header/title. Here are some examples:
Use the short date format for master list/object list item/list of object attributes if space is a concern. For example, you might need to save space if there is a label with the date. Here are some examples of the short date format:
If appropriate, use a relative format for master list/object list item/list of object status. For example: today, 1 day ago, 2 days ago, and so on up to 6 days ago. After 6 days, use an absolute date with the medium format.
Use the absolute date with medium format in the corresponding object header in the details area. Do not use the relative format here.
If screen space is at a premium (for example, if there are too many columns), use the short date format within table cells. Otherwise, use the medium format.
If you need to display the weekday, use the full format. For example:
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The busy indicator informs the user about an ongoing operation.
The ongoing operation covers only a part of the screen with multiple controls, and:
Take a look at the example on the right. The file upload dialog consists of multiple upload operations. The user must be able to cancel each operation. Since the operation is related only to one row and not to the full app, there is no need to block the whole screen. The user still needs to interact with the system, in this case to select the next file upload.
Since each control of SAPUI5 provides a busy state by default, you could also set the busy state at row level. In this case, however, there would be no option to cancel the operation.
The busy indicator is a blue circle and can also display a text description.
The size of the busy indicator can also be changed.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The busy indicator informs the user about an ongoing operation.
The ongoing operation covers only a part of the screen with multiple controls, and:
Take a look at the example on the right. The file upload dialog consists of multiple upload operations. The user must be able to cancel each operation. Since the operation is related only to one row and not to the full app, there is no need to block the whole screen. The user still needs to interact with the system, in this case to select the next file upload.
Since each control of SAPUI5 provides a busy state by default, you could also set the busy state at row level. In this case, however, there would be no option to cancel the operation.
The busy indicator is a blue circle and can also display a text description.
The size of the busy indicator can also be changed.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.
If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.
There are two types of panels: fixed and expandable.
Fixed panels are useful for grouping custom content. They include headers and info toolbars.
Expandable panels are much like fixed panels, except their content can be expanded and collapsed (including the info toolbar, if available).
A panel consists of a title bar with a header text or header toolbar, an info toolbar (optional), and a content area.
The title inside the title bar can be added by using the “headerText” property. If you use the “headerToolbar” aggregation, the “headerText” property is ignored. With the “headerToolbar” aggregation, you can add a toolbar with any toolbar content inside the title bar. For example, if you need a title text on the left and some action buttons on the right, add a title to the toolbar’s content aggregation, toolbar spacer, and then your buttons.
If you add a header toolbar (sap.m.Toolbar) via aggregations, it will overwrite the “headerText” property.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.
If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.
There are two types of panels: fixed and expandable.
Fixed panels are useful for grouping custom content. They include headers and info toolbars.
Expandable panels are much like fixed panels, except their content can be expanded and collapsed (including the info toolbar, if available).
A panel consists of a title bar with a header text or header toolbar, an info toolbar (optional), and a content area.
The title inside the title bar can be added by using the “headerText” property. If you use the “headerToolbar” aggregation, the “headerText” property is ignored. With the “headerToolbar” aggregation, you can add a toolbar with any toolbar content inside the title bar. For example, if you need a title text on the left and some action buttons on the right, add a title to the toolbar’s content aggregation, toolbar spacer, and then your buttons.
If you add a header toolbar (sap.m.Toolbar) via aggregations, it will overwrite the “headerText” property.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.
If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.
There are two types of panels: fixed and expandable.
If you add a header toolbar (sap.m.Toolbar) via aggregations, it will overwrite the “headerText” property.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.
If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.
There are two types of panels: fixed and expandable.
Fixed panels are useful for grouping custom content. They include headers and info toolbars.
Expandable panels are much like fixed panels, except their content can be expanded and collapsed (including the info toolbar, if available).
A panel consists of a title bar with a header text or header toolbar, an info toolbar (optional), and a content area.
The title inside the title bar can be added by using the “headerText” property. If you use the “headerToolbar” aggregation, the “headerText” property is ignored. With the “headerToolbar” aggregation, you can add a toolbar with any toolbar content inside the title bar. For example, if you need a title text on the left and some action buttons on the right, add a title to the toolbar’s content aggregation, toolbar spacer, and then your buttons.
The panel is translucent by default to match the background of the corresponding list, form, table, and so on. These controls also have solid, translucent, and transparent background properties, so it makes sense to give the panel the same type of properties.
This also applies to our own composite controls, such as table personalization, value help, and quick view, which use panels to group standard controls such as input fields and buttons.
Example: In a dialog box with a form-style layout, the background color can be set to transparent so that the input fields in the panel stand out against the background.
Example: A panel with a transparent background used in a table personalization dialog box.
Example: A panel with transparent background properties, used in a value help dialog box.
Example: Quick view (seen here outside the popover or dialog box) is created using translucent panels.
If you add a header toolbar (sap.m.Toolbar) via aggregations, it will overwrite the “headerText” property.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Empty spaces are places in apps that have no content or data. There are different use cases where an empty page might be shown. The layout is still the same, but the text changes depending on the use case.
The size of the empty page is adjusted to the amount of space available.
The layout of the empty page always behaves the same. The only differences are the texts which change depending on the use case and the user’s location in the app. Have a look at the different types:
Contextual filter was set and there are no results.
Please display the following text in the master list:
No matching <entity> found, e.g. No matching items found.
Please display the following text in the detail page:
No matching <entity> found. Check the filter settings. e.g. No matching items found. Check the filter settings.
The user has set a filter and there are no results.
Please display the following text in the master list:
No matching <entity> found e.g. No matching items found.
Please display the following text in the the detail page:
Show last selected <entity> e.g. Show last selected item.
The user has searched something and there are no results (also for search and filter at the same time).
Please display the following text in the master list:
No matching items found.
Please display the following text in the detail page:
Show last selected item.
There are no items, but the user searched anyway.
Please display the following text in the master list:
No matching items found.
Please display the following text in the detail page:
Show last empty page use case.
The app contains no items.
Please display the following text in the master list and detail page:
No items are currently available.
In this case, there are too many items in the master list. The user has to search to see results.
Please display the following text in the master list:
Search for <business object (plural)> e.g. Search for opportunities.
Please display the following text in the detail page:
Search for <business object (plural)> e.g. Search for opportunities.
The app is loading (open, filter, sort…).
Please display the following text in the master list:
Loading…
Please display the following text in the detail page:
Show last selected item.
The item the user has saved is no longer available.
Please display the following text in the master list:
No items selected.
On the detail page, indicate the specific entity. Where relevant, you can also include the ID:
This <entity> is no longer available.
<Entity> <ID> is no longer available.
Examples:
This product is no longer available.
Purchase order 123456 is no longer available.
Following UI elements can be placed into the action sheet:
Different texts are displayed in different use cases.
In case a contextual filter is set in a split-screen view and there are no results, please display:
No matching items found. Check the filter settings.
However, if the user has set a filter and there are no results, the details area will continue to show the last selected item.
If there are no items in the list to begin with and the user searches anyway the master list reads No matching items found and the details area shows the last empty state. The texts for this could be
No items are currently available or
No matching items found. Check the filter settings or Search for.
If your app simply does not contain any items, please display:
No items are currently available in both, the master list and in the details area.
If there are too many items in the master list and the user has to conduct a search to see any results, please display:
Search for <>, where <> stands for the plural of the respective business object’s name in lower case.
If the user saved a tile on his home screen, but the item is no longer available, you could use the text
This <entity> is no longer available, e.g. This product is no longer available.
Of course, sometimes your app will simply be loading. In that case, display: Loading…’. Please do not show the message No Data in this case, since that can be misleading.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Category navigation is a rarely used pattern which can be used to replace tree-like structures with only a few levels in a responsive environment. The breadcrumb control replaces the title control in the category navigation pattern.
The pattern is based on a responsive table. In contrast to the standard usage of the responsive table, the title is used for providing a breadcrumb showing the current level.
The breadcrumb control determines the text of the current/last element in the breadcrumb path. It only consists of text (string element).
The responsiveness is handled by the control: As soon as the breadcrumb gets truncated, it provides a dropdown menu to access further navigation levels.
The breadcrumb appears in the toolbar, and replaces the table title.
At any given level, the responsive table contains the individual line items, including their column header, as well as the categories available for further drilldown.
Use the breadcrumb control to implement the category navigation pattern. Display the navigation levels as text. Use links for the title of all levels above the current level to provide a fast navigation option over the levels.
Thus, showing the root level does not include a link at all.
As soon as text of the breadcrumb gets truncated, the breadcrumb control provides a dropdown functionality to reach hidden navigation levels. The currently selected level shows the title of the current level.
Use one or several responsive tables for listing the items of the different levels, depending on the columns shown on each level.
Within the responsive table, use the navigation mode of the items on container items.
Do not use the navigation mode on leaf items.
Initially, this pattern looks like a standard responsive table with control items.
Clicking an item drills into it in one of the following ways:
The user can navigate further by using navigable items.
The breadcrumb adapts accordingly. Leafs are shown without a navigation indicator.
Adapt the title to a breadcrumb.
Show navigation indicators if there are more levels.
Navigate further by using control items.
Make sure that the breadcrumb adapts accordingly. Please be aware that leafs are shown without a navigation indicator.
Navigate backwards by using one of the links inside the breadcrumb. If going backwards, show the exact same state as before.
As soon as there is not enough screen real estate to show the entire breadcrumb, the control provides a dropdown functionality to reach further navigation levels.
Within the dropdown menu, show all parent nodes below the current node.
If navigating, just change the responsive table and the breadcrumb. Do not change anything else.
Do not navigate to another page.
Example: Drilldown with Breadcrumb Display
Place the breadcrumb control in a way that makes sense to the user. For example, if used in comination with segmented buttons, place the breadcrumb on top of the toolbar. The segmented buttons should be displayed on the very left of the toolbar. In this case, the page navigation is on an higher level as the the view switch.
Together with a tab pattern, the breadcrumb should replace the table title and and should be displayed under the tabs.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Category navigation is a rarely used pattern which can be used to replace tree-like structures with only a few levels in a responsive environment. The breadcrumb control replaces the title control in the category navigation pattern.
The pattern is based on a responsive table. In contrast to the standard usage of the responsive table, the title is used for providing a breadcrumb showing the current level.
The breadcrumb control determines the text of the current/last element in the breadcrumb path. It only consists of text (string element).
The responsiveness is handled by the control: As soon as the breadcrumb gets truncated, it provides a dropdown menu to access further navigation levels.
The breadcrumb appears in the toolbar, and replaces the table title.
At any given level, the responsive table contains the individual line items, including their column header, as well as the categories available for further drilldown.
Use the breadcrumb control to implement the category navigation pattern. Display the navigation levels as text. Use links for the title of all levels above the current level to provide a fast navigation option over the levels.
Thus, showing the root level does not include a link at all.
As soon as text of the breadcrumb gets truncated, the breadcrumb control provides a dropdown functionality to reach hidden navigation levels. The currently selected level shows the title of the current level.
Use one or several responsive tables for listing the items of the different levels, depending on the columns shown on each level.
Within the responsive table, use the navigation mode of the items on container items.
Do not use the navigation mode on leaf items.
Initially, this pattern looks like a standard responsive table with control items.
Clicking an item drills into it in one of the following ways:
The user can navigate further by using navigable items.
The breadcrumb adapts accordingly. Leafs are shown without a navigation indicator.
Adapt the title to a breadcrumb.
Show navigation indicators if there are more levels.
Navigate further by using control items.
Make sure that the breadcrumb adapts accordingly. Please be aware that leafs are shown without a navigation indicator.
Navigate backwards by using one of the links inside the breadcrumb. If going backwards, show the exact same state as before.
As soon as there is not enough screen real estate to show the entire breadcrumb, the control provides a dropdown functionality to reach further navigation levels.
Within the dropdown menu, show all parent nodes below the current node.
If navigating, just change the responsive table and the breadcrumb. Do not change anything else.
Do not navigate to another page.
Example: Drilldown with Breadcrumb Display
Place the breadcrumb control in a way that makes sense to the user. For example, if used in comination with segmented buttons, place the breadcrumb on top of the toolbar. The segmented buttons should be displayed on the very left of the toolbar. In this case, the page navigation is on an higher level as the the view switch.
Together with a tab pattern, the breadcrumb should replace the table title and and should be displayed under the tabs.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Category navigation is a rarely used pattern which can be used to replace tree-like structures with only a few levels in a responsive environment. The breadcrumb control replaces the title control in the category navigation pattern.
The pattern is based on a responsive table. In contrast to the standard usage of the responsive table, the title is used for providing a breadcrumb showing the current level.
The breadcrumb control determines the text of the current/last element in the breadcrumb path. It only consists of text (string element).
The responsiveness is handled by the control: As soon as the breadcrumb gets truncated, it provides a dropdown menu to access further navigation levels.
The breadcrumb appears in the toolbar, and replaces the table title.
At any given level, the responsive table contains the individual line items, including their column header, as well as the categories available for further drilldown.
Use the breadcrumb control to implement the category navigation pattern. Display the navigation levels as text. Use links for the title of all levels above the current level to provide a fast navigation option over the levels.
Thus, showing the root level does not include a link at all.
As soon as text of the breadcrumb gets truncated, the breadcrumb control provides a dropdown functionality to reach hidden navigation levels. The currently selected level shows the title of the current level.
Use one or several responsive tables for listing the items of the different levels, depending on the columns shown on each level.
Within the responsive table, use the navigation mode of the items on container items.
Do not use the navigation mode on leaf items.
Initially, this pattern looks like a standard responsive table with control items.
Clicking an item drills into it in one of the following ways:
The user can navigate further by using navigable items.
The breadcrumb adapts accordingly. Leafs are shown without a navigation indicator.
Adapt the title to a breadcrumb.
Show navigation indicators if there are more levels.
Navigate further by using control items.
Make sure that the breadcrumb adapts accordingly. Please be aware that leafs are shown without a navigation indicator.
Navigate backwards by using one of the links inside the breadcrumb. If going backwards, show the exact same state as before.
As soon as there is not enough screen real estate to show the entire breadcrumb, the control provides a dropdown functionality to reach further navigation levels.
Within the dropdown menu, show all parent nodes below the current node.
If navigating, just change the responsive table and the breadcrumb. Do not change anything else.
Do not navigate to another page.
Example: Drilldown with Breadcrumb Display
Place the breadcrumb control in a way that makes sense to the user. For example, if used in comination with segmented buttons, place the breadcrumb on top of the toolbar. The segmented buttons should be displayed on the very left of the toolbar. In this case, the page navigation is on an higher level as the the view switch.
Together with a tab pattern, the breadcrumb should replace the table title and and should be displayed under the tabs.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Category navigation is a rarely used pattern that can be used to replace tree-like structures with only a few levels in a responsive environment.
The category navigation pattern replaces the standard title of a responsive table with a breadcrumb showing the current navigation level.
A breadcrumb comprises links, icons, and text controls. App teams need to build the breadcrumb manually, and also ensure that its behavior is responsive. As soon as text is truncated, change the breadcrumb to a select control.
The breadcrumb appears in the toolbar, and replaces the table title.
At any given level, the responsive table contains the individual line items, including their column header, as well as the categories available for further drilldown.
Use links, icons, and text controls to implement the breadcrumb.
As a result, there is no link at root level.
As soon as the last text in the breadcrumb is truncated, change the breadcrumb to a select control. Show the title of the current level as the selected item.
Depending on the columns shown at each level, use one or more responsive tables to list the items at the different levels.
Within the responsive table, use the navigation mode of the items for container items.
Do not use navigation mode for leaf items.
Initially, this pattern looks like a standard responsive table with control items.
Clicking an item drills into it in one of the following ways:
The user can navigate further by using navigable items.
The breadcrumb adapts accordingly. Leaves are shown without a navigation indicator.
Adapt the title to a breadcrumb.
Show navigation indicators if there are more levels.
Navigate further by using control items.
Ensure that the breadcrumb adapts accordingly. Note that leaves are shown without a navigation indicator.
Navigate back by using one of the links inside the breadcrumb. When the user navigates back, show exactly the same state as before.
As soon as the last text in the breadcrumb is truncated, change the breadcrumb to a select control.
Within the select control, show all parent nodes below the current node.
Keep the select control once it has been shown.
Do not revert to the breadcrumb just by navigating back within the select control, even if a breadcrumb would fit.
Only revert to the breadcrumb if the screen width is increased again and the breadcrumb fits.
When the user is navigating, change only the responsive table and the breadcrumb. Do not change anything else.
Do not navigate the user to another page.
Example: Drilldown with Breadcrumb Display
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.
The busy dialog is fully responsive and can be shown in compact and cozy mode.
jQuery.sap.syncStyleClass(“sapUiSizeCompact”, this.getView(), this._oDialog);
Further information is available here.
The busy dialog can consist of several components and is configurable. The following properties can be set:
If no title, text, or Cancel button is set, the busy dialog displays only the busy icon (busy dialog, lightweight version).
If you do not show a title or text, use the invisible text control (sap.ui.core.InvisibleText) to provide the reason for the busy state to users with assistive technologies.
The additional text should be associated to the busy dialog using ariaLabelledBy association.
Recommendation: Do not use the invisible text control when you show text in the busy dialog.
We recommend displaying the busy dialog one second after the process has been triggered and for a minimum time of 500 ms to avoid flickering. For processes that last less then one second, a busy dialog is not displayed at all.
Example: A process takes 1.3 s in total. After one second, the busy dialog is displayed. The process finishes in 1.3 seconds. To avoid flickering, you should display the busy dialog for at least 500 ms, so you will need to add 200 ms to avoid flickering.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.
The busy dialog is fully responsive and can be shown in compact and cozy mode.
jQuery.sap.syncStyleClass(“sapUiSizeCompact”, this.getView(), this._oDialog);
For more information, see the SAPUI5 Demo Kit.
The busy dialog can consist of several components and is configurable. The following properties can be set:
If no title, text, or Cancel button is set, the busy dialog displays only the busy icon (busy dialog, lightweight version).
If you do not show a title or text, use the invisible text control (sap.ui.core.InvisibleText) to provide the reason for the busy state to users with assistive technologies.
The additional text should be associated to the busy dialog using ariaLabelledBy association.
Recommendation: Do not use the invisible text control when you show text in the busy dialog.
We recommend displaying the busy dialog one second after the process has been triggered and for a minimum time of 500 ms to avoid flickering. For processes that last less then one second, a busy dialog is not displayed at all.
Example: A process takes 1.3 s in total. After one second, the busy dialog is displayed. The process finishes in 1.3 seconds. To avoid flickering, you should display the busy dialog for at least 500 ms, so you will need to add 200 ms to avoid flickering.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.
The busy dialog is fully responsive and can be shown in compact and cozy mode.
jQuery.sap.syncStyleClass(“sapUiSizeCompact”, this.getView(), this._oDialog);
Further information is available here.
The busy dialog can consist of several components and is configurable. The following properties can be set:
If no title, text, or Cancel button is set, the busy dialog displays only the busy icon (busy dialog, lightweight version).
We recommend displaying the busy dialog one second after the process has been triggered and for a minimum time of 500 ms to avoid flickering. For processes that last less then one second, a busy dialog is not displayed at all.
Example: A process takes 1.3 s in total. After one second, the busy dialog is displayed. The process finishes in 1.3 seconds. To avoid flickering, you should display the busy dialog for at least 500 ms, so you will need to add 200 ms to avoid flickering.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.
The busy dialog is fully responsive and can be shown in compact and cozy mode.
jQuery.sap.syncStyleClass(“sapUiSizeCompact”, this.getView(), this._oDialog);
Further information is available here.
The busy dialog can consist of several components and is configurable. The following properties can be set:
If no title, text, or Cancel button is set, the busy dialog displays only the busy icon (busy dialog, lightweight version).
We recommend displaying the busy dialog one second after the process has been triggered and for a minimum time of 500 ms to avoid flickering. For processes that last less then one second, a busy dialog is not displayed at all.
Example: A process takes 1.3 s in total. After one second, the busy dialog is displayed. The process finishes in 1.3 seconds. To avoid flickering, you should display the busy dialog for at least 500 ms, so you will need to add 200 ms to avoid flickering.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
You can set a busy state for each SAPUI5 control.
Avoid showing multiple busy states at once. If you expect multiple busy states on various controls, you can set the busy state on a control or container above.
In some cases, however, it makes sense to allow multiple busy states. For example, a page could contain a form and several tables that load asynchronously. In this case, it does not make sense to set the busy state at page level until all the data is loaded as the user can start filling out the form which is already available. Response times may vary due to table data retrieval from different services.
Try to enable as much as possible on one screen,so the user can start working while the rest of the data is being loaded in the background. Set the busy state for those UI elements that will require some time to load.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.
Avoid showing multiple busy states at once. If you expect multiple busy states on various controls, you can set the busy state on a control or container above.
In some cases, however, it makes sense to allow multiple busy states. For example, a page could contain a form and several tables that load asynchronously. In this case, it does not make sense to set the busy state at page level until all the data is loaded as the user can start filling out the form which is already available. Response times may vary due to table data retrieval from different services.
Try to enable as much as possible on one screen,so the user can start working while the rest of the data is being loaded in the background. Set the busy state for those UI elements that will require some time to load.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.
Avoid showing multiple busy states at once. If you expect multiple busy states on various controls, you can set the busy state on a control or container above.
In some cases, however, it makes sense to allow multiple busy states. For example, a page could contain a form and several tables that load asynchronously. In this case, it does not make sense to set the busy state at page level until all the data is loaded as the user can start filling out the form which is already available. Response times may vary due to table data retrieval from different services.
Try to enable as much as possible on one screen,so the user can start working while the rest of the data is being loaded in the background. Set the busy state for those UI elements that will require some time to load.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Images are not only for decoration. They can be a powerful way to capture the user’s attention and communicate your message. You can use the image control to integrate images into your apps. Images are visual representations of objects or functions.
The size of the image is simply adjusted to the amount of space available.
Images can be used in various locations in the app, such as in a list cell or object header, and also in the content area. App developers determine the most appropriate area. See the examples below.
Various options are available in terms of size setting, and the images can also be combined with actions. The most common behavior is clicking or tapping the image to enlarge it.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Images are not only for decoration. They can be a powerful way to capture the user’s attention and communicate your message. You can use the image control to integrate images into your apps. Images are visual representations of objects or functions.
The size of the image is simply adjusted to the amount of space available.
Images can be used in various locations in the app, such as in a list cell or object header, and also in the content area. App developers determine the most appropriate area. See the examples below.
Various options are available in terms of size setting, and the images can also be combined with actions. The most common behavior is clicking or tapping the image to enlarge it.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Images are not only for decoration. They can be a powerful way to capture the user’s attention and communicate your message. You can use the image control to integrate images into your apps. Images are visual representations of objects or functions.
The size of the image is simply adjusted to the amount of space available.
Images can be used in various locations in the app, such as in a list cell or object header, and also in the content area. App developers determine the most appropriate area. See the examples below.
Various options are available in terms of size setting, and the images can also be combined with actions. The most common behavior is clicking or tapping the image to enlarge it.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Images are not only for decoration. They can be a powerful way to capture the user’s attention and communicate your message. You can use the image control to integrate images into your apps. Images are visual representations of objects or functions.
The size of the image is simply adjusted to the amount of space available.
Images can be used in various locations in the app, such as in a list cell or object header, and also in the content area. App developers determine the most appropriate area. See the examples below.
Various options are available in terms of size setting, and the images can also be combined with actions. The most common behavior is clicking or tapping the image to enlarge it.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.
Use tokens only in the multi-combo box, multi-input control, or value help dialog.
The tokenizer is an invisible container that can display multiple tokens.
Tokens have the following properties:
Users can interact with tokens using a mouse, keyboard, and/or touch input. In size L (desktop) only, hovering with the mouse over the token produces a tooltip with the entire content of the token (on a maximum of two lines).
Users can select tokens by clicking or tapping them, or by using the keyboard. The selected tokens are then indicated. Users can select multiple tokens separately by holding down the CTRL key and selecting the relevant tokens, for example, by clicking them.
The user can select a series of tokens by placing the cursor in an initial position (which can also be a token), holding down the SHIFT key, and clicking or tapping a new position. The tokens between these two cursor positions are then selected.
To replace a token, the user selects it and enters new characters.
The user can add tokens to the multi-combo box and multi-input control. New tokens are added in the order in which they are entered.
The user can instantly remove tokens via the keyboard, or by clicking or tapping the Remove icon .
There are three different styles of tokens: regular, on hover, and selected. These styles correspond to the type of interaction being used.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.
Use tokens only in the multi-combo box, multi-input control, or value help dialog.
The tokenizer is an invisible container that can display multiple tokens.
Tokens have the following properties:
Users can interact with tokens using a mouse, keyboard, and/or touch input. In size L (desktop) only, hovering with the mouse over the token produces a tooltip with the entire content of the token (on a maximum of two lines).
Users can select tokens by clicking or tapping them, or by using the keyboard. The selected tokens are then indicated. Users can select multiple tokens separately by holding down the CTRL key and selecting the relevant tokens, for example, by clicking them.
The user can select a series of tokens by placing the cursor in an initial position (which can also be a token), holding down the SHIFT key, and clicking or tapping a new position. The tokens between these two cursor positions are then selected.
To replace a token, the user selects it and enters new characters.
The user can add tokens to the multi-combo box and multi-input control. New tokens are added in the order in which they are entered.
The user can instantly remove tokens via the keyboard, or by clicking or tapping the Remove icon .
There are three different styles of tokens: regular, on hover, and selected. These styles correspond to the type of interaction being used.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.
Use tokens only in the multi-combo box, multi-input control, or value help dialog.
The tokenizer is an invisible container that can display multiple tokens.
Tokens have the following properties:
Users can interact with tokens using a mouse, keyboard, and/or touch input. In size L (desktop) only, hovering with the mouse over the token produces a tooltip with the entire content of the token (on a maximum of two lines).
Users can select tokens by clicking or tapping them, or by using the keyboard. The selected tokens are then indicated. Users can select multiple tokens separately by holding down the CTRL key and selecting the relevant tokens, for example, by clicking them.
The user can select a series of tokens by placing the cursor in an initial position (which can also be a token), holding down the SHIFT key, and clicking or tapping a new position. The tokens between these two cursor positions are then selected.
To replace a token, the user selects it and enters new characters.
The user can add tokens to the multi-combo box and multi-input control. New tokens are added in the order in which they are entered.
The user can instantly remove tokens via the keyboard, or by clicking or tapping the Remove icon .
There are three different styles of tokens: regular, on hover, and selected. These styles correspond to the type of interaction being used.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The action select control allows you to offer actions within a selection dialog. The action can refer to the selected element.
The action select control is based on the select and action list item controls.
Action select is a combination of the select control and the action list item control.
The actions are available within the scrollable content area.
After the user executes an action, a corresponding message appears.
Use a reasonable number of actions within the action select control. Depending on the use case and the device, you may want to include fewer actions.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text. Both can be used individually, but they also complement each other well to create a simple feed or notes control.
In these cases, use the social timeline instead (requires SAP Jam).
Due to their responsive behavior, both controls can be used in small and large view ports or screens.
When the width of the available space falls below 25 rem (for example, in portrait mode on smartphones), the two controls respond as follows:
In the feed list item, the user’s name, image, and the time stamp move on top of the text. If there is no image, the name and time stamp are left-aligned together with the text.
The feed input consists of:
You can also choose not to show user images at all. In this case, the size of the input area increases automatically.
The feed list item consists of the user’s name and an optional picture of the user who wrote the note or update. The name can contain a link that triggers a quick overview of the user’s profile data. The actual text written by the user follows the name. Below it is a separate byline that can contain a time stamp and an attribute in the form of free text. This allows you to put in your own attribute, such as Approval, Internal, or External. Both the time stamp and the attribute are optional.
If the name is a link, the picture should also be linked with the same attributes.
If the user does not have a picture assigned, a placeholder is shown instead:
The name (and picture) can also be read-only, that is, without a link:
If the app does not support user images, they can be omitted:
Here, too, the name can be read-only:
It’s also possible to display rich text (formatted text) in the feed list item. This feature should be handled with care as it allows for countless custom layouts.
Please see that you use it responsibly and provide your users with a consistent experience. Only deviate from the default layout and font if absolutely required by the use case.
Example use case: Render URLs as links.
Apps sometimes need to discern between different types of notes. There is an easy way to allow users to choose which type they want to see or add to the list.
You can place a toolbar containing a select control at the top of the feed input control. From there, users can select the type of notes, such as Internal Notes or External Notes. The list of notes must contain only the type selected. If the user adds a note via the feed input, the type must be set automatically according to the selection.
The feed input and feed list item do not contain subcontrols. However, you can easily combine them to create a simple feed or notes control.
Although the feed input counts as a single control, the input area inherits its behavior from the sap.m.TextArea control.
Initially, the feeder contains a placeholder (input prompt), and the Send button is disabled, with reduced opacity.
Clicking into the input field puts the focus on the field and allows to start typing.
When the user starts to type, the placeholder disappears and the Send button becomes active and more prominent.
If the available width is below 25 rem (for example, in portrait mode on a smartphone), the picture is removed.
To send the text, the user must explicitly click or tap the Send button. Pressing Enter on the keyboard (on-screen or physical) results in a line break.
When the text exceeds a certain number of characters (you can overwrite the default value), the rest of the text is truncated and a MORE link appears after the truncated section.
Initially, the MORE link is gray, so it does not divert the user’s attention away from the actual text. When the user moves the mouse over the feed text, the MORE link is highlighted. Hovering over the link underlines it.
When the user expands the text, the name of this link changes to LESS, but still behaves the same way as before.
In tables, users sometimes need to see if an object has a comment (or feed or note) without further navigation, and even be able to add/edit right from the table.
Add an additional row, named according to the type of user input, such as Comment, Note, or Feed.
Place a link inside each cell with the appropriate action (row: Comment, link: Comment/ row: Feed, link: Post).
If there can be more than one item, add a counter after the text as well (see example on the right).
This solution works with every table control.
Optional:
Depending on the use case, it might help users if they can see the latest note. The responsive table allows the feed list item (sap.m.FeedListItem) to be used inside a cell.
Reduce the property “maxCharacters” to an amount that your table can handle.
Note that once the maximum number of characters has been reached, a MORE link allows users to expand the text. Technically, this is no problem for the responsive table, but you need to ensure that the layout of your page allows this kind of expansion.
Place a link below the feed list item to allow users to add something (as described above).
When the user clicks a link, such as Comment or Note, display a dialog showing all comments (notes, feed entries, and so on) along with possible actions, such as Add or Edit, depending on your use case.
There are several ways to show notes (comments, feed entries, and so on) in a dialog:
Because the feed list item is built on the basis of the standard list item, it inherits multiple properties that may not make sense in a feed use case.
Use only properties that are described in this article. Especially making the entire feed list item clickable can lead to functional issues and usability problems.
If you display formatted text (rich text) in the feed list item, only use formatting that is beneficial to users, and not for decorative purposes. See that you use it responsibly and provide your users with a consistent experience. Only deviate from the default layout and font if absolutely required by the use case (example: render URLs as links).
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text. Both can be used individually, but they also complement each other well to create a simple feed or notes control.
In these cases, use the social timeline instead (requires SAP Jam).
Due to their responsive behavior, both controls can be used in small and large view ports or screens.
When the width of the available space falls below 25 rem (for example, in portrait mode on smartphones), the two controls respond as follows:
In the feed list item, the user’s name, image, and the time stamp move on top of the text. If there is no image, the name and time stamp are left-aligned together with the text.
The feed input consists of:
You can also choose not to show user images at all. In this case, the size of the input area increases automatically.
The feed list item consists of the user’s name and an optional picture of the user who wrote the note or update. The name can contain a link that triggers a quick overview of the user’s profile data. The actual text written by the user follows the name. Below it is a separate byline that can contain a time stamp and an attribute in the form of free text. This allows you to put in your own attribute, such as Approval, Internal, or External. Both the time stamp and the attribute are optional.
If the name is a link, the picture should also be linked with the same attributes.
If the user does not have a picture assigned, a placeholder is shown instead:
The name (and picture) can also be read-only, that is, without a link:
If the app does not support user images, they can be omitted:
Here, too, the name can be read-only:
Apps sometimes need to discern between different types of notes. There is an easy way to allow users to choose which type they want to see or add to the list.
You can place a toolbar containing a select control at the top of the feed input control. From there, users can select the type of notes, such as Internal Notes or External Notes. The list of notes must contain only the type selected. If the user adds a note via the feed input, the type must be set automatically according to the selection.
The feed input and feed list item do not contain subcontrols. However, you can easily combine them to create a simple feed or notes control.
Although the feed input counts as a single control, the input area inherits its behavior from the sap.m.TextArea control.
Initially, the feeder contains a placeholder (input prompt), and the Send button is disabled, with reduced opacity.
Clicking into the input field puts the focus on the field and allows to start typing.
When the user starts to type, the placeholder disappears and the Send button becomes active and more prominent.
If the available width is below 25 rem (for example, in portrait mode on a smartphone), the image is removed.
To send the text, the user must explicitly click or tap the Send button. Pressing Enter on the keyboard (on-screen or physical) results in a line break.
When the text exceeds a certain number of characters (you can overwrite the default value), the rest of the text is truncated and a MORE link appears after the truncated section.
Initially, the MORE link is gray, so it does not divert the user’s attention away from the actual text. When the user moves the mouse over the feed text, the MORE link is highlighted. Hovering over the link underlines it.
When the user expands the text, the name of this link changes to LESS, but still behaves the same way as before.
In tables, users sometimes need to see if an object has a comment (or feed or note) without further navigation, and even be able to add/edit right from the table.
Add an additional row, named according to the type of user input, such as Comment, Note, or Feed.
Place a link inside each cell with the appropriate action (row: Comment, link: Comment/ row: Feed, link: Post).
If there can be more than one item, add a counter after the text as well (see example on the right).
This solution works with every table control.
Optional:
Depending on the use case, it might help users if they can see the latest note. The responsive table allows the feed list item (sap.m.FeedListItem) to be used inside a cell.
Reduce the property “maxCharacters” to an amount that your table can handle.
Note that once the maximum number of characters has been reached, a MORE link allows users to expand the text. Technically, this is no problem for the responsive table, but you need to ensure that the layout of your page allows this kind of expansion.
Place a link below the feed list item to allow users to add something (as described above).
When the user clicks a link, such as Comment or Note, display a dialog showing all comments (notes, feed entries, and so on) along with possible actions, such as Add or Edit, depending on your use case.
There are several ways to show notes (comments, feed entries, and so on) in a dialog:
Because the feed list item is built on the basis of the standard list item, it inherits multiple properties that may not make sense in a feed use case.
Use only properties that are described in this article. Especially making the entire feed list item clickable can lead to functional issues and usability problems.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text. Both can be used individually, but they also complement each other well to create a simple feed or notes control.
In these cases, use the social timeline instead (requires SAP Jam).
Due to their responsive behavior, both controls can be used in small and large view ports or screens.
When the width of the available space falls below 25 rem (for example, in portrait mode on smartphones), the two controls respond as follows:
In the feed list item, the user’s name, image, and the time stamp move on top of the text. If there is no image, the name and time stamp are left-aligned together with the text.
The feed input consists of:
You can also choose not to show user images at all. In this case, the size of the input area increases automatically.
The feed list item consists of the user’s name and an optional picture of the user who wrote the note or update. The name can contain a link that triggers a quick overview of the user’s profile data. The actual text written by the user follows the name. Below it is a separate byline that can contain a time stamp and an attribute in the form of free text. This allows you to put in your own attribute, such as Approval, Internal, or External. Both the time stamp and the attribute are optional.
If the name is a link, the picture should also be linked with the same attributes.
If the user does not have a picture assigned, a placeholder is shown instead:
The name (and picture) can also be read-only, that is, without a link:
If the app does not support user images, they can be omitted:
Here, too, the name can be read-only:
Apps sometimes need to discern between different types of notes. There is an easy way to allow users to choose which type they want to see or add to the list.
You can place a toolbar containing a select control at the top of the feed input control. From there, users can select the type of notes, such as Internal Notes or External Notes. The list of notes must contain only the type selected. If the user adds a note via the feed input, the type must be set automatically according to the selection.
The feed input and feed list item do not contain subcontrols. However, you can easily combine them to create a simple feed or notes control.
Although the feed input counts as a single control, the input area inherits its behavior from the sap.m.TextArea control.
Initially, the feeder contains a placeholder (input prompt), and the Send button is disabled, with reduced opacity.
Clicking into the input field puts the focus on the field and allows to start typing.
When the user starts to type, the placeholder disappears and the Send button becomes active and more prominent.
If the available width is below 25 rem (for example, in portrait mode on a smartphone), the picture is removed.
To send the text, the user must explicitly click or tap the Send button. Pressing Enter on the keyboard (on-screen or physical) results in a line break.
When the text exceeds a certain number of characters (you can overwrite the default value), the rest of the text is truncated and a MORE link appears after the truncated section.
Initially, the MORE link is gray, so it does not divert the user’s attention away from the actual text. When the user moves the mouse over the feed text, the MORE link is highlighted. Hovering over the link underlines it.
When the user expands the text, the name of this link changes to LESS, but still behaves the same way as before.
In tables, users sometimes need to see if an object has a comment (or feed or note) without further navigation, and even be able to add/edit right from the table.
Add an additional row, named according to the type of user input, such as Comment, Note, or Feed.
Place a link inside each cell with the appropriate action (row: Comment, link: Comment/ row: Feed, link: Post).
If there can be more than one item, add a counter after the text as well (see example on the right).
This solution works with every table control.
Optional:
Depending on the use case, it might help users if they can see the latest note. The responsive table allows the feed list item (sap.m.FeedListItem) to be used inside a cell.
Reduce the property “maxCharacters” to an amount that your table can handle.
Note that once the maximum number of characters has been reached, a MORE link allows users to expand the text. Technically, this is no problem for the responsive table, but you need to ensure that the layout of your page allows this kind of expansion.
Place a link below the feed list item to allow users to add something (as described above).
When the user clicks a link, such as Comment or Note, display a dialog showing all comments (notes, feed entries, and so on) along with possible actions, such as Add or Edit, depending on your use case.
There are several ways to show notes (comments, feed entries, and so on) in a dialog:
Because the feed list item is built on the basis of the standard list item, it inherits multiple properties that may not make sense in a feed use case.
Use only properties that are described in this article. Especially making the entire feed list item clickable can lead to functional issues and usability problems.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The sap.m.FeedListItem is capable of displaying unformatted text accompanied by an optional user image. Together with the sap.m.FeedInput control, it makes a simple feed or notes control.
Its responsive behavior allows the feed list item to appear in both, small and large containers, or screens.
When the width of the available space falls below 25 rem (e.g. portrait mode on smartphones), the feed list item responds as follows.
The user’s name, image, and the time stamp move on top of the text. If there is no image, the name and time stamp are left-aligned together with the text.
The feed list item consists of the user’s name and an optional picture of the user who wrote the note/ update (optional). The name can contain a link that triggers a quick overview of the user’s profile data. The actual text written by the user follows the name. Below is separate byline that can hold a time stamp and an attribute in the form of free text. This allows apps to put in their own attribute (e.g. approval etc.). Both time stamp and attribute are optional.
In case the name is a link, the picture should also be linked with the same attributes.
If the user does not have a picture assigned, a placeholder is shown instead:
Name (and picture) can also be read-only, i.e. without a link:
In case the app does not support user images at all, they can be omitted:
Here, too, the name can be read-only:
The feed list item itself does not contain multiple components. However, to create a simple feed or notes container, it can be combined with the sap.m.FeedInput control.
When the text exceeds a certain amount of characters (default value can be overwritten by apps), the rest of the text is truncated and a More link appears after the truncated section.
Initially the More link is grey, so it does not divert attention from the actual text.
When the user moves the mouse over the feed chunk, the More link is highlighted.
Hovering over the link underlines it.
Clicking the link expands the text and the link is relabeled to less.
The link still behaves the same way as before.
… you need to show unformatted text with a user’s name in front, e.g. for a feed control or notes control.
… you need to display formatted text.
… you need to display large amounts of text.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).
Several chart types are available: bullet chart, trend chart, column chart, comparison chart, and harvey ball chart.
All micro charts are fully responsive.
There are different types of micro charts currently available:
A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional requirements. Much like the traditional thermometer charts and progress bars found in many dashboards, the bullet chart serves as a replacement for dashboard gauges and meters.
The bullet chart features a single, primary measure (for example, current year-to-date revenue). It compares that measure to one or more other measures to enrich its meaning (for example, compared to a target), and displays it in the context of qualitative ranges of performance, such as poor, satisfactory, and good.
The actual value is shown as a horizontal bar, the target value as a vertical line (marker), and the thresholds as indicators below the bar. The actual value and target value can have a label.
Only semantic colors (good, critical, bad, neutral) can be used for the actual value.
The forecast is shown as a bar with a lighter tint of the same color as the actual value in the background.
Based on the data points you want to show, choose one of the following visualizations:
A column chart (also known as a bar chart) uses rectangular bars to compare categories. One axis of the chart shows the specific categories being compared, the other axis represents a value.
Note: The current version does not show axis or data point labels.
Only semantic colors (good, critical, bad, neutral) can be used.
A trend chart is a line and area chart that provides the same information as a bullet chart, with one exception: A bullet chart shows an additional forecast value, but a trend chart provides information for a specific range of time.
The actual value is shown as a solid line, the target value as a dotted line, and the thresholds as colored areas in the background.
You can show labels for the start value, the end value, the minimum value, the maximum value, and the beginning and end of the time range.
The comparison chart is a bar chart. It compares entries in a top N list. You can choose between two different layouts depending on the available space/parent container. You can use the semantic color palette as well as the chart palette.
The delta chart helps to visualize a delta value between two main key figures. The delta can be a positive or negative value. Configured thresholds define the semantic coloring of the delta bar. The left-aligned labels can be omitted, whereas the right-aligned labels with the values are always shown.
A harvey ball chart should be used to visualize a value compared to its total. This is not a pie chart with multiple values or sections, but rather just one value from a total. If the thresholds are configured, the semantic color of the value shows a positive, critical, or negative value. Regular chart colors without semantic meaning can also be used.
The charts include one behavior or interaction: a click event that can be switched on or off.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).
Several chart types are available: bullet chart, trend chart, column chart, and comparison chart.
All micro charts are fully responsive.
There are different types of micro charts currently available:
A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional requirements. Much like the traditional thermometer charts and progress bars found in many dashboards, the bullet chart serves as a replacement for dashboard gauges and meters.
The bullet chart features a single, primary measure (for example, current year-to-date revenue). It compares that measure to one or more other measures to enrich its meaning (for example, compared to a target), and displays it in the context of qualitative ranges of performance, such as poor, satisfactory, and good.
The actual value is shown as a horizontal bar, the target value as a vertical line (marker), and the thresholds as indicators below the bar. The actual value and target value can have a label.
Only semantic colors (good, critical, bad, neutral) can be used for the actual value.
The forecast is shown as a bar with a lighter tint of the same color as the actual value in the background.
Based on the data points you want to show, choose one of the following visualizations:
A column chart (also known as a bar chart) uses rectangular bars to compare categories. One axis of the chart shows the specific categories being compared, the other axis represents a value.
Note: The current version does not show axis or data point labels.
Only semantic colors (good, critical, bad, neutral) can be used.
A trend chart is a line and area chart that provides the same information as a bullet chart, with one exception: A bullet chart shows an additional forecast value, but a trend chart provides information for a specific range of time.
The actual value is shown as a solid line, the target value as a dotted line, and the thresholds as colored areas in the background.
You can show labels for the start value, the end value, the minimum value, the maximum value, and the beginning and end of the time range.
The comparison chart is a bar chart. It compares entries in a top N list. You can choose between two different layouts depending on the available space/parent container. And you can use the semantic color palette as well as the chart palette.
The delta chart helps to visualize a delta value between two main key figures. The delta can be a positive or negative value. Configured thresholds define the semantic coloring of the delta bar. The left-aligned labels can be omitted, whereas the right-aligned labels with the values are always shown.
The charts include one behavior or interaction: a click event that can be switched on or off.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).
Several chart types are available: bullet chart, trend chart, column chart, comparison chart, and harvey ball chart.
All micro charts are fully responsive.
There are different types of micro charts currently available:
A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional requirements. Much like the traditional thermometer charts and progress bars found in many dashboards, the bullet chart serves as a replacement for dashboard gauges and meters.
The bullet chart features a single, primary measure (for example, current year-to-date revenue). It compares that measure to one or more other measures to enrich its meaning (for example, compared to a target), and displays it in the context of qualitative ranges of performance, such as poor, satisfactory, and good.
The actual value is shown as a horizontal bar, the target value as a vertical line (marker), and the thresholds as indicators below the bar. The actual value and target value can have a label.
Only semantic colors (good, critical, bad, neutral) can be used for the actual value.
The forecast is shown as a bar with a lighter tint of the same color as the actual value in the background.
Based on the data points you want to show, choose one of the following visualizations:
A column chart (also known as a bar chart) uses rectangular bars to compare categories. One axis of the chart shows the specific categories being compared, the other axis represents a value.
Note: The current version does not show axis or data point labels.
Only semantic colors (good, critical, bad, neutral) can be used.
A trend chart is a line and area chart that provides the same information as a bullet chart, with one exception: A bullet chart shows an additional forecast value, but a trend chart provides information for a specific range of time.
The actual value is shown as a solid line, the target value as a dotted line, and the thresholds as colored areas in the background.
You can show labels for the start value, the end value, the minimum value, the maximum value, and the beginning and end of the time range.
The comparison chart is a bar chart. It compares entries in a top N list. You can choose between two different layouts depending on the available space/parent container. And you can use the semantic color palette as well as the chart palette.
The delta chart helps to visualize a delta value between two main key figures. The delta can be a positive or negative value. Configured thresholds define the semantic coloring of the delta bar. The left-aligned labels can be omitted, whereas the right-aligned labels with the values are always shown.
The charts include one behavior or interaction: a click event that can be switched on or off.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The timeline control shows entries (such as objects, events, or posts) in chronological order.
A common use case is to provide information about changes to an object, or events related to an object. These entries can be generated by the system (for example, value XY changed from A to B), or added manually. The latest entry is always on top.
There are two distinct variants of the timeline: basic and social. The basic timeline is read-only, while the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.
The timeline does not have a fixed location on the UI. Where you place it strongly depends on your use case.
For example:
These are just some of the ways you can position the timeline on a page.
The responsive behavior of the timeline control is currently limited. While it works well on small screens or in narrow containers, we have not yet implemented versions for larger views.
The timeline control consists of:
The following features can be used optionally:
The title describes the content displayed along the timeline axis.
Along the axis, the entries are arranged chronologically. The distance does not correspond to the time between each occurrence.
You can use a vertical or horizontal axis. The timeline can be scrolled along its axis.
By default, the latest entries appear on top. Replies are sorted the other way round.
Posts can be generated by the system (for example, “Object ABC changed by Mr. X”), or entered manually. The entry includes information about who changed what, and when. Typically, posts in the timeline consist of four sections:
Note: If a section is not used, it should not take up any space within the bubble.
Examples for different visualizations:
Examples for different visualizations:
Example:
Julie Armstrong: Hey @John Miller. Can you give me an update?
Examples:
Julie Armstrong created a poll.
(Followed by a preview of the poll)
John Miller posted the document Sales-Revenue_Q4.xls
(Followed by a preview of the document, if available)
Donna Moore wrote a blog post
(Followed by a preview of the blog post)
Julie Armstrong added the picture our_team.jpg
(Followed by a preview of the image)
Examples:
Boiler BB-258/80 has exceeded its maximum temperature.
Server DS209 is running out of space.
Order #052690 is overdue.
Notes are not the same as timeline posts. They must be kept separate and be visualized differently. Like attachments, users create notes in the context of a business object, typically within a Notes tab.
In the context of a business object, notes have to be seen in the same category as attachments.
The difference is even more apparent if you compare posts to complex notes created with a rich text editor. These notes are fundamentally different from timeline posts.
To show notes on the timeline, trigger a feed post with a teaser text. For example, “Julie Armstrong added a new note: Lorem ipsum…”.
Two types of timeline are available:
The basic timeline is read-only. There are no user posts, replies, likes, shares, social profile, or other social features. Only system-triggered posts appear on the timeline. User actions within the app (such as creating notes and attachments, or making calls) are reflected in the timeline automatically.
The image below shows a post in the basic timeline. The image on the right shows an example of a basic timeline.
With SAP Jam, all social features are enabled. Users can post updates, reply, like, and share. Both user-triggered and system-triggered posts appear on the timeline.
The image below shows a post in the social timeline. The image on the right-hand side shows an example of a social timeline.
In the social timeline, users can add new posts by clicking the plus ( ) icon on top of the control.
Clicking the plus ( ) icon opens a popover with the focus set inside the text area so the user can immediately start typing.
Post sends the user’s text, which then appears in the timeline. However, the button stays inactive until the user has typed something to prevent empty posts.
Users can also add @mentions (references) to other users or business objects. Read further details below in the @Mention section.
Next to the Post functionality, Reply is probably the most basic and most essential social feature. It enables communication at item level, which is the main way in which it differs from the feed controls. With feed controls (FeedInput and FeedListItem), new entries are always added to the top of the list; there are no in-line replies in the feed. The timeline, however, allows users to reply directly to a specific entry. The number of replies is shown in the reply link, such as Replies (5).
The user clicks or taps the respective link to trigger a popover that shows all previous replies, as well as a text area that allows the user to post a personal reply.
This feature is well known from multiple social networks. Like all social features, it is only available in the social timeline, where it allows users to add a reference to another person or a business object. A ‘mentioned’ person usually receives a notification about the respective post.
The @mention feature is available in all areas that allow the user to post something:
Due to technical restrictions, this feature cannot be used on smartphones for the time being.
Users trigger the feature by typing the @ sign, or by clicking or tapping the @ button provided in the footer. The button shows users who are not familiar with this feature how to use it.
The following step-by-step walk-through concentrates on the core functionality, and therefore omits the surrounding controls.
As soon as a user types the ‘@’ character, he or she is prompted to enter a person’s name or email address.
As the user continues to type, a suggestion list is shown.
This suggestion list is gradually reduced to only include items that match the user’s input. If the user clicks on the suggestion or finishes typing the name of an existing person, the @mention is created.
(Due to technical restrictions, @mentions cannot be visually highlighted to indicate a successful match currently. )
Always offer a search with the timeline because it may contain a vast number of entries. A search helps users to find what they are looking for without having to scroll through all the posts and updates.
Initially, the search field is closed and only visualized with a search icon.
Clicking on the icon opens…
… the search field with the focus in the field so the user can start to type immediately.
For timelines with several entry types, it makes sense to enable filtering. You can let users filter the timeline by entry type and by other useful attributes (such as bookmarked for bookmarked items).
The filter is triggered with the respective icon in the toolbar.
Depending on the complexity of the timeline, you can offer different kinds of filter dialog:
If a filter is set, inform the user in the info toolbar.
After a certain number of timeline entries, a Show More button can be displayed at the bottom of the list to load additional posts.
Depending on the use case and the performance, each app team must decide for itself how many entries should be shown before the Show More button appears.
When the user clicks or taps Show More, a predefined number of additional posts is loaded. The relative position of the timeline must not change, so the same posts are visible in the same screen position after the additional entries have been loaded.
App developers can introduce custom actions that can be performed on a timeline post. These actions should be kept to an absolute minimum since they will appear in the limited space next to the social actions (see point 4 in the Layout section above).
In the example opposite, the custom actions Edit (1) and Delete (2) have been added to the post.
In this next example, the custom action Download (3) enables the user to quickly download an attachment directly from the post.
Instead of showing new posts as soon as they arrive (which would disrupt the user’s reading), the timeline offers a very subtle way of notifying users about new posts.
App developers can place a message strip directly below the toolbar to show how many new posts can be retrieved from the backend.
The message strip works seamlessly together with the timeline’s filter.
There are various layout options. When you choose the layout, consider the type of content and the screen real estate available for displaying the control.
You can display both the vertical and horizontal timelines with or without icons.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The timeline control shows entries (such as objects, events, or posts) in chronological order.
A common use case is to provide information about changes to an object, or events related to an object. These entries can be generated by the system (for example, value XY changed from A to B), or added manually. The latest entry is always on top.
There are two distinct variants of the timeline: basic and social. The basic timeline is read-only, while the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.
The timeline does not have a fixed location on the UI. Where you place it strongly depends on your use case.
For example:
These are just some of the ways you can position the timeline on a page.
The responsive behavior of the timeline control is currently limited. While it works well on small screens or in narrow containers, we have not yet implemented versions for larger views.
The timeline control consists of:
The following features can be used optionally:
The title describes the content displayed along the timeline axis.
Along the axis, the entries are arranged chronologically. The distance does not correspond to the time between each occurrence.
You can use a vertical or horizontal axis. The timeline can be scrolled along its axis.
By default, the latest entries appear on top. Replies are sorted the other way round.
Posts can be generated by the system (for example, “Object ABC changed by Mr. X”), or entered manually. The entry includes information about who changed what, and when. Typically, posts in the timeline consist of four sections:
Note: If a section is not used, it should not take up any space within the bubble.
Examples for different visualizations:
Examples for different visualizations:
Example:
Julie Armstrong: Hey @John Miller. Can you give me an update?
Examples:
Julie Armstrong created a poll.
(Followed by a preview of the poll)
John Miller posted the document Sales-Revenue_Q4.xls
(Followed by a preview of the document, if available)
Donna Moore wrote a blog post
(Followed by a preview of the blog post)
Julie Armstrong added the picture our_team.jpg
(Followed by a preview of the image)
Examples:
Boiler BB-258/80 has exceeded its maximum temperature.
Server DS209 is running out of space.
Order #052690 is overdue.
Notes are not the same as timeline posts. They must be kept separate and be visualized differently. Like attachments, users create notes in the context of a business object, typically within a Notes tab.
In the context of a business object, notes have to be seen in the same category as attachments.
The difference is even more apparent if you compare posts to complex notes created with a rich text editor. These notes are fundamentally different from timeline posts.
To show notes on the timeline, trigger a feed post with a teaser text. For example, “Julie Armstrong added a new note: Lorem ipsum…”.
Two types of timeline are available:
The basic timeline is read-only. There are no user posts, replies, likes, shares, social profile, or other social features. Only system-triggered posts appear on the timeline. User actions within the app (such as creating notes and attachments, or making calls) are reflected in the timeline automatically.
The image below shows a post in the basic timeline. The image on the right shows an example of a basic timeline.
With SAP Jam, all social features are enabled. Users can post updates, reply, like, and share. Both user-triggered and system-triggered posts appear on the timeline.
The image below shows a post in the social timeline. The image on the right-hand side shows an example of a social timeline.
In the social timeline, users can add new posts by clicking the plus ( ) icon on top of the control.
Clicking the plus ( ) icon opens a popover with the focus set inside the text area so the user can immediately start typing.
Post sends the user’s text, which then appears in the timeline. However, the button stays inactive until the user has typed something to prevent empty posts.
Users can also add @mentions (references) to other users or business objects. Read further details below in the @Mention section.
Next to the Post functionality, Reply is probably the most basic and most essential social feature. It enables communication at item level, which is the main way in which it differs from the feed controls. With feed controls (FeedInput and FeedListItem), new entries are always added to the top of the list; there are no in-line replies in the feed. The timeline, however, allows users to reply directly to a specific entry. The number of replies is shown in the reply link, such as Replies (5).
The user clicks or taps the respective link to trigger a popover that shows all previous replies, as well as a text area that allows the user to post a personal reply.
This feature is well known from multiple social networks. Like all social features, it is only available in the social timeline, where it allows users to add a reference to another person or a business object. A ‘mentioned’ person usually receives a notification about the respective post.
The @mention feature is available in all areas that allow the user to post something:
Due to technical restrictions, this feature cannot be used on smartphones for the time being.
Users trigger the feature by typing the @ sign, or by clicking or tapping the @ button provided in the footer. The button shows users who are not familiar with this feature how to use it.
The following step-by-step walk-through concentrates on the core functionality, and therefore omits the surrounding controls.
As soon as a user types the ‘@’ character, he or she is prompted to enter a person’s name or email address.
As the user continues to type, a suggestion list is shown.
This suggestion list is gradually reduced to only include items that match the user’s input. If the user clicks on the suggestion or finishes typing the name of an existing person, the @mention is created.
(Due to technical restrictions, @mentions cannot be visually highlighted to indicate a successful match currently. )
Always offer a search with the timeline because it may contain a vast number of entries. A search helps users to find what they are looking for without having to scroll through all the posts and updates.
Initially, the search field is closed and only visualized with a search icon.
Clicking on the icon opens…
… the search field with the focus in the field so the user can start to type immediately.
For timelines with several entry types, it makes sense to enable filtering. You can let users filter the timeline by entry type and by other useful attributes (such as bookmarked for bookmarked items).
The filter is triggered with the respective icon in the toolbar.
Depending on the complexity of the timeline, you can offer different kinds of filter dialog:
If a filter is set, inform the user in the info bar.
After a certain number of timeline entries, a Show More button can be displayed at the bottom of the list to load additional posts.
Depending on the use case and the performance, each app team must decide for itself how many entries should be shown before the Show More button appears.
When the user clicks or taps Show More, a predefined number of additional posts is loaded. The relative position of the timeline must not change, so the same posts are visible in the same screen position after the additional entries have been loaded.
App developers can introduce custom actions that can be performed on a timeline post. These actions should be kept to an absolute minimum since they will appear in the limited space next to the social actions (see point 4 in the Layout section above).
In the example opposite, the custom actions Edit (1) and Delete (2) have been added to the post.
In this next example, the custom action Download (3) enables the user to quickly download an attachment directly from the post.
Instead of showing new posts as soon as they arrive (which would disrupt the user’s reading), the timeline offers a very subtle way of notifying users about new posts.
App developers can place a message strip directly below the toolbar to show how many new posts can be retrieved from the backend.
The message strip works seamlessly together with the timeline’s filter.
There are various layout options. When you choose the layout, consider the type of content and the screen real estate available for displaying the control.
You can display both the vertical and horizontal timelines with or without icons.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The timeline control shows entries (such as objects, events, or posts) in chronological order.
A common use case is to provide information about changes to an object, or events related to an object. These entries can be generated by the system (for example, value XY changed from A to B), or added manually. The latest entry is always on top.
There are two distinct variants of the timeline: basic and social. The basic timeline is read-only, while the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.
The timeline does not have a fixed location on the UI. Where you place it strongly depends on your use case.
For example:
These are just some of the ways you can position the timeline on a page.
With SAPUI5 version 1.42, the timeline control is fully responsive and works well with multiple screen sizes.
The timeline control consists of:
The following features can be used optionally:
The title describes the content displayed along the timeline axis.
Along the axis, the entries are arranged chronologically. The distance does not correspond to the time between each occurrence.
You can use a vertical or horizontal axis. The timeline can be scrolled along its axis.
By default, the latest entries appear on top. Replies are sorted the other way round.
Posts can be generated by the system (for example, “Object ABC changed by Mr. X”), or entered manually. The entry includes information about who changed what, and when. Typically, posts in the timeline consist of four sections:
Note: If a section is not used, it should not take up any space within the bubble.
Examples for different visualizations:
Examples for different visualizations:
Example:
Julie Armstrong: Hey @John Miller. Can you give me an update?
Examples:
Julie Armstrong created a poll.
(Followed by a preview of the poll)
John Miller posted the document Sales-Revenue_Q4.xls
(Followed by a preview of the document, if available)
Donna Moore wrote a blog post
(Followed by a preview of the blog post)
Julie Armstrong added the picture our_team.jpg
(Followed by a preview of the image)
Examples:
Boiler BB-258/80 has exceeded its maximum temperature.
Server DS209 is running out of space.
Order #052690 is overdue.
Notes are not the same as timeline posts. They must be kept separate and be visualized differently. Like attachments, users create notes in the context of a business object, typically within a Notes tab.
In the context of a business object, notes have to be seen in the same category as attachments.
The difference is even more apparent if you compare posts to complex notes created with a rich text editor. These notes are fundamentally different from timeline posts.
To show notes on the timeline, trigger a feed post with a teaser text. For example, “Julie Armstrong added a new note: Lorem ipsum…”.
Two types of timeline are available:
The basic timeline is read-only. There are no user posts, replies, likes, shares, social profile, or other social features. Only system-triggered posts appear on the timeline. User actions within the app (such as creating notes and attachments, or making calls) are reflected in the timeline automatically.
The image below shows a post in the basic timeline. The image on the right shows an example of a basic timeline.
With SAP Jam, all social features are enabled. Users can post updates, reply, like, and share. Both user-triggered and system-triggered posts appear on the timeline.
The image below shows a post in the social timeline. The image on the right-hand side shows an example of a social timeline.
In the social timeline, users can add new posts by clicking the plus ( ) icon on top of the control.
Clicking the plus ( ) icon opens a popover with the focus set inside the text area so the user can immediately start typing.
Post sends the user’s text, which then appears in the timeline. However, the button stays inactive until the user has typed something to prevent empty posts.
Users can also add @mentions (references) to other users or business objects. Read further details below in the @Mention section.
Next to the Post functionality, Reply is probably the most basic and most essential social feature. It enables communication at item level, which is the main way in which it differs from the feed controls. With feed controls (FeedInput and FeedListItem), new entries are always added to the top of the list; there are no in-line replies in the feed. The timeline, however, allows users to reply directly to a specific entry. The number of replies is shown in the reply link, such as Replies (5).
The user clicks or taps the respective link to trigger a popover that shows all previous replies, as well as a text area that allows the user to post a personal reply.
This feature is well known from multiple social networks. Like all social features, it is only available in the social timeline, where it allows users to add a reference to another person or a business object. A ‘mentioned’ person usually receives a notification about the respective post.
The @mention feature is available in all areas that allow the user to post something:
Due to technical restrictions, this feature cannot be used on smartphones for the time being.
Users trigger the feature by typing the @ sign, or by clicking or tapping the @ button provided in the footer. The button shows users who are not familiar with this feature how to use it.
The following step-by-step walk-through concentrates on the core functionality, and therefore omits the surrounding controls.
As soon as a user types the ‘@’ character, he or she is prompted to enter a person’s name or email address.
As the user continues to type, a suggestion list is shown.
This suggestion list is gradually reduced to only include items that match the user’s input. If the user clicks on the suggestion or finishes typing the name of an existing person, the @mention is created.
(Due to technical restrictions, @mentions cannot be visually highlighted to indicate a successful match currently. )
Always offer a search with the timeline because it may contain a vast number of entries. A search helps users to find what they are looking for without having to scroll through all the posts and updates.
Initially, the search field is closed and only visualized with a search icon.
Clicking on the icon opens…
… the search field with the focus in the field so the user can start to type immediately.
For timelines with several entry types, it makes sense to enable filtering. You can let users filter the timeline by entry type and by other useful attributes (such as bookmarked for bookmarked items).
The filter is triggered with the respective icon in the toolbar.
Depending on the complexity of the timeline, you can offer different kinds of filter dialog:
If a filter is set, inform the user in the info bar.
After a certain number of timeline entries, a Show More button can be displayed at the bottom of the list to load additional posts.
Depending on the use case and the performance, each app team must decide for itself how many entries should be shown before the Show More button appears.
When the user clicks or taps Show More, a predefined number of additional posts is loaded. The relative position of the timeline must not change, so the same posts are visible in the same screen position after the additional entries have been loaded.
The timeline allows applications to group posts by certain criteria, such as by year. Groups can be expanded and collapsed in order to get a better overview.
The following example shows a collapsed group (Posts from 2016) and an expanded group (Posts from 2015).
App developers can introduce custom actions that can be performed on a timeline post. These actions should be kept to an absolute minimum since they will appear in the limited space next to the social actions (see point 4 in the Layout section above).
In the example opposite, the custom actions Edit (1) and Delete (2) have been added to the post.
In this next example, the custom action Download (3) enables the user to quickly download an attachment directly from the post.
Instead of showing new posts as soon as they arrive (which would disrupt the user’s reading), the timeline offers a very subtle way of notifying users about new posts.
App developers can place a message strip directly below the toolbar to show how many new posts can be retrieved from the backend.
The message strip works seamlessly together with the timeline’s filter.
There are various layout options. When you choose the layout, consider the type of content and the screen real estate available for displaying the control.
You can display both the vertical and horizontal timelines with or without icons.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
The timeline control shows entries (such as objects, events, or posts) in chronological order.
A common use case is to provide information about changes to an object, or events related to an object. These entries can be generated by the system (for example, value XY changed from A to B), or added manually. The latest entry is always on top.
There are two distinct variants of the timeline: basic and social. The basic timeline is read-only, while the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.
The responsive behavior of the timeline control is currently limited. While it works well on small screens or in narrow containers, we have not yet implemented versions for larger views.
The timeline control consists of:
The following features can be used optionally:
The title describes the content displayed along the timeline axis.
Along the axis, the entries are arranged chronologically. The distance does not correspond to the time between each occurrence.
You can use a vertical or horizontal axis. The timeline can be scrolled along its axis.
By default, the latest entries appear on top. Replies are sorted the other way round.
Posts can be generated by the system (for example, “Object ABC changed by Mr. X”), or entered manually. The entry includes information about who changed what, and when. Typically, posts in the timeline consist of four sections:
Note: If a section is not used, it should not take up any space within the bubble.
Examples for different visualizations:
Examples for different visualizations:
Example:
Julie Armstrong: Hey @John Miller. Can you give me an update?
Examples:
Julie Armstrong created a poll.
(Followed by a preview of the poll)
John Miller posted the document Sales-Revenue_Q4.xls
(Followed by a preview of the document, if available)
Donna Moore wrote a blog post
(Followed by a preview of the blog post)
Julie Armstrong added the picture our_team.jpg
(Followed by a preview of the image)
Examples:
Boiler BB-258/80 has exceeded its maximum temperature.
Server DS209 is running out of space.
Order #052690 is overdue.
Notes are not the same as timeline posts. They must be kept separate and be visualized differently. Like attachments, users create notes in the context of a business object, typically within a Notes tab.
In the context of a business object, notes have to be seen in the same category as attachments.
The difference is even more apparent if you compare posts to complex notes created with a rich text editor. These notes are fundamentally different from timeline posts.
To show notes on the timeline, trigger a feed post with a teaser text. For example, “Julie Armstrong added a new note: Lorem ipsum…”.
Two types of timeline are available:
The basic timeline is read-only. There are no user posts, replies, likes, shares, social profile, or other social features. Only system-triggered posts appear on the timeline. User actions within the app (such as creating notes and attachments, or making calls) are reflected in the timeline automatically.
The image below shows a post in the basic timeline. The image on the right shows an example of a basic timeline.
With SAP Jam, all social features are enabled. Users can post updates, reply, like, and share. Both user-triggered and system-triggered posts appear on the timeline.
The image below shows a post in the social timeline. The image on the right shows an example of a social timeline.
In the social timeline, users can add new posts by clicking the plus ( ) icon on top of the control.
Clicking the plus ( ) icon opens a popover with the focus set inside the text area so the user can immediately start typing.
Post sends the user’s text, which then appears in the timeline. However, the button stays inactive until the user has typed something to prevent empty posts.
Always offer a search with the timeline because it may contain a vast number of entries. A search helps users to find what they are looking for without having to scroll through all the posts and updates.
Initially, the search field is closed and only visualized with a search icon.
To use the search, the user clicks or taps the icon.
This opens the search field, with the focus in the field, so the user can start to type immediately.
For timelines with several entry types, it makes sense to enable filtering. You can let users filter the timeline by entry type and by other useful attributes (such as bookmarked for bookmarked items).
To set the filter, the user clicks or taps the Filter icon in the toolbar.
Depending on the complexity of the timeline, you can offer different kinds of filter dialog:
If a filter is set, inform the user in the info toolbar.
There are various layout options. When you choose the layout, consider the type of content and the screen real estate available for displaying the control.
You can display both the vertical and horizontal timelines with or without icons.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Processing your feedback
Your feedback has been sent to the SAP Fiori design team. Thank you for your helping us to improve our guidelines!
