You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the corresponding object marker appears next to it:

• A small flag indicates that the object is flagged.
• A small star indicates that the object is marked as a favorite.

Usage

• Offer the Flag option if users need to flag objects for later reference and follow-up.
• Offer the Favorite option if users need to mark frequently-used objects.

Responsiveness

The Flag and Favorite markers are normally displayed as icons (rather than text) on all screen sizes. If you implement the overflow toolbar, you can specify how the Flag and Favorite actions are handled when there is a shortage of space on the toolbar (move to overflow menu as necessary, always show on toolbar, always show in the overflow menu). For more information, see the toolbar overview.

Layout

The position of the flag or favorite marker depends on the UI control or floorplan. The button for making the setting appears in the relevant toolbar.

Object Header (Object Page)

In the object header, the markers appear right next to object title. The icon button for setting the status appears in the header toolbar.

Object List item

In an object list item, the marker appears in the first status line.

Tables

In tables and  list reports, the marker for a line item shows right beside the checkbox. To make the settings, users need to drill down into the object itself.

Custom List Item

In custom lists, the position of the Flag or Favorite icon depends on whether it is read-only or interactive:

• If the Flag or Favorite marker is read-only, place it after the text.
• If the Flag or Favorite marker is interactive, place it before the text.

Behavior and Interaction

Users switch the setting on or off by clicking the Flag or Favorite button (icon), which behaves as a toggle.

Resources

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

Intro

A worklist displays a collection of items a user needs to process. Working through the list usually involves reviewing details of the items and taking action. In most cases, the user has to either complete a work item or delegate it.

The worklist is a versatile floorplan that offers three main variants: a simple worklist (plain page with a table), a worklist with tabs, and a worklist with one or more KPI tags. These variants are based on different user needs and use cases. For more details, see the options under Components.

When to Use

Use the worklist floorplan if:

• Users have numerous work items and need to decide which ones to process first.
• You want to give users a direct entry point for taking action on work items.
• Users need to work with multiple views of the same content (for example, items that are “Open”, “In Process”, or “Completed”). You want to offer tabs for switching between views.

Do not use the worklist floorplan if:

• The items you are showing are not work items.
• You want to show large item lists, or combine different data visualizations (charts or tables). In this case, use the list report floorplan instead.
• Users need to find and act on relevant items from within a large set of items by searching, filtering, sorting, and grouping. Use the list report floorplan instead.

Components

Header Title

Content Area

Footer Toolbar

The footer toolbar is an optional component of the worklist floorplan. Only use it if finalizing actions for the whole page and/or the message popover are required. Keep in mind that the footer toolbar is only visible in edit mode. For more information, see the guidelines for the footer toolbar.

Responsiveness

Examples

Top Tips

General

• Decide whether the worklist or the list report is the right floorplan for your needs: The focus of the worklist floorplan is on processing items. This differs from the list report floorplan, which focuses on finding and acting on relevant items from a large dataset.
• Choose one of the three basic worklist variants, based on your use case and the user’s needs.

Header

• Always display a title or offer variant management.

Content

• Responsive table is the only fully responsive table. Analytical table, tree table and grid table are not fully responsive. They are available only for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.
• In the table toolbar, display at least a table title (ideally with an item count). If needed, offer icon-only buttons for sorting, grouping, and column settings.
• The tab bar, table toolbar, and column headers of all table types must all be sticky.

Footer Toolbar

• If you are using the icon tab bar, remember that there is only one footer toolbar for all tabs.
• Only use the footer toolbar if finalizing actions for the whole page and/or the message popover are available.

Related Links

Images are a powerful way to capture the user’s attention and to communicate your message. You can use the image control to integrate images into your apps for dedicated purposes.

When to Use

Use the image control if:

• You want to display decorative images. Decorative images serve as a visual eyecatcher and are useful to transport the brand identity. Usually, decorative images are used as hero images, headers, or background images.
• You want to display images to support or enhance the page content (for example, visual representations of an object’s design, functions, or features).
• You want to display images in a gallery.

Do not use the image control if:

• You want to display an image, initials, or a placeholder for a person. Use the avatar instead.
• You want to display standardized images for business-related content (such as products, parts, product and company logos, or ad campaign images). Use the avatar instead.
• You want to display icons. Use the avatar instead.
• You want to display images with a transparent background. Use the avatar instead.
• You want to display a placeholder image. Use the avatar instead.
• You want to display pictures in a carousel. Use the carousel control instead.

Behavior and Interaction

Responsiveness

Examples

Related Links

You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.

When to Use

Use the busy state of the control if:

• The operation takes more than one second (busy state set at control level)
• You want to indicate that data is loading on a table or on a list after performing a search or filtering (set the busy state at table or list level).

Do not use the busy state if:

• The operation lasts less than one second.
• You expect several busy states at once. In this case, consider setting the busy state at a higher level or container.
• You’re loading an app from the launchpad or navigating from an app to another. Use placeholder loading instead (when available in your framework).

Examples

Guidelines

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.

Resources

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.

Usage

Use the busy dialog if:

• The user should not be able to start any other activity during an operation, and the screen needs to be blocked while the operation is ongoing.
• The operation lasts more than one second.
• You want to indicate loading in a page-to-page navigation.

Do not use the busy dialog if:

• The operation lasts less than one second.
• The screen is not supposed to be blocked. In this case, use the busy indicator or busy state of the control instead.

Responsiveness

Components

Guidelines

Lightweight Version (No Title, Text, or Cancel Button)

• Use the lightweight version for page navigation (see live example).

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

Busy Dialog with Text

• Do not use the title of the busy dialog.
• If a busy dialog is triggered directly by the user, provide a precise text describing the operation. The text can be as short as one verb:
  • Loading…
  • Refreshing…
  • Sending…

• If the busy dialog is not directly initiated by the end user, use at least one sentence to describe the operation. Start either the first or the last sentence with Please wait. For example: The system is busy searching data. Please wait until data is loaded.

• Recommendation: Do not use the invisible text control when you show text in the busy dialog.

Busy Dialog with Text and Cancel Button

• Offer Cancel if you expect the process to run more than 10 seconds. In addition, always display text that precisely describes the ongoing operation.
• Do not change the mouse cursor to indicate the ongoing operation.
• Recommendation: Do not use the invisible text control when you show text in the busy dialog.

Timing and Duration

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.

Resources

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.

Usage

Use the panel if:

• You need to group or display information.
• You want to give users the option of hiding this information.
• You want to show additional information on demand (for example, a panel could show optional input fields for an advanced search).

Do not use the panel if:

• You are designing an object page. Never use panels in the object page content area.

Responsiveness

If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.

Layout

• The panel control is a container for controls.
• The panel can have a solid or semi-transparent background.
• The panel always includes a header.
• An infobar can be added to the panel to show extra information.

Examples

Types

There are two types of panels: fixed and expandable.

Fixed Panel

Expandable Panel

Components

Behavior and Interaction

Overflow Scrolling (Content Area)

• By setting the height to use the default property “auto”, the height of the content area will automatically be adjusted to match the height of its content.
• When the height of the panel is set to a fixed size, the content area can be scrolled through.

Guidelines

• Nesting two or more panels is not recommended.
• Do not stack too many panels on one page.

Exceptions

If you add a header toolbar (sap.m.Toolbar) via aggregations, it will overwrite the “headerText” property.

Resources

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.

Usage

Use the busy indicator if:

The ongoing operation covers only part of a screen that has multiple controls, and:

• You need to display additional information, or,
• The user needs to be able to cancel the operation.

Do not use the busy indicator if:

• The operation takes less than one second.
• You need to block the screen because the user is not supposed to start another activity. In this case, use the busy dialog.

Components

Guidelines

• Do not change the mouse cursor to indicate the ongoing operation.
• Do not use a custom progress indicator icon.
• Try to avoid showing multiple busy indicators at once.

Properties

Resources

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.

Usage

Responsiveness

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.

Components

Date Range Input Field

Date Range Picker

Behavior and Interaction

Selecting a Date Range

Switch View

Selecting a Range

Entering Single Dates

The date range selection also allows the users to input single dates. They can type one date into the input field, or select the same day as a start and end date in the calendar.

“Today” Button

Styles

Delimiter

The delimiter visualizes the start and end date. If no delimiter is given, the app uses the one defined for the used locale.

Placeholder

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.

Validation

Use inline validation to give the user feedback, especially for errors and warnings. Possible validation states are warning, error, success, and information. 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.

For more information on how to use the different semantic states, see How to Use Semantic Colors.

Guidelines

Display Format

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.

Input Types

The following input types are available. (Note: these examples show German date formats for January 14, 2014.)

• Unicode CLDR short format: 14.01.14
• Unicode CLDR medium format: 14.01.2014
• ISO date format: 2014-01-14
• ISO date format without delimiters: 20140114
• Unicode CLDR short format without delimiters: 140114
• Unicode CLDR medium format: 14012014

Date Formats

Long Date Format

Use the long date format for a list in a list-detail layout / object list item / title and object header / title. Here are some examples:

• English (US): January 16, 2022
• German (DE): 16. Januar 2022
• Danish (DK): 16. Jan. 2022

Short Date Format

Use the short date format for a list in a list-detail layout / 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:

• English (US): 1/16/22
• German (DE): 16.01.22
• Japanese (JP): 22/01/16

Relative and Medium Date Format

If appropriate, use a relative format for a list in a list-detail layout / 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.

Responsive Table

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:

• English (US): Sunday, January 16, 2022
• German (DE): Sonntag, 16. Januar 2022
• French (FR): dimanche 16 janvier 2022

Resources

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.

Usage

Use the message box if:

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

Do not use the message box if:

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

Responsiveness

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

Types

The following categories of messages are available:

• Error
• Warning
• Success
• Information
• Confirmation

Error Message

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

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

Text guidelines for an error message:

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

Warning Message

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

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

Use cases for warnings

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

Button(s): OK, Cancel

c) Specific decision required, with one action

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

Success Message

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

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

Information Message

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

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

Button(s): OK

Confirmation Message

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

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

Button(s): Approve, Cancel

Confirmation Message with “Note” Section

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

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

Button(s): Approve, Cancel

Confirmation for “Delete”

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

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

Button(s): Delete, Cancel

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

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

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

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

Deleting several objects

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

Components

Show Details button

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

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

• Plain
• Formatted
• The original code format

Resources

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 several lines of text.

Usage

Use the text area if you want users to enter multiple lines of text. If you only want them to enter a single line of text, use the input field instead.

Responsiveness

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.

Components

Behavior and Interaction

Entering and Removing Text

Making Text Non-Editable

Disabling Text

Growing Behavior

Styles

Guidelines

• As with other input fields, use a label. For exceptions regarding label usage, see the Exceptions section of the Label article.
• The placeholder does not substitute a label. It can be used to give an additional hint, but should not repeat the label in long format.
• If you want to use the text area with a fixed text length (property: maxLength), for example, inside a form, use text beside the text area to count down the number of remaining characters while the user is typing.
• If you are applying the growing behavior of the text area, bear in mind that its maximum height should not exceed the height of the screen.
• As a display mode equivalent, consider using an expandable text.

Saving Forms with a Text Area Counter

If a text exceeds the limit for the text area, there are two options for saving the form:

• The form can be saved, but only contains the text within the character limit. If you follow this approach, inform the user that only part of the text will be saved. In this case, we strongly recommend setting the text area state to “warning” to indicate that there is a problem with the text.
• The form cannot be saved until the user edits the text and the character count is within the limit. In this case, we strongly recommend setting the text area state to “error”.

Properties

• You can provide a width by specifying the average character width (property: cols).
• You can define the height of the text area by specifying the number of lines of text (property: rows). You can also set the height of the text area (property: height), which overrides the rows property.
• You can define the type of wrapping for the text area (property: wrapping) as soft, hard, or off.
• sap.m.TextArea has a growing property that enables the height of the text area to change dynamically while the user is typing.
• sap.m.TextArea can show a count for the number of permitted characters, and allow users to type/paste text over the limit (property: showExceededText). This property determines whether characters that exceed the character limit are visible.
  • If this property is set to false, the user is not allowed to exceed the number of characters set in the maxLength property.
  • If this property is set to true, characters exceeding the maxLength value are selected on paste, and the counter below the input field displays the number of characters that are over the limit.
• To provide additional information for assistive technologies like screen readers, use ariaDescribedBy and ariaLabelledBy.

Resources

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:

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

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

Usage

Use the icon tab bar if:

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

Do not use the icon tab bar if:

• You plan to use only one single tab.

Responsiveness

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

Layout

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

Types

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

• Text only
• Icon tabs
• Tabs as filters
• Tabs as process steps

Text Only

Counters and Text Tabs

Icon Tabs

Tabs as Filters

Tabs as Process Steps

Hierarchies

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

Behavior and Interaction

Clicking a Tab

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

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

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

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

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

Changing the Order of Tabs

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

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

Styles

Tab Density

Colors

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

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

Example

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

Badge

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

Badge in Default or Semantic State

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

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

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

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

Badge Interaction

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

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

Overflow Menu

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

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

Guidelines

Apply the styles as follows:

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

If you use icon tabs, ensure the following:

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

Implement the focus as follows:

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

Additional guidelines:

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

Resources

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

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.

Usage

Responsiveness

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.

Clicking the date picker button opens the popover in full screen. To close it, the user can select a date (which triggers the close event), or click Cancel without selecting a date. Clicking the date input field allows the user to type and does not open the date picker popover.

Components

Date Input Field

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.

It is possible to add additional descriptive texts to the input field (a unit of measurement, for example) by using a new association in the sap.m.InputBase control called ariaDescribedBy. The association is responsible for referencing the elements that describe the control.

Date Picker

With the date picker, the user can see a day view, month view, year view, or year ranges.

The current day (1) and the selected date (2) 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 navigate to the previous and the next day (3), month (4), or year view (5), depending on the current view. To select a date the use can use the calendar (6).

The selected date is shown with a blue background. The current day is indicated with a purple border and owns the focus.

The date picker can also show special days, which are highlighted with a colored line at the bottom of the date cell. For more information about the colors and legend, see Legend for Highlighted Days.

Behavior and Interaction

Selecting a Date

“Today” Button

Styles

Guidelines

Date Formats

Long Date Format

Use the long date format for a list in a list-detail layout / object list item / title and object header / title. Here are some examples:

• English (US): January 16, 2022
• German (DE): 16. Januar 2022
• Danish (DK): 16. Jan. 2022

Short Date Format

Use the short date format for a list in a list-detail layout / 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:

• English (US): 1/16/22
• German (DE): 16.01.22
• Japanese (JP): 22/01/16

Relative and Medium Date Format

If appropriate, use a relative format for a list in a list-detail layout / 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.

Responsive Table

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:

• English (US): Sunday, January 16, 2022
• German (DE): Sonntag, 16. Januar 2022
• French (FR): dimanche 16 janvier 2022

Resources

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.

Usage

Use the message toast if:

• You want to display a short success message.
• You do not want to interrupt users while they are performing an action.
• You want to confirm a successful action.

Do not use the message toast if:

• You want to display an error or warning message.
• You want to interrupt users while they are performing an action.
• You want to make sure that users read the message before they leave the page.
• You want users to be able to copy the message content to the clipboard (such as a product or transaction number). In this case, use a success message dialog instead.

Responsiveness

The message toast has the same behavior on all devices.

Layout

Position

The message toast is always centered horizontally at the bottom of the screen.

Width

The standard width of the toast is 15 rem, and text that exceeds this width will wrap.

Behavior and Interaction

Choreography

When an action is successful, the message toast fades in and out automatically. The timing and duration of the message toast is defined by the application team.

Users can also keep the message toast on screen with the following keyboard shortcuts:

• Ctrl + Shift + M (Windows)
• Cmd + Shift + M (Mac OS)

Navigation

In some scenarios, the action that triggers the message toast also triggers navigation to a different page (for example, after 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.

Exception: success message dialog

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.

Animation

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 message does not react to the user’s focus.

Guidelines

Message Toast Texts

To make the toast message easy to scan, keep the text as short as possible. Remember that the user will not have time to take in very much detail.

Do not use the word “successfully” in the message text. This is implicit in a success message.

Patterns

For standard actions (such as create, save, delete, or send), we recommend using the following patterns, depending on your use case.

Properties

Resources

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

Buttons enable users to trigger actions. There are 4 button types:

• Simple button for one action
• Toggle button to switch between different states
• Segmented button with a group of options
• Menu button with a group of actions

Usage

Use the button types as follows:

• Use simple buttons for specific actions, such as:
  • Create, Edit, Save
  • Approve, Reject
  • Accept, Decline
  • OK, Cancel
• Use toggle buttons in a toolbar to activate or deactivate an object or element. You can also use toggle buttons to switch between different states.
• If you want the user to select one option from a small group, offer a segmented button in the toolbar. For example:
  • Year, Month, Day
  • Small, Medium, Large
• Use the menu button if you need a menu that provides more than one option.

Do not use buttons if:

• You want to link to a different page or object. Use the link instead.
• You want to let users upload content. Use the upload set control instead.

Types

Button

Buttons can trigger primary, secondary, semantic, and negative path actions. These different action types are explained in more detail in the action placement guideline.

Header and Footer Toolbars

Use the following button styling for the different action types in the header and footer toolbar:

• Primary action: Use the emphasized button style. Note that there can only be one primary action per page.
• Secondary action: Use the default button style. In SAPUI5 you must implement type=”ghost” to achieve this style in the header and footer toolbar.
• Negative path action: Use the transparent button style.
• Semantic action: Use the semantic buttons for positive and negative actions. Use the “Accept” style for positive actions, and “Reject” for negative actions.  Semantic actions must always be text buttons.

Content Toolbars

Use the following button styles in content toolbars for tables, forms or charts:

• If the single primary action for the whole page is in the toolbar, use the emphasized button style.
• If the single primary action for the whole page is not in the toolbar, highlight the most important button in the toolbar with the default button style.
• For secondary actions and negative path actions, use the transparent button style.
• For split buttons and menu buttons, use the transparent button style.
• Do not use semantic button styles.

Toggle Button

A toggle button switches between two actions. One of the actions is always active, one is inactive. Use the toggle button for secondary actions.

Apply the following button styles for the different toolbars:

• Header and footer toolbars: Use the standard button style.
• Content toolbars: Use the transparent button style.

Do not use any other styling types and ensure the button label communicates the toggleable nature of the button.

Segmented Button

A segmented button shows a group of options. Only one of the options can be active, the others remain or become inactive. Pressing an option activates it. 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.

The segmented button is comparable to a radio button group control.

Menu Button

There are two types of menu buttons. Both can contain items and submenus.

Standard Menu Button

When the user activates the button, the menu opens. This is the default type.

Split Menu Button

The split menu button is separated into two areas: the text and the arrow icon. The separator between them signals that the two areas result in different actions. The user has two choices: activating the text on the button triggers the action. Activating the arrow opens the menu. The split button consolidates a variety of commands, especially when one of the commands is used more often.

In split mode, the text depends on the default action. If the default action is displayed as an icon only, all the menu items must contain icons.

Split Menu Button Behaviors

The split menu button can have two different behaviors:

1. The button always triggers the default action set by the app developer. If no default action has been defined, the first item in the menu list becomes the default.
2. The button triggers the last action chosen by the user. Initially, it also triggers the default action. However, when the user selects a different action, this user action becomes the default, and the button text changes accordingly. The button has a fixed size and the text truncates if the menu item exceeds the available width (as with the combo box).

Button Content

Text or Icon

A button can contain an icon OR a text.

Always use a text button for primary, secondary, semantic, and negative path actions.

Use icon buttons only if the icon metaphor is easily recognizable. Ideally, it should have same meaning worldwide.  For more information about icons in general, check out the article on iconography.

Badge

The standard button can contain an optional badge. The badge acts as a visual eye-catcher and attracts the user’s attention. It shows a number and is typically applied in browse and collect use cases. For example, it can display the number of items in a shopping cart.

Only use the badge in combination with the emphasized and secondary button styles. The number of the badge must always be a whole number (1, 2, 3, …) and cannot be smaller than 1. If 0 or minus items are in the basket, the badge is not displayed. If the number exceeds 4 characters, such as 9999, it is truncated to 999+.

The position of the badge (attached to or on a button) can vary depending on the content density.

Behavior and Interaction

Buttons can be triggered through mouse, keyboard, touchscreen and screen reader interaction.

• A button provides visual feedback for “hover”, “press-down”, and “focused” states.
• A toggle button remains in the pressed state until it is pressed again.
• In a segmented button, the chosen option stays active until the user presses one of the other options.
• A menu button displays a dropdown menu on activation.
• In a split button, selecting the button text triggers that action directly. Activating the arrow opens a dropdown menu. If the user selects a menu item, the action is triggered and the menu closes.

If an action cannot be triggered, or is temporarily unavailable, use the disabled state for the corresponding button.

If you want to switch a text, icon or tooltip after a button click, bear in mind to use the invisible message control to also convey the information to screen reader listeners.

All three button types support the cozy and compact form factors. For more information, check out the article on content density.

Responsiveness

Guidelines

Button Text

• Choose a button text that is short and meaningful. Check out the UI text guidelines for more information.
• Use a verb in the imperative for all actions (for example: Save, Cancel, Edit).
  Note: The grammatical form for actions can differ for other languages. For example, German action labels use the infinitive (Sichern, Abbrechen, Bearbeiten).
• Keep in mind that the text can be up to 300% longer in other languages.
• If you need to show the number of items that will be affected by the action of the button, you can add the number in parentheses. For example, Edit (3).
• Do not change the text or icon of a toggle button when it is pressed. Screen readers announce the “pressed” state for the action. If you use a different text for the pressed state, the screen reader announcement doesn’t make sense.

Icon Buttons

• Make sure the default accessibility text for the icon is correct for your use case. If the text is not ideal, define an app-specific accessibility text.
• Offer a tooltip to show the label for icon buttons.
• Don’t use the icon control for buttons. Use the icon property for the button instead.

Button Shortcut

• You can show the keyboard shortcut for an action. The keyboard shortcut appears on hover or on keyboard focus, and its positioning (top or bottom) is context-dependent. When a tooltip is needed, it is combined with the shortcut information.

Related Links

A slider is a control that enables the user to adjust single values within a specified numerical range.

Usage

Use the slider to change values with graphical support.

Responsiveness

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 devices operated by a mouse and keyboard.

Types

Only a horizontal slider is available.

Behavior and Interaction

Changing the Value

Slider with Text Fields

The slider can be used with text fields instead of tooltips. In this case, the value of the grip is displayed.

Slider with Input Fields

The slider can be used with input fields instead of text fields. This allows the user to enter a specific value.

Slider with Tick Marks

You can apply tick marks to the slider. The tick marks are related to the step property, and are responsive. If the distance between 2 tick marks is less than 8 px, all tick marks except for the first and last disappear.

Slider with Tick Marks and Labels

If tick marks are set, you can define labels for the tick marks. The labels are displayed below the tick marks and show the corresponding value of the tick mark. The labels must always be numbers, and must never overlap. You can also define labels only for specific tick marks if you don’t need a label for every tick mark on the slider. The application developer is responsible for defining a reasonable set of tick marks.

If there is not enough horizontal space to display all the labels, a responsive mechanism is activated. The first and the last label are always visible.

Custom Values

Styles

The slider can be shown with or without a progress bar. By default, the progress bar is shown.

Examples

Properties

• The step property must be positive. If a negative number is provided, the default value 1 is used instead.
• The minimum, maximum, and value properties can be decimals (float values). The slider automatically sets the minimum value to 0 and maximum value to 100 by default.
• The width of the control can be provided in %, em, px, and all possible CSS units. The slider automatically sets the width of the slider to 100% by default.

Resources

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.

Every field needs a label. If you use one label for a group of fields, use a combined label and invisible text to label the single fields.

Usage

Use the label control if:

• You need a label for a control.
• Always use labels for form controls.

Do not use the label control if:

• You want to insert a heading in the column header of a table.
• You want to use it as an alternative for the text control. Do not use the label control to display the data (for example, in display-only forms).

Required/Optional Fields

In edit mode, the label indicates whether an entry is mandatory (“required”) or optional.

If a field is required, an asterisk is shown after the label text. The asterisk is only visible in edit mode, and not in display mode.

In the image:

1. Required, edit mode
2. Required, display mode
3. Optional, edit mode
4. Optional, display mode

Label Placement

In forms, you can place the label above the field value (recommended), or right-align the label next to the field value. For more information, see Label Alignment.

The position of a label can depend on the screen size. For example, the labels in a form can appear next to the input fields on larger screens, but move above the input fields when the screen size is reduced.

Styles

For better differentiation of labels and values, labels are displayed differently in a display-only environment than in an editable environment.

Wrapping

Automatic wrap only applies to labels within forms to avoid truncation.

Do not use wrapping to enable long labels. Instead, keep your labels short: a label is not a help text. It must be meaningful, succinct, short, and descriptive. For more information about the responsive behavior of text, see Wrapping and Truncating Text.

Hyphenation

The label control also supports hyphenation for wrapped texts (property: wrappingtype = Hyphenated). Switching on hyphenation activates it for all languages that have hyphenation support.

Guidelines

• Always use a label for form controls.
• Always set the vertical alignment for labels that display outside a form and flex box (property: VAlign). You can set the vertical alignment in tables and object page header facets, for example.
• Use title case for labels.
• Do not use a placeholder (input prompt) instead of a label.
• You can display labels in bold text, but we recommend using the regular font weight.
• A label is not a help text: it must be meaningful, succinct, short, and descriptive.
• Reserve space for translation. For more information, see UI Text Space Calculator.

Exceptions

The layout can sometimes be simplified by using a placeholder instead of the label control. This exception can be applied in the following cases:

• In search fields. For more information, see Search.

Resources

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

Usage

Use the text control if you want to display text inside a form, table, or any other content area. Do not use the text control if you need a label, or vice versa.

Responsiveness

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.

Wrapping / Truncation

Guidelines

Empty Indicator Mode

The emptyIndicatorMode property in sap.m.Text allows app developers to indicate an empty text to users by using an n-dash (“–”). If turned on, an n-dash is rendered when no text is visible. If turned off (default), the behavior is as it is. Depending on the language, the symbol may change.

Resources

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

Intro

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

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

Usage

Use the value help dialog if:

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

Do not use the value help dialog if:

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

Responsiveness

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

Components

The value help dialog contains the following components:

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

Header (1)

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

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

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

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

Search Template (3)

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

Basic Search (4)

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

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

Go Button (5)

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

Result List (6)

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

Selected Items and Conditions (7)

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

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

Footer Toolbar (8)

The footer bar offers the OK and Cancel buttons.

Filters (9)

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

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

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

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

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

Using the Filters

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