Carousel

The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed item or items, the user can navigate to either the next or the previous item.

Optionally, a paging indicator displays the user’s current position inside the set of items.

The carousel control is best used for browsing through a set of images. Viewing images one by one helps users to distinguish between different items. In a comparison scenario, it can also be useful to display several items side by side. The carousel is not limited to displaying images; it can contain any sap.m control.

Usage

Use the carousel if:

You have strong visual representations of the items you want to display.
You want to display items sequentially or side by side.

Do not use the carousel if:

The items you want to display are uniform.

Responsiveness

The size of the control’s content area is adjusted automatically, depending on the amount of space available.

On non-touch devices, the user can navigate with the paging buttons displayed on the left and right of the control.

On touch devices, users can navigate through the pages by swiping or by tapping the arrow buttons, which are always visible. The tap interaction is required as an alternative to swiping to comply with accessibility standards.

The paging indicator (when activated) shows on all form factors. The paging indicator wraps if it is too long to fit onto one line.

Carousel - Size S

Carousel - Size M

Carousel - Size L

Layout

The main component of the carousel control is the content area in which the different items are displayed.

The (optional) paging indicator can float above or below the content area.

On non-touch devices, paging buttons either float above the left and right sides of the content area, or appear in the paging indicator area. This is controlled by the arrowsPlacement property.

Displaying multiple items

The layout of the carousel does not change when multiple items are displayed in the content area.

Behavior and Interaction

The content area contains either the current item or a set of items.

Navigation for Single Items

When the user navigates from the current item to another item, the current item is moved out of the content area, and the next or previous item slides in (depending on the direction of navigation).

On touch devices, users navigate with swipe gestures (swipe right or swipe left).

On non-touch devices, users navigate with paging buttons.

If the item set contains only one item, navigation is deactivated.

Paging button – Previous page

Paging button – Next page (hover)

Navigation for Multiple Items

When the user clicks one of the paging buttons, the rightmost or leftmost item is moved out of the content area, and the next or previous item slides in (depending on the navigation direction).

In addition, you can set the navigation to move through multiple items or an entire row with a single click on the paging button.

Carousel with multiple items

Looping

The carousel can be set to loop (property: loop). In this case, the carousel jumps back to the first item once all items have been displayed. If looping is not enabled, there is no forward navigation on the last item.

Paging

The current position inside the set of items is displayed using an optional paging indicator (properties: showPageIndicator, pageIndicatorPlacement).

Paging indicator - Icons

If there are more than 8 pages, the paging indicator changes from icons to numbers.

Paging indicator - Count

Resources

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

Elements and Controls

Image (guidelines)

Implementation

Carousel (sample in SAPUI5 Demo Kit)
Carousel (SAPUI5 API reference)

Carousel

The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed item or items, the user can navigate to either the next or the previous item.

Optionally, a paging indicator displays the user’s current position inside the set of items.

The carousel control is best used for browsing through a set of images. Viewing images one by one helps users to distinguish between different items. In a comparison scenario, it can also be useful to display several items side by side. The carousel is not limited to displaying images; it can contain any sap.m control.

Usage

Use the carousel if:

You have strong visual representations of the items you want to display.
You want to display items sequentially or side by side.

Do not use the carousel if:

The items you want to display are uniform.

Responsiveness

The size of the control’s content area is adjusted automatically, depending on the amount of space available.

On non-touch devices, the user can navigate with the paging buttons displayed on the left and right of the control.

On touch devices, the carousel control makes use of the swipe gesture to navigate through the items. As a result, the paging buttons are not displayed on touch devices.

The paging indicator (when activated) shows on all form factors. The paging indicator wraps if it is too long to fit onto one line.

Carousel - Size S

Carousel - Size M

Carousel - Size L

Layout

The main component of the carousel control is the content area in which the different items are displayed.

The (optional) paging indicator can float above or below the content area.

On non-touch devices, paging buttons either float above the left and right sides of the content area, or appear in the paging indicator area. This is controlled by the arrowsPlacement property.

Displaying multiple items

The layout of the carousel does not change when multiple items are displayed in the content area.

Behavior and Interaction

The content area contains either the current item or a set of items.

Navigation for Single Items

When the user navigates from the current item to another item, the current item is moved out of the content area, and the next or previous item slides in (depending on the direction of navigation).

On touch devices, users navigate with swipe gestures (swipe right or swipe left).

On non-touch devices, users navigate with paging buttons.

If the item set contains only one item, navigation is deactivated.

Paging button – Previous page

Paging button – Next page (hover)

Navigation for Multiple Items

When the user clicks one of the paging buttons, the rightmost or leftmost item is moved out of the content area, and the next or previous item slides in (depending on the navigation direction).

Carousel with multiple items

Looping

The carousel can be set to loop (property: loop). In this case, the carousel jumps back to the first item once all items have been displayed. If looping is not enabled, there is no forward navigation on the last item.

Paging

The current position inside the set of items is displayed using an optional paging indicator (properties: showPageIndicator, pageIndicatorPlacement).

Paging indicator - Icons

If there are more than 8 pages, the paging indicator changes from icons to numbers.

Paging indicator - Count

Resources

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

Elements and Controls

Image (guidelines)

Implementation

Carousel (sample in SAPUI5 Demo Kit)
Carousel (SAPUI5 API reference)

Object Display Components

There are four types of object display component: object status, object identifier, object number, and object marker. Each one is connected to an object and displays a certain type of information (status, identifier, number, marker).

Object status: a short text that represents the semantic status of an object
Object identifier: a short text that represents the key identifier of an object
Object number: a short text that represents the numeric (key) attribute of an object and its unit
Object marker: indicates the technical status of an object

From top to bottom: Examples for the object status, object identifier, object number, and object marker

Usage

Use the object display components if:

You need to display the semantic status of an object: negative, critical, positive, or neutral. Use the object status for this.
You want to display the key number of an object. In this case, use the object number and keep the default emphasized setting.
You need to display one or more numeric attributes of an object (for example, for objects you want to compare). Use the object number for this.
You want to indicate the key identifier of the object. Use the object identifier for this.
You want to display the technical state of an object (draft, unsaved changes, locked, favorite, flagged). Use the object marker for this, unless you want to display the status of the object in the business life cycle. In the latter case, consider using the object status instead.
You need to show that the current object instance is locked by another user. Use the object marker for this.

Do not use the object display components if:

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

Responsiveness

The object status wraps if it is longer than the available screen width.
The object identifier text wraps if the size of the screen becomes too small to display the entire text on one line.
The object number does not wrap or truncate. For large numbers, use appropriate formatting.
The object marker does not wrap or truncate. It comes with different display options: IconAndText, IconOnly, and Text. On size S, the display option IconAndText displays only the icon. The other options are displayed as normal.

For more information about the responsive behavior of text in general, see Wrapping and Truncating Text.

From top to bottom: Wrapping examples for the object status, object identifier, formatted object number, and two versions of the object marker

Components

Object Status

The object status is a short text that represents the semantic status of an object.

It consists of the following:

A semantically colored text indicating its status (property: text). We recommend using this semantically colored text-only option on its own. Check out the How to Use Semantic Colors / Industry-Specific Colors article for color options.
An optional icon (property: icon). If you use an icon, ensure it’s well understood in the context. You can also use the following icon set for your use case:
= positive/success
= critical/warning
= negative/error
Note that there is no generic icon for “neutral” across industries. If you have a neutral object status, use the text-only version, or a blank icon. Only use an icon to denote “neutral” in the app-specific business context in exceptional cases.

Text-only object status and icon with text object status

An optional inverted visualization. Use the inverted object status if the information is crucial for the user’s actions and needs to stand out visually (for example, in table list items).
An optional link (property: active). If the object status is used as a link, a hover effect is shown on non-touch devices. Use this feature if the user needs additional information about the status (for example, in a popover). Note that if you use the object status as a combination of icon and text, there is no hover effect for the icon.

Inverted object status (left) and object status in hover state (right)

An optional larger font (CSS class: sapMObjectStatusLarge). Use this feature if the object status is important in the business context and needs to stand out visually in the page header (for example, key value facets in an object page).

Larger object status in the header facet for an object page

Guidelines

- Ensure that the context for the object status is properly described. The semantic meaning must also be understandable for color-blind people. Use the object status in combination with a label, icon, unit, or attribute to make the value state clear.
- In rare cases, an object can have two statuses at the same time. In this case, use the inverted text-only version for the most important status, and the normal text-only version (with an optional icon) for the less important status.
- If you use the object status in a table, follow the corresponding sorting guidelines.
- To prevent the text being read as a link, don’t use the blue “information state” for the object status.
- If the object status is interactive, add sufficient spacing to ensure that the area occupied by the object status on the screen is at least 24 x 24 px. This area must not overlap or intersect with any other components. The minimum target size is required to comply with the WCAG 2.2 accessibility standard.

Object Identifier

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

It has the following characteristics:

A title text (property: title)
An optional link (property: titleActive). In this case, the event can open the quick view of the object or a popover for example.
An optional additional descriptive text (property: text)

Guidelines

The object identifier should be easily readable (preferably the display text and not the ID).
If the object’s ID is necessary to distinguish between items that use the same title, it should appear as descriptive text below the title (property: text).
If the object identifier is interactive, add sufficient spacing to ensure that the area occupied by the object identifier on the screen is at least 24 x 24 px. This area must not overlap or intersect with any other components. The minimum target size is required to comply with the WCAG 2.2 accessibility standard.

Normal object identifier, object identifier with link, and object identifier with descriptive text

Object Number

The object number is a short text that represents the numeric (key) attribute of an object and its unit.

It consists of the following:

A colored text (property: number) based on the semantic color palette. Check out the How to Use Semantic Colors / Industry-Specific Colors article for more details.
An optional unit (property: unit).

Emphasized and non-emphasized object numbers

An emphasized text which you can set to non-emphasized when you use it in the content area (property: emphasized).

Object number used as a semantic attribute (weight)

An optional inverted visualization of a crucial number, which needs to visually stand out and attract the user’s attention (property: inverted). Use this visualization sparely and not more than two of them on one page.

Inverted object numbers and normal object number in comparison

An optional larger font (CSS class: sapMObjectNumberLarge). Use this feature if the object number is important in the business context and needs to stand out visually in the page header (for example, key value facets in an object page). Once the large font is applied, the object number can no longer be emphasized.

Guidelines

Don’t use a semantic color alone to indicate a value state. Ensure that the context for the object number is properly described. The semantic meaning must also be understandable for color-blind people. Use the object number in combination with a label, icon, unit, or attribute to make the specific context of the value state in your application clear.
The object number can also be used to visualize other semantic numeric attributes. In this case, they are not emphasized unless they are the key attribute, such as a sum.
Emphasize the object number if it is used as a line item status in a table.

Emphasized and non-emphasized object numbers in the header facet for an object page

Object Marker

The object marker indicates the technical status of an object and can be interactive. It is enabled for the dynamic page layout, the snapping header, the object page header, the upload set control, and the object list item. You can represent the technical status as an icon, with an icon and text, or as text only, depending on the screen size.

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

Editing Status: Draft, Unsaved Changes, Locked. The editing status is part of the draft handling concept.
Favorite
Flag

Flag and Favorite are usually displayed as icons on all screen sizes. For more information, see Flag and Favorite.

An object can have multiple technical statuses at the same time. However, because the editing statuses are mutually exclusive, users will see a maximum of 3 technical statuses for an object: Flag, Favorite, and one Editing Status.

Developer Hint

The app developer is responsible for the technical statuses. Every technical status has a default visualization that can be changed by the app developer depending on the usage context. For details regarding draft handling, see How to Display the Editing Status in the Draft Handling article.

If the object marker is interactive, add sufficient spacing to ensure that the area occupied by the object marker on the screen is at least 24 x 24 px. This area must not overlap or intersect with any other components. The minimum target size is required to comply with the WCAG 2.2 accessibility standard.

Icons for draft, unsaved changes, locked, favorite, and flag (from left to right)

Editing status examples

Resources

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

Elements and Controls

How to Use Semantic Colors (guidelines)
Wrapping and Truncating Text (guidelines)
Draft Handling (guidelines)
Flag and Favorite (guidelines)
Responsive Table (guidelines)

Implementation

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

Object Display Components

There are four types of object display component: object status, object identifier, object number, and object marker. Each one is connected to an object and displays a certain type of information (status, identifier, number, marker).

Object status: a short text that represents the semantic status of an object
Object identifier: a short text that represents the key identifier of an object
Object number: a short text that represents the numeric (key) attribute of an object and its unit
Object marker: indicates the technical status of an object

From top to bottom: Examples for the object status, object identifier, object number, and object marker

Usage

Use the object display components if:

You need to display the semantic status of an object: negative, critical, positive, or neutral. Use the object status for this.
You want to display the key number of an object. In this case, use the object number and keep the default emphasized setting.
You need to display one or more numeric attributes of an object (for example, for objects you want to compare). Use the object number for this.
You want to indicate the key identifier of the object. Use the object identifier for this.
You want to display the technical state of an object (draft, unsaved changes, locked, favorite, flagged). Use the object marker for this, unless you want to display the status of the object in the business life cycle. In the latter case, consider using the object status instead.
You need to show that the current object instance is locked by another user. Use the object marker for this.

Do not use the object display components if:

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

Responsiveness

The object status wraps if it is longer than the available screen width.
The object identifier text wraps if the size of the screen becomes too small to display the entire text on one line.
The object number does not wrap or truncate. For large numbers, use appropriate formatting.
The object marker does not wrap or truncate. It comes with different display options: IconAndText, IconOnly, and Text. On size S, the display option IconAndText displays only the icon. The other options are displayed as normal.

For more information about the responsive behavior of text in general, see Wrapping and Truncating Text.

From top to bottom: Wrapping examples for the object status, object identifier, formatted object number, and two versions of the object marker

Components

Object Status

The object status is a short text that represents the semantic status of an object.

It consists of the following:

A semantically colored text indicating its status (property: text). We recommend using this semantically colored text-only option on its own. Check out the How to Use Semantic Colors / Industry-Specific Colors article for color options.
An optional icon (property: icon). If you use an icon, ensure it’s well understood in the context. You can also use the following icon set for your use case:
= positive/success
= critical/warning
= negative/error
Note that there is no generic icon for “neutral” across industries. If you have a neutral object status, use the text-only version, or a blank icon. Only use an icon to denote “neutral” in the app-specific business context in exceptional cases.

Text-only object status and icon with text object status

An optional inverted visualization. Use the inverted object status if the information is crucial for the user’s actions and needs to stand out visually (for example, in table list items).
An optional link (property: active). If the object status is used as a link, a hover effect is shown on non-touch devices. Use this feature if the user needs additional information about the status (for example, in a popover). Note that if you use the object status as a combination of icon and text, there is no hover effect for the icon.

Inverted object status (left) and object status in hover state (right)

An optional larger font (CSS class: sapMObjectStatusLarge). Use this feature if the object status is important in the business context and needs to stand out visually in the page header (for example, key value facets in an object page).

Larger object status in the header facet for an object page

Guidelines

- Ensure that the context for the object status is properly described. The semantic meaning must also be understandable for color-blind people. Use the object status in combination with a label, icon, unit, or attribute to make the value state clear.
- In rare cases, an object can have two statuses at the same time. In this case, use the inverted text-only version for the most important status, and the normal text-only version (with an optional icon) for the less important status.
- If you use the object status in a table, follow the corresponding sorting guidelines.
- To prevent the text being read as a link, don’t use the blue “information state” for the object status.
- If the object status is interactive, add sufficient spacing to ensure that the area occupied by the object status on the screen is at least 24 x 24 px. This area must not overlap or intersect with any other components. The minimum target size is required to comply with the WCAG 2.2 accessibility standard.

Object Identifier

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

It has the following characteristics:

A title text (property: title)
An optional link (property: titleActive). In this case, the event can open the quick view of the object or a popover for example.
An optional additional descriptive text (property: text)

Guidelines

The object identifier should be easily readable (preferably the display text and not the ID).
If the object’s ID is necessary to distinguish between items that use the same title, it should appear as descriptive text below the title (property: text).
If the object identifier is interactive, add sufficient spacing to ensure that the area occupied by the object identifier on the screen is at least 24 x 24 px. This area must not overlap or intersect with any other components. The minimum target size is required to comply with the WCAG 2.2 accessibility standard.

Normal object identifier, object identifier with link, and object identifier with descriptive text

Object Number

The object number is a short text that represents the numeric (key) attribute of an object and its unit.

It consists of the following:

A colored text (property: number) based on the semantic color palette. Check out the How to Use Semantic Colors / Industry-Specific Colors article for more details.
An optional unit (property: unit).

Emphasized and non-emphasized object numbers

An emphasized text which you can set to non-emphasized when you use it in the content area (property: emphasized).

Object number used as a semantic attribute (weight)

An optional inverted visualization of a crucial number, which needs to visually stand out and attract the user’s attention (property: inverted). Use this visualization sparely and not more than two of them on one page.

Inverted object numbers and normal object number in comparison

An optional larger font (CSS class: sapMObjectNumberLarge). Use this feature if the object number is important in the business context and needs to stand out visually in the page header (for example, key value facets in an object page). Once the large font is applied, the object number can no longer be emphasized.

Guidelines

Ensure that the context for the object number is properly described. The semantic meaning must also be understandable for color-blind people. Use the object number in combination with a label, icon, unit, or attribute to make the value state clear.
The object number can also be used to visualize other semantic numeric attributes. In this case, they are not emphasized unless they are the key attribute, such as a sum.
Emphasize the object number if it is used as a line item status in a table.

Emphasized and non-emphasized object numbers in the header facet for an object page

Object Marker

The object marker indicates the technical status of an object and can be interactive. It is enabled for the dynamic page layout, the snapping header, the object page header, the upload set control, and the object list item. You can represent the technical status as an icon, with an icon and text, or as text only, depending on the screen size.

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

Editing Status: Draft, Unsaved Changes, Locked. The editing status is part of the draft handling concept.
Favorite
Flag

Flag and Favorite are usually displayed as icons on all screen sizes. For more information, see Flag and Favorite.

An object can have multiple technical statuses at the same time. However, because the editing statuses are mutually exclusive, users will see a maximum of 3 technical statuses for an object: Flag, Favorite, and one Editing Status.

Developer Hint

The app developer is responsible for the technical statuses. Every technical status has a default visualization that can be changed by the app developer depending on the usage context. For details regarding draft handling, see How to Display the Editing Status in the Draft Handling article.

If the object marker is interactive, add sufficient spacing to ensure that the area occupied by the object marker on the screen is at least 24 x 24 px. This area must not overlap or intersect with any other components. The minimum target size is required to comply with the WCAG 2.2 accessibility standard.

Icons for draft, unsaved changes, locked, favorite, and flag (from left to right)

Editing status examples

Resources

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

Elements and Controls

How to Use Semantic Colors (guidelines)
Wrapping and Truncating Text (guidelines)
Draft Handling (guidelines)
Flag and Favorite (guidelines)
Responsive Table (guidelines)

Implementation

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

Object Display Components

There are four types of object display component: object status, object identifier, object number, and object marker. Each one is connected to an object and displays a certain type of information (status, identifier, number, marker).

Object status: a short text that represents the semantic status of an object
Object identifier: a short text that represents the key identifier of an object
Object number: a short text that represents the numeric (key) attribute of an object and its unit
Object marker: indicates the technical status of an object

From top to bottom: Examples for the object status, object identifier, object number, and object marker

Usage

Use the object display components if:

You need to display the semantic status of an object: negative, critical, positive, or neutral. Use the object status for this.
You want to display the key number of an object. In this case, use the object number and keep the default emphasized setting.
You need to display one or more numeric attributes of an object (for example, for objects you want to compare). Use the object number for this.
You want to indicate the key identifier of the object. Use the object identifier for this.
You want to display the technical state of an object (draft, unsaved changes, locked, favorite, flagged). Use the object marker for this, unless you want to display the status of the object in the business life cycle. In the latter case, consider using the object status instead.
You need to show that the current object instance is locked by another user. Use the object marker for this.

Do not use the object display components if:

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

Responsiveness

The object status wraps if it is longer than the available screen width.
The object identifier text wraps if the size of the screen becomes too small to display the entire text on one line.
The object number does not wrap or truncate. For large numbers, use appropriate formatting.
The object marker does not wrap or truncate. It comes with different display options: IconAndText, IconOnly, and Text. On size S, the display option IconAndText displays only the icon. The other options are displayed as normal.

For more information about the responsive behavior of text in general, see Wrapping and Truncating Text.

From top to bottom: Wrapping examples for the object status, object identifier, formatted object number, and two versions of the object marker

Components

Object Status

The object status is a short text that represents the semantic status of an object.

It consists of the following:

A semantically colored text indicating its status (property: text). We recommend using this semantically colored text-only option on its own. Check out the How to Use Semantic Colors / Industry-Specific Colors article for color options.
An optional icon (property: icon). If you use an icon, ensure it’s well understood in the context. You can also use the following icon set for your use case:
= positive/success
= critical/warning
= negative/error
Note that there is no generic icon for “neutral” across industries. If you have a neutral object status, use the text-only version, or a blank icon. Only use an icon to denote “neutral” in the app-specific business context in exceptional cases.

Text-only object status and icon with text object status

An optional inverted visualization. Use the inverted object status if the information is crucial for the user’s actions and needs to stand out visually (for example, in table list items).
An optional link (property: active). If the object status is used as a link, a hover effect is shown on non-touch devices. Use this feature if the user needs additional information about the status (for example, in a popover). Note that if you use the object status as a combination of icon and text, there is no hover effect for the icon.

Inverted object status (left) and object status in hover state (right)

An optional larger font (CSS class: sapMObjectStatusLarge). Use this feature if the object status is important in the business context and needs to stand out visually in the page header (for example, key value facets in an object page).

Larger object status in the header facet for an object page

Guidelines

- Ensure that the context for the object status is properly described. The semantic meaning must also be understandable for color-blind people. Use the object status in combination with a label, icon, unit, or attribute to make the value state clear.
- In rare cases, an object can have two statuses at the same time. In this case, use the inverted text-only version for the most important status, and the normal text-only version (with an optional icon) for the less important status.
- If you use the object status in a table, follow the corresponding sorting guidelines.
- To prevent the text being read as a link, don’t use the blue “information state” for the object status.

Object Identifier

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

It has the following characteristics:

A title text (property: title)
An optional link (property: titleActive). In this case, the event can open the quick view of the object or a popover for example.
An optional additional descriptive text (property: text)

Guidelines

The object identifier should be easily readable (preferably the display text and not the ID).
If the object’s ID is necessary to distinguish between items that use the same title, it should appear as descriptive text below the title (property: text).

Normal object identifier, object identifier with link, and object identifier with descriptive text

Object Number

The object number is a short text that represents the numeric (key) attribute of an object and its unit.

It consists of the following:

A colored text (property: number) based on the semantic color palette. Check out the How to Use Semantic Colors / Industry-Specific Colors article for more details.
An optional unit (property: unit).

Emphasized and non-emphasized object numbers

An emphasized text which you can set to non-emphasized when you use it in the content area (property: emphasized).

Object number used as a semantic attribute (weight)

An optional inverted visualization of a crucial number, which needs to visually stand out and attract the user’s attention (property: inverted). Use this visualization sparely and not more than two of them on one page.

Inverted object numbers and normal object number in comparison

An optional larger font (CSS class: sapMObjectNumberLarge). Use this feature if the object number is important in the business context and needs to stand out visually in the page header (for example, key value facets in an object page). Once the large font is applied, the object number can no longer be emphasized.

Guidelines

Ensure that the context for the object number is properly described. The semantic meaning must also be understandable for color-blind people. Use the object number in combination with a label, icon, unit, or attribute to make the value state clear.
The object number can also be used to visualize other semantic numeric attributes. In this case, they are not emphasized unless they are the key attribute, such as a sum.
Emphasize the object number if it is used as a line item status in a table.

Emphasized and non-emphasized object numbers in the header facet for an object page

Object Marker

The object marker indicates the technical status of an object and can be interactive. It is enabled for the dynamic page layout, the snapping header, the object page header, the upload set control, and the object list item. You can represent the technical status as an icon, with an icon and text, or as text only, depending on the screen size.

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

Editing Status: Draft, Unsaved Changes, Locked. The editing status is part of the draft handling concept.
Favorite
Flag

Flag and Favorite are usually displayed as icons on all screen sizes. For more information, see Flag and Favorite.

An object can have multiple technical statuses at the same time. However, because the editing statuses are mutually exclusive, users will see a maximum of 3 technical statuses for an object: Flag, Favorite, and one Editing Status.

Developer Hint

The app developer is responsible for the technical statuses. Every technical status has a default visualization that can be changed by the app developer depending on the usage context. For details regarding draft handling, see How to Display the Editing Status in the Draft Handling article.

Icons for draft, unsaved changes, locked, favorite, and flag (from left to right)

Editing status examples

Resources

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

Elements and Controls

How to Use Semantic Colors (guidelines)
Wrapping and Truncating Text (guidelines)
Draft Handling (guidelines)
Flag and Favorite (guidelines)
Responsive Table (guidelines)

Implementation

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

Object Identifier

Object Number

Object Header

Infobar

The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:

Filter criteria: The infobar indicates the filter criteria that have been applied for a filter, for example on a table or list. Do not show the infobar if no filter is applied.
Selected items: In a multi-select dialog, the infobar shows the number of selected items.

The infobar is placed above the content and shows the applied filters

Responsiveness

The bar has the same height, text size, and icon size in both cozy and compact formats. The text inside the bar is truncated if there’s not enough space.

Types

The infobar is shown in the following situations:

After a general filter has been applied
After the user has selected multiple items in a select dialog

General Filter

All applied filters are shown as labels in the infobar.

Infobar after a filter has been applied

Multiple Selection

If the user selects multiple items, the infobar shows the number of selected items. For more information, see select dialog.

Infobar after multiple items have been selected

Components

The infobar is a toolbar that consists of a label on the left side and an icon on the right side.

The label shows the filter criteria, and the icon selected depends on the use case.

General Filter and Multiple Selection

No icon is shown. The only exception is the Cancel icon, which is used to reset the current filter criteria. For more information, see the responsive table.

Infobar with optional 'Cancel' icon

Behavior and Interaction

The bar can have two active areas: either the entire bar can be active, or if an icon is added, it creates a second active area. We recommend that you use the active behavior for the bar and the icon.

Bar Area

When the user clicks the bar, the filter dialog from the view settings dialog is shown. If only one filter is applied, the filter can be changed directly in the detailed filter selection. If more than one filter is applied, the filter dialog shows a list with general filter categories.

Clicking the infobar with a single filter shows the detailed filter selection

Clicking the infobar with multiple filters shows the filter categories

Icon Area

Cancel: The user clicks the icon to delete the current filter settings. We recommend using the cancel icon.

States

The infobar has two states – active and non-active (non-clickable). If set to non-active, the whole bar turns gray and the user cannot interact with it.

Infobar - Active state

Infobar - Non-active state

Properties

The infobar is not a separate control. If you want to build an infobar, you need to use the sap.m.Toolbar control.

To achieve the infobar design, set the design property of the toolbar to “info”.

Resources

Elements and Controls

Select Dialog (guidelines)
Toolbar (guidelines)
View Settings Dialog (guidelines)

Implementation

Table View Settings Dialog (SAPUI5 samples)
Multi Select Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Toolbar (SAPUI5 API reference)

Lightbox

The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the rest of the screen.

Usage

Use the lightbox if:

The thumbnail view is not detailed enough, and it would help the user to see the image in its original size.
The original size of the image is bigger than the thumbnail.

Do not use the lightbox if:

The image you are using is smaller than or as big as the thumbnail.
There is another click event attached to the image control.
You are using an image placeholder to display the object.

Responsiveness

The lightbox container is displayed in the middle of the screen.

The image is displayed in its original size unless the original image size is bigger than the size of the screen. In this case, the image is resized proportionally in order to be fully visible and fit on the screen.

On a mobile device, flipping the device to landscape mode will flip the lightbox. The image will then be adjusted to fit the new dimensions.

Lightbox - Size XL

Lightbox - Size S

Components

The lightbox contains the following components:

Lightbox container: This is the main container that holds all other components.
Image: This component is an embedded image control that displays the image file with the maximum available size. The size of the image should not exceed the original size and it should fit within the screen.
Image title: This component is mandatory and is used to describe the object to which the image is attached.
Image subtitle: This component is optional and is used to give additional information about the object.
Close button: This is a mandatory component and is used to close the lightbox container.

Components of the lightbox

Behavior and Interaction

Basic Interactions

The lightbox control is attached to the press event of the image control. To trigger the lightbox, the user should click an image. Every image with an attached lightbox control is indicated with a zoom icon on the bottom right.

Lightbox - Zoom icon

When the lightbox control is triggered, the lightbox overlays the page content and the rest of the screen is dimmed out.

If it takes more than one second to load the original image, a busy indicator is shown inside the lightbox container.

The user can close the lightbox by clicking the Close button or by clicking outside of the lightbox container.

Lightbox - Image loading

Lightbox - Basic interactions

Error Handling

An illustrated message is displayed inside the lightbox when:

The original file is missing or the connection to the server is lost.
The image takes more than 10 seconds to load due to a server error or the size of the image.

Developer Hint

The URL of the image is mandatory. If it is not specified, the lightbox will not be triggered.

Lightbox - Error message

Resources

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

Elements and Controls

Image (guidelines)
Illustrated Message (guidelines)

Implementation

Lightbox (SAPUI5 samples)
Lightbox (SAPUI5 API reference)

HTML

The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise not be possible with standard SAP Fiori controls.

Warning

If you opt to use freestyle HTML, you must make sure that standard capabilities such as theming, accessibility, and responsiveness are supported.

For more information, see Top Tips below.

When to Use

Information

Be aware that implementing custom content costs time and effort for development.

Use the HTML control to display:

(External) HTML content, such as work instructions or articles with images or videos.
User-created HTML content.
Content created with the rich text editor (as a live view during creation, or in read-only mode).
(While formatted text only supports a limited set of tags, using HTML will give you the full set of HTML tags.)

Do not use the HTML control to display:

In-app help or explanations on how to use your app. Use SAP Companion instead.
A simple and short text. Use the text control instead.
A semantically-colored text or a status. Use the object status instead.
An object name with a brief descriptive text. Use the object identifier instead.
A number or total. Use the object number instead.
A currency. Use the currency control instead.
A label. Use the label control instead.
A single headline. Use the title control instead.

Components

Where possible, reuse existing controls inside your freestyle content. Do not reinvent standard controls, such as buttons or popovers. Instead, use the the available controls that are described in the SAP Fiori Design Guidelines.

Behavior and Interaction

When creating freestyle content, always apply the SAP Fiori design principles. Design your interactions on the basis of these principles and build upon existing, established patterns.

If part of your content looks similar to an existing control, it should behave similarly. Do not change established interactions or patterns just because freestyle HTML allows you to, or because it looks more fancy. Users appreciate consistency.

Responsiveness

Using freestyle HTML comes with responsibilities. Making sure your content is responsive and adaptive is one of them.

If you have a large amount of content, consider an adaptive approach: Don’t try to cram all the content you show on a desktop into a mobile version of your app. Instead, think about how your customers would use this app while away from their PC. For more information, see Multi-Device Support.

Example

The following image showcases how freestyle HTML can be used to create step-by-step work instructions by combining formatted rich text and videos. If you follow the SAP Fiori design guidelines, the freestyle section integrates seamlessly into the SAP Fiori application (shown here as a schematic object page layout).

Freestyle HTML application example

Top Tips

Using freestyle HTML means that you are responsible for taking care of certain aspects that are otherwise covered automatically by standard SAP Fiori controls:

SAP Fiori design principles
Theming: Ensure correct theming if the HTML is part of the UI. This is not necessary if the HTML content is entirely user-created.
Accessibility: For example: contrast ratios, screen reader support, HCB
Multi-device support: Support all screen sizes for both touch- and mouse-enabled devices, including adaptive and responsive behavior.
Multi-browser support: Make sure your custom content is displayed correctly on all prevalent browsers.
Performance: Optimize performance and ensure that your custom content does not slow down the app or the user’s workflow.
Translatability: Make sure that your content is translated correctly.
Security: See the warning below.

Warning

By default, the HTML content (property: content) is not sanitized and is therefore open to XSS attacks. App teams must either sanitize the content themselves, or activate automatic sanitizing with the sanitizeContent property. For more information, see the API reference.

When to Use

Use the formatted text control to:

Embed formatted HTML text.
Display longer texts, such as descriptions, legal texts, or manuals.
Display simple lists with bullet points or numbers.
Display code.

Do not use the formatted text control to:

Display In-app help or explanations on how to use your app.
Display a simple and short text. Use the text control instead.
Display a semantically-colored text or a status. Use the object status instead
Display an object name with or brief additional information. Use the object identifier instead.
Display a number or sum. Use the object number instead.
Display a currency. Use the currency control instead.
Display a label. Use the label control instead.
Display a single headline. Use the title control instead.
Let the user to type in longer texts and format them. Use the rich text editor instead.

Components

By default, the control uses the standard font and headlines. It supports the following HTML tags:

Text Styling

HTML Tag	Effect
a	Link or anchor
abbr	Abbreviation
bdi	Bidirectional isolation of a certain text
blockquote	Quote
cite	Short quote
code	Code style
dir	Explicit text direction of a certain text
em	Italic text
pre	Preformatted text
strong	Bold text

List

HTML Tag	Effect
dl	Description list
dt	Description term (of a description list)
ul	Unordered list
ol	Ordered list
li	List item (of an unordered or ordered list)

Structure

HTML Tag	Effect
br	New line
h1-h6	Headlines 1-6
p	Paragraph
span	Generic inline container

Behavior and Interaction

The formatted text control itself is not interactive. However, it can contain interactive elements, such as links and anchors.

Responsiveness

The text automatically adapts to the screen size unless you set a fixed width and/or height.

Examples

Here are some examples that use the various HTML tags.

Formatted text - Numbered List

Formatted text - Bulleted list

Formatted text with code

Formatted text - Quote

Top Tips

Use the different styling options carefully and not for decoration only.
Consider accessibility, such as color contrast.
SAP Fiori uses theming. Be aware that if you make custom changes to the HTML (such as changing colors), you need to take care of the theming part as well.
The text direction is inherited by default. If you want to use a different text direction for part of the formatted text, make use of the bdi and dir HTML tags to set the direction explicitly.

Usage

Use tokens only in the multi-combo box, multi-input control, or value help dialog.

Components

The tokenizer is an invisible container that can display multiple tokens.

Tokens have the following properties:

They usually contain single text items.
They may also contain key-value pairs, such as John Miller (ID1234567).
They contain a (Remove) icon, which is only visible if the token is in edit mode.

Tokens with a surrounding tokenizer

Behavior and Interaction

Interacting

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

Selecting and Deselecting Tokens

Users can select tokens by clicking 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 clicking the relevant tokens.

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 a new position. The tokens between these two cursor positions are then selected.

Adding Tokens

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.

Information

For information on how to manage leading and trailing white space (blanks) when copying and pasting text into input controls, please see removing leading and trailing white space.

Removing Tokens

The user can instantly remove tokens via the keyboard, or by clicking the Remove icon.

Styles

There are five different styles of tokens: regular, on hover, selected, selected on hover and read-only. These styles correspond to the type of interaction being used.

Regular

On hover

Selected

Read only

Hover selected

Guidelines

The tokenizer can also be used as a tag container.

Resources

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

Elements and Controls

Multi-Combo Box (guidelines)
Multi-Input Field (guidelines)
Value Help Dialog (guidelines)
Combo Box (guidelines)

Implementation

Token (SAPUI5 samples)
Tokenizer (SAPUI5 samples)
Token (SAPUI5 API reference)
Tokenizer (SAPUI5 API reference)

Object Display Components

There are four types of object display components: object status, object identifier, object number, and object marker. Each one is connected to an object and displays a certain type of information (status, identifier, number, marker).

Object status: a short text that represents the semantic status of an object
Object identifier: a short text that represents the key identifier of an object
Object number: a short text that represents the numeric (key) attribute of an object and its unit
Object marker: indicates the technical status of an object

From top to bottom: Examples for the object status, object identifier, object number, and object marker

Usage

Use the object display components if:

You need to display the semantic status of an object: negative, critical, positive, or neutral. Use the object status for this.
You want to display the key number of an object. In this case, use the object number and keep the default emphasized setting.
You need to display one or more numeric attributes of an object (for example, for objects you want to compare). Use the object number for this.
You want to indicate the key identifier of the object. Use the object identifier for this.
You want to display the technical state of an object (draft, unsaved changes, locked, favorite, flagged). Use the object marker for this, unless you want to display the status of the object in the business life cycle. In the latter case, consider using the object status instead.
You need to show that the current object instance is locked by another user. Use the object marker for this.

Do not use the object display components if:

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

Responsiveness

The object status wraps if it is longer than the available screen width.
The object identifier text wraps if the size of the screen becomes too small to display the entire text on one line.
The object number does not wrap or truncate. For large numbers, you need to consider using the appropriate formatting.
The object marker does not wrap or truncate. It comes with different display options: IconAndText, IconOnly and Text. On size S, the display option IconAndText only displays the icon due to lack of space. The other options are displayed as normal.

For more information about the responsive behavior of text in general, see Wrapping and Truncating Text.

From top to bottom: Wrapping examples for the object status, object identifier, formatted object number, and two versions of the object marker

Components

Object Status

The object status is a short text that represents the semantic status of an object.

It consists of the following:

A semantically colored text indicating its status (property: text). We recommend using this semantically colored text-only option on its own. Check out the How to Use Semantic Colors / Industry-Specific Colors article for color options.
An optional icon (property: icon). If you need to have an icon, use one of the following:
= positive/success
= critical/warning
= negative/error
Note that there is no generic icon for “neutral” across industries. If you have a neutral object status, use the text-only version, or a blank icon. Only in exceptional cases, use an icon that means neutral in the app’s specific business context.

Text-only object status and icon with text object status

An optional inverted visualization. Use the inverted object status if the information is crucial for the user’s actions and needs to stand out visually (for example, in table list items).
An optional link (property: active). If the object status is used as a link, a hover effect is shown on non-touch devices. Use this feature if the user needs additional information about the status (for example, in a popover). Note that if you use the object status as a combination of icon and text, there is no hover effect for the icon.

Inverted object status (left) and object status in hover state (right)

An optional larger font (CSS class: sapMObjectStatusLarge). Use this feature if the object status is important in the business context and needs to stand out visually in the page header (for example, key value facets in an object page).

Larger object status in the header facet for an object page

Guidelines

Ensure that the context for the object status is properly described. The semantic meaning must also be understandable for color-blind people. Use the object status in combination with a label, icon, unit, or attribute to make the value state clear.
In rare cases, an object can have two statuses at the same time. In this case, use the inverted text-only version for the most important status, and the normal text-only version (with an optional icon) for the less important status.
If you use the object status in a table, follow the corresponding sorting guidelines.
To prevent the text being read as a link, don’t use the blue “information state” for the object status.

Object Identifier

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

It has the following characteristics:

A title text (property: title)
An optional link (property: titleActive). In this case, the event can open the quick view of the object or a popover for example.
An optional additional descriptive text (property: text)

Guidelines

The object identifier should be easily readable (preferably the display text and not the ID).
If the object’s ID is necessary to distinguish between items that use the same title, it should appear as descriptive text below the title (property: text).

Normal object identifier, object identifier with link, and object identifier with descriptive text

Object Number

The object number is a short text that represents the numeric (key) attribute of an object and its unit.

It consists of the following:

A colored text (property: number) based on the semantic color palette. Check out the How to Use Semantic Colors / Industry-Specific Colors article for more details.
An emphasized text which you can set to non-emphasized when you use it in the content area (property: emphasized).
An optional unit (property: unit).

Emphasized and non-emphasized object numbers

Object number used as a semantic attribute (weight)

An optional larger font (CSS class: sapMObjectNumberLarge). Use this feature if the object number is important in the business context and needs to stand out visually in the page header (for example, key value facets in an object page). Once the large font is applied, the object number can no longer be emphasized.

Guidelines

Ensure that the context for the object number is properly described. The semantic meaning must also be understandable for color-blind people. Use the object number in combination with a label, icon, unit, or attribute to make the value state clear.
The object number can also be used to visualize other semantic numeric attributes. In this case, they are not emphasized unless they are the key attribute, such as a sum.
Emphasize the object number if it is used as a line item status in a table.

Emphasized and non-emphasized object numbers in the header facet for an object page

Object Marker

The object marker indicates the technical status of an object and can be interactive. It is enabled for the dynamic page layout, the snapping header, the object page header, the upload set control, and the object list item. You can represent the technical status as an icon, with an icon and text, or as text only, depending on the screen size.

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

Editing Status: Draft, Unsaved Changes, Locked. The editing status is part of the draft handling concept.
Favorite
Flag

Flag and Favorite are usually displayed as icons on all screen sizes. For more information, see Flag and Favorite.

An object can have multiple technical statuses at the same time. However, because the editing statuses are mutually exclusive, users will see a maximum of 3 technical statuses for an object: Flag, Favorite, and one Editing Status.

Developer Hint

The app developer is responsible for the technical statuses. Every technical status has a default visualization that can be changed by the app developer depending on the usage context. For details regarding draft handling, see How to Display the Editing Status in the Draft Handling article.

Icons for draft, unsaved changes, locked, favorite, and flag (from left to right)

Editing status examples

Resources

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

Elements and Controls

How to Use Semantic Colors (guidelines)
Wrapping and Truncating Text (guidelines)
Draft Handling (guidelines)
Flag and Favorite (guidelines)
Responsible Table (guidelines)

Implementation

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

Text

The text control is used to display text. It generally contains the text that developers want apps to display (property: text).

Text used within a form

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

You can define whether the text should wrap or truncate directly (property: wrapping).

You can also define how often the text should wrap before it truncates (property: maxLines).

For more information on using wrapping and truncation, see Wrapping and Truncating Text.

Text – Maximum line examples

Hyphenation

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

Text with hyphenation

Text without hyphenation

White Spaces

The text control can preserve white spaces (property: renderWhitespace = true). For example, if the text contains ID formats with space and tab characters, you can use this option to render the IDs correctly.

White spaces are rendered

Unnecessary white spaces are removed (default)

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.

Elements and Controls

Label (guidelines)
Wrapping and Truncating Text (guidelines)

Implementation

Text (SAPUI5 samples)
Text (SAPUI5 API reference)
Hyphenation for Text Controls (SAPUI5 documentation)

Formatted Text

The formatted text control displays HTML text. You can format the text using HTML tags or embed formatted text.

Example

When to Use

Use the formatted text control to:

Embed formatted HTML text.
Display longer texts, such as descriptions, legal texts, or manuals.
Display simple lists with bullet points or numbers.
Display code.

Do not use the formatted text control to:

Display In-app help or explanations on how to use your app.
Display a simple and short text. Use the text control instead.
Display a semantically-colored text or a status. Use the object status instead
Display an object name with or brief additional information. Use the object identifier instead.
Display a number or sum. Use the object number instead.
Display a currency. Use the currency control instead.
Display a label. Use the label control instead.
Display a single headline. Use the title control instead.
Let the user to type in longer texts and format them. Use the rich text editor instead.

Components

By default, the control uses the standard font and headlines. It supports the following HTML tags:

Text Styling

HTML Tag	Effect
a	Link or anchor
abbr	Abbreviation
bdi	Bidirectional isolation of a certain text
blockquote	Quote
cite	Short quote
code	Code style
dir	Explicit text direction of a certain text
em	Italic text
pre	Preformatted text
strong	Bold text

List

HTML Tag	Effect
dl	Description list
dt	Description term (of a description list)
ul	Unordered list
ol	Ordered list
li	List item (of an unordered or ordered list)

Structure

HTML Tag	Effect
br	New line
h1-h6	Headlines 1-6
p	Paragraph
span	Generic inline container

Behavior and Interaction

The formatted text control itself is not interactive. However, it can contain interactive elements, such as links and anchors.

Responsiveness

The text automatically adapts to the screen size unless you set a fixed width and/or height.

Examples

Here are some examples that use the various HTML tags.

Formatted text - Numbered List

Formatted text - Bulleted list

Formatted text with code

Formatted text - Quote

Top Tips

Use the different styling options carefully and not for decoration only.
Consider accessibility, such as color contrast.
SAP Fiori uses theming. Be aware that if you make custom changes to the HTML (such as changing colors), you need to take care of the theming part as well.
The text direction is inherited by default. If you want to use a different text direction for part of the formatted text, make use of the bdi and dir HTML tags to set the direction explicitly.

Usage

Use the title if:

You want to set the title above a table or form.
You want to show text in the page header.

Do not use the title if:

The text is inside a text block.
The text is inside a form element.

Responsiveness

You can define whether the text should wrap or truncate directly (property: wrapping). If hyphenation or truncation is not set, the text of the title is wrapped word by word.

For more information on using wrapping and truncation, see Wrapping and Truncating Text.

Truncated title

Hyphenation

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

Wrapped title

Wrapped, hyphenated title

Styles

The actual appearance of the title and the different styles always depends on the theme being used.

The semantic level of the title can be set automatically or explicitly. With the automatic setting (property: level, value: Auto) no explicit level information is written (HTML5 header element). If you want to set it explicitly, use an HTML H1-H6 element (property: level, value: H1-H6).

The level (property: level, value: Auto, H1-H6) and title style (property: titleStyle, value: Auto, H1-H6) can be set independently.

Title with level H1 to H6 and default style

A title can also be a link.

Developer Hint

To add a link to the title:

Use the content aggregation.
Add a Link to it.

The content aggregation accepts any control that implements the sap.ui.core.ITitleContent interface.

Title with different levels as a link

Guidelines

When using the title in the dynamic page header, use wrapping in expanded mode and truncation in collapsed mode.
In other places, such as toolbars or dialog headers, do not use wrapping. Truncate the title instead.

Properties

The following properties are available:

The property text defines the text that should be displayed as a title.
The property level (default: auto) defines the semantic level used by assistive technology. The default level can be overridden with H1 to H6 to set the level explicitly.
The property titleStyle (default: auto) defines the actual appearance of the title. When you use automatic styling, the appearance of the title depends on the current position of the title and the defined level. This automatism can be overridden by explicitly setting a different style between H1 and H6.
The property width defines the width of the title.
The property textAlign (default: initial) defines the alignment of the text within the title. Note: This property only has an effect if the overall width of the title control is larger than the displayed text.

Resources

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

Elements and Controls

Toolbar (guidelines)
Panel (guidelines)
List (guidelines)

Implementation

Title (SAPUI5 samples)
Title (SAPUI5 API reference)
Hyphenation for Text Controls (SAPUI5 documentation)

Formatted Text

The formatted text control displays HTML text. You can format the text using HTML tags or embed formatted text.

Example

When to Use

Use the formatted text control to:

Embed formatted HTML text.
Display longer texts, such as descriptions, legal texts, or manuals.
Display simple lists with bullet points or numbers.
Display code.

Do not use the formatted text control to:

Display In-app help or explanations on how to use your app.
Display a simple and short text. Use the text control instead.
Display a semantically-colored text or a status. Use the object status instead
Display an object name with or brief additional information. Use the object identifier instead.
Display a number or sum. Use the object number instead.
Display a currency. Use the currency control instead.
Display a label. Use the label control instead.
Display a single headline. Use the title control instead.
Let the user to type in longer texts and format them. Use the rich text editor instead.

Components

By default, the control uses the standard font and headlines. It supports the following HTML tags:

Text Styling

HTML Tag	Effect
a	Link or anchor
abbr	Abbreviation
blockquote	Quote
cite	Short quote
code	Code style
em	Italic text
pre	Preformatted text
strong	Bold text

List

HTML Tag	Effect
dl	Description list
dt	Description term (of a description list)
ul	Unordered list
ol	Ordered list
li	List item (of an unordered or ordered list)

Structure

HTML Tag	Effect
br	New line
h1-h6	Headlines 1-6
p	Paragraph
span	Generic inline container

Behavior and Interaction

The formatted text control itself is not interactive. However, it can contain interactive elements, such as links and anchors.

Responsiveness

The text automatically adapts to the screen size unless you set a fixed width and/or height.

Examples

Here are some examples that use the various HTML tags.

Formatted text - Numbered List

Formatted text - Bulleted list

Formatted text with code

Formatted text - Quote

Top Tips

Use the different styling options carefully and not for decoration only.
Consider accessibility, such as color contrast.
SAP Fiori uses theming. Be aware that if you make custom changes to the HTML (such as changing colors), you need to take care of the theming part as well.

When to Use

Information

Be aware that implementing custom content costs time and effort for development.

Use the HTML control to display:

(External) HTML content, such as work instructions or articles with images or videos.
User-created HTML content.
Content created with the rich text editor (as a live view during creation, or in read-only mode).
(While formatted text only supports a limited set of tags, using HTML will give you the full set of HTML tags.)

Do not use the HTML control to display:

In-app help or explanations on how to use your app. Use the Web Assistant instead.
A simple and short text. Use the text control instead.
A semantically-colored text or a status. Use the object status instead.
An object name with a brief descriptive text. Use the object identifier instead.
A number or total. Use the object number instead.
A currency. Use the currency control instead.
A label. Use the label control instead.
A single headline. Use the title control instead.

Components

Where possible, reuse existing controls inside your freestyle content. Do not reinvent standard controls, such as buttons or popovers. Instead, use the the available controls that are described in the SAP Fiori Design Guidelines.

Behavior and Interaction

When creating freestyle content, always apply the SAP Fiori design principles. Design your interactions on the basis of these principles and build upon existing, established patterns.

If part of your content looks similar to an existing control, it should behave similarly. Do not change established interactions or patterns just because freestyle HTML allows you to, or because it looks more fancy. Users appreciate consistency.

Responsiveness

Using freestyle HTML comes with responsibilities. Making sure your content is responsive and adaptive is one of them.

If you have a large amount of content, consider an adaptive approach: Don’t try to cram all the content you show on a desktop into a mobile version of your app. Instead, think about how your customers would use this app while away from their PC. For more information, see Multi-Device Support.

Example

The following image showcases how freestyle HTML can be used to create step-by-step work instructions by combining formatted rich text and videos. If you follow the SAP Fiori design guidelines, the freestyle section integrates seamlessly into the SAP Fiori application (shown here as a schematic object page layout).

Freestyle HTML application example

Top Tips

Using freestyle HTML means that you are responsible for taking care of certain aspects that are otherwise covered automatically by standard SAP Fiori controls:

SAP Fiori design principles
Theming: Ensure correct theming if the HTML is part of the UI. This is not necessary if the HTML content is entirely user-created.
Accessibility: For example: contrast ratios, screen reader support, HCB
Multi-device support: Support all screen sizes for both touch- and mouse-enabled devices, including adaptive and responsive behavior.
Multi-browser support: Make sure your custom content is displayed correctly on all prevalent browsers.
Performance: Optimize performance and ensure that your custom content does not slow down the app or the user’s workflow.
Translatability: Make sure that your content is translated correctly.
Security: See the warning below.

Warning

By default, the HTML content (property: content) is not sanitized and is therefore open to XSS attacks. App teams must either sanitize the content themselves, or activate automatic sanitizing with the sanitizeContent property. For more information, see the API reference.

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

Images can be non-interactive or interactive. Most commonly, clicking an image opens a lightbox or new tab/window and displays a larger version of the image. If you plan to open a popover or dialog, ensure that this information is announced by the screen reader beforehand (property: ariaHasPopup).

The control also offers an image map option, where one image can have several click areas. Don’t use this option. It’s a relic of past times and has the potential to cause usability issues.

Guidelines

Screen Reader Details

Provide an alternative text for each image for screen reader users. Use the alternative text to describe the visual content specifically for blind or visually impaired users. Only decorative images don’t require an alternative text. The alternative text can also be helpful for sighted users if the image is not available or cannot be displayed.
An image can be decorative only. Images are considered as decorative if the same information is also conveyed in another content element and the image content is secondary. In other words, if the image doesn’t provide any additional value, it’s decorative. Decorative images are not announced by screen readers.
In addition to the alternative text, you can also provide screen reader users with more details about an image (property: ariaDetails). For example, images that display technical or scientific content may require background knowledge to understand the image. In the image details, you can include this background knowledge in in text form. For example, if an image shows the construction of a turbine, and certain formulas are required to understand it, the details would describe the formulas first and then relate them to the displayed image content.

Image File and Quality

It is extremely important that you choose the right file format when saving your images. Four image formats are used consistently in browsers – PNG, JPG, GIF, and SVG.
When choosing the format for your image, always be conscious of the image quality and file size.
Optimize high-resolution images to avoid unnecessarily large files. Large image files can severely impede page performance.

Good quality

Poor quality

Responsiveness

The image size adapts responsively to the screen size.

You can also set a fixed width and/or height for an image.

Images on size S

Images on size M

Images on size L

Examples

Image on a small screen

Image in a carousel

Usage

Use the avatar to display:

An image, initials, or placeholder for a user
Standardized images for business-related content (such as products, parts, product and company logos, ad campaign images, …)
Icons
Images with a transparent background
Placeholder images

Do not use the avatar if:

You want to include an image for any other use case (for example, to display decorative images or images in the content area that support or complement the content). Instead, use the image control.
You want to display pictures in a carousel. Instead, use the carousel control.
You want to show an interactive icon. Instead, use the button with an icon inside.

Examples of a user image, user initials, and standard user placeholder icon

Potential product image and product image placeholder

Icon

Responsiveness

The avatar control is adaptive and has five predefined sizes. These are the same for both compact and cozy form factors:

Size	rem	Use for images in…
XS	2 rem	Table list items Card list items
S	3 rem	Card headers Card list items
M	4 rem	App headers for small screen sizes
L	5 rem	App headers for normal screen sizes
XL	7 rem	App headers for large screen sizes

If your use case requires it, you can also set a custom size.

Predefined sizes: XS, S, M, L, XL

Image Fit

You can use the imageFitType property to specify how images fit to the avatar. There are two options: Cover (default) and Contain.

Cover

The size of the image is scaled up to completely cover the control area. As a result, parts of the image may be outside the shape.

Use the Cover fit type if the focal point is in the center of the image.

Contain

The image is scaled down to fit into the control area. The entire image is displayed, but might not fully fill the shape. In this case, the control displays a default background color. The image itself is always centered inside the shape.

Use the Contain fit type for product pictures that need to be displayed in full.

Product image with the fit type 'cover' (left) and 'contain' (right)

Types

Avatar – User Image, Initials, or Placeholder

An avatar is a visual representation of a user in the digital space. Usually, an avatar displays the user in one of the following ways:

A user photo
The user’s initials
A placeholder icon instead of the user’s personal data (photo or initials)

Always display avatars in a circle. This ensures that all users are represented equally on the user interface.

Initials

User image, user initials, and standard user placeholder icon

The initials stand for the first name(s) and last name(s) of a person – for example, JD for Jane Doe, or MvV for Marjolein van Veen. Which name comes first depends on the language-specific settings.

Initials can have up to three alphabetical characters (A-Z, a-z). If more than 3 initials are required for longer names (such as Anna María Agustí Suárez), the gender-neutral placeholder icon is displayed instead. The placeholder is also used if the three letters don’t fit into the circle (for example, WWW).

Some languages don’t build on an alphabet, or don’t use initials at all. In such cases, the gender-neutral person icon is displayed instead.

User initials with 1, 2, and 3 characters

Business Images

Business images display a product, company, object, logo, or other business-related content.

Always use a square for business images.

Examples of product images

Placeholder for Avatar and Business Images

Placeholder images are used for both avatar and business images when no other image is available.

The default placeholder for an avatar is a gender-neutral person icon inside a circle.
The default placeholder for a business image is a neutral product icon inside a square.

Default person and product placeholders

You can specify your own the default placeholder icon for business images.

Always replace the default product icon if there is a more suitable icon for your use case and industry.

Product placeholder images with custom icons

Placeholder Background

By default, the placeholder background color is set to blue (accent color 6). However, to add more visual variety to the UI, you can change the background color using one of the following options:

Accent colors – You can specify one of 10 different accent colors as the placeholder background color.
Random color – The control automatically picks a random color from the accent color palette.

All accent colors can be themed.

User initials in all ten accent colors

Placeholder for Decorative Images in the Content Area

Use the background color ‘placeholder’ for decorative images in the content area, such as images in articles or longer descriptions. In these use cases, the primary focus is on the text and the image content is secondary.

Decorative image in the content area

Placeholder image for secondary content

Images with Transparent Background

You can display images with a transparent background. This can be useful for displaying descriptive illustrations and decorative pictures, for example.

Image with transparent background

Icons

You can use the avatar to display non-interactive display icons. Use the background color ‘placeholder’ to display the icon.

Icons are usually part of an icon font. Do not use icons as images.

If you want to put an action on the icon, use the button with an icon inside instead.

Exemplary icons

Badge

If an avatar is clickable, you can show an optional badge and icon.

Use a badge to indicate that the avatar is interactive.
Use an icon to indicate the action triggered by clicking the avatar.

This feature gives users visual affordance of the available action, and is particularly useful for images. To ensure that the image and the badge icon are properly displayed, don’t use the badge for any avatar sizes smaller than S.

When you use a badge and icon, always provide a corresponding tooltip for your avatar to indicate the action.

Use the following standard icons and tooltip texts:

Icon	Tooltip	Action
	Edit Image	Edit the image. This can include multiple options, such as replacing an image, cropping, visual effects, or uploading a new image.
	*Take a Picture*	Take a photo.
	Zoom In	Zoom into the image.

Avatars with badges

Avatars with badges and edit (left), camera (middle), and zoom in (right)

Guidelines

If you use a custom avatar size with initials or icons:
- Make sure that the font size is consistent with the size of the control itself.
- If your custom size is between two predefined sizes, use the font size for the smaller predefined size.
  Example: If your avatar is 5.5 rem (between sizes L and XL), use the font size for size L (2 rem).
Accessibility: Provide an alternative text for each avatar image for cases when the image is not available or can’t be displayed.
If the avatar is interactive, provide a tooltip to indicate the action (for example, Edit Image or Take a Picture).
Optimize high-resolution images to avoid unnecessarily large files. Large image files can severely impede page performance.

Do

Custom placeholder size with appropriate custom font size

Don't

Custom placeholder size, but icon is too small

Styles

You can add a very subtle border to the avatar (property: ShowBorder).

Images with optional borders

Resources

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

Elements and Controls

Image (guidelines)
Carousel (guidelines)

Implementation

Avatar (SAPUI5 samples)
Avatar (SAPUI5 API reference)

Text

The text control is used to display text. It generally contains the text that developers want apps to display (property: text).

Text used within a form

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

You can define whether the text should wrap or truncate directly (property: wrapping).

You can also define how often the text should wrap before it truncates (property: maxLines).

For more information on using wrapping and truncation, see Wrapping and Truncating Text.

Text – Maximum line examples

Hyphenation

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

Text with hyphenation

Text without hyphenation

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.

Elements and Controls

Label (guidelines)
Wrapping and Truncating Text (guidelines)

Implementation

Text (SAPUI5 samples)
Text (SAPUI5 API reference)
Hyphenation for Text Controls (SAPUI5 documentation)

Expandable Text

The expandable text control provides access to truncated text. A More/Less link shows or hides the full text. You can expand the text inline or display it in a popover, depending on your use case.

Expandable texts in a table

When to Use

Use expandable text if:

You need to handle long texts or descriptions inside a responsive table, list or form.
You need to provide access to truncated text.

Do not use expandable text if:

You need to display text within UI tables (grid table, tree table, analytical table) or the Gantt chart.
You can provide short and meaningful alternatives.
The content is critical for the user. In this case, use short descriptions that fit into the available space.

Components

Text
More/Less link
Optional: Popover

Behavior and Interaction

Expanding/Collapsing the Text

Clicking the More link after the truncated text expands the content inline or in a popover, based on the application settings. When the text is fully visible, the More link is replaced by a Less link.

Clicking the Less link collapses the content again. If a popover is used, it can be closed by clicking Less (1) or clicking anywhere outside the popover (2).

Empty State

The property emptyIndicatorMode behaves as in sap.m.Text. It allows developers to indicate empty texts to users with an n-dash (“-“).

Inline Text

Popover

Responsiveness

In sizes S, M, L, and XL, the text can be expanded inline or in a popover.

If you use a popover, the content is displayed in full screen mode on size S.

Size S – Inline Text

Expand text with 'More'

Text expanded inline, collapse with 'Less'

Size S – Popover

Expand text with 'More'

Popover text uses full screen, collapse with 'Close'

Top Tips

Adapt the number of characters shown before truncation to fit your use case (default: 100 characters).
If using a popover: make sure that the width of the popover always corresponds to the length of the text.
If you use the expandable text in a table, set minimal padding to avoid extra white space within the rows.

Responsiveness

The bar has the same height, text size, and icon size in both cozy and compact formats. The text inside the bar will be truncated if there’s not enough space.

Types

The infobar is shown in the following situations:

After a general filter has been applied
After the user has selected multiple items in a select dialog

General Filter

All applied filters are shown as labels in the infobar.

Infobar after a filter has been applied

Multiselection

If the user selects multiple items, the infobar shows the number of selected items. For more information, see select dialog.

Infobar after multiselection has been applied

Components

The infobar is a toolbar that consists of a label on the left side and an icon on the right side.

The label shows the filter criteria, and the icon selected depends on the use case.

General Filter and Multiselection

No icon is shown. The only exception is the Cancel icon, which is used to reset the current filter criteria. For more information, see the responsive table.

Infobar with optional 'Cancel' icon

Behavior and Interaction

The bar can have two active areas: either the entire bar can be active, or if an icon is added, it creates a second active area. We recommend that you use the active behavior for the bar and the icon.

Bar Area

When the user clicks the bar, the filter dialog from the view settings dialog is shown. If only one filter is applied, the filter can be changed directly in the detailed filter selection. If more than one filter is applied, the filter dialog shows a list with general filter categories.

Clicking the infobar with a single filter shows the detailed filter selection

Clicking the infobar with multiple filters shows the filter categories

Icon Area

Cancel: The user clicks the icon to delete the current filter settings. We recommend using the cancel icon.

States

The infobar has two states – active and non-active (non-clickable). If set to non-active, the whole bar turns gray and the user cannot interact with it.

Infobar - Active state

Infobar - Non-active state

Properties

The infobar is not a separate control. If you want to build an infobar, you need to use the sap.m.Toolbar control. To achieve the infobar design, set the design property of the toolbar to “info”.

Resources

Elements and Controls

Select Dialog (guidelines)
Toolbar (guidelines)
View Settings Dialog (guidelines)

Implementation

Table View Settings Dialog (SAPUI5 samples)
Multi Select Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Toolbar (SAPUI5 API reference)

Label

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.

Label 'Name'

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:

Required, edit mode
Required, display mode
Optional, edit mode
Optional, display mode

Information

To indicate that a field is required, set the required property to true.

Label for required and optional fields

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.

Labels next to the field and labels above the field (recommended)

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.

Developer Hint

The boolean wrapping property for the sap.m.Label control determines whether or not the text wraps .

Note: Only use this property in forms.

Labels in a form (edit and read-only modes, horizontal alignment)

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.

Elements and Controls

Form (guidelines)
Text (guidelines)
Wrapping and Truncating Text (guidelines)
UI Text Guidelines for SAP Fiori Apps (guidelines)
UI Text Space Calculator (guidelines)

Implementation

Label (SAPUI5 samples)
Label (SAPUI5 API reference)
Hyphenation for Text Controls (SAPUI5 documentation)

PDF Viewer

The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open in a popup dialog. In addition, this control allows you to print and download the PDF documents it displays.

Usage

Use the PDF viewer control if:

You want your app to display PDF files on all devices and platforms.
You want the users of your app to be able to preview their documents as PDF files right inside your app.
You need to ensure the consistent behavior of PDF files across all SAP Fiori apps.
You need to work with events (loaded, validation, error) provided by the PDF viewer.

Do not use the PDF viewer if:

You need to provide an interactive PDF file (such as a data input form).

Responsiveness

The PDF viewer control is fully responsive on large-screen devices (size L). The range of responsive behavior available on desktop devices depends on the display mode.

When the PDF viewer opens in a dialog popup:
By default, the dialog supports two or more actions, such as Close and Download. On large-screen (desktop) devices, the action buttons are right-aligned. Use compact mode to ensure optimal padding and margins on desktop devices.
If the content height is increased beyond the screen height, the dialog height cannot go beyond 4 rem from the top and bottom of the screen.
The dialog popup must be resized automatically and cannot support dragging or custom resizing.

When the PDF viewer is embedded in a container on the app page:
The dimensions of the frame in which the PDF file is displayed are defined by the PDF viewer properties.
The control in which the PDF viewer is embedded must have at least 1 rem (16 px) padding to set it apart from the rest of the content.
Only vertical scrolling is allowed. The behavior of desktop touch devices should follow the default behavior of the device or platform.

On mobile devices (smartphones and tablets), the PDF viewer control renders a toolbar with the title and a download icon, which behaves as a standard device/browser file link.

If required, you can customize the behavior for mobile devices and trigger the default device action for the file link from a different anchor in the application.

Size L - Popup mode

Size L - Embedded mode

Size M - Tablet

Size S - Mobile

Layout

Displaying PDF Files in a Dialog

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

A dialog header
A dialog PDF content
A dialog footer

Displaying Embedded PDF Files

The secondary mode of the PDF viewer displays PDF files directly on the page. The application owner, using the PDF viewer control, provides the dimensions of the frame in which the PDF file is embedded. The container should have at least 1 rem (16px) padding from the other content on the page to allow users to distinguish between the embedded PDF and the rest of the page’s content.

When the PDF viewer is embedded on the page, it comprises:

An overflow toolbar header
A container for rendering the PDF file (determined by the application owner)

Schematic visualization of popup mode

Schematic visualization of embedded mode

Developer Hint

The footer can be extended by any desired buttons. However, both the Close and Download buttons must be displayed. This is to ensure that the accessibility requirements are fulfilled. Additional information about action placement and order can be found in the Action Placement article.

Components

The PDF viewer in popup mode is rendered within a Dialog and consists of:

Title(Header): The title text appears in the dialog header.

Content: This area contains the actual PDF file displayed within the content of the dialog.

Footer with actions: The footer contains two mandatory buttons: Close and Download. Other actions can be added to the footer as well.

The PDF viewer in embedded mode can be rendered in any container desired by the application.

The title is displayed within the Toolbar (Overflow Toolbar).

Developer Hint

Use a Flexbox container to wrap the embedded mode of the PDF viewer inside the application.

Behavior and Interaction

All the interactions for the PDF files themselves must remain the same across platforms and browsers: paging, scrolling, zooming, and print must all be available.

Download – For accessibility reasons, the PDF viewer always provides an additional download button for downloading the displayed PDF file and gives users the option to download the embedded PDF renderer on a specific device or system (not all PDF reader plugins have their own download button).

Popup mode interactions:

No custom resizing of the dialog
No dragging of the dialog

Guidelines

To avoid the risk of performance issues, do not embed more than three instances of the PDF viewer per page. You may embed more instances of the PDF viewer in one page if the number of PDFs does not affect performance. Carry out benchmark tests to ensure that performance will not be affected.

The PDF viewer can be used within other sap.m components, such as carousel and panel, respecting the specific guidelines of these components.

The embedded mode of the PDF viewer can be used on the Object Page if the container is as wide as the object page. If this is not the case, use the popup mode of the PDF viewer instead.

The PDF viewer can provide accessibility options when used with screen readers and other accessibility software. To ensure that all the accessibility options are supported, you need to have Adobe PDF Reader installed.

Resources

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

Elements and Controls

Dialog (guidelines)

Implementation

PDF Viewer (SAPUI5 samples)
Dialog (SAPUI5 samples)
Dialog (SAPUI5 API reference)

T Account

In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often referred to as T accounts. A ledger account (or T account) is usually displayed in a format that resembles the letter T: with the account name above the T, debit entries to the left of the T, and credit entries to the right of the T.

T accounts are usually clustered together, so the accountants can analyze how individual line items from different journal entries affect the ledger balances.

Example of a T account

Usage

Use the T account if:

You need to analyze how individual line items affect one or several ledger accounts.
You want to highlight the cross-account impact of one journal entry.
You want to aggregate data of individual ledger accounts and provide total balances.

Do not use the T account if:

You need to aggregate data through a different dimension than the account balance. Use a table instead.
You need to display objects that are not journal entry line items.

Responsiveness

The T account control is fully responsive, and uses 100% of the available width of the container in which it is embedded. Depending on the available width, the number of T accounts on each line is updated dynamically to fit the available space.

On mobile devices, the T account control requires the full available width in order to display all its content.

The minimum width of each T account element is 20 rem (320 px). The width of the T account element grows until it reaches a breakpoint where enough width is available to render 2 or more T accounts on one line, leaving a space of 1 rem (16 px) between the T account items.

Size S

Size M

Size L

Layout

The T account control consists of a header toolbar, an account group heading, and individual T account elements. The header toolbar and account group heading can be hidden on the API level.

Schematic visualization of a T account

Components

By default, the T account control consists of a header toolbar, account group heading, and T accounts.

Header Toolbar

A – Title: Provides a short and meaningful summary of the control’s content.
B – Total Balance: Calculates the overall balance based on total credit and debit amounts of the ledger accounts included.
C – View Switch: Switches the view between the T account view and table view.
D – Settings: Displays a settings dialog, allowing users to show or hide additional information about accounts.

Account Group Heading

Each account group heading uses the expand/collapse behavior of the sap.m.Panel control, with an additional total balance indicator for the T accounts in the group as well as Expand All / Collapse All buttons. The Expand All / Collapse All buttons can be used to expand or collapse the content of all T accounts included in this account group.

A – Expand/Collapse: Expands or collapses the group of accounts.
B – Account Group Title: The name of the group of accounts.
C – Group Balance: Calculates the balance based on total credit and debit entries of all T accounts included in the account group.
D – Expand All: Expands all T accounts within the group of accounts.
E – Collapse All: Collapses all T accounts within the group of accounts.

T Account

Every T account element consists of a heading, debit and credit content headings, and individual ledger entry blocks.

The number of individual entry blocks is unlimited and could potentially reach hundreds of blocks.

The entry blocks are nested under Credit and Debit headings. Each entry block takes 50% of the available width of the container. The credit and debit entry blocks are separated by a 1 rem (16 px) space.

A – Expand/Collapse: Expands or collapses the T account.
B – Account Title: The name of the T account.
C – Account Balance: The sum of all credit and debit entries in the T account.
D – Debit Content Heading
E – Credit Content Heading
F – Entry Block Amount: Provides the amount for a single ledger entry.
G – Entry Block: Displays details of a specific ledger entry.

Header toolbar

Account group heading

T account

Behavior and Interaction

Matching Entries

Each journal entry usually impacts several ledger accounts. When the user clicks an entry in a T account, the control highlights this entry and all related entries in other T accounts, which helps identify matching entries in different accounts.

Highlighting for related entries

Color Indicators

You can allow users to add color indicators to specific journal entries.

The T account control supports this on API level. However, the implementation should be done on the app level.

Information

To ensure consistency with other controls, sap.m.ColorPalette or sap.ui.unified.ColorPicker controls must be used together with standard SAP Fiori color palettes.

Tagging

Drag and Drop

By default, the control arranges T accounts dynamically to consume as little space as possible within the column grid. However, users can rearrange the T accounts freely by dragging them around.

If you would like to let users store their reordered layouts, use the variant management control.

View Settings

The view settings dialog enables the users to show or hide certain attributes of each entry block in a T account.

Additionally, you can show or hide labels that precede the values.

View settings

Resources

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

Elements and Controls

Dialog (guidelines)
Colors (guidelines)

Implementation

T Account (SAPUI5 samples)
T Account (SAPUI5 API)

Status Indicator

The status indicator uses a filled shape to visualize a single value. Unlike the progress indicator or the radial micro chart, the indicator provides the user with a meaningful association through its use of icons. You can embed the status indicator in other controls.

Selection of status indicators

Usage

Use the status indicator if:

You need to display a single value with an icon that describes its context.
You need to display a single value that can be updated in real time without reloading the page.

Do not use the status indicator if:

You need to display a single value within a table. Use the progress indicator or radial micro chart instead.
You need to show a rating. Use the rating indicator instead.
The status indicator does not provide the user with any meaningful information and would be for decoration only.

Responsiveness

The status indicator provides four different sizes: small (size S), medium (size M), large (size L), and extra-large (size XL).

For the small size, the partial fill is replaced by a fully-filled shape that can only indicate the semantic per threshold reached.

Predefined Sizes of the Status Indicator (S, M, L, XL)

Layout

A status indicator can consist of a scalable vector graphics (SVG) shape and additional information, such as a label. The status indicator can be configured as a shape only (default), or as a shape with a fixed label.

Shape Only

By default, the status indicator consists of a single shape. We recommend using this type of status indicator when you need to display a fraction of a value, rather than a specific value.

Status indicator - Shape only

Shape with a Fixed Label

This type of status indicator includes not only a shape, but also a label that uses semantic colors defined for the the value thresholds of the status indicator. In addition, you can switch between different alignment options, such as left, right, top, or bottom. We recommended using this type of status indicator when the user needs to see the exact value.

Status indicator - Shape and label

Types

Linear Fill

Most shapes can be filled linearly. You can set the shape to be filled from the left, right, top, or bottom, or define a specific angle for filling.

Status indicator with linear fill

Circular Fill

For round shapes, you can use the circular fill.

Status indicator with circular fill

Filling Sequence

The sequential fill option is useful when the shape consists of multiple parts. You can fill the parts sequentially one by one, or set your own filling order.

Status indicator with filling sequence

Grouping

You can group several shapes together and decide how the filling should be orchestrated among the shapes in this group.

Status indicator grouping

Thresholds

You can set one or more thresholds for each status indicator and assign a color to each threshold. The color changes when a threshold has been exceeded. Only use thresholds and semantic colors if they are meaningful to the user. Do not use them for decoration.

Status indicator tresholds

Behavior and Interaction

You can define a click event for the status indicator. If the status indicators are grouped, you can define a click event for each status indicator or for the entire group.

Information

When setting a click event for a non-filled shape, we recommend using a darker background color to emphasize that the shape is clickable and not disabled.

Guidelines

Shape Definition

You can download the predefined shapes or create your own custom shapes. For more information on how to create custom shapes correctly, see the API documentation.

Developer Hint

Only circle, rectangle, and path tags are supported inside the SVG file.

Animation Duration

Shape animation follows the motion design principles, with a maximum duration of 250 ms (small moves).

Examples

Status indicator in micro process flow

Status indicator in custom overview page card

Status indicator in object page header

Status indicator in tiles

Resources

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

Elements and Controls

Radial Micro Chart (guidelines)
Progress Indicator (guidelines)
Micro Process Flow (guidelines)
Motion Design (guidelines)

Implementation

Status Indicator (SAPUI5 sample)
Status Indicator (SAPUI5 API reference)
Download Predefined Shapes (ZIP file)

Expandable Text

The expandable text control provides access to truncated text. A More/Less link shows or hides the full text. You can expand the text inline or display it in a popover, depending on your use case.

Expandable texts in a table

When to Use

Use expandable text if:

You need to handle long texts or descriptions inside a responsive table, list or form.
You need to provide access to truncated text.

Do not use expandable text if:

You need to display text within UI tables (grid table, tree table, analytical table) or the Gantt chart.
You can provide short and meaningful alternatives.
The content is critical for the user. In this case, use short descriptions that fit into the available space.

Components

Text
More/Less link
Optional: Popover

Behavior and Interaction

Expanding/Collapsing the Text

Clicking the More link after the truncated text expands the content inline or in a popover, based on the application settings. When the text is fully visible, the More link is replaced by a Less link.

Clicking the Less link collapses the content again. If a popover is used, it can be closed by clicking Less (1) or clicking anywhere outside the popover (2).

Inline Text

Popover

Responsiveness

In sizes S, M, L, and XL, the text can be expanded inline or in a popover.

If you use a popover, the content is displayed in full screen mode on size S.

Size S – Inline Text

Expand text with 'More'

Text expanded inline, collapse with 'Less'

Size S – Popover

Expand text with 'More'

Popover text uses full screen, collapse with 'Close'

Top Tips

Adapt the number of characters shown before truncation to fit your use case (default: 100 characters).
If using a popover: make sure that the width of the popover always corresponds to the length of the text.
If you use the expandable text in a table, set minimal padding to avoid extra white space within the rows.

Responsive Padding and Margin Classes

Responsive padding and margin classes control:

The left and right spacing within the header and content areas
The space between components, such as tables and forms

These classes adapt to different screen sizes at specific breakpoints to ensure that no space is wasted on small screens and that content has more room to breathe on large screens:

Size S screen: Up to 599 pixels
Size M screen: Between 600 pixels and 1023 pixels
Size L screen: Between 1024 pixels and 1439 pixels
Size XL screen: 1440 pixels or more

The visual below illustrates how the padding adapts to different screen sizes.

Spacing adapts to different screen sizes

Developer Hint

The spacing system is built into SAP Fiori Elements, but it must be implemented manually in freestyle SAP Quartz-themed applications using the responsive margin and padding classes in SAPUI5. You can use individual spacing and padding classes to apply individual spacing inside or around controls.

More Information

How to Code Padding and Margin Classes (YouTube video)
Enabling Responsive Paddings (SAPUI5 Demo Kit)
Using Predefined CSS Margin Classes (SAPUI5 Demo Kit)

Resources

Elements and Controls

Content Density (guideline)

Implementation

Standard Margins (implementation)
Standard Paddings (implementation)

Status Indicator

The status indicator uses a filled shape to visualize a single value. Unlike the progress indicator or the radial micro chart, the indicator provides the user with a meaningful association through its use of icons. You can embed the status indicator in other controls.

Selection of status indicators

Usage

Use the status indicator if:

You need to display a single value with an icon that describes its context.
You need to display a single value that can be updated in real time without reloading the page.

Do not use the status indicator if:

You need to display a single value within a table. Use the progress indicator or radial micro chart instead.
You need to show a rating. Use the rating indicator instead.
The status indicator does not provide the user with any meaningful information and would be for decoration only.

Responsiveness

The status indicator provides four different sizes: small (size S), medium (size M), large (size L), and extra-large (size XL).

For the small size, the partial fill is replaced by a fully-filled shape that can only indicate the semantic per threshold reached.

Predefined Sizes of the Status Indicator (S, M, L, XL)

Layout

A status indicator can consist of a scalable vector graphics (SVG) shape and additional information, such as a label. The status indicator can be configured as a shape only (default), or as a shape with a fixed label.

Shape Only

By default, the status indicator consists of a single shape. We recommend using this type of status indicator when you need to display a fraction of a value, rather than a specific value.

Status indicator - Shape only

Shape with a Fixed Label

This type of status indicator includes not only a shape, but also a label that uses semantic colors defined for the the value thresholds of the status indicator. In addition, you can switch between different alignment options, such as left, right, top, or bottom. We recommended using this type of status indicator when the user needs to see the exact value.

Status indicator - Shape and label

Types

Linear Fill

Most shapes can be filled linearly. You can set the shape to be filled from the left, right, top, or bottom, or define a specific angle for filling.

Status indicator with linear fill

Circular Fill

For round shapes, you can use the circular fill.

Status indicator with circular fill

Filling Sequence

The sequential fill option is useful when the shape consists of multiple parts. You can fill the parts sequentially one by one, or set your own filling order.

Status indicator with filling sequence

Grouping

You can group several shapes together and decide how the filling should be orchestrated among the shapes in this group.

Status indicator grouping

Thresholds

You can set one or more thresholds for each status indicator and assign a color to each threshold. The color changes when a threshold has been exceeded. Only use thresholds and semantic colors if they are meaningful to the user. Do not use them for decoration.

Status indicator tresholds

Behavior and Interaction

You can define a click event for the status indicator. If the status indicators are grouped, you can define a click event for each status indicator or for the entire group.

Information

When setting a click event for a non-filled shape, we recommend using a darker background color to emphasize that the shape is clickable and not disabled.

Guidelines

Shape Definition

You can download the predefined shapes or create your own custom shapes. For more information on how to create custom shapes correctly, see the API documentation.

Developer Hint

Only circle, rectangle, and path tags are supported inside the SVG file.

Animation Duration

Shape animation follows the motion design principles, with a maximum duration of 250 ms (small moves).

Examples

Status indicator in micro process flow

Status indicator in custom overview page card

Status indicator in object page header

Status indicator in tiles

Resources

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

Elements and Controls

Radial Micro Chart (guidelines)
Progress Indicator (guidelines)
Micro Process Flow (guidelines)
Motion Design (guidelines)

Implementation

Status Indicator (SAPUI5 sample)
Status Indicator (SAPUI5 API reference)
Download Predefined Shapes (ZIP file)

Image

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.

Responsiveness

The size of the image is simply adjusted to the amount of space available.

Size S (Smartphones)

Object page (size S)

Size M (Tablets)

Object page (size M)

Size L (Desktops)

Object view (size L)

Layout

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.

Images placed in a table

Image placed in the object header

Image placed in a carousel

Image placed in a select dialog

Behavior and Interaction

Clicking an Image (Optional)

Various options are available in terms of size setting, and the images can also be combined with actions. The most common behavior is clicking the image to enlarge it, which opens a lightbox.

Properties

The original image size can be modified.
An image can be connected to an image map.
Connection to an on-screen user assistance is supported.

Guidelines

Provide each image with an alternative text for screen reader users, in case the image is not available or cannot be displayed. In general, the alternative text should contain a description of the visual content, dedicated for blind users’ use.
An image can be decorative only. It is considered decorative if the primary focus is on the text and the image content is secondary.
Do not use placeholder images if you do not plan to replace them with real images.
Do not use icons as images. There is a separate icon font for such cases, which consists of more than 500 scalable pictograms in SAP’s illustrative style.
It is extremely important that you choose the right file format when saving your images. Three image formats are used consistently in browsers – PNG, JPG, and GIF.
When choosing the format for your image, you should always be conscious of the image quality and file size.
High-resolution images that are unnecessarily large in file size can drastically slow down page speed. Optimize your images in this case.

Good quality

Poor quality

Resources

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

Elements and Controls

Carousel (guidelines)
Lightbox (guidelines)

Implementation

Image (SAPUI5 samples)
Image (SAPUI5 API reference)

Infobar

The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:

Filter criteria: The infobar indicates the filter criteria that have been applied for a filter or contextual filter. Do not show the infobar if no filter is applied.
Selected items: In a multi-select dialog, the infobar shows the number of selected items.

The infobar is placed above the content and shows the applied filters

Responsiveness

The bar has the same height, text size, and icon size in both cozy and compact formats. The text inside the bar will be truncated if there’s not enough space.

Text is truncated on a small screen. The example shows an infobar for a contextual filter.

Types

There are three situations in which an infobar is shown:

After a general filter has been applied.
After a contextual filter has been applied.
After the user has selected multiple items in a select dialog.

General Filter

All applied filters are shown as labels in the infobar.

Infobar after a filter has been applied

Contextual Filter

The contextual filter allows the user to see a prefiltered view of a list. The title on the left side and an icon on the right side display the filter criteria. The Filter icon should represent the filter category. Do not use a generic filter icon, otherwise it may be confused with the user-triggered filters. For more information, see contextual filter.

Infobar after a contextual filter has been applied

Multiselection

If the user selects multiple items, the infobar shows the number of selected items. For more information, see select dialog.

Infobar after multiselection has been applied

Components

The infobar is a toolbar that consists of a label on the left side and an icon on the right side.

The label shows the filter criteria, and the icon selected depends on the use case.

General Filter and Multiselection

No icon is shown. The only exception is the Cancel icon, which is used to reset the current filter criteria. For more information, see contextual filter and responsive table.

Infobar with optional 'Cancel' icon

Contextual Filter

The icon is mandatory and represents the current filter criterion.

There is one exception in which it is useful to be able to cancel the contextual filter. In this special case, the contextual filter is used to prefilter the listed items in a select dialog. For this case, use the Cancel icon instead of the Filter icon. For more information, see contextual filter.

In all other use cases, show an icon that represents the filter criterion.

Contextual filter with mandatory filter icon

Behavior and Interaction

The bar can have two active areas: either the entire bar can be active, or if an icon is added, it creates a second active area. We recommend that you use the active behavior for the bar and the icon.

Bar Area

When the user clicks the bar, the filter dialog from the view settings dialog is shown. If only one filter is applied, the filter can be changed directly in the detailed filter selection. If more than one filter is applied, the filter dialog shows a list with general filter categories.

Clicking the infobar with a single filter shows the detailed filter selection

Clicking the infobar with multiple filters shows the filter categories

Icon Area

Cancel: The user clicks the icon to delete the current filter settings. We recommend that you use the cancel icon.
Filter (only contextual filter): Clicking the icon has the same effect as clicking the bar. The filter dialog is shown.

States

The infobar has two states – active and non-active (non-clickable). If set to non-active, the whole bar turns gray and the user cannot interact with it.

Infobar - Active state

Infobar - Non-active state

Properties

The contextual filter is not a separate control. If you want to build an infobar, you need to use the sap.m.toolbar control. To achieve the infobar design, set the design toolbar property to “info”.

Resources

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

Elements and Controls

Select Dialog (guidelines)
Contextual Filter (guidelines)
Toolbar (guidelines)
View Settings Dialog (guidelines)

Implementation

Table View Settings Dialog (SAPUI5 samples)
Multi Select Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Toolbar (SAPUI5 API reference)

Responsive Spacing System

The responsive spacing system uses responsive padding and margin style sheet classes to control and optimize padding between elements that are common to all SAP Fiori interfaces.

Responsive Padding and Margin Classes

Responsive padding and margin classes control:

The left and right spacing within the header and content areas
The space between components, such as tables and forms

These classes adapt to different screen sizes at specific breakpoints to ensure that no space is wasted on small screens and that content has more room to breathe on large screens:

Size S screen: Up to 599 pixels
Size M screen: Between 600 pixels and 1023 pixels
Size L screen: Between 1024 pixels and 1439 pixels
Size XL screen: 1440 pixels or more

The visual below illustrates how the padding adapts to different screen sizes.

Spacing adapts to different screen sizes

Developer Hint

The spacing system is built into SAP Fiori Elements, but it must be implemented manually in freestyle SAP Quartz-themed applications using the responsive margin and padding classes in SAPUI5. You can use individual spacing and padding classes to apply individual spacing inside or around controls.

More Information

How to Code Padding and Margin Classes (YouTube video)
Enabling Responsive Paddings (SAPUI5 Demo Kit)
Using Predefined CSS Margin Classes (SAPUI5 Demo Kit)

Resources

Elements and Controls

Content Density (guideline)

Implementation

Standard Margins (implementation)
Standard Paddings (implementation)

Progress Indicator

The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color to indicate the state of progress. The advancement depends on the specific process. The progress is shown either using absolute numbers or the current percentage of completion together with a progress bar.

Within SAP Fiori, the progress indicator is used as a “meter” or micro chart. It indicates a current object status and is not related to any process that is currently running.

Usage

Use the progress indicator if:

You need to visually show a current status.
You need to visually strengthen a current status.
You need to make different states comparable to each other at a higher level.
You want to show custom values as well as percentages.

Do not use the progress indicator if:

Visual feedback is needed for an ongoing operation. Use a busy indicator instead.
The progress is indeterminate. Use a busy indicator instead.
You want to display a single value in the form of a fillable shape or a group of shapes that describe their context. Use the status indicator instead.

Responsiveness

The progress indicator itself is not responsive. There is no visual difference between the cozy and compact form factors. The compact form factor is used for apps that run on a device operated by a mouse and keyboard. For more information, see Content Density (Cozy and Compact).

Progress indicator in compact mode

Layout

Show the current progress as a percentage value between 0% and 100% (property: percentValue).

Progress indicator displaying 10% progress

Progress indicator displaying 50% progress

Progress indicator displaying 80% progress

Alternatively, you can show the current progress as text in addition to the bar. In this case, the text is shown on the right of the bar if the progress is 50% or less. In all other cases, the progress is shown right-aligned on the bar itself (property: showValue).

Textual presentation for progress of 50% or less

Textual presentation for progress of more than 50%

Progress indicator without textual representation

You also have the option of showing any application-specific text instead of a percentage (property: displayValue).

App-specific textual representation of progress

Styles

Enabled/ Disabled

The progress indicator can be enabled or disabled (property: enabled).

For more information, see UI Element – States.

Enabled progress indicator

Disabled progress indicator

Display State

For usage in read-only forms or read-only tables, the progress indicator provides a “display” state. This state is optimized for reading environments.
The default height is lower, the bar color darker (property: displayOnly).

For more information, see UI Element – States.

Progress indicator in display state

Value States

The progress indicator can visualize different value states that are represented by various theme-dependent semantic colors. The states are: normal, success, warning, error, and information (property: state).

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

Value states can be combined with the “enabled” and “display” states.

Progress indicator in success state

Progress indicator in warning state

Progress indicator in error state

Progress indicator in information state

Guidelines

Use the progress indicator to add clarity and weight to an important state that needs to be perceived very quickly.

Progress indicator used for status display

Label

Always provide a label for the progress indicator.

Exception: If the progress indicator is used as a single control inside a cell of a responsive table, the column header text is used as a label.

Progress indicator in a responsive table

Text Truncation

If the length of the text exceeds the available space in the progress indicator, the text truncates. In this case, clicking the progress indicator displays an information popover with the full text.

For more information, see Truncation.

The information popover is active only when the text is truncated.

Progress indicator with information popover

Group

Use a group of up to five bars to help users compare different states at a high level. Note that in a group of more than five bars, slight differences are much harder to perceive than a numeric display.

If the user has to compare a group of values, be sure to use the same visual display for all of them (only bars or only numbers).

Group of progress indicators

Animation

Although the progress indicator supports an animation mode, do not use it. The animation is slow and does not provide additional value.

Additional Guidelines:

Progress indicators are typically used within (but not restricted to) the following controls:

Do not disable a progress indicator. A progress indicator is not interactive, therefore disabling it has no effect.

Exception: The progress indicator is shown inside a disabled UI area, such as a completely disabled form or panel.

Properties

The following additional properties are available for the progress indicator:

The width property defines the width of the progress indicator. The height property defines the height of the progress indicator. Adapt it only if the default height does not fit into the surrounding context. Do not use a height below 1.5 rems if text is shown inside the progress indicator.
The textDirection property is used for localiaztion (right-to-left languages).
The busy property sets the progress indicator to busy state.
The visible property shows or hides the progress indicator.
The tooltip property does not have an effect.

Resources

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

Elements and Controls

Busy Dialog (guidelines)
Busy Indicator (guidelines)
Busy State (guidelines)
How to Use Semantic Colors (guidelines)

Implementation

Progress Indicator (SAPUI5 samples)
Progress Indicator (SAPUI5 API reference)

Generic Tag

The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.

Usage

Use the generic tag:

To display complementary information for an object, such as a KPI.
In the dynamic page header or in the header area of an object page, following the title.

Do not use the generic tag:

For decorative purposes.
For navigation.

Structure

A – Status Indicator / Criticality Indicator – Mandatory

The indicator displays the status/criticality of the tag. Only use it with the available semantic colors.

B – Message Icon – Optional

The message icon can help visualize the status/criticality of the tag. The color of the icon is always the same as the color of the status indicator. Always use the correct message icon for the respective status/criticality.

C – Title – Mandatory

Always use a meaningful title. Keep it simple and try to use no more than 3 words.

D – Value and Unit of Measure – Optional

The value represents the numeric (key) attribute and its unit. The value has a semantic color, and the unit inherits the color from the value. The color of the value must be the same as the color of the status indicator. For more information, see Object Number.

Generic Tag for KPIs

Structure of generic tag

To display KPIs, use the following structure:

A – Status indicator / criticality indicator
C – Title
D – Value and unit of measure

KPI as a generic tag

The generic tag for KPIs also contains an error state. It is shown when the KPI cannot be properly displayed.

KPI error

Responsiveness

The generic tag itself is not responsive. To enable responsiveness, use the overflow toolbar.

Generic tag overflow on object page

Behavior and Interaction

The generic tag has a press event. Use this event only to open a popover or analytical card containing relevant information, using the progressive disclosure technique.

Resources

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

Elements and Controls

Semantic Colors (guidelines)
Object Number (guidelines)
Analytical Card (guidelines)
Overflow Toolbar (guidelines)

Implementation

Generic Tag (SAPUI5 samples)

Object Display Components

There are four types of object display components: object status, object identifier, object number, and object marker. Each one is connected to an object and displays a certain type of information (status, identifier, number, marker).

Object status: a short text that represents the semantic status of an object
Object identifier: a short text that represents the key identifier of an object
Object number: a short text that represents the numeric (key) attribute of an object and its unit
Object marker: indicates the technical status of an object

From top to bottom: Examples for the object status, object identifier, object number, and object marker

Usage

Use the object display components if:

You need to display the semantic status of an object: negative, critical, positive, or neutral. Use the object status for this.
You want to display the key number of an object. In this case, use the object number and keep the default emphasized setting.
You need to display one or more numeric attributes of an object (for example, for objects you want to compare). Use the object number for this.
You want to indicate the key identifier of the object. Use the object identifier for this.
You want to display the technical state of an object (draft, unsaved changes, locked, favorite, flagged). Use the object marker for this, unless you want to display the status of the object in the business life cycle. In the latter case, consider using the object status instead.
You need to show that the current object instance is locked by another user. Use the object marker for this.

Do not use the object display components if:

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

Responsiveness

The object status wraps if it is longer than the available screen width.
The object identifier text wraps if the size of the screen becomes too small to display the entire text on one line.
The object number does not wrap or truncate. For large numbers, you need to consider using the appropriate formatting.
The object marker does not wrap or truncate. It comes with different display options: IconAndText, IconOnly and Text. On size S, the display option IconAndText only displays the icon due to lack of space. The other options are displayed as normal.

For more information about the responsive behavior of text in general, see Wrapping and Truncating Text.

From top to bottom: Wrapping examples for the object status, object identifier, formatted object number, and two versions of the object marker

Components

Object Status

The object status is a short text that represents the semantic status of an object.

It consists of the following:

A semantically colored text indicating its status (property: text). We recommend using this semantically colored text-only option on its own. Check out the How to Use Semantic Colors / Industry-Specific Colors article for color options.
An optional icon (property: icon). If you need to have an icon, use one of the following:
= positive/success
= critical/warning
= negative/error
Note that there is no generic icon for “neutral” across industries. If you have a neutral object status, use the text-only version, or a blank icon. Only in exceptional cases, use an icon that means neutral in the app’s specific business context.

Text-only object status and icon with text object status

An optional inverted visualization. Use the inverted object status if the information is crucial for the user’s actions and needs to stand out visually (for example, in table list items).
An optional link (property: active). If the object status is used as a link, a hover effect is shown on non-touch devices. Use this feature if the user needs additional information about the status (for example, in a popover). Note that if you use the object status as a combination of icon and text, there is no hover effect for the icon.

Inverted object status (left) and object status in hover state (right)

An optional larger font (CSS class: sapMObjectStatusLarge). Use this feature if the object status is important in the business context and needs to stand out visually in the page header (for example, key value facets in an object page).

Larger object status in the header facet for an object page

Guidelines

Ensure that the context for the object status is properly described. The semantic meaning must also be understandable for color-blind people. Use the object status in combination with a label, icon, unit, or attribute to make the value state clear.
In rare cases, an object can have two statuses at the same time. In this case, use the inverted text-only version for the most important status, and the normal text-only version (with an optional icon) for the less important status.
If you use the object status in a table, follow the corresponding sorting guidelines.
To prevent the text being read as a link, don’t use the blue “information state” for the object status.

Object Identifier

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

It has the following characteristics:

A title text (property: title)
An optional link (property: titleActive). In this case, the event can open the quick view of the object or a popover for example.
An optional additional descriptive text (property: text)

Guidelines

The object identifier should be easily readable (preferably the display text and not the ID).
If the object’s ID is necessary to distinguish between items that use the same title, it should appear as descriptive text below the title (property: text).

Normal object identifier, object identifier with link, and object identifier with descriptive text

Object Number

The object number is a short text that represents the numeric (key) attribute of an object and its unit.

It consists of the following:

A colored text (property: number) based on the semantic color palette. Check out the How to Use Semantic Colors / Industry-Specific Colors article for more details.
An emphasized text which you can set to non-emphasized when you use it in the content area (property: emphasized).
An optional unit (property: unit).

Emphasized and non-emphasized object numbers

Object number used as a semantic attribute (weight)

An optional larger font (CSS class: sapMObjectNumberLarge). Use this feature if the object number is important in the business context and needs to stand out visually in the page header (for example, key value facets in an object page). Once the large font is applied, the object number can no longer be emphasized.

Guidelines

Ensure that the context for the object number is properly described. The semantic meaning must also be understandable for color-blind people. Use the object number in combination with a label, icon, unit, or attribute to make the value state clear.
The object number can also be used to visualize other semantic numeric attributes. In this case, they are not emphasized unless they are the key attribute, such as a sum.
Emphasize the object number if it is used as a line item status in a table.

Emphasized and non-emphasized object numbers in the header facet for an object page

Object Marker

The object marker indicates the technical status of an object and can be interactive. It is enabled for the dynamic page layout, the snapping header, the object page header, the upload collection control, and the object list item. You can represent the technical status as an icon, with an icon and text, or as text only, depending on the screen size.

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

Editing Status: Draft, Unsaved Changes, Locked. The editing status is part of the draft handling concept.
Favorite
Flag

Flag and Favorite are usually displayed as icons on all screen sizes. For more information, see Flag and Favorite.

An object can have multiple technical statuses at the same time. However, because the editing statuses are mutually exclusive, users will see a maximum of 3 technical statuses for an object: Flag, Favorite, and one Editing Status.

Developer Hint

The app developer is responsible for the technical statuses. Every technical status has a default visualization that can be changed by the app developer depending on the usage context. For details regarding draft handling, see How to Display the Editing Status in the Draft Handling article.

Icons for draft, unsaved changes, locked, favorite, and flag (from left to right)

Editing status examples

Resources

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

Elements and Controls

How to Use Semantic Colors (guidelines)
Wrapping and Truncating Text (guidelines)
Draft Handling (guidelines)
Flag and Favorite (guidelines)
Responsible Table (guidelines)

Implementation

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

HTML

The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise not be possible with standard SAP Fiori controls.

Warning

If you opt to use freestyle HTML, you must make sure that standard capabilities such as theming, accessibility, and responsiveness are supported.

For more information, see Top Tips below.

When to Use

Information

Be aware that implementing custom content costs time and effort for development.

Use the HTML control to display:

(External) HTML content, such as work instructions or articles with images or videos.
User-created HTML content.
Content created with the rich text editor (as a live view during creation, or in read-only mode).
(While formatted text only supports a limited set of tags, using HTML will give you the full set of HTML tags.)

Do not use the HTML control to display:

In-app help or explanations on how to use your app. Use the Web Assistant instead.
A simple and short text. Use the text control instead.
A semantically-colored text or a status. Use the object status instead.
An object name with a brief descriptive text. Use the object identifier instead.
A number or total. Use the object number instead.
A currency. Use the currency control instead.
A label. Use the label control instead.
A single headline. Use the title control instead.

Components

Where possible, reuse existing controls inside your freestyle content. Do not reinvent standard controls, such as buttons or popovers. Instead, use the the available controls that are described in the SAP Fiori Design Guidelines.

Behavior and Interaction

When creating freestyle content, always apply the SAP Fiori design principles. Design your interactions on the basis of these principles and build upon existing, established patterns.

If part of your content looks similar to an existing control, it should behave similarly. Do not change established interactions or patterns just because freestyle HTML allows you to, or because it looks more fancy. Users appreciate consistency.

Responsiveness

Using freestyle HTML comes with responsibilities. Making sure your content is responsive and adaptive is one of them.

If you have a large amount of content, consider an adaptive approach: Don’t try to cram all the content you show on a desktop into a mobile version of your app. Instead, think about how your customers would use this app while away from their PC. For more information, see Multi-Device Support.

Example

The following image showcases how freestyle HTML can be used to create step-by-step work instructions by combining formatted rich text and videos. If you follow the SAP Fiori design guidelines, the freestyle section integrates seamlessly into the SAP Fiori application (shown here as a schematic object page layout).

Freestyle HTML application example

Top Tips

Using freestyle HTML means that you are responsible for taking care of certain aspects that are otherwise covered automatically by standard SAP Fiori controls:

SAP Fiori design principles
Theming: Ensure correct theming if the HTML is part of the UI. This is not necessary if the HTML content is entirely user-created.
Accessibility: For example: contrast ratios, screen reader support, HCB
Multi-device support: Support all screen sizes for both touch- and mouse-enabled devices, including adaptive and responsive behavior.
Multi-browser support: Make sure your custom content is displayed correctly on all prevalent browsers.
Performance: Optimize performance and ensure that your custom content does not slow down the app or the user’s workflow.
Translatability: Make sure that your content is translated correctly.
Security: See the warning below.

Warning

By default, the HTML content (property: content) is not sanitized and is therefore open to XSS attacks. App teams must either sanitize the content themselves, or activate automatic sanitizing with the sanitizeContent property. For more information, see the API reference.

Usage

Use the avatar to display:

An image, initials, or placeholder for a user
Standardized images for business-related content (such as products, parts, product and company logos, ad campaign images, …)
Icons
Images with a transparent background
Placeholder images

Do not use the avatar if:

You want to include an image for any other use case. Instead, use the image control.
You want to display pictures in a carousel. Instead, use the carousel control.
You want to show an interactive icon. Instead, use the button with an icon inside.

Examples of a user image, user initials, and standard user placeholder icon

Potential product image and product image placeholder

Icon

Responsiveness

The avatar control is adaptive and has five predefined sizes. These are the same for both compact and cozy form factors:

Size	rem	Use for images in…
XS	2 rem	Table list items Card list items
S	3 rem	Card headers Card list items
M	4 rem	App headers for small screen sizes
L	5 rem	App headers for normal screen sizes
XL	7 rem	App headers for large screen sizes

If your use case requires it, you can also set a custom size.

Predefined sizes: XS, S, M, L, XL

Image Fit

You can use the imageFitType property to specify how images fit to the avatar. There are two options: Cover (default) and Contain.

Cover

The size of the image is scaled up to completely cover the control area. As a result, parts of the image may be outside the shape.

Use the Cover fit type if the focal point is in the center of the image.

Contain

The image is scaled down to fit into the control area. The entire image is displayed, but might not fully fill the shape. In this case, the control displays a default background color. The image itself is always centered inside the shape.

Use the Contain fit type for product pictures that need to be displayed in full.

Product image with the fit type 'cover' (left) and 'contain' (right)

Types

Avatar – User Image, Initials, or Placeholder

An avatar is a visual representation of a user in the digital space. Usually, an avatar displays the user in one of the following ways:

A user photo
The user’s initials
A placeholder icon instead of the user’s personal data (photo or initials)

Always display avatars in a circle. This ensures that all users are represented equally on the user interface.

Initials

User image, user initials, and standard user placeholder icon

The initials stand for the first name(s) and last name(s) of a person – for example, JD for Jane Doe, or MvV for Marjolein van Veen. Which name comes first depends on the language-specific settings.

Initials can have up to three alphabetical characters (A-Z, a-z). If more than 3 initials are required for longer names (such as Anna María Agustí Suárez), the gender-neutral placeholder icon is displayed instead. The placeholder is also used if the three letters don’t fit into the circle (for example, WWW).

Some languages don’t build on an alphabet, or don’t use initials at all. In such cases, the gender-neutral person icon is displayed instead.

User initials with 1, 2, and 3 characters

Business Images

Business images display a product, company, object, logo, or other business-related content.

Always use a square for business images.

Examples of product images

Placeholder for Avatar and Business Images

Placeholder images are used for both avatar and business images when no other image is available.

The default placeholder for an avatar is a gender-neutral person icon inside a circle.
The default placeholder for a business image is a neutral product icon inside a square.

Default person and product placeholders

You can specify your own the default placeholder icon for business images.

Always replace the default product icon if there is a more suitable icon for your use case and industry.

Product placeholder images with custom icons

Placeholder Background

By default, the placeholder background color is set to blue (accent color 6). However, to add more visual variety to the UI, you can change the background color using one of the following options:

Accent colors – You can specify one of 10 different accent colors as the placeholder background color.
Random color – The control automatically picks a random color from the accent color palette.

All accent colors can be themed.

User initials in all ten accent colors

Placeholder for Decorative Images in the Content Area

Use the background color ‘placeholder’ for decorative images in the content area, such as images in articles or longer descriptions. In these use cases, the primary focus is on the text and the image content is secondary.

Decorative image in the content area

Placeholder image for secondary content

Images with Transparent Background

You can display images with a transparent background. This can be useful for displaying descriptive illustrations and decorative pictures, for example.

Image with transparent background

Icons

You can use the avatar to display non-interactive display icons. Use the background color ‘placeholder’ to display the icon.

If you want to put an action on the icon, use the button with an icon inside instead.

Exemplary icons

Badge

If an avatar is clickable, you can show an optional badge and icon.

Use a badge to indicate that the avatar is interactive.
Use an icon to indicate the action triggered by clicking the avatar.

This feature gives users visual affordance of the available action, and is particularly useful for images. To ensure that the image and the badge icon are properly displayed, don’t use the badge for any avatar sizes smaller than S.

When you use a badge and icon, always provide a corresponding tooltip for your avatar to indicate the action.

Use the following standard icons and tooltip texts:

Icon	Tooltip	Action
	Edit Image	Edit the image. This can include multiple options, such as replacing an image, cropping, visual effects, or uploading a new image.
	*Take a Picture*	Take a photo.
	Zoom In	Zoom into the image.

Avatars with badges

Avatars with badges and edit (left), camera (middle), and zoom in (right)

Guidelines

If you use a custom avatar size with initials or icons:
- Make sure that the font size is consistent with the size of the control itself.
- If your custom size is between two predefined sizes, use the font size for the smaller predefined size.
  Example: If your avatar is 5.5 rem (between sizes L and XL), use the font size for size L (2 rem).
Accessibility: Provide an alternative text for each avatar image for cases when the image is not available or can’t be displayed.
If the avatar is interactive, provide a tooltip to indicate the action (for example, Edit Image or Take a Picture).
Optimize high-resolution images to avoid unnecessarily large files. Large image files can severely impede page performance.

Do

Custom placeholder size with appropriate custom font size

Don't

Custom placeholder size, but icon is too small

Styles

You can add a very subtle border to the avatar (property: ShowBorder).

Images with optional borders

Resources

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

Elements and Controls

Image (guidelines)
Carousel (guidelines)

Implementation

Avatar (SAPUI5 samples)
Avatar (SAPUI5 API reference)

Lightbox

The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the rest of the screen.

Usage

Use the lightbox if:

The thumbnail view is not detailed enough, and it would help the user to see the image in its original size.
The original size of the image is bigger than the thumbnail.

Do not use the lightbox if:

The image you are using is smaller than or as big as the thumbnail.
There is another click event attached to the image control.
You are using an image placeholder to display the object.

Responsiveness

The lightbox container is displayed in the middle of the screen.

The image is displayed in its original size unless the original image size is bigger than the size of the screen. In this case, the image is resized proportionally in order to be fully visible and fit on the screen.

On a mobile device, flipping the device to landscape mode will flip the lightbox. The image will then be adjusted to fit the new dimensions.

Lightbox - Size S

Lightbox - Size M

Lightbox - Size L

Components

The lightbox contains the following components:

Lightbox container: This is the main container that holds all other components.
Image: This component is an embedded image control that displays the image file with the maximum available size. The size of the image should not exceed the original size and it should fit within the screen.
Image title: This component is mandatory and is used to describe the object to which the image is attached.
Image subtitle: This component is optional and is used to give additional information about the object.
Close button: This is a mandatory component and is used to close the lightbox container.

The components of the lightbox

Behavior and Interaction

Basic Interactions

The lightbox control is attached to the press event of the image control. To trigger the lightbox, the user should click an image. Every image with an attached lightbox control is indicated with a zoom icon on the bottom right.

Lightbox - Zoom icon

When the lightbox control is triggered, the lightbox overlays the page content and the rest of the screen is dimmed out.

If it takes more than one second to load the original image, a busy indicator is shown inside the lightbox container.

The user can close the lightbox by clicking the Close button or by clicking outside of the lightbox container.

Lightbox - Basic interactions

Lightbox - Image loading

Error Handling

An error message is displayed inside the lightbox when:

The original file is missing or the connection to the server is lost.
The image takes more than 10 seconds to load due to a server error or the size of the image.

Developer Hint

The URL of the image is mandatory. If it is not specified, the lightbox will not be triggered.

Lightbox - Error message

Resources

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

Elements and Controls

Image (guidelines)
Message Page (guidelines)

Implementation

Lightbox (SAPUI5 samples)
Lightbox (SAPUI5 API reference)

Object Display Components

There are four types of object display components: object status, object identifier, object number, and object marker. Each one is connected to an object and displays a certain type of information (status, identifier, number, marker).

Object status: a short text that represents the semantic status of an object
Object identifier: a short text that represents the key identifier of an object
Object number: a short text that represents the numeric (key) attribute of an object and its unit
Object marker: indicates the technical status of an object

From top to bottom: exemplary object status, object identifier, object number, and object marker

Usage

Use the object display components if:

You need to display the semantic status of an object: negative, critical, positive, or neutral. Use the object status for this.
You want to display the key number of an object. In this case, use the object number and keep the default emphasized setting.
You need to display one or more numeric attributes of an object (for example, for objects you want to compare). Use the object number for this.
You want to indicate the key identifier of the object. Use the object identifier for this.
You want to display the technical state of an object (draft, unsaved changes, locked, favorite, flagged). Use the object marker for this, unless you want to display the status of the object in the business life cycle. In the latter case, consider using the object status instead.
You need to show that the current object instance is locked by another user. Use the object marker for this.

Do not use the object display components if:

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

Responsiveness

The object status wraps if it is longer than the available screen width.
The object identifier text wraps if the size of the screen becomes too small to display the entire text on one line.
The object number does not wrap or truncate. For large numbers, you need to consider using the appropriate formatting.
The object marker does not wrap or truncate. It comes with different display options: IconAndText, IconOnly and Text. On size S, the display option IconAndText only displays the icon due to lack of space. The other options are displayed as normal.

For more information about the responsive behavior of text in general, see Wrapping and Truncating Text.

From top to bottom: Wrapping examples for the object status, object identifier, formatted object number, and two versions of the object marker

Components

Object Status

The object status is a short text that represents the semantic status of an object.

It consists of the following:

A semantically colored text indicating its status (property: text). We recommend using this semantically colored text-only option on its own. Check out the How to Use Semantic Colors / Industry-Specific Colors article for color options.
An optional icon (property: icon). If you need to have an icon, use one of the following:
= positive/success
= critical/warning
= negative/error
Note that there is no generic icon for “neutral” across industries. If you have a neutral object status, use the text-only version, a blank icon, or an icon that means neutral in the app’s specific business context.

Text-only object status and icon with text object status

An optional inverted visualization. Use the inverted object status if the information is crucial for the user’s actions and needs to stand out visually (for example, in table list items).
An optional link (property: active). If the object status is used as a link, a hover effect is shown on non-touch devices. Use this feature if the user needs additional information about the status (for example, in a popover). Note that if you use the object status as a combination of icon and text, there is no hover effect for the icon.

Inverted object status (left) and object status in hover state (right)

An optional larger font (CSS class: sapMObjectStatusLarge). Use this feature if the object status is important in the business context and needs to stand out visually in the page header (for example, key value facets in an object page).

Larger object status

Guidelines

In rare cases, an object can have two statuses at the same time. In this case, use the inverted text-only version for the most important status, and the normal text-only version (with an optional icon) for the less important status.
If you use the object status in a table, follow the corresponding sorting guidelines.
To prevent the text being read as a link, don’t use the blue “information state” for the object status.

Object Identifier

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

It has the following characteristics:

A title text (property: title)
An optional link (property: titleActive). In this case, the event can open the quick view of the object or a popover for example.
An optional additional descriptive text (property: text)

Guidelines

The object identifier should be easily readable (preferably the display text and not the ID).
If the object’s ID is necessary to distinguish between items that use the same title, it should appear as descriptive text below the title (property: text).

Normal object identifier, object identifier with link, and object identifier with descriptive text

Object Number

The object number is a short text that represents the numeric (key) attribute of an object and its unit.

It consists of the following:

A colored text (property: number) based on the semantic color palette. Check out the How to Use Semantic Colors / Industry-Specific Colors article for more details.
An emphasized text which you can set to non-emphasized when you use it in the content area (property: emphasized).
An optional unit (property: unit).

Emphasized and non-emphasised object numbers

Object number used as a semantic attribute (weight)

An optional larger font (CSS class: sapMObjectNumberLarge). Use this feature if the object number is important in the business context and needs to stand out visually in the page header (for example, key value facets in an object page). Once the large font is applied, the object number can no longer be emphasized.

Guidelines

The object number can also be used to visualize other semantic numeric attributes. In this case, they are not emphasized unless they are the key attribute, such as a sum.
Emphasize the object number if it is used as a line item status in a table.

Emphasized and non-emphasized object numbers

Object Marker

The object marker indicates the technical status of an object and can be interactive. It is enabled for the dynamic page layout, snapping header, object page header, upload collection, and object list item. The technical status can be represented as an icon, with an icon and text, or as text only, depending on the screen size.

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

Editing Status: Draft, Unsaved Changes, Locked. The editing status is part of the draft handling concept.
Favorite
Flag

Flag and Favorite are usually displayed as icons on all screen sizes. For more information, see Flag and Favorite.

An object can have multiple technical statuses at the same time. However, because the editing statuses are mutually exclusive, users will see a maximum of 3 technical statuses for an object: Flag, Favorite, and one Editing Status.

Developer Hint

The app developer is responsible for the technical statuses. Every technical status has a default visualization that can be changed by the app developer depending on the usage context. For details regarding draft handling, please see How to Display the Editing Status in the Draft Handling article.

Icons for draft, unsaved changes, locked, favorite, and flag (from left to right)

Editing status examples

Resources

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

Elements and Controls

How to Use Semantic Colors (guidelines)
Wrapping and Truncating Text (guidelines)
Draft Handling (guidelines)
Flag and Favorite (guidelines)
Responsible Table (guidelines)

Implementation

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

Progress Indicator

The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color to indicate the state of progress. The advancement depends on the specific process. The progress is shown either using absolute numbers or the current percentage of completion together with a progress bar.

Within SAP Fiori, the progress indicator is used as a “meter” or micro chart. It indicates a current object status and is not related to any process that is currently running.

Usage

Use the progress indicator if:

You need to visually show a current status.
You need to visually strengthen a current status.
You need to make different states comparable to each other at a higher level.
You want to show custom values as well as percentages.

Do not use the progress indicator if:

Visual feedback is needed for an ongoing operation. Use a busy indicator instead.
The progress is indeterminate. Use a busy indicator instead.
You want to display a single value in the form of a fillable shape or a group of shapes that describe their context. Use the status indicator instead.

Responsiveness

The progress indicator itself is not responsive. There is no visual difference between the cozy and compact form factors. The compact form factor is used for apps that run on a device operated by a mouse and keyboard. For more information, see Content Density (Cozy and Compact).

Progress indicator in compact mode

Layout

Show the current progress as a percentage value between 0% and 100% (property: percentValue).

Progress indicator displaying 10% progress

Progress indicator displaying 50% progress

Progress indicator displaying 80% progress

Alternatively, you can show the current progress as text in addition to the bar. In this case, the text is shown on the right of the bar if the progress is 50% or less. In all other cases, the progress is shown right-aligned on the bar itself (property: showValue).

Textual presentation for progress of 50% or less

Textual presentation for progress of more than 50%

Progress indicator without textual representation

You also have the option of showing any application-specific text instead of a percentage (property: displayValue).

App-specific textual representation of progress

Styles

The progress indicator can be enabled or disabled (property: enabled)

Enabled progress indicator

Disabled progress indicator

For usage in read-only forms or read-only tables, the progress indicator provides a “display” state. This state is optimized for reading environments. The default height is lower, and the bar color darker (property: displayOnly).

Progress indicator in display state

The progress indicator can visualize different value states that are represented by various theme-dependent semantic colors. The states are: normal, success, warning, error, and information (property: state).

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

Value states can be combined with the “enabled” and “display” states.

Progress indicator in success state

Progress indicator in warning state

Progress indicator in error state

Progress indicator in information state

Guidelines

Use the progress indicator to add clarity and weight to an important state that needs to be perceived very quickly.

Progress indicator used for status display

Always provide a label for the progress indicator.

Exception: If the progress indicator is used as a single control inside a cell of a responsive table, the column header text is used as a label.

Progress indicator in a responsive table

Use a group of up to five bars to help users compare different states at a high level. Note that in a group of more than five bars, slight differences are much harder to perceive than a numeric display.

If the user has to compare a group of values, be sure to use the same visual display for all of them (only bars or only numbers).

Group of progress indicators

Progress indicators are typically used within (but not restricted to) the following controls:

Do not disable a progress indicator. A progress indicator is not interactive, therefore disabling it has no effect.

Exception: The progress indicator is shown inside a disabled UI area, such as a completely disabled form or panel.

Properties

The following additional properties are available for the progress indicator:

The width property defines the width of the progress indicator. The height property defines the height of the progress indicator. Adapt it only if the default height does not fit into the surrounding context. Do not use a height below 1.5 rems if text is shown inside the progress indicator.
The textDirection property is used for localiaztion (right-to-left languages).
The busy property sets the progress indicator to busy state.
The visible property shows or hides the progress indicator.
The tooltip property does not have an effect.

Resources

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

Elements and Controls

Busy Dialog (guidelines)
Busy Indicator (guidelines)
Busy State (guidelines)
How to Use Semantic Colors (guidelines)

Implementation

Progress Indicator (SAPUI5 samples)
Progress Indicator (SAPUI5 API reference)

Label

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.

Label 'Name'

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:

Required, edit mode
Required, display mode
Optional, edit mode
Optional, display mode

Information

To indicate that a field is required, set the required property to true.

Label for required and optional fields

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.

Labels next to the field and labels above the field (recommended)

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.

Developer Hint

The boolean wrapping property for the sap.m.Label control determines whether or not the text wraps .

Note: Only use this property in forms.

Labels in a form (edit and read-only modes, horizontal alignment)

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.
Do not use bold labels.
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.

Elements and Controls

Form (guidelines)
Text (guidelines)
Wrapping and Truncating Text (guidelines)
UI Text Guidelines for SAP Fiori Apps (guidelines)
UI Text Space Calculator (guidelines)

Implementation

Label (SAPUI5 samples)
Label (SAPUI5 API reference)
Hyphenation for Text Controls (SAPUI5 documentation)

Infobar

The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:

Filter criteria: The infobar indicates the filter criteria that have been applied for a filter or contextual filter. Do not show the infobar if no filter is applied.
Selected items: In a multi-select dialog, the infobar shows the number of selected items.

The infobar is placed above the content and shows the applied filters

Responsiveness

The bar has the same height, text size, and icon size in both cozy and compact formats. The text inside the bar will be truncated if there’s not enough space.

Text is truncated on a small screen. The example shows an infobar for a contextual filter.

Types

There are three situations in which an infobar is shown:

After a general filter has been applied.
After a contextual filter has been applied.
After the user has selected multiple items in a select dialog.

General Filter

All applied filters are shown as labels in the infobar.

Infobar after a filter has been applied

Contextual Filter

The contextual filter allows the user to see a prefiltered view of a list. The title on the left side and an icon on the right side display the filter criteria. The Filter icon should represent the filter category. Do not use a generic filter icon, otherwise it may be confused with the user-triggered filters. For more information, see contextual filter.

Infobar after a contextual filter has been applied

Multiselection

If the user selects multiple items, the infobar shows the number of selected items. For more information, see select dialog.

Infobar after multiselection has been applied

Components

The infobar is a toolbar that consists of a label on the left side and an icon on the right side.

The label shows the filter criteria, and the icon selected depends on the use case.

General Filter and Multiselection

No icon is shown. The only exception is the Cancel icon, which is used to reset the current filter criteria.

Infobar with optional Cancel icon

Contextual Filter

The icon is mandatory and represents the current filter criterion.

There is one exception in which it is useful to be able to cancel the contextual filter. In this special case, the contextual filter is used to prefilter the listed items in a select dialog. For this case, use the Cancel icon instead of the Filter icon. For more information, see contextual filter.

In all other use cases, show an icon that represents the filter criterion.

Contextual filter with filter icon

Behavior and Interaction

The bar can have two active areas: either the entire bar can be active, or if an icon is added, it creates a second active area. We recommend that you use the active behavior for the bar and the icon.

Bar Area

When the user clicks the bar, the filter dialog from the view settings dialog is shown. If only one filter is applied, the filter can be changed directly in the detailed filter selection. If more than one filter is applied, the filter dialog shows a list with general filter categories.

Clicking the infobar with a single filter shows the detailed filter selection.

Clicking the infobar with multiple filters shows the filter categories.

Icon Area

Cancel: The user clicks the icon to delete the current filter settings. We recommend that you use the cancel icon.
Filter (only contextual filter): Clicking the icon has the same effect as clicking the bar. The filter dialog is shown.

States

The infobar has two states – active and non-active (non-clickable). If set to non-active, the whole bar turns gray and the user cannot interact with it.

Infobar - Active state

Infobar - Non-active state

Properties

The contextual filter is not a separate control. If you want to build an infobar, you need to use the sap.m.toolbar control. To achieve the infobar design, set the design toolbar property to “info”.

Resources

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

Elements and Controls

Select Dialog (guidelines)
Contextual Filter (guidelines)
Toolbar (guidelines)
View Settings Dialog (guidelines)

Implementation

Table View Settings Dialog (SAPUI5 samples)
Multi Select Dialog (SAPUI5 samples)
Toolbar (SAPUI5 samples)
Toolbar (SAPUI5 API reference)

Token

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.

Token

Usage

Use tokens only in the multi-combo box, multi-input control, or value help dialog.

Components

The tokenizer is an invisible container that can display multiple tokens.

Tokens have the following properties:

They usually contain single text items.
They may also contain key-value pairs, such as John Miller (ID1234567).
They contain a Remove icon, which is invisible if the token is in edit mode.

Tokens with a surrounding tokenizer

Behavior and Interaction

Interacting

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

Selecting and Deselecting Tokens

Users can select tokens by clicking 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 clicking the relevant tokens.

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 a new position. The tokens between these two cursor positions are then selected.

Adding Tokens

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.

Information

For information on how to manage leading and trailing white space (blanks) when copying and pasting text into input controls, please see removing leading and trailing white space.

Removing Tokens

The user can instantly remove tokens via the keyboard, or by clicking the Remove icon.

Styles

There are five different styles of tokens: regular, on hover, selected, selected on hover and read-only. These styles correspond to the type of interaction being used.

Regular

On hover

Selected

Read only

Hover selected

Guidelines

The tokenizer can also be used as a tag container.

Resources

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

Elements and Controls

Multi-Combo Box (guidelines)
Multi-Input Field (guidelines)
Value Help Dialog (guidelines)
Combo Box (guidelines)

Implementation

Tokens (SAPUI5 samples)
Tokenizer (SAPUI5 samples)
Tokens (SAPUI5 API reference)
Tokenizer (SAPUI5 API reference)

Status Indicator

The status indicator uses a filled shape to visualize a single value. Unlike the progress indicator or the radial micro chart, the indicator provides the user with a meaningful association through its use of icons. You can embed the status indicator in other controls.

Selection of status indicators

Usage

Use the status indicator if:

You need to display a single value with an icon that describes its context.
You need to display a single value that can be updated in real time without reloading the page.

Do not use the status indicator if:

You need to display a single value within a table. Use the progress indicator or radial micro chart instead.
You need to show a rating. Use the rating indicator instead.
The status indicator does not provide the user with any meaningful information and would be for decoration only.

Responsiveness

The status indicator provides four different sizes: small (size S), medium (size M), large (size L), and extra-large (size XL).

For the small size, the partial fill is replaced by a fully-filled shape that can only indicate the semantic per threshold reached.

Predefined Sizes of the Status Indicator (S, M, L, XL)

Layout

A status indicator can consist of a scalable vector graphics (SVG) shape and additional information, such as a label. The status indicator can be configured as a shape only (default), or as a shape with a fixed label.

Shape Only

By default, the status indicator consists of a single shape. We recommend using this type of status indicator when you need to display a fraction of a value, rather than a specific value.

Status indicator - Shape only

Shape with a Fixed Label

This type of status indicator includes not only a shape, but also a label that uses semantic colors defined for the the value thresholds of the status indicator. In addition, you can switch between different alignment options, such as left, right, top, or bottom. We recommended using this type of status indicator when the user needs to see the exact value.

Status indicator - Shape and label

Types

Linear Fill

Most shapes can be filled linearly. You can set the shape to be filled from the left, right, top, or bottom, or define a specific angle for filling.

Status indicator with linear fill

Circular Fill

For round shapes, you can use the circular fill.

Status indicator with circular fill

Filling Sequence

The sequential fill option is useful when the shape consists of multiple parts. You can fill the parts sequentially one by one, or set your own filling order.

Status indicator with filling sequence

Grouping

You can group several shapes together and decide how the filling should be orchestrated among the shapes in this group.

Status indicator grouping

Thresholds

You can set one or more thresholds for each status indicator and assign a color to each threshold. The color changes when a threshold has been exceeded. Only use thresholds and semantic colors if they are meaningful to the user. Do not use them for decoration.

Status indicator tresholds

Behavior and Interaction

You can define a click event for the status indicator. If the status indicators are grouped, you can define a click event for each status indicator or for the entire group.

Information

When setting a click event for a non-filled shape, we recommend using a darker background color to emphasize that the shape is clickable and not disabled.

Guidelines

Shape Definition

You can download the predefined shapes or create your own custom shapes. For more information on how to create custom shapes correctly, see the API documentation.

Developer Hint

Only circle, rectangle, and path tags are supported inside the SVG file.

Animation Duration

Shape animation follows the motion design principles, with a maximum duration of 250 ms (small moves).

Examples

Status indicator in micro process flow

Status indicator in custom overview page card

Status indicator in object page header

Status indicator in tiles

Resources

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

Elements and Controls

Radial Micro Chart (guidelines)
Progress Indicator (guidelines)
Micro Process Flow (guidelines)
Motion Design (guidelines)

Implementation

Status Indicator (SAPUI5 sample)
Status Indicator (SAPUI5 API reference)
Download Predefined Shapes (ZIP file)

Title

The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.

The difference between a title and a manually styled heading is that the title can be used by assistive technologies such as screen readers to create a hierarchical site map for faster navigation.

The title is used, for example, by panel, toolbar, or list components.

Example of a title

Usage

Use the title if:

You want to set the title above a table or form.
You want to show text in the page header.

Do not use the title if:

The text is inside a text block.
The text is inside a form element.

Responsiveness

You can define whether the text should wrap or truncate directly (property: wrapping). If hyphenation or truncation is not set, the text of the title is wrapped word by word.

For more information on using wrapping and truncation, see Wrapping and Truncating Text.

Truncated title

Hyphenation

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

Wrapped title

Wrapped, hyphenated title

Styles

The actual appearance of the title and the different styles always depends on the theme being used.

The semantic level of the title can be set automatically or explicitly. With the automatic setting (property: level, value: Auto) no explicit level information is written (HTML5 header element). If you want to set it explicitly, use an HTML H1-H6 element (property: level, value: H1-H6).

The level (property: level, value: Auto, H1-H6) and title style (property: titleStyle, value: Auto, H1-H6) can be set independently.

Title with level H1 to H6 and default style

Guidelines

When using the title in the dynamic page header, use wrapping in expanded mode and truncation in collapsed mode.
In other places, such as toolbars or dialog headers, do not use wrapping. Truncate the title instead.

Properties

The following properties are available:

The property text defines the text that should be displayed as a title.
The property level (default: auto) defines the semantic level used by assistive technology. The default level can be overridden with H1 to H6 to set the level explicitly.
The property titleStyle (default: auto) defines the actual appearance of the title. When you use automatic styling, the appearance of the title depends on the current position of the title and the defined level. This automatism can be overridden by explicitly setting a different style between H1 and H6.
The property width defines the width of the title.
The property textAlign (default: initial) defines the alignment of the text within the title. Note: This property only has an effect if the overall width of the title control is larger than the displayed text.

Resources

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

Elements and Controls

Toolbar (guidelines)
Panel (guidelines)
List (guidelines)

Implementation

Title (SAPUI5 samples)
Title (SAPUI5 API reference)
Hyphenation for Text Controls (SAPUI5 documentation)

Label

A label is the name or title of a control or group of related controls.

Label "Name" in a form

Usage

Use the label control if:

You need a label for a control. We recommend that you 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.

Developer Hint

To indicate that a field is required, set the required property to true.

Required label in an editable environment (horizontal layout)

Result of a required label in a display-only environment

Optional label in an editable environment (vertical layout)

Result of an optional label in a display-only environment

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.

Developer Hint

The boolean wrapping property for the sap.m.Label control determines whether or not the text wraps .

Note: Only use this property in forms.

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.

Wrapping label

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.
Do not use bold labels.
A label is not a help text: it must be meaningful, succinct, short, and descriptive.

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:

When the form pattern is easily understood, such as on a login screen. Since this screen consists of only two input controls (User Name and Password), the labels do not have to be used.
When the form is extremely small and has fewer than three input fields. This can be the case for messages or small feedback forms.
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.

Elements and Controls

Form (guidelines)
Text (guidelines)
Wrapping and Truncating Text (guidelines)

Implementation

Label (SAPUI5 samples)
Label (SAPUI5 API reference)
Hyphenation for Text Controls (SAPUI5 documentation)

Avatar

The avatar is a control for displaying images. These can be user profiles, user initials, placeholder images, icons, or business-related images, such as product pictures.

Usage

Use the avatar to display:

An image, initials, or placeholder for a user
Standardized images for business-related content (such as products, parts, product and company logos, ad campaign images, …)
Icons
Images with a transparent background
Placeholder images

Do not use the avatar if:

You want to include an image for any other use case. Instead, use the image control.
You want to display pictures in a carousel. Instead, use the carousel control.
You want to show an interactive icon. Instead, use the button with an icon inside.

Examples of a user image, user initials, and standard user placeholder icon

Potential product image and product image placeholder

Icon

Responsiveness

The avatar control is adaptive and has five predefined sizes. These are the same for both compact and cozy form factors:

Size	rem	Use for images in…
XS	2 rem	Table list items Card list items
S	3 rem	Card headers Card list items
M	4 rem	App headers for small screen sizes
L	5 rem	App headers for normal screen sizes
XL	7 rem	App headers for large screen sizes

If your use case requires it, you can also set a custom size.

Predefined sizes: XS, S, M, L, XL

Image Fit

You can use the imageFitType property to specify how images fit to the avatar. There are two options: Cover (default) and Contain.

Cover

The size of the image is scaled up to completely cover the control area. As a result, parts of the image may be outside the shape.

Use the Cover fit type if the focal point is in the center of the image.

Contain

The image is scaled down to fit into the control area. The entire image is displayed, but might not fully fill the shape. In this case, the control displays a default background color. The image itself is always centered inside the shape.

Use the Contain fit type for product pictures that need to be displayed in full.

Product image with the fit type 'cover' (left) and 'contain' (right)

Types

Avatar – User Image, Initials, or Placeholder

An avatar is a visual representation of a user in the digital space. Usually, an avatar displays the user in one of the following ways:

A user photo
The user’s initials
A placeholder icon instead of the user’s personal data (photo or initials)

Always display avatars in a circle. This ensures that all users are represented equally on the user interface.

Initials

User image, user initials, and standard user placeholder icon

The initials stand for the first name(s) and last name(s) of a person – for example, JD for Jane Doe, or MvV for Marjolein van Veen. Which name comes first depends on the language-specific settings.

Initials can have up to three alphabetical characters (A-Z, a-z). If more than 3 initials are required for longer names (such as Anna María Agustí Suárez), the gender-neutral placeholder icon is displayed instead. The placeholder is also used if the three letters don’t fit into the circle (for example, WWW).

Some languages don’t build on an alphabet, or don’t use initials at all. In such cases, the gender-neutral person icon is displayed instead.

User initials with 1, 2, and 3 characters

Business Images

Business images display a product, company, object, logo, or other business-related content.

Always use a square for business images.

Examples of product images

Placeholder for Avatar and Business Images

Placeholder images are used for both avatar and business images when no other image is available.

The default placeholder for an avatar is a gender-neutral person icon inside a circle.
The default placeholder for a business image is a neutral product icon inside a square.

Default person and product placeholders

You can specify your own the default placeholder icon for business images.

Always replace the default product icon if there is a more suitable icon for your use case and industry.

Product placeholder images with custom icons

Placeholder Background

By default, the placeholder background color is set to blue (accent color 6). However, to add more visual variety to the UI, you can change the background color using one of the following options:

Accent colors – You can specify one of 10 different accent colors as the placeholder background color.
Random color – The control automatically picks a random color from the accent color palette.

All accent colors can be themed.

User initials in all ten accent colors

Placeholder for Decorative Images in the Content Area

Use the background color ‘placeholder’ for decorative images in the content area, such as images in articles or longer descriptions. In these use cases, the primary focus is on the text and the image content is secondary.

Decorative image in the content area

Placeholder image for secondary content

Images with Transparent Background

You can display images with a transparent background. This can be useful for displaying descriptive illustrations and decorative pictures, for example.

Image with transparent background

Icons

You can use the avatar to display non-interactive display icons. Use the background color ‘placeholder’ to display the icon.

If you want to put an action on the icon, use the button with an icon inside instead.

Exemplary icons

Badge

If an avatar is clickable, you can show an optional badge and icon.

Use a badge to indicate that the avatar is interactive.
Use an icon to indicate the action triggered by clicking the avatar.

This feature gives users visual affordance of the available action, and is particularly useful for images.

When you use a badge and icon, always provide a corresponding tooltip for your avatar to indicate the action.

Use the following standard icons and tooltip texts:

Icon	Tooltip	Action
	Edit Image	Edit the image. This can include multiple options, such as replacing an image, cropping, visual effects, or taking a new picture.
	*Take a Picture*	Take a photo.
	Zoom In	Zoom into the image.

Avatars with badges

Avatars with badges and edit (left), camera (middle), and zoom in (right)

Guidelines

If you use a custom avatar size with initials or icons:
- Make sure that the font size is consistent with the size of the control itself.
- If your custom size is between two predefined sizes, use the font size for the smaller predefined size.
  Example: If your avatar is 5.5 rem (between sizes L and XL), use the font size for size L (2 rem).
Accessibility: Provide an alternative text for each avatar image for cases when the image is not available or can’t be displayed.
If the avatar is interactive, provide a tooltip to indicate the action (for example, Edit Image or Take a Picture).
Optimize high-resolution images to avoid unnecessarily large files. Large image files can severely impede page performance.

Do

Custom placeholder size with appropriate custom font size

Don't

Custom placeholder size, but icon is too small

Styles

You can add a very subtle border to the avatar (property: ShowBorder).

Images with optional borders

Resources

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

Elements and Controls

Image (guidelines)
Carousel (guidelines)

Implementation

Avatar (SAPUI5 samples)
Avatar (SAPUI5 API reference)

Object Display Components

There are four types of object display components: object status, object identifier, object number, and object marker. Each one is connected to an object and displays a certain type of information (status, identifier, number, marker).

Object status: a short text that represents the semantic status of an object
Object identifier: a short text that represents the key identifier of an object
Object number: a short text that represents the numeric (key) attribute of an object and its unit
Object marker: indicates the technical status of an object

From top to bottom: exemplary object status, object identifier, object number, and object marker

Usage

Use the object display components if:

You need to display the semantic status of an object: negative, critical, positive, or neutral. Use the object status for this.
You want to display the key number of an object. In this case, use the object number and keep the default emphasized setting.
You need to display one or more numeric attributes of an object (for example, for objects you want to compare). Use the object number for this.
You want to indicate the key identifier of the object. Use the object identifier for this.
You want to display the technical state of an object (draft, unsaved changes, locked, favorite, flagged). Use the object marker for this, unless you want to display the status of the object in the business life cycle. In the latter case, consider using the object status instead.
You need to show that the current object instance is locked by another user. Use the object marker for this.

Do not use the object display components if:

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

Responsiveness

The object status wraps if it is longer than the available screen width.
The object identifier text wraps if the size of the screen becomes too small to display the entire text on one line.
The object number does not wrap or truncate. For large numbers, you need to consider using the appropriate formatting.
The object marker does not wrap or truncate. It comes with different display options: IconAndText, IconOnly and Text. On size S, the display option IconAndText only displays the icon due to lack of space. The other options are displayed as normal.

For more information about the responsive behavior of text in general, see Wrapping and Truncating Text.

From top to bottom: Wrapping examples for the object status, object identifier, formatted object number, and two versions of the object marker

Components

Object Status

The object status is a short text that represents the semantic status of an object.

It consists of the following:

A semantically colored text indicating its status (property: text). We recommend using this semantically colored text-only option on its own. Check out the How to Use Semantic Colors / Industry-Specific Colors article for color options.
An optional icon (property: icon). If you need to have an icon, use one of the following:
= positive/success
= critical/warning
= negative/error
Note that there is no generic icon for “neutral” across industries. If you have a neutral object status, use the text-only version, a blank icon, or an icon that means neutral in the app’s specific business context.

Text-only object status and icon with text object status

An optional inverted visualization. Use the inverted object status if the information is crucial for the user’s actions and needs to stand out visually (for example, in table list items).
An optional link (property: active). If the object status is used as a link, a hover effect is shown on non-touch devices. Use this feature if the user needs additional information about the status (for example, in a popover). Note that if you use the object status as a combination of icon and text, there is no hover effect for the icon.

Inverted object status (left) and object status in hover state (right)

An optional larger font (CSS class: sapMObjectStatusLarge). Use this feature if the object status is important in the business context and needs to stand out visually in the page header (for example, key value facets in an object page).

Larger object status

Guidelines

In rare cases, an object can have two statuses at the same time. In this case, use the inverted text-only version for the most important status, and the normal text-only version (with an optional icon) for the less important status.
If you use the object status in a table, follow the corresponding sorting guidelines.
To prevent the text being read as a link, don’t use the blue “information state” for the object status.

Object Identifier

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

It has the following characteristics:

A title text (property: title)
An optional link (property: titleActive). In this case, the event can open the quick view of the object or a popover for example.
An optional additional descriptive text (property: text)

Guidelines

The object identifier should be easily readable (preferably the display text and not the ID).
If the object’s ID is necessary to distinguish between items that use the same title, it should appear as descriptive text below the title (property: text).

Normal object identifier, object identifier with link, and object identifier with descriptive text

Object Number

The object number is a short text that represents the numeric (key) attribute of an object and its unit.

It consists of the following:

A colored text (property: number) based on the semantic color palette. Check out the How to Use Semantic Colors / Industry-Specific Colors article for more details.
An emphasized text which you can set to non-emphasized when you use it in the content area (property: emphasized).
An optional unit (property: unit).

Emphasized and non-emphasised object numbers

Object number used as a semantic attribute (weight)

An optional larger font (CSS class: sapMObjectNumberLarge). Use this feature if the object number is important in the business context and needs to stand out visually in the page header (for example, key value facets in an object page). Once the large font is applied, the object number can no longer be emphasized.

Guidelines

The object number can also be used to visualize other semantic numeric attributes. In this case, they are not emphasized unless they are the key attribute, such as a sum.
Emphasize the object number if it is used as a line item status in a table.

Emphasized and non-emphasized object numbers

Object Marker

The object marker indicates the technical status of an object and can be interactive. It is enabled for the dynamic page layout, snapping header, object page header, upload collection, and object list item. The technical status can be represented as an icon, with an icon and text, or as text only, depending on the screen size.

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

Editing Status: Draft, Unsaved Changes, Locked. The editing status is part of the draft handling concept.
Favorite
Flag

Flag and Favorite are usually displayed as icons on all screen sizes. For more information, see Flag and Favorite.

An object can have multiple technical statuses at the same time. However, because the editing statuses are mutually exclusive, users will see a maximum of 3 technical statuses for an object: Flag, Favorite, and one Editing Status.

Developer Hint

The app developer is responsible for the technical statuses. Every technical status has a default visualization that can be changed by the app developer depending on the usage context. For details regarding draft handling, please see How to Display the Editing Status in the Draft Handling article.

Icons for draft, unsaved changes, locked, favorite, and flag (from left to right)

Editing status examples

Resources

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

Elements and Controls

How to Use Semantic Colors (guidelines)
Wrapping and Truncating Text (guidelines)
Draft Handling (guidelines)
Flag and Favorite (guidelines)
Responsible Table (guidelines)

Implementation

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

Carousel

The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed item or items, the user can navigate to either the next or the previous item.

Optionally, a paging indicator displays the user’s current position inside the set of items.

The carousel control is best used for browsing through a set of images. Viewing images one by one helps users to distinguish between different items. In a comparison scenario, it can also be useful to display several items side by side. The carousel is not limited to displaying images; it can contain any sap.m control.

Usage

Use the carousel if:

You have strong visual representations of the items you want to display.
You want to display items sequentially or side by side.

Do not use the carousel if:

The items you want to display are uniform.

Responsiveness

The size of the control’s content area is adjusted automatically, depending on the amount of space available.

On non-touch devices, the user can navigate with the paging buttons displayed on the left and right of the control.

On touch devices, the carousel control makes use of the swipe gesture to navigate through the items. As a result, the paging buttons are not displayed on touch devices.

The paging indicator (when activated) shows on all form factors. The paging indicator wraps if it is too long to fit onto one line.

Carousel - Size S

Carousel - Size M

Carousel - Size L

Layout

The main component of the carousel control is the content area in which the different items are displayed.

The (optional) paging indicator can float above or below the content area.

On non-touch devices, paging buttons either float above the left and right sides of the content area, or appear in the paging indicator area. This is controlled by the arrowsPlacement property.

Displaying multiple items

The layout of the carousel does not change when multiple items are displayed in the content area.

Schematic layout of the carousel

Behavior and Interaction

The content area contains either the current item or a set of items.

Navigation for Single Items

When the user navigates from the current item to another item, the current item is moved out of the content area, and the next or previous item slides in (depending on the direction of navigation).

On touch devices, users navigate with swipe gestures (swipe right or swipe left).

On non-touch devices, users navigate with paging buttons.

If the item set contains only one item, navigation is deactivated.

Paging button – Previous Page

Paging button – Next Page (hover)

Navigation for Multiple Items

When the user clicks one of the paging buttons, the rightmost or leftmost item is moved out of the content area, and the next or previous item slides in (depending on the navigation direction).

Carousel with multiple items

Looping

The carousel can be set to loop (property: loop). In this case, the carousel jumps back to the first item once all items have been displayed. If looping is not enabled, there is no forward navigation on the last item.

Paging

The current position inside the set of items is displayed using an optional paging indicator (properties: showPageIndicator, pageIndicatorPlacement).

Paging indicator

If there are more than 8 pages, the paging indicator changes from icons to numbers.

Paging indicator

Resources

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

Elements and Controls

Image (guidelines)

Implementation

Carousel (sample in SAPUI5 Demo Kit)
Carousel (SAPUI5 API reference)

Generic Tag

The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.

Usage

Use the generic tag:

To display complementary information for an object, such as a KPI.
In the dynamic page header or in the header area of an object page, following the title.

Do not use the generic tag:

For decorative purposes.
For navigation.

Structure

A – Status Indicator / Criticality Indicator – Mandatory

The indicator displays the status/criticality of the tag. Only use it with the available semantic colors.

B – Message Icon – Optional

The message icon can help visualize the status/criticality of the tag. The color of the icon is always the same as the color of the status indicator. Always use the correct message icon for the respective status/criticality.

C – Title – Mandatory

Always use a meaningful title. Keep it simple and try to use no more than 3 words.

D – Value and Unit of Measure – Optional

The value represents the numeric (key) attribute and its unit. The value has a semantic color, and the unit inherits the color from the value. The color of the value must be the same as the color of the status indicator. For more information, see Object Number.

Generic Tag for KPIs

To display KPIs, use the following structure:

A – Status indicator / criticality indicator
C – Title
D – Value and unit of measure

Structure of the generic tag

KPI as a generic tag

Responsiveness

The generic tag itself is not responsive. To enable responsiveness, use the overflow toolbar.

Generic tag overflow in the analytical list page - Size S

Behavior and Interaction

The generic tag has a press event. Use this event only to open a popover or analytical card containing relevant information, using the progressive disclosure technique.

Resources

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

Elements and Controls

Semantic Colors (guidelines)
Object Number (guidelines)
Analytical Card (guidelines)
Overflow Toolbar (guidelines)

Implementation

Generic Tag (SAPUI5 samples)

Avatar Group

The avatar group displays a number of avatars, which act as a digital representation of a user. This control is useful for visualizing a team, project team members, or a group of employees, for example.

Avatar group - Group type

Avatar group - Individual type

When to Use

Use the avatar group if:

You want to display a group of at least 2 people.
You want to display several people who have something in common (for example, people who are in the same team, project, or company).

Do not use the avatar group if:

You want to display a gallery for simple images. Use the carousel instead.
You want to display a single avatar.
You want to show visual content other than avatars.

Types

There are two types of avatar groups: group and individual.

Guidelines

For both types, always provide a distinct description, such as a label.

Group Type – Focus on the Sum of People

The group type displays overlapping avatars. Use this type if it’s important to display the sum of people at first sight, rather than the individuals. Examples for the group type include overviews in cards and organization charts, as well as cases where you need to display a large number of people (100+).

This is the default type.

Variants for the group type (user's image, initials, placeholders)

Individual Type – Focus on Each Person

The avatars are displayed next to each other and don’t overlap. Use this type if each person is as important as the group as a whole, and the user’s main focus is to get more information about some individuals in the group. The user can find out more about a person by interacting with the avatar to access secondary information, such as a business card.

This type is useful for a smaller group of avatars, such as a project team or teams in a line organization.

Variants for the individual type (user's image, initials, placeholders)

Components

Avatars

The avatar group consists of at least two avatars and can display as many avatars as you need.

Order

You can set the order of the avatars in the group freely. For example, the order can be alphabetical, history-based, or random.

Guidelines

Once you’ve decided on the order that best fits your use case, use it consistently within your app.

Content

The avatar group reuses the avatar control and its logic: if a person’s image is available, the avatar displays the image. If no image is available, it displays the person’s initials on a colored background. If there are more than 3 initials or the language system doesn’t support initials, the avatar displays a gender-neutral person icon. You can also adapt this placeholder icon to meet your own requirements.

Size

The avatar group supports the different sizes of the avatar control.

Guidelines

Use size S as a default. If the avatar group is the main element in your app, consider using a bigger size such as M or L to better support the user.

Avatar groups

Overflow Button

If an avatar group has too many members to display, an overflow button is displayed at the end of the group.

Overflow button with 99 "overflowed" avatars

Color Options

The overflow button has different color options:

Neutral default color
Random color – The color of the overflow button is a random color from the accent color palette.
Specific accent color – The color of the overflow button is selected from the accent color palette.

All the colors mentioned are themeable.

Overflow button in the neutral and all available accent colors

Overflow (Popover) Content

When users interact with the overflow shape, they expect information about the “overflowed” avatars. By default, an overview of all “overflowed” avatars is displayed directly in a popover. Adapt the content in the popover to your individual app needs.

Guidelines

If the group contains less than 100 avatars, ensure that all overflowed avatars are visible in the popover. This is the minimum visualization for overflowed avatars.
Recommended: Provide primary or secondary information in the overflow to offer additional value for the user.
If you have more than 100 “overflowed” avatars, we recommend navigating to another page that displays all avatars properly. For example, you can display them in a grid list together with primary or even secondary information. Ensure that the avatars in the list display in the same order as in the avatar group control on the page before.

Minimum version: overflow popover with simple avatars

Recommended version: overflow popover with context-specific information

Behavior and Interaction

The group and individual types have different behavior and interactions.

Group Type

The group type is one big active area. In other words, the entire control is basically the active area. When the user interacts with the avatar group, an overview of ALL visible AND “overflowed” avatars appears. You can display the full avatar group in an overflow popover, or on a details page.

Active area for the group type (schematic visualization)

Group type with overflow popover using the grid list control

Individual Type

The individual avatars and the overflow button have their own active areas.

Active areas for the individual type (schematic visualization)

Interact with Avatar

When the user activates the avatar, a popover opens. The user expects to find more details about the person behind the avatar.

Possible content in popover (popover content is use case dependent)

Interact with Avatar in Overflow Popover

When an avatar is in the overflow popover, the user should have the access to the same detailed information as for avatars displayed in the visible group outside the overflow. Choosing the avatar either triggers navigation within the popover or navigation to another page (for example, with a person’s profile).

Guidelines

To show the details for an avatar in the overflow popover, use the same method as you are using for avatars in the visible group (outside of the overflow popover).

Navigation within popover to avatar's details

Open Full List

You can add an optional Open Full List link to the overflow popover. The link should lead to a page that displays the full set people of the group. An example might be a page with a grid list and simple filtering options.

Popover with 'overflowed' avatars and 'Open Full List' link

Responsiveness

The avatar group is responsive. If there is not sufficient space to display all the avatars in a group, the overflow button appears and one or more avatars move into the overflow popover. The circular overflow button indicates the exact number of avatars that can’t be displayed on the screen. The size of the overflow button adapts to fit the number of items in the overflow.

Avatar groups with a different number of avatars inside

Top Tips

Carefully select the primary and secondary information you want to display for the avatars. Base the content on your user research findings.

Responsive Padding and Margin Classes

Responsive padding and margin classes control:

The left and right spacing within the header and content areas
The space between components, such as tables and forms

These classes adapt to different screen sizes at specific breakpoints to ensure that no space is wasted on small screens and that content has more room to breathe on large screens:

Size S screen: Up to 599 pixels
Size M screen: Between 600 pixels and 1023 pixels
Size L screen: Between 1024 pixels and 1439 pixels
Size XL screen: 1440 pixels or more

The visual below illustrates how the padding adapts to different screen sizes.

Spacing adapts to different screen sizes

Developer Hint

The spacing system is built into SAP Fiori Elements, but it must be implemented manually in freestyle SAP Quartz-themed applications using the responsive margin and padding classes in SAPUI5. You can use individual spacing and padding classes to apply individual spacing inside or around controls.

More Information

How to Code Padding and Margin Classes (YouTube video)
Enabling Responsive Paddings (SAPUI5 Demo Kit)
Using Predefined CSS Margin Classes (SAPUI5 Demo Kit)

Resources

Elements and Controls

Content Density (guideline)

Implementation

Standard Margins (implementation)
Standard Paddings (implementation)

Formatted Text

The formatted text control displays HTML text. You can format the text using HTML tags or embed formatted text.

Example

When to Use

Use the formatted text control to:

Embed formatted HTML text.
Display longer texts, such as descriptions, legal texts, or manuals.
Display simple lists with bullet points or numbers.
Display code.

Do not use the formatted text control to:

Display In-app help or explanations on how to use your app. Use the Web Assistant instead.
Display a simple and short text. Use the text control instead.
Display a semantically-colored text or a status. Use the object status instead
Display an object name with or brief additional information. Use the object identifier instead.
Display a number or sum. Use the object number instead.
Display a currency. Use the currency control instead.
Display a label. Use the label control instead.
Display a single headline. Use the title control instead.
Let the user to type in longer texts and format them. Use the rich text editor instead.

Components

By default, the control uses the standard font and headlines. It supports the following HTML tags:

Text Styling

HTML Tag	Effect
a	Link or anchor
abbr	Abbreviation
blockquote	Quote
cite	Short quote
code	Code style
em	Italic text
pre	Preformatted text
strong	Bold text

List

HTML Tag	Effect
dl	Description list
dt	Description term (of a description list)
ul	Unordered list
ol	Ordered list
li	List item (of an unordered or ordered list)

Structure

HTML Tag	Effect
br	New line
h1-h6	Headlines 1-6
p	Paragraph
span	Generic inline container

Behavior and Interaction

The formatted text control itself is not interactive. However, it can contain interactive elements, such as links and anchors.

Responsiveness

The text automatically adapts to the screen size unless you set a fixed width and/or height.

Examples

Here are some examples that use the various HTML tags.

Formatted text - Numbered List

Formatted text - Bulleted list

Formatted text with code

Formatted text - Quote

Top Tips

Use the different styling options carefully and not for decoration only.
Consider accessibility, such as color contrast.
SAP Fiori uses theming. Be aware that if you make custom changes to the HTML (such as changing colors), you need to take care of the theming part as well.

Usage

Use the label control if:

You need a label for a control. We recommend that you 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).

Types

There are two types of labels:

Required
Optional

To indicate that a field is required, set the required property to true. An asterisk is then added automatically in front of the label.

Required label in an editable environment (horizontal layout)

Result of a required label in a display-only environment

Optional label in an editable environment (vertical layout)

Result of an optional label in a display-only environment

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.

Developer Hint

The boolean wrapping property for the sap.m.Label control determines whether or not the text wraps .

Note: Only use this property in forms.

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.

Wrapping label

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.
Do not use bold labels.
A label is not a help text: it must be meaningful, succinct, short, and descriptive.

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:

When the form pattern is easily understood, such as on a login screen. Since this screen consists of only two input controls (User Name and Password), the labels do not have to be used.
When the form is extremely small and has fewer than three input fields. This can be the case for messages or small feedback forms.
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.

Elements and Controls

Form (guidelines)
Text (guidelines)
Wrapping and Truncating Text (guidelines)

Implementation

Label (SAPUI5 samples)
Label (SAPUI5 API reference)
Hyphenation for Text Controls (SAPUI5 documentation)

Avatar

The avatar is a control for displaying images. These can be user profiles, user initials, placeholder images, icons, or business-related images, such as product pictures.

Usage

Use the avatar to display:

An image, initials, or placeholder for a user
Standardized images for business-related content (such as products, parts, product and company logos, ad campaign images, …)
Icons
Images with a transparent background
Placeholder images

Do not use the avatar if:

You want to include an image for any other use case. Instead, use the image control.
You want to display pictures in a carousel. Instead, use the carousel control.
You want to show an interactive icon. Instead, use the button with an icon inside.

Examples of a user image, user initials, and standard user placeholder icon

Potential product image and product image placeholder

Icon

Responsiveness

The avatar control is adaptive and has five predefined sizes. These are the same for both compact and cozy form factors:

Size	rem	Use for images in…
XS	2 rem	Table list items Card list items
S	3 rem	Card headers Card list items
M	4 rem	App headers for small screen sizes
L	5 rem	App headers for normal screen sizes
XL	7 rem	App headers for large screen sizes

If your use case requires it, you can also set a custom size.

Predefined sizes: XS, S, M, L, XL

Image Fit

You can use the imageFitType property to specify how images fit to the avatar. There are two options: Cover (default) and Contain.

Cover

The size of the image is scaled up to completely cover the control area. As a result, parts of the image may be outside the shape.

Use the Cover fit type if the focal point is in the center of the image.

Contain

The image is scaled down to fit into the control area. The entire image is displayed, but might not fully fill the shape. In this case, the control displays a default background color. The image itself is always centered inside the shape.

Use the Contain fit type for product pictures that need to be displayed in full.

Product image with the fit type 'cover' (left) and 'contain' (right)

Types

Avatar – User Image, Initials, or Placeholder

An avatar is a visual representation of a user in the digital space. Usually, an avatar displays the user in one of the following ways:

A user photo
The user’s initials
A placeholder icon instead of the user’s personal data (photo or initials)

Always display avatars in a circle. This ensures that all users are represented equally on the user interface.

Initials

User image, user initials, and standard user placeholder icon

The initials stand for the first name(s) and last name(s) of a person – for example, JD for Jane Doe, or MvV for Marjolein van Veen. Which name comes first depends on the language-specific settings.

Initials can have up to three alphabetical characters (A-Z, a-z). If more than 3 initials are required for longer names (such as Anna María Agustí Suárez), the gender-neutral placeholder icon is displayed instead. The placeholder is also used if the three letters don’t fit into the circle (for example, WWW).

Some languages don’t build on an alphabet, or don’t use initials at all. In such cases, the gender-neutral person icon is displayed instead.

User initials with 1, 2, and 3 characters

Business Images

Business images display a product, company, object, logo, or other business-related content.

Always use a square for business images.

Examples of product images

Placeholder for Avatar and Business Images

Placeholder images are used for both avatar and business images when no other image is available.

The default placeholder for an avatar is a gender-neutral person icon inside a circle.
The default placeholder for a business image is a neutral product icon inside a square.

Default person and product placeholders

You can specify your own the default placeholder icon for business images.

Always replace the default product icon if there is a more suitable icon for your use case and industry.

Product placeholder images with custom icons

Placeholder Background

By default, the placeholder background color is set to blue (accent color 6). However, to add more visual variety to the UI, you can change the background color using one of the following options:

Accent colors – You can specify one of 10 different accent colors as the placeholder background color.
Random color – The control automatically picks a random color from the accent color palette.

All accent colors can be themed.

User initials in all ten accent colors

Placeholder for Decorative Images in the Content Area

Use the background color ‘placeholder’ for decorative images in the content area, such as images in articles or longer descriptions. In these use cases, the primary focus is on the text and the image content is secondary.

Decorative image in the content area

Placeholder image for secondary content

Images with Transparent Background

You can display images with a transparent background. This can be useful for displaying descriptive illustrations and decorative pictures, for example.

Image with transparent background

Icons

You can use the avatar to display non-interactive display icons. Use the background color ‘placeholder’ to display the icon.

If you want to put an action on the icon, use the button with an icon inside instead.

Exemplary icons

Guidelines

If you use a custom avatar size with initials or icons:
- Make sure that the font size is consistent with the size of the control itself.
- If your custom size is between two predefined sizes, use the font size for the smaller predefined size.
  Example: If your avatar is 5.5 rem (between sizes L and XL), use the font size for size L (2 rem).
For accessibility purposes, provide an alternative text for each avatar image in case the image is not available or can’t be displayed.
Optimize high-resolution images to avoid unnecessarily large files. Large image files can severely impede page performance.

Do

Custom placeholder size with appropriate custom font size

Don't

Custom placeholder size, but icon is too small

Styles

You can add a very subtle border to the avatar (property: ShowBorder).

Images with optional borders

Resources

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

Elements and Controls

Image (guidelines)
Carousel (guidelines)

Implementation

Avatar (SAPUI5 samples)
Avatar (SAPUI5 API reference)

Avatar

The avatar is a control for displaying images. These can be user profiles, user initials, placeholder images, icons, or business-related images, such as product pictures.

Usage

Use the avatar to display:

An image, initials, or placeholder for a user
Standardized images for business-related content (such as products, parts, product and company logos, ad campaign images, …)
Icons
Images with a transparent background
Placeholder images

Do not use the avatar if:

You want to include an image for any other use case. Instead, use the image control.
You want to display pictures in a carousel. Instead, use the carousel control.
You want to show an interactive icon. Instead, use the button with an icon inside.

Examples of a user image, user initials, and standard user placeholder icon

Potential product image and product image placeholder

Icon

Responsiveness

The avatar control is adaptive and has five predefined sizes. These are the same for both compact and cozy form factors:

Size	rem	Use for images in…
XS	2 rem	Table list items Card list items
S	3 rem	Card headers Card list items
M	4 rem	App headers for small screen sizes
L	5 rem	App headers for normal screen sizes
XL	7 rem	App headers for large screen sizes

If your use case requires it, you can also set a custom size.

Predefined sizes: XS, S, M, L, XL

Image Fit

You can use the imageFitType property to specify how images fit to the avatar. There are two options: Cover (default) and Contain.

Cover

The size of the image is scaled up to completely cover the control area. As a result, parts of the image may be outside the shape.

Use the Cover fit type if the focal point is in the center of the image.

Contain

The image is scaled down to fit into the control area. The entire image is displayed, but might not fully fill the shape. In this case, the control displays a default background color. The image itself is always centered inside the shape.

Use the Contain fit type for product pictures that need to be displayed in full.

Product image with the fit type 'cover' (left) and 'contain' (right)

Types

Avatar – User Image, Initials, or Placeholder

An avatar is a visual representation of a user in the digital space. Usually, an avatar displays the user in one of the following ways:

A user photo
The user’s initials
A placeholder icon instead of the user’s personal data (photo or initials)

Always display avatars in a circle. This ensures that all users are represented equally on the user interface.

Initials

User image, user initials, and standard user placeholder icon

The initials stand for the first name(s) and last name(s) of a person – for example, JD for Jane Doe, or MvV for Marjolein van Veen. Which name comes first depends on the language-specific settings.

Initials can have up to three alphabetical characters (A-Z, a-z). If more than 3 initials are required for longer names (such as Anna María Agustí Suárez), the gender-neutral placeholder icon is displayed instead. The placeholder is also used if the three letters don’t fit into the circle (for example, WWW).

Some languages don’t build on an alphabet, or don’t use initials at all. In such cases, the gender-neutral person icon is displayed instead.

User initials with 1, 2, and 3 characters

Business Images

Business images display a product, company, object, logo, or other business-related content.

Always use a square for business images.

Examples of product images

Placeholder for Avatar and Business Images

Placeholder images are used for both avatar and business images when no other image is available.

The default placeholder for an avatar is a gender-neutral person icon inside a circle.
The default placeholder for a business image is a neutral product icon inside a square.

Default person and product placeholders

You can specify your own the default placeholder icon for business images.

Always replace the default product icon if there is a more suitable icon for your use case and industry.

Product placeholder images with custom icons

Placeholder Background

By default, the placeholder background color is set to blue (accent color 6). However, to add more visual variety to the UI, you can change the background color using one of the following options:

Accent colors – You can specify one of 10 different accent colors as the placeholder background color.
Random color – The control automatically picks a random color from the accent color palette.

All accent colors can be themed.

User initials in all ten accent colors

Placeholder for Decorative Images in the Content Area

Use the background color ‘placeholder’ for decorative images in the content area, such as images in articles or longer descriptions. In these use cases, the primary focus is on the text and the image content is secondary.

Decorative image in the content area

Placeholder image for secondary content

Images with Transparent Background

You can display images with a transparent background. This can be useful for displaying descriptive illustrations and decorative pictures, for example.

Image with transparent background

Icons

You can use the avatar to display non-interactive display icons. Use the background color ‘placeholder’ to display the icon.

If you want to put an action on the icon, use the button with an icon inside instead.

Exemplary icons

Guidelines

If you use a custom avatar size with initials or icons:
- Make sure that the font size is consistent with the size of the control itself.
- If your custom size is between two predefined sizes, use the font size for the smaller predefined size.
  Example: If your avatar is 5.5 rem (between sizes L and XL), use the font size for size L (2 rem).
For accessibility purposes, provide an alternative text for each avatar image in case the image is not available or can’t be displayed.
Optimize high-resolution images to avoid unnecessarily large files. Large image files can severely impede page performance.

Do

Custom placeholder size with appropriate custom font size

Don't

Custom placeholder size, but icon is too small

Styles

You can add a very subtle border to the avatar (property: ShowBorder).

Images with optional borders

Resources

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

Elements and Controls

Image (guidelines)
Carousel (guidelines)

Implementation

Avatar (SAPUI5 samples)
Avatar (SAPUI5 API reference)

Avatar

The avatar is a control for displaying images. These can be user profiles, user initials, placeholder images, or business-related images, such as product pictures.

Usage

Use the avatar if:

You want to display an image, initials, or placeholder for a user.
You want to display standardized images for business-related content (such as products, parts, product and company logos, ad campaign images, …).
You want to display product placeholder images.

Do not use the avatar if:

You want to include an image for any other use case. Instead, use the image control.
You want to display pictures in a carousel. Instead, use the carousel control.

Examples of a user image, user initials, and standard user placeholder icon

Potential product image and product image placeholder

Responsiveness

The avatar control is adaptive and has five predefined sizes. These are the same for both compact and cozy form factors:

Size	rem	Use for images in…
XS	2 rem	Table list items Card list items
S	3 rem	Card headers Card list items
M	4 rem	App headers for small screen sizes
L	5 rem	App headers for normal screen sizes
XL	7 rem	App headers for large screen sizes

If your use case requires it, you can also set a custom size.

Predefined sizes: XS, S, M, L, XL

Image Fit

You can use the imageFitType property to specify how images fit to the avatar. There are two options: Cover (default) and Contain.

Cover

The size of the image is scaled up to completely cover the control area. As a result, parts of the image may be outside the shape.

Use the Cover fit type if the focal point is in the center of the image.

Contain

The image is scaled down to fit into the control area. The entire image is displayed, but might not fully fill the shape. In this case, the control displays a default background color. The image itself is always centered inside the shape.

Use the Contain fit type for product pictures that need to be displayed in full.

Product image with the fit type 'cover' (left) and 'contain' (right)

Types

Avatar – User Image, Initials, or Placeholder

An avatar is a visual representation of a user in the digital space. Usually, an avatar displays the user in one of the following ways:

A user photo
The user’s initials
A placeholder icon instead of the user’s personal data (photo or initials)

Always display avatars in a circle. This ensures that all users are represented equally on the user interface.

Initials

User image, user initials, and standard user placeholder icon

The initials stand for the first name(s) and last name(s) of a person – for example, JD for Jane Doe, or MvV for Marjolein van Veen. Which name comes first depends on the language-specific settings.

Initials can have up to three alphabetical characters (A-Z, a-z). If more than 3 initials are required for longer names (such as Anna María Agustí Suárez), the gender-neutral placeholder icon is displayed instead. The placeholder is also used if the three letters don’t fit into the circle (for example, WWW).

Some languages don’t build on an alphabet, or don’t use initials at all. In such cases, the gender-neutral person icon is displayed instead.

User initials with 1, 2, and 3 characters

Business Images

Business images display a product, company, object, logo, or other business-related content.

Always use a square for business images.

Examples of product images

Placeholder Images

Placeholder images are used for both avatar and business images when no other image is available.

The default placeholder for an avatar is a gender-neutral person icon inside a circle.
The default placeholder for a business image is a neutral product icon inside a square.

Default person and product placeholders

You can specify your own the default placeholder icon for business images.

Always replace the default product icon if there is a more suitable icon for your use case and industry.

Product placeholder images with custom icons

Placeholder Background

By default, the placeholder background color is set to blue (accent color 6). However, to add more visual variety to the UI, you can change the background color using one of the following options:

Accent colors – You can specify one of 10 different accent colors as the placeholder background color.
Random color – The control automatically picks a random color from the accent color palette.

All accent colors can be themed.

User initials in all ten accent colors

Guidelines

If you use a custom avatar size with initials or icons:
- Make sure that the font size is consistent with the size of the control itself.
- If your custom size is between two predefined sizes, use the font size for the smaller predefined size.
  Example: If your avatar is 5.5 rem (between sizes L and XL), use the font size for size L (2 rem).
For accessibility purposes, provide an alternative text for each avatar image in case the image is not available or can’t be displayed.
Optimize high-resolution images to avoid unnecessarily large files. Large image files can severely impede page performance.

Do

Custom placeholder size with appropriate custom font size

Don't

Custom placeholder size, but icon is too small

Styles

You can add a very subtle border to the avatar (property: ShowBorder).

Images with optional borders

Resources

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

Elements and Controls

Image (guidelines)
Carousel (guidelines)

Implementation

Avatar (SAPUI5 samples)
Avatar (SAPUI5 API reference)

Object Display Components

There are four types of object display components: object status, object identifier, object number, and object marker. Each one is connected to an object and displays a certain type of information (status, identifier, number, marker).

Object Status

The object status is a short text that represents the semantic status of an object. It has a semantic color and an optional icon. Typically, the object status is used in the dynamic page header and as a status attribute of a line item in a table.

Object Identifier

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

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

Object Number

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

The object number is typically used to indicate the key attribute of an object in the dynamic page header, or as an attribute of a line item in a table.

Object Marker

The object marker indicates the technical status of an object. It is enabled for the dynamic page layout, snapping header, object page header, upload collection, and object list item.

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

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

Flag
Favorite
Editing Status (Draft, Locked, Unsaved Changes)
The editing status is part of the draft handling concept.

Usage

Use the object status if:

You need to display the semantic status of an object: negative (property: error), critical (property: warning), positive (property: success), or neutral (property: none).

Use the object number if:

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

Use the object identifier if:

You want to indicate the key identifier of the object.

Use the object marker if:

You want to display the technical state of an object (locked, draft, unsaved changes, favorite, flagged). If you want to display the status of the object in the business lifecycle, consider using the object status display component instead.
You need to show that the current object instance is locked by another user.

Do not use an object display components if:

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

Responsiveness

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

For more information about the responsive behavior of text in general, see Wrapping and Truncating Text.

Components

Object Status

The object status consists of the following:

A semantically colored text indicating the severity (property: text).
An optional icon (property: icon).
Optional inverted visualization. Use the inverted object status if the information is crucial for the user’s actions and needs to stand out visually (for example, in table list items).
An optional link (property: active). If the object status is used as a link, a hover effect is shown on non-touch devices.
If the object status is shown using a combination of icon and text, there is no hover effect for the icon.
An optional larger font (CSS class: sapMObjectStatusLarge). Use this feature if the object status is important in the business context and needs to stand out visually in the page header (for example, key value facets in an object page).

We recommend using the semantically colored text-only option. For more information about the meaning of the colors, see How to Use Semantic Colors / Industry-Specific Colors.

Text-only object status

Large object status

Object status with icon, text, and link in hover state

Inverted object status

Object Identifier

The object identifier has the following properties:

A title text (property: title)

Object identifier with title only

An optional additional descriptive text (property: text)

Object identifier with title and subtitle

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

Actionable object identifier

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

Object identifier with wrapping text

Object Number

The object number consists of the following:

A colored text (property: number), which can be set to non-emphasized when used in the content area (property: emphasized).
Semantics to indicate the status: negative (property: error), critical (property: warning), positive (property: success), and neutral (property: none). For more information about the meaning of the colors, see How to Use Semantic Colors.
An optional unit (property: unit).
An optional larger font (CSS class: sapMObjectNumberLarge). Use this feature if the object status is important in the business context and needs to stand out visually in the page header (for example, key value facets in an object page). Once the large font is applied, the object number can no longer be emphasized.

Emphasized object numbers

Large object number

Object numbers

Object Marker

The object marker comes with the following characteristics:

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

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

Draft

Unsaved changes

Locked

Favorite

Flagged

Guidelines

General

The object status and object number can make use of semantic colors. Check out when and how to use the semantic colors.

Object Status

General

Use semantic text only, and avoid using it with an icon.
Use the following semantics to indicate the status/severity: negative (property: error), critical (property: warning), positive (property: success), and neutral (property: none). To prevent the text being read as a link, don’t use the blue “information state” for the object status.

Positive object status

Provide a link for the object status if the user needs additional information about the status (for example, using a popover).

Critical object status during hover state

Only use icons if they are unambiguous and easily understood (such as a padlock for locked items). If you feel that your icon needs a descriptive text to be understood, use text only.

Widely used icon for warning

Tables

Always left-align the object status in a table.
Exception (responsive table only): If status information is displayed as secondary information in a column, the status should follow the alignment of the primary information.

Apply the following rules for sorting tables by status:

Ascending: Sort status information from positive to negative, with neutral last.
Descending: Sort status information from negative to positive, with neutral first.

Object status sorted ascending, with neutral status last

Object status sorted descending, with neutral status first

Ascending with different values per severity level: Sort status information from positive to negative, with neutral last. Sort different values within a severity level (semantic color) alphabetically.
Descending with different values per severity level: Sort status information from negative to positive, with neutral first. Sort different values within a severity level (semantic color) alphabetically.

Object status sorted ascending and alphabetically, from positive to negative with neutral last

Object status sorted descending and alphabetically, from negative to positive with neutral first

Object Identifier

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

Object Number

If the object number is the key attribute of the object inside the content area, emphasize the number when it is used as a line item status in a table.
The object number can also be used to visualize other semantic numeric attributes. In this case, they are not emphasized unless they are the key attribute, such as a sum.

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

Object Marker

An object can have multiple technical statuses at the same time. However, because the editing statuses are mutually exclusive, users will see a maximum of 3 technical statuses for an object: Flag, Favorite, and one Editing Status. The app developer is responsible for the technical statuses.

Every technical status has a default visualization that can be changed by the app developer depending on the usage context. Also see How to Display the Editing Status in the Draft Handling article.

Flag and Favorite are usually displayed as icons on all screen sizes. For more information, see Flag and Favorite.

The default behavior for the editing status is as follows:

Size L/M:

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

Size S:

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

Resources

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

Elements and Controls

How to Use Semantic Colors (guidelines)
Wrapping and Truncating Text (guidelines)
Flag and Favorite (guidelines)
Responsible Table (guidelines)

Implementation

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

Avatar

The avatar is a control that has various display options for representing images, icons, and initials.

Usage

Use the avatar if:

You want to display an image in a circular shape.
You want to use predefined sizes.
You want to display icons or initials.
You want to have placeholder images in case no image is provided.

Do not use the avatar if:

You would like to integrate an image into your app for any other use case. Instead, use the image control.
You want to display pictures in a carousel. Instead, use the carousel control.

Responsiveness

The avatar control has predefined sizes which are the same for both form factors – compact and cozy.

Types

Shapes

The avatar control can be set to a circular or square shape.

Avatar with both circular and squared shape

Content

The control can show images, icons, or initials.

Avatar showing an image, initials and an icon

Initials

The control can only display up to 2 Latin letters. If more or non-Latin letters are present, a placeholder will be shown.

Avatar with initials

Placeholder

If there is no image, icon, or initials provided, the avatar will show a default placeholder. There are two types of placeholders that can be shown. If the avatar is circular, a person icon will be shown. If the avatar is square, a product icon will be shown.

Avatar default placeholders for person and product

Custom Size

You can also set a custom size for the avatar.

Avatar with custom size

Predefined Sizes

The avatar control has five predefined sizes:

XL – 7 rem
L – 5 rem
M – 4 rem
S – 3 rem
XS – 2 rem

The predefined sizes are the same for both form factors – compact and cozy.

Predefined sizes - XL, L, M, S, XS

Fitting Images

With the imageFitType property, the avatar can fit images in two ways: Cover and Contain. The default value of the property is Cover.

Avatar with Cover and Contain property

Fallback Behavior for Missing Images

If the image source path provided for the avatar leads to a non-existent image, the fallback mechanism is as follows:

If initials are provided, the avatar displays initials.
If no initials are provided, the avatar displays a default icon. You can choose which icon from the SAP icon font is displayed (property: fallbackIcon).

Image fallback for avatar: initials, default icon, or custom icon

Guidelines

Use the circular shape to display images of a person or contact.
Use the square shape to display images of a product, logo, and so on.
If you need to define a size different from the predefined one, make sure that the font size is consistent with the size of the control itself.
If you use initials or icons and want to display a custom size for the avatar that is between two predefined sizes, use the predefined font size for the smaller one. For example, if your avatar is 5.5 rem, between sizes L and XL, then you should use the font size for size L: 2 rem.
For accessibility reasons, provide each image in the avatar with an alternative text in case the image is not available or cannot be displayed.
High-resolution images that are unnecessarily large in file size can drastically slow down page speed. Optimize your images in this case.

Resources

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

Elements and Controls

Image (guidelines)
Carousel (guidelines)

Implementation

Avatar (SAPUI5 samples)
Avatar (SAPUI5 API reference)

Carousel

The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed item or items, the user can navigate to either the next or the previous item.

Optionally, a paging indicator displays the user’s current position inside the set of items.

The carousel control is best used for browsing through a set of images. Viewing images one by one helps users to distinguish between different items. In a comparison scenario, it can also be useful to display several items side by side. The carousel is not limited to displaying images; it can contain any sap.m control.

Usage

Use the carousel if:

You have strong visual representations of the items you want to display.
You want to display items sequentially or side by side.

Do not use the carousel if:

The items you want to display are uniform.

Responsiveness

The size of the control’s content area is adjusted automatically, depending on the amount of space available.

On non-touch devices, the user can navigate with Previous and Next icons displayed on the left and right of the control.

On touch devices, the carousel control makes use of the swipe gesture to navigate through the items. As a result, Previous and Next icons are not displayed on touch devices.

The paging indicator (when activated) shows on all form factors. The paging indicator wraps if it is too long to fit onto one line.

Carousel - Size S

Carousel - Size M

Carousel - Size L

Layout

The main component of the carousel control is the content area in which the different items are displayed.

The (optional) paging indicator can float above or below the content area.

On non-touch devices, icons for navigating to the next or previous item either float above the left and right sides of the content area, or appear in the paging indicator area. This is controlled by the arrowsPlacement property.

Displaying multiple items

The layout of the carousel does not change when multiple items are displayed in the content area.

Schematic layout of the carousel

Behavior and Interaction

The content area contains either the current item or a set of items.

Navigation for Single Items

When the user navigates from the current item to another item, the current item is moved out of the content area, and the next or previous item slides in (depending on the direction of navigation).

On touch devices, users navigate with swipe gestures (swipe right or swipe left).

On non-touch devices, users navigate with icons.

If the item set contains only one item, navigation is deactivated.

Navigation – Previous

Navigation – Next (hover)

Navigation for Multiple Items

When the user navigates left or right, the rightmost or leftmost item is moved out of the content area, and the next or previous item slides in (depending on the navigation direction).

Carousel with multiple items

Looping

The carousel can be set to loop (property: loop). In this case, the carousel jumps back to the first item once all items have been displayed. If looping is not enabled, there is no forward navigation on the last item.

Paging

The current position inside the set of items is displayed using an optional paging indicator (properties: showPageIndicator, pageIndicatorPlacement).

Paging indicator

If there are more than 8 pages, the paging indicator changes from icons to numbers.

Paging indicator

Resources

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

Elements and Controls

Image (guidelines)

Implementation

Carousel (sample in SAPUI5 Demo Kit)
Carousel (SAPUI5 API reference)

Label

A label is the name or title of a control or group of related controls.

Label "Name" in a form

Usage

Use the label control if:

You need a label for a control. We recommend that you 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).

Types

There are two types of labels:

Required
Optional

To indicate that a field is required, set the required property to true. An asterisk is then added automatically in front of the label.

Required label in an editable environment (horizontal layout)

Result of a required label in a display-only environment

Optional label in an editable environment (vertical layout)

Result of an optional label in a display-only environment

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.

Developer Hint

The boolean wrapping property for the sap.m.Label control determines whether or not the text wraps .

Note: Only use this property in forms.

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.

Wrapping label

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.
Do not use bold labels.
A label is not a help text: it must be meaningful, succinct, short, and descriptive.

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:

When the form pattern is easily understood, such as on a login screen. Since this screen consists of only two input controls (User Name and Password), the labels do not have to be used.
When the form is extremely small and has fewer than three input fields. This can be the case for messages or small feedback forms.
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.

Elements and Controls

Form (guidelines)
Text (guidelines)
Wrapping and Truncating Text (guidelines)

Implementation

Label (SAPUI5 samples)
Label (SAPUI5 API reference)
Hyphenation for Text Controls (SAPUI5 documentation)

Title

The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.

The difference between a title and a manually styled heading is that the title can be used by assistive technologies such as screen readers to create a hierarchical site map for faster navigation.

The title is used, for example, by panel, toolbar, or list components.

Table with title in toolbar and header

Usage

Use the title if:

You want to set the title above a table or form.
You want to show text in the page header.

Do not use the title if:

The text is inside a text block.
The text is inside a form element.

Responsiveness

You can define whether the text should wrap or truncate directly (property: wrapping).

For more information on using wrapping and truncation, see Wrapping and Truncating Text.

Truncated title

Hyphenation

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

Wrapped title

Wrapped, hyphenated title

Styles

The actual appearance of the title and the different styles always depends on the theme being used.

The semantic level of the title can be set automatically or explicitly. With the automatic setting (property: level, value: Auto) no explicit level information is written (HTML5 header element). If you want to set it explicitly, use an HTML H1-H6 element (property: level, value: H1-H6).

The level (property: level, value: Auto, H1-H6) and title style (property: titleStyle, value: Auto, H1-H6) can be set independently.

Title with default level and style (H1)

Title with level H1 and default style

Title with level H2 and default style

Title with level H3 and default style

Title with level H4 and default style

Title with level H5 and default style

Title with level H6 and default style

Guidelines

When using the title in the dynamic page header, use wrapping in expanded mode and truncation in collapsed mode.
In other places, such as toolbars or dialog headers, do not use wrapping. Truncate the title instead.

Properties

The following properties are available:

The property text defines the text that should be displayed as a title.
The property level (default: auto) defines the semantic level used by assistive technology. The default level can be overridden with H1 to H6 to set the level explicitly.
The property titleStyle (default: auto) defines the actual appearance of the title. When you use automatic styling, the appearance of the title depends on the current position of the title and the defined level. This automatism can be overridden by explicitly setting a different style between H1 and H6.
The property width defines the width of the title.
The property textAlign (default: initial) defines the alignment of the text within the title. Note: This property only has an effect if the overall width of the title control is larger than the displayed text.

Resources

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

Elements and Controls

Toolbar (guidelines)
Panel (guidelines)
List (guidelines)

Implementation

Title (SAPUI5 samples)
Title (SAPUI5 API reference)
Hyphenation for Text Controls (SAPUI5 documentation)

Text

The text control is used to display text. It generally contains the text that developers want apps to display (property: text).

Text used within a form

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

You can define whether the text should wrap or truncate directly (property: wrapping).

You can also define how often the text should wrap before it truncates (property: maxLines).

For more information on using wrapping and truncation, see Wrapping and Truncating Text.

Text – Maximum line examples

Hyphenation

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

Text with hyphenation

Text without hyphenation

Resources

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

Elements and Controls

Label (guidelines)
Wrapping and Truncating Text (guidelines)

Implementation

Text (SAPUI5 samples)
Text (SAPUI5 API reference)
Hyphenation for Text Controls (SAPUI5 documentation)

Label

A label is the name or title of a control or group of related controls.

Label "Name" in a form

Usage

Use the label control if:

You need a label for a control. We recommend that you 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).

Types

There are two types of labels:

Required
Optional

To indicate that a field is required, set the required property to true. An asterisk is then added automatically in front of the label.

Required label in an editable environment (horizontal layout)

Result of a required label in a display-only environment

Optional label in an editable environment (vertical layout)

Result of an optional label in a display-only environment

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.

Developer Hint

The boolean wrapping property for the sap.m.Label control determines whether or not the text wraps .

Note: Only use this property in forms.

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.

Wrapping label

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.
Do not use bold labels.
A label is not a help text: it must be meaningful, succinct, short, and descriptive.

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:

When the form pattern is easily understood, such as on a login screen. Since this screen consists of only two input controls (User Name and Password), the labels do not have to be used.
When the form is extremely small and has fewer than three input fields. This can be the case for messages or small feedback forms.
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.

Elements and Controls

Form (guidelines)
Text (guidelines)
Wrapping and Truncating Text (guidelines)

Implementation

Label (SAPUI5 samples)
Label (SAPUI5 API reference)
Hyphenation for Text Controls (SAPUI5 documentation)

Generic Tag

The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.

Usage

Use the generic tag:

To display complementary information for an object, such as a KPI.
Preferably in the key information area of a dynamic page or in the header area of an object page, following the title.

Do not use the generic tag:

For decorative purposes.
For navigation.

Structure

A – Status Indicator / Criticality Indicator – Mandatory

The indicator displays the status/criticality of the tag. Only use it with the available semantic colors.

B – Status Icon – Optional

The status icon can help visualize the status/criticality of the tag. The color of the icon is always the same as the color of the status indicator. Always use the correct status icon for the respective status/criticality.

C – Title – Mandatory

Always use a meaningful title. Keep it simple and try to use no more than 3 words.

D – Value and Unit of Measure – Optional

The value represents the numeric (key) attribute and its unit. The value has a semantic color, and the unit inherits the color from the value. The color of the value must be the same as the color of the status indicator. For more information, see Object Number.

Generic Tag for KPIs

To display KPIs, use the following structure:

A – Status indicator / criticality indicator
C – Title
D – Value and unit of measure

Structure of the generic tag

KPI as a generic tag

Responsiveness

The generic tag itself is not responsive. To enable responsiveness, use the overflow toolbar.

Generic tag overflow in the analytical list page - Size S

Behavior and Interaction

The generic tag has a press event. Use this event only to open a popover or analytical card containing relevant information, using the progressive disclosure technique.

Resources

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

Elements and Controls

Semantic Colors (guidelines)
Object Number (guidelines)
Analytical Card (guidelines)
Overflow Toolbar (guidelines)

Implementation

Generic Tag (SAPUI5 samples)

Progress Indicator

The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color to indicate the state of progress. The advancement depends on the specific process. The progress is shown either using absolute numbers or the current percentage of completion together with a progress bar.

Within SAP Fiori, the progress indicator is used as a “meter” or micro chart. It indicates a current object status and is not related to any process that is currently running.

Usage

Use the progress indicator if:

You need to visually show a current status.
You need to visually strengthen a current status.
You need to make different states comparable to each other at a higher level.
You want to show custom values as well as percentages.

Do not use the progress indicator if:

Visual feedback is needed for an ongoing operation. Use a busy indicator instead.
The progress is indeterminate. Use a busy indicator instead.
You want to display a single value in the form of a fillable shape or a group of shapes that describe their context. Use the status indicator instead.

Responsiveness

The progress indicator itself is not responsive. It supports the cozy and compact form factors. The compact form factor is used for apps that run on a device operated by a mouse and keyboard. For more information, see Content Density (Cozy and Compact).

Progress indicator in compact mode

Progress indicator in cozy mode

Layout

Show the current progress as a percentage value between 0% and 100% (property: percentValue).

Progress indicator displaying 10% progress

Progress indicator displaying 50% progress

Progress indicator displaying 80% progress

Alternatively, you can show the current progress as text in addition to the bar. In this case, the text is shown on the right of the bar if the progress is 50% or less. In all other cases, the progress is shown right-aligned on the bar itself (property: showValue).

Textual presentation for progress of 50% or less

Textual presentation for progress of more than 50%

Progress indicator without textual representation

You also have the option of showing any application-specific text instead of a percentage (property: displayValue).

App-specific textual representation of progress

Styles

The progress indicator can be enabled or disabled (property: enabled)

Enabled progress indicator

Disabled progress indicator

For usage in read-only forms or read-only tables, the progress indicator provides a “display” state. This state is optimized for reading environments. The default height is lower, and the bar color darker (property: displayOnly).

Progress indicator in display state

The progress indicator can visualize different value states that are represented by various theme-dependent semantic colors. The states are: normal, success, warning, error, and information (property: state).

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

Value states can be combined with the “enabled” and “display” states.

Progress indicator in success state

Progress indicator in warning state

Progress indicator in error state

Progress indicator in information state

Guidelines

Use the progress indicator to add clarity and weight to an important state that needs to be perceived very quickly.

Progress indicator used for status display

Always provide a label for the progress indicator.

Exception: If the progress indicator is used as a single control inside a cell of a responsive table, the column header text is used as a label.

Progress indicator in a responsive table

Use a group of up to five bars to help users compare different states at a high level. Note that in a group of more than five bars, slight differences are much harder to perceive than a numeric display.

If the user has to compare a group of values, be sure to use the same visual display for all of them (only bars or only numbers).

Group of progress indicators

Progress indicators are typically used within (but not restricted to) the following controls:

Do not disable a progress indicator. A progress indicator is not interactive, therefore disabling it has no effect.

Exception: The progress indicator is shown inside a disabled UI area, such as a completely disabled form or panel.

Properties

The following additional properties are available for the progress indicator:

The width property defines the width of the progress indicator. The height property defines the height of the progress indicator. Adapt it only if the default height does not fit into the surrounding context. Do not use a height below 1.5 rems if text is shown inside the progress indicator.
The textDirection property is used for localiaztion (right-to-left languages).
The busy property sets the progress indicator to busy state.
The visible property shows or hides the progress indicator.
The tooltip property does not have an effect.

Resources

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

Elements and Controls

Busy Dialog (guidelines)
Busy Indicator (guidelines)
Busy State (guidelines)
How to Use Semantic Colors (guidelines)

Implementation

Progress Indicator (SAPUI5 samples)
Progress Indicator (SAPUI5 API reference)

Info Bar

The info bar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:

Filter criteria: The info bar indicates the filter criteria that have been applied for a filter or contextual filter. Do not show the info bar if no filter is applied.
Selected items: In a multi-select dialog, the info bar shows the number of selected items.

The info bar is placed above the content and shows the applied filters

Responsiveness

The bar has the same height, text size, and icon size in both cozy and compact formats. The text inside the bar will be truncated if there’s not enough space.

Text is truncated on a small screen. The example shows an info bar for a contextual filter.

Types

There are three situations in which an info bar is shown:

After a general filter has been applied.
After a contextual filter has been applied.
After the user has selected multiple items in a select dialog.

General Filter

All applied filters are shown as labels in the info bar.

Info bar after a filter has been applied

Contextual Filter

The contextual filter allows the user to see a prefiltered view of a list. The title on the left side and an icon on the right side display the filter criteria. The Filter icon should represent the filter category. Do not use a generic filter icon, otherwise it may be confused with the user-triggered filters. For more information, see contextual filter.

Info bar after a contextual filter has been applied

Multiselection

If the user selects multiple items, the info bar shows the number of selected items. For more information, see select dialog.

Info bar after multiselection has been applied

Components

The info bar is a toolbar that consists of a label on the left side and an icon on the right side.

The label shows the filter criteria, and the icon selected depends on the use case.

General Filter and Multiselection

No icon is shown. The only exception is the Cancel icon, which is used to reset the current filter criteria.

Info bar with optional Cancel icon

Contextual Filter

The icon is mandatory and represents the current filter criterion.

There is one exception in which it is useful to be able to cancel the contextual filter. In this special case, the contextual filter is used to prefilter the listed items in a select dialog. For this case, use the Cancel icon instead of the Filter icon. For more information, see contextual filter.

In all other use cases, show an icon that represents the filter criterion.

Contextual filter with filter icon

Behavior and Interaction

The bar can have two active areas: either the entire bar can be active, or if an icon is added, it creates a second active area. We recommend that you use the active behavior for the bar and the icon.

Bar Area

When the user clicks or taps the bar, the filter dialog from the view settings dialog is shown. If only one filter is applied, the filter can be changed directly in the detailed filter selection. If more than one filter is applied, the filter dialog shows a list with general filter categories.

Clicking the info bar with a single filter shows the detailed filter selection.

Clicking the info bar with multiple filters shows the filter categories.

Icon Area

Cancel: The user clicks or taps the icon to delete the current filter settings. We recommend that you use the cancel icon.
Filter (only contextual filter): Clicking the icon has the same effect as clicking the bar. The filter dialog is shown.

Properties

The contextual filter is not a separate control. If you want to build an info bar, you need to use the sap.m.toolbar control. To achieve the info bar design, set the design toolbar property to “info”.

Resources

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

Elements and Controls

Select Dialog (guidelines)
Contextual Filter (guidelines)
Toolbar (guidelines)
View Settings Dialog (guidelines)

Implementation

No links

Title

The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.

The difference between a title and a manually styled heading is that the title can be used by assistive technologies such as screen readers to create a hierarchical site map for faster navigation.

The title is used, for example, by panel, toolbar, or list components.

Table with title in toolbar and header

Usage

Use the title if:

You want to set the title above a table or form.
You want to show text in the page header.

Do not use the title if:

The text is inside a text block.
The text is inside a form element.

Responsiveness

You can define whether the title should wrap or truncate directly (property: wrapping).

You can also define how often the title text should wrap before it truncates (property: maxLines).

For more information on using wrapping and truncation, see Wrapping and Truncating Text.

A long title that is truncated on small screens

Behavior & Interaction

Hyphenation

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

Styles

The actual appearance of the title and the different styles always depends on the theme being used.

The semantic level of the title can be set automatically or explicitly. With the automatic setting (property: level, value: Auto) no explicit level information is written (HTML5 header element). If you want to set it explicitly, use an HTML H1-H6 element (property: level, value: H1-H6).

The level (property: level, value: Auto, H1-H6) and title style (property: titleStyle, value: Auto, H1-H6) can be set independently.

Title with default level and style (H1)

Title with level H1 and default style

Title with level H2 and default style

Title with level H3 and default style

Title with level H4 and default style

Title with level H5 and default style

Title with level H6 and default style

Guidelines

When using the title in the dynamic page header, use wrapping in expanded mode and truncation in collapsed mode.
In other places, such as toolbars or dialog headers, do not use wrapping. Truncate the title instead.

Properties

The following properties are available:

The property text defines the text that should be displayed as a title.
The property level (default: auto) defines the semantic level used by assistive technology. The default level can be overridden with H1 to H6 to set the level explicitly.
The property titleStyle (default: auto) defines the actual appearance of the title. When you use automatic styling, the appearance of the title depends on the current position of the title and the defined level. This automatism can be overridden by explicitly setting a different style between H1 and H6.
The property width defines the width of the title.
The property textAlign (default: initial) defines the alignment of the text within the title. Note: This property only has an effect if the overall width of the title control is larger than the displayed text.

Resources

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

Elements and Controls

Toolbar (guidelines)
Panel (guidelines)
List (guidelines)

Implementation

Title (SAPUI5 samples)
Title (SAPUI5 API reference)
Hyphenation for Text Controls (SAPUI5 documentation)

Label

A label is the name or title of a control or group of related controls.

Label "Name" in a form

Usage

Use the label control if:

You need a label for a control. We recommend that you 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).

Types

There are two types of labels:

Required
Optional

To indicate that a field is required, set the required property to true. An asterisk is then added automatically in front of the label.

Required label in an editable environment (horizontal layout)

Result of a required label in a display-only environment

Optional label in an editable environment (vertical layout)

Result of an optional label in a display-only environment

Behavior & Interaction

Hyphenation

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

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.

Developer Hint

The boolean wrapping property for the sap.m.Label control determines whether or not the text wraps .

Note: Only use this property in forms.

Wrapping label

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.
Do not use bold labels.
A label is not a help text: it must be meaningful, succinct, short, and descriptive.

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:

When the form pattern is easily understood, such as on a login screen. Since this screen consists of only two input controls (User Name and Password), the labels do not have to be used.
When the form is extremely small and has fewer than three input fields. This can be the case for messages or small feedback forms.
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.

Elements and Controls

Form (guidelines)
Text (guidelines)
Wrapping and Truncating Text (guidelines)

Implementation

Label (SAPUI5 samples)
Label (SAPUI5 API reference)
Hyphenation for Text Controls (SAPUI5 documentation)

Text

The text control is used to display text. It generally contains the text that developers want apps to display (property: text).

Text used within a form

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.

Behavior & Interaction

Hyphenation

The text control supports language-specific hyphenation.

Properties

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

For more information about the responsive behavior of text, see Wrapping and Truncating Text.

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.

Text – Maximum line examples

Resources

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

Elements and Controls

Label (guidelines)
Wrapping and Truncating Text (guidelines)

Implementation

Text (SAPUI5 samples)
Text (SAPUI5 API reference)
Hyphenation for Text Controls (SAPUI5 documentation)

T Account

In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often referred to as T accounts. A ledger account (or T account) is usually displayed in a format that resembles the letter T: with the account name above the T, debit entries to the left of the T, and credit entries to the right of the T.

T accounts are usually clustered together, so the accountants can analyze how individual line items from different journal entries affect the ledger balances.

Example of a T account

Usage

Use the T account if:

You need to analyze how individual line items affect one or several ledger accounts.
You want to highlight the cross-account impact of one journal entry.
You want to aggregate data of individual ledger accounts and provide total balances.

Do not use the T account if:

You need to aggregate data through a different dimension than the account balance. Use a table instead.
You need to display objects that are not journal entry line items.

Responsiveness

The T account control is fully responsive, and uses 100% of the available width of the container in which it is embedded. Depending on the available width, the number of T accounts on each line is updated dynamically to fit the available space.

On mobile devices, the T account control requires the full available width in order to display all its content.

The minimum width of each T account element is 20 rem (320 px). The width of the T account element grows until it reaches a breakpoint where enough width is available to render 2 or more T accounts on one line, leaving a space of 1 rem (16 px) between the T account items.

Size S

Size M

Size L

Layout

The T account control consists of a header toolbar, an account group heading, and individual T account elements. The header toolbar and account group heading can be hidden on the API level.

Schematic visualization of a T account

Components

By default, the T account control consists of a header toolbar, account group heading, and T accounts.

Header Toolbar

A – Title: Provides a short and meaningful summary of the control’s content.
B – Total Balance: Calculates the overall balance based on total credit and debit amounts of the ledger accounts included.
C – View Switch: Switches the view between the T account view and table view.
D – Settings: Displays a settings dialog, allowing users to show or hide additional information about accounts.

Account Group Heading

Each account group heading uses the expand/collapse behavior of the sap.m.Panel control, with an additional total balance indicator for the T accounts in the group as well as Expand All / Collapse All buttons. The Expand All / Collapse All buttons can be used to expand or collapse the content of all T accounts included in this account group.

A – Expand/Collapse: Expands or collapses the group of accounts.
B – Account Group Title: The name of the group of accounts.
C – Group Balance: Calculates the balance based on total credit and debit entries of all T accounts included in the account group.
D – Expand All: Expands all T accounts within the group of accounts.
E – Collapse All: Collapses all T accounts within the group of accounts.

T Account

Every T account element consists of a heading, debit and credit content headings, and individual ledger entry blocks.

The number of individual entry blocks is unlimited and could potentially reach hundreds of blocks.

The entry blocks are nested under Credit and Debit headings. Each entry block takes 50% of the available width of the container. The credit and debit entry blocks are separated by a 1 rem (16 px) space.

A – Expand/Collapse: Expands or collapses the T account.
B – Account Title: The name of the T account.
C – Account Balance: The sum of all credit and debit entries in the T account.
D – Debit Content Heading
E – Credit Content Heading
F – Entry Block Amount: Provides the amount for a single ledger entry.
G – Entry Block: Displays details of a specific ledger entry.

Header toolbar

Account group heading

T account

Behavior and Interaction

Matching Entries

Each journal entry usually impacts several ledger accounts. When the user clicks an entry in a T account, the control highlights this entry and all related entries in other T accounts, which helps identify matching entries in different accounts.

Highlighting for related entries

Color Indicators

You can allow users to add color indicators to specific journal entries.

The T account control supports this on API level. However, the implementation should be done on the app level.

Information

To ensure consistency with other controls, sap.m.ColorPalette or sap.ui.unified.ColorPicker controls must be used together with standard SAP Fiori color palettes.

Tagging

Drag and Drop

By default, the control arranges T accounts dynamically to consume as little space as possible within the column grid. However, users can rearrange the T accounts freely by dragging them around.

If you would like to let users store their reordered layouts, use the variant management control.

View Settings

The view settings dialog enables the users to show or hide certain attributes of each entry block in a T account.

Additionally, you can show or hide labels that precede the values.

View settings

Resources

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

Elements and Controls

Dialog (guidelines)
Colors (guidelines)

Implementation

T Account (SAPUI5 samples)
T Account (SAPUI5 API)

Object Display Components

There are four types of object display components: object status, object identifier, object number, and object marker. Each one is connected to an object and displays a certain type of information (status, identifier, number, marker).

Object Status

The object status is a short text that represents the semantic status of an object. It has a semantic color and an optional icon. Typically, the object status is used in the dynamic page header and as a status attribute of a line item in a table.

Object Identifier

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

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

Object Number

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

The object number is typically used to indicate the key attribute of an object in the dynamic page header, or as an attribute of a line item in a table.

Object Marker

The object marker indicates the technical status of an object. It is enabled for the dynamic page layout, snapping header, object page header, upload collection, and object list item.

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

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

Flag
Favorite
Editing Status (Draft, Locked, Unsaved Changes)
The editing status is part of the draft handling concept.

Usage

Use the object status if:

You need to display the semantic status of an object: negative (property: error), critical (property: warning), positive (property: success), or neutral (property: none).

Use the object number if:

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

Use the object identifier if:

You want to indicate the key identifier of the object.

Use the object marker if:

You want to display the technical state of an object (locked, draft, unsaved changes, favorite, flagged). If you want to display the status of the object in the business lifecycle, consider using the object status display component instead.
You need to show that the current object instance is locked by another user.

Do not use an object display components if:

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

Responsiveness

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

For more information about the responsive behavior of text in general, see Wrapping and Truncating Text.

Components

Object Status

The object status consists of the following:

A semantically colored text indicating the severity (property: text).
An optional icon (property: icon).
An optional link (property: active). If the object status is used as a link, a hover effect is shown on non-touch devices.
If the object status is shown using a combination of icon and text, there is no hover effect for the icon.

We recommend using the semantically colored text-only option. For more information about the meaning of the colors, see How to Use Semantic Colors.

Text-only object status

Object status with icon, text, and link in hover state

Object Identifier

The object identifier has the following properties:

A title text (property: title)

Object identifier with title only

An optional additional descriptive text (property: text)

Object identifier with title and subtitle

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

Actionable object identifier

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

Object identifier with wrapping text

Object Number

The object number consists of the following:

A colored text (property: number), which can be set to non-emphasized when used in the content area (property: emphasized).
Semantics to indicate the status: negative (property: error), critical (property: warning), positive (property: success), and neutral (property: none). For more information about the meaning of the colors, see How to Use Semantic Colors.
An optional unit (property: unit).

Emphasized object numbers

Object numbers

Object Marker

The object marker comes with the following characteristics:

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

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

Draft

Unsaved changes

Locked

Favorite

Flagged

Guidelines

General

The object status and object number can make use of semantic colors. Check out when and how to use the semantic colors.

Object Status

General

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

Positive object status

Provide a link for the object status if the user needs additional information about the status (for example, using a popover).

Critical object status during hover state

Only use icons if they are unambiguous and easily understood (such as a padlock for locked items). If you feel that your icon needs a descriptive text to be understood, use text only.

Widely used icon for warning

Tables

Always left-align the object status in a table.
Exception (responsive table only): If status information is displayed as secondary information in a column, the status should follow the alignment of the primary information.

Apply the following rules for sorting tables by status:

Ascending: Sort status information from positive to negative, with neutral last.
Descending: Sort status information from negative to positive, with neutral first.

Object status sorted ascending, with neutral status last

Object status sorted descending, with neutral status first

Ascending with different values per severity level: Sort status information from positive to negative, with neutral last. Sort different values within a severity level (semantic color) alphabetically.
Descending with different values per severity level: Sort status information from negative to positive, with neutral first. Sort different values within a severity level (semantic color) alphabetically.

Object status sorted ascending and alphabetically, from positive to negative with neutral last

Object status sorted descending and alphabetically, from negative to positive with neutral first

Object Identifier

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

Object Number

If the object number is the key attribute of the object inside the content area, emphasize the number when it is used as a line item status in a table.
The object number can also be used to visualize other semantic numeric attributes. In this case, they are not emphasized unless they are the key attribute, such as a sum.

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

Object Marker

An object can have multiple technical statuses at the same time. However, because the editing statuses are mutually exclusive, users will see a maximum of 3 technical statuses for an object: Flag, Favorite, and one Editing Status. The app developer is responsible for the technical statuses.

Every technical status has a default visualization that can be changed by the app developer depending on the usage context. Also see How to Display the Editing Status in the Draft Handling article.

Flag and Favorite are usually displayed as icons on all screen sizes. For more information, see Flag and Favorite.

The default behavior for the editing status is as follows:

Size L/M:

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

Size S:

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

Resources

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

Elements and Controls

How to Use Semantic Colors (guidelines)
Wrapping and Truncating Text (guidelines)
Flag and Favorite (guidelines)
Responsible Table (guidelines)

Implementation

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

Text

The text control is used to display text. It generally contains the text that developers want apps to display (property: text).

Text used within a form

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.

Properties

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

For more information about the responsive behavior of text, see Wrapping and Truncating Text.

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.

Text – Maximum line examples

Resources

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

Elements and Controls

Label (guidelines)
Wrapping and Truncating Text (guidelines)

Implementation

Text (SAPUI5 samples)
Text (SAPUI5 API reference)

Label

A label is the name or title of a control or group of related controls.

Label "Name" in a form

Usage

Use the label control if:

You need a label for a control. We recommend that you 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).

Types

There are two types of labels:

Required
Optional

To indicate that a field is required, set the required property to true. An asterisk is then added automatically in front of the label.

Required label in an editable environment (horizontal layout)

Result of a required label in a display-only environment

Optional label in an editable environment (vertical layout)

Result of an optional label in a display-only environment

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.

Developer Hint

The boolean wrapping property for the sap.m.Label control determines whether or not the text wraps .

Note: Only use this property in forms.

Wrapping label

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.
Do not use bold labels.
A label is not a help text: it must be meaningful, succinct, short, and descriptive.

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:

When the form pattern is easily understood, such as on a login screen. Since this screen consists of only two input controls (User Name and Password), the labels do not have to be used.
When the form is extremely small and has fewer than three input fields. This can be the case for messages or small feedback forms.
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.

Elements and Controls

Form (guidelines)
Text (guidelines)
Wrapping and Truncating Text (guidelines)

Implementation

Label (SAPUI5 samples)
Label (SAPUI5 API reference)

Token

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.

Token

Usage

Use tokens only in the multi-combo box, multi-input control, or value help dialog.

Components

The tokenizer is an invisible container that can display multiple tokens.

Tokens have the following properties:

They usually contain single text items.
They may also contain key-value pairs, such as John Miller (ID1234567).
They contain a Remove icon , which is invisible if the token is in edit mode.

Tokens with a surrounding tokenizer

Behavior and Interaction

Interacting

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

Selecting and Deselecting Tokens

Users can select tokens by clicking 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 a new position. The tokens between these two cursor positions are then selected.

Adding Tokens

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.

Information

For information on how to manage leading and treading whitespace (blanks) when copying and pasting text into input controls, please see removing leading and trailing whitespace.

Removing Tokens

The user can instantly remove tokens via the keyboard, or by clicking the Remove icon .

Styles

There are five different styles of tokens: regular, on hover, selected, selected on hover and read-only. These styles correspond to the type of interaction being used.

Regular

On hover

Selected

Read only

Hover selected

Guidelines

The tokenizer can also be used as a tag container.

Resources

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

Elements and Controls

Multi-Combo Box (guidelines)
Multi-Input Field (guidelines)
Value Help Dialog (guidelines)
Combo Box (guidelines)

Implementation

Tokens (SAPUI5 samples)
Tokenizer (SAPUI5 samples)
Tokens (SAPUI5 API reference)
Tokenizer (SAPUI5 API reference)

Status Indicator

The status indicator uses a filled shape to visualize a single value. Unlike the progress indicator or the radial micro chart, the indicator provides the user with a meaningful association through its use of icons.

Selection of status indicators

Usage

Use the status indicator if:

You need to display a single value with an icon that describes its context.
You need to display a single value that can be updated in real time without reloading the page.

Do not use the status indicator if:

You need to display a single value within a table. Use the progress indicator or radial micro chart instead.
You need to show a rating. Use the rating indicator instead.
The status indicator does not provide the user with any meaningful information and would be for decoration only.

Embedding the Status Indicator

The status indicator can be embedded in other controls, including but not limited to the following:

Status Indicator Embedded in Other Controls

Responsiveness

The status indicator provides four different sizes: small (size S), medium (size M), large (size L), and extra-large (size XL).

For the small size, the partial fill is replaced by a fully-filled shape that can only indicate the semantic per threshold reached.

Predefined Sizes of the Status Indicator (S, M, L, XL)

Layout

A status indicator can consist of a scalable vector graphics (SVG) shape and additional information, such as a label. The status indicator can be configured as a shape only (default), or as a shape with a fixed label.

Shape Only

By default, the status indicator consists of a single shape. We recommend using this type of status indicator when you need to display a fraction of a value, rather than a specific value.

Status indicator - Shape only

Shape with a Fixed Label

This type of status indicator includes not only a shape, but also a label that uses semantic colors defined for the the value thresholds of the status indicator. In addition, you can switch between different alignment options, such as left, right, top, or bottom. We recommended using this type of status indicator when the user needs to see the exact value.

Status indicator - Shape and label

Types

Linear Fill

Most shapes can be filled linearly. You can set the shape to be filled from the left, right, top, or bottom, or define a specific angle for filling.

Status indicator with linear fill

Circular Fill

For round shapes, you can use the circular fill.

Status indicator with circular fill

Filling Sequence

The sequential fill option is useful when the shape consists of multiple parts. You can fill the parts sequentially one by one, or set your own filling order.

Status indicator with filling sequence

Grouping

You can group several shapes together and decide how the filling should be orchestrated among the shapes in this group.

Status indicator grouping

Thresholds

You can set one or more thresholds for each status indicator and assign a color to each threshold. The color changes when a threshold has been exceeded. Only use thresholds and semantic colors if they are meaningful to the user. Do not use them for decoration.

Status indicator tresholds

Behavior and Interaction

You can define a click event for the status indicator. If the status indicators are grouped, you can define a click event for each status indicator or for the entire group.

Information

When setting a click event for a non-filled shape, we recommend using a darker background color to emphasize that the shape is clickable and not disabled.

Guidelines

Shape Definition

You can download the predefined shapes or create your own custom shapes. For more information on how to create custom shapes correctly, see the API documentation.

Developer Hint

Only circle, rectangle, and path tags are supported inside the SVG file.

Animation Duration

Shape animation follows the motion design principles, with a maximum duration of 250 ms (small moves).

Resources

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

Elements and Controls

Radial Micro Chart (guidelines)
Progress Indicator (guidelines)
Micro Process Flow (guidelines)
Motion Design (guidelines)

Implementation

Status Indicator (SAPUI5 sample)
Status Indicator (SAPUI5 API reference)
Download Predefined Shapes (ZIP file)

Title

The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.

The difference between a title and a manually styled heading is that the title can be used by assistive technologies such as screen readers to create a hierarchical site map for faster navigation.

The title is used, for example, by panel, toolbar, or list components.

Table with title in toolbar and header

Usage

Use the title if:

You want to set the title above a table or form.
You want to show text in the page header.

Do not use the title if:

The text is inside a text block.
The text is inside a form element.

Responsiveness

Long titles can be truncated or wrapped if the screen is narrower than the full title (property: wrapping).

A long title that is truncated on small screens

Styles

The actual appearance of the title and the different styles always depends on the theme being used.

The semantic level of the title can be set automatically or explicitly. With the automatic setting (property: level, value: Auto) no explicit level information is written (HTML5 header element). If you want to set it explicitly, use an HTML H1-H6 element (property: level, value: H1-H6).

The level (property: level, value: Auto, H1-H6) and title style (property: titleStyle, value: Auto, H1-H6) can be set independently.

Title with default level and style (H1)

Title with level H1 and default style

Title with level H2 and default style

Title with level H3 and default style

Title with level H4 and default style

Title with level H5 and default style

Title with level H6 and default style

Guidelines

When using the title in the dynamic page header, use wrapping in expanded mode and truncation in collapsed mode.
In other places, such as toolbars or dialog headers, do not use wrapping. Truncate the title instead.

Properties

The following properties are available:

The property text defines the text that should be displayed as a title.
The property level (default: auto) defines the semantic level used by assistive technology. The default level can be overridden with H1 to H6 to set the level explicitly.
The property titleStyle (default: auto) defines the actual appearance of the title. When you use automatic styling, the appearance of the title depends on the current position of the title and the defined level. This automatism can be overridden by explicitly setting a different style between H1 and H6.
The property width defines the width of the title.
The property textAlign (default: initial) defines the alignment of the text within the title. Note: This property only has an effect if the overall width of the title control is larger than the displayed text.

Resources

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

Elements and Controls

Toolbar (guidelines)
Panel (guidelines)
List (guidelines)

Implementation

Title (SAPUI5 samples)
Title (SAPUI5 API reference)

Object Display Components

There are four types of object display components: object status, object identifier, object number, and object marker. Each one is connected to an object and displays a certain type of information (status, identifier, number, marker).

Object Status

The object status is a short text that represents the semantic status of an object. It has a semantic color and an optional icon. Typically, the object status is used in the dynamic page header and as a status attribute of a line item in a table.

Object Identifier

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

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

Object Number

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

The object number is typically used to indicate the key attribute of an object in the dynamic page header, or as an attribute of a line item in a table.

Object Marker

The object marker indicates the technical status of an object. It is enabled for the dynamic page layout, snapping header, object page header, upload collection, and object list item.

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

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

Flag
Favorite
Editing Status (Draft, Locked, Unsaved Changes)
The editing status is part of the draft handling concept.

Usage

Use the object status if:

You need to display the semantic status of an object: negative (property: error), critical (property: warning), positive (property: success), or neutral (property: none).

Use the object number if:

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

Use the object identifier if:

You want to indicate the key identifier of the object.

Use the object marker if:

You want to display the technical state of an object (locked, draft, unsaved changes, favorite, flagged). If you want to display the status of the object in the business lifecycle, consider using the object status display component instead.
You need to show that the current object instance is locked by another user.

Do not use an object display components if:

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

Responsiveness

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

Components

Object Status

The object status consists of the following:

A semantically colored text indicating the severity (property: text).
An optional icon (property: icon).
An optional link (property: active). If the object status is used as a link, a hover effect is shown on non-touch devices.
If the object status is shown using a combination of icon and text, there is no hover effect for the icon.

We recommend using the semantically colored text-only version.

Text-only object status (left), icon-only object status (middle), and icon with text shown with a link during hover state (right)

Object Identifier

The object identifier has the following properties:

A title text (property: title)

Object identifier with title only

An optional additional descriptive text (property: text)

Object identifier with title and subtitle

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

Actionable object identifier

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

Object identifier with wrapping text

Object Number

The object number consists of the following:

A colored text (property: number), which can be set to non-emphasized when used in the content area (property: emphasized).
Semantics to indicate the status: negative (property: error), critical (property: warning), positive (property: success), and neutral (property: none).
An optional unit (property: unit).

Emphasized object numbers

Object numbers

Object Marker

The object marker comes with the following characteristics:

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

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

Draft

Unsaved changes

Locked

Favorite

Flagged

Guidelines

Object Status

General

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

Positive object status

Provide a link for the object status if the user needs additional information about the status (for example, using a popover).

Critical object status during hover state

Only use icons if they are unambiguous and easily understood (such as a padlock for locked items). If you feel that your icon needs a descriptive text to be understood, use text only.

Widely used icon for warning

Tables

Always left-align the object status in a table.
Exception (responsive table only): If status information is displayed as secondary information in a column, the status should follow the alignment of the primary information.

Apply the following rules for sorting tables by status:

Ascending: Sort status information from positive to negative, with neutral last.
Descending: Sort status information from negative to positive, with neutral first.

Object status sorted ascending, with neutral status last

Object status sorted descending, with neutral status first

Ascending with different values per severity level: Sort status information from positive to negative, with neutral last. Sort different values within a severity level (semantic color) alphabetically.
Descending with different values per severity level: Sort status information from negative to positive, with neutral first. Sort different values within a severity level (semantic color) alphabetically.

Object status sorted ascending and alphabetically, from positive to negative with neutral last

Object status sorted descending and alphabetically, from negative to positive with neutral first

Object Identifier

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

Object Number

If the object number is the key attribute of the object inside the content area, emphasize the number when it is used as a line item status in a table.
The object number can also be used to visualize other semantic numeric attributes. In this case, they are not emphasized unless they are the key attribute, such as a sum.

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

Object Marker

An object can have multiple technical statuses at the same time. However, because the editing statuses are mutually exclusive, users will see a maximum of 3 technical statuses for an object: Flag, Favorite, and one Editing Status. The app developer is responsible for the technical statuses.

Every technical status has a default visualization that can be changed by the app developer depending on the usage context. Also see How to Display the Editing Status in the Draft Handling article.

Flag and Favorite are usually displayed as icons on all screen sizes. For more information, see Flag and Favorite.

The default behavior for the editing status is as follows:

Size L/M:

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

Size S:

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

Resources

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

Elements and Controls

Flag and Favorite (guidelines)
Responsible Table (guidelines)

Implementation

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

Progress Indicator

The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color to indicate the state of progress. The advancement depends on the specific process. The progress is shown either using absolute numbers or the current percentage of completion together with a progress bar.

Within SAP Fiori, the progress indicator is used as a “meter” or micro chart. It indicates a current object status and is not related to any process that is currently running.

Usage

Use the progress indicator if:

You need to visually show a current status.
You need to visually strengthen a current status.
You need to make different states comparable to each other at a higher level.
You want to show custom values as well as percentages.

Do not use the progress indicator if:

Visual feedback is needed for an ongoing operation. Use a busy indicator instead.
The progress is indeterminate. Use a busy indicator instead.
You want to display a single value in the form of a fillable shape or a group of shapes that describe their context. Use the status indicator instead.

Responsiveness

The progress indicator itself is not responsive. It supports the cozy and compact form factors. The compact form factor is used for apps that run on a device operated by a mouse and keyboard. For more information, see Content Density (Cozy and Compact).

Progress indicator in compact mode

Progress indicator in cozy mode

Layout

Show the current progress as a percentage value between 0% and 100%. Property: percentValue.

Progress indicator displaying 10% progress

Progress indicator displaying 50% progress

Progress indicator displaying 80% progress

Alternatively, you can show the current progress as text in addition to the bar. In this case, the text is shown on the right of the bar if the progress is 50% or less. In all other cases, the progress is shown right-aligned on the bar itself. Property: showValue.

Textual presentation for progress of 50% or less

Textual presentation for progress of more than 50%

Progress indicator without textual representation

You also have the option of showing any application-specific text instead of a percentage. Property: displayValue.

App-specific textual representation of progress

Styles

The progress indicator can be enabled or disabled. Property: enabled.

Enabled progress indicator

Disabled progress indicator

For usage in read-only forms or read-only tables, the progress indicator provides a “display” state. This state is optimized for reading environments. The default height is lower, and the bar color darker. Property: displayOnly.

Progress indicator in display state

The progress indicator can visualize different value states that are represented by various theme-dependent semantic colors. The states are: normal, success, warning, and error. Property: state.

Value states can be combined with the “enabled” and “display” states.

Progress indicator in success state

Progress indicator in warning state

Progress indicator in error state

Guidelines

Use the progress indicator to add clarity and weight to an important state that needs to be perceived very quickly.

Progress indicator used for status display

Always provide a label for the progress indicator.

Exception: If the progress indicator is used as a single control inside a cell of a responsive table, the column header text is used as a label.

Progress indicator in a responsive table

Use a group of up to five bars to help users compare different states at a high level. Note that in a group of more than five bars, slight differences are much harder to perceive than a numeric display.

If the user has to compare a group of values, be sure to use the same visual display for all of them (only bars or only numbers).

Group of progress indicators

Progress indicators are typically used within (but not restricted to) the following controls:

Do not disable a progress indicator. A progress indicator is not interactive, therefore disabling it has no effect.

Exception: The progress indicator is shown inside a disabled UI area, such as a completely disabled form or panel.

Properties

The following additional properties are available for the progress indicator:

The property “width” defines the width of the progress indicator. The property “height” defines the height of the progress indicator. Adapt it only if the default height does not fit into the surrounding context. Do not use a height below 1.5 rems if text is shown inside the progress indicator.
The property “textDirection” is used for localiaztion (right-to-left languages).
The property “busy” sets the progress indicator to busy state.
The property “visible” shows or hides the progress indicator.
The property “tooltip” does not have an effect.

Resources

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

Elements and Controls

Busy Dialog (guidelines)
Busy Indicator (guidelines)
Busy State (guidelines)

Implementation

Progress Indicator (SAPUI5 samples)
Progress Indicator (SAPUI5 API reference)

PDF Viewer

The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open in a popup dialog. In addition, this control allows you to print and download the PDF documents it displays.

Usage

Use the PDF viewer control if:

You want your app to display PDF files on all devices and platforms.
You want the users of your app to be able to preview their documents as PDF files right inside your app.
You need to ensure the consistent behavior of PDF files across all SAP Fiori apps.
You need to work with events (loaded, validation, error) provided by the PDF viewer.

Do not use the PDF viewer if:

You need to provide an interactive PDF file (such as a data input form).

Responsiveness

The PDF viewer control is fully responsive on large-screen devices (size L). The range of responsive behavior available on desktop devices depends on the display mode.

When the PDF viewer opens in a dialog popup:
By default, the dialog supports two or more actions, such as Close and Download. On large-screen (desktop) devices, the action buttons are right-aligned. Use compact mode to ensure optimal padding and margins on desktop devices.
If the content height is increased beyond the screen height, the dialog height cannot go beyond 4 rem from the top and bottom of the screen.
The dialog popup must be resized automatically and cannot support dragging or custom resizing.

When the PDF viewer is embedded in a container on the app page:
The dimensions of the frame in which the PDF file is displayed are defined by the PDF viewer properties.
The control in which the PDF viewer is embedded must have at least 1 rem (16 px) padding to set it apart from the rest of the content.
Only vertical scrolling is allowed. The behavior of desktop touch devices should follow the default behavior of the device or platform.

On mobile devices (smartphones and tablets), the PDF viewer control renders a toolbar with the title and a download icon, which behaves as a standard device/browser file link.

If required, you can customize the behavior for mobile devices and trigger the default device action for the file link from a different anchor in the application.

Size L - Popup mode

Size L - Embedded mode

Size M - Tablet

Size S - Mobile

Layout

Displaying PDF Files in a Dialog

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

A dialog header
A dialog PDF content
A dialog footer

Displaying Embedded PDF Files

The secondary mode of the PDF viewer displays PDF files directly on the page. The application owner, using the PDF viewer control, provides the dimensions of the frame in which the PDF file is embedded. The container should have at least 1 rem (16px) padding from the other content on the page to allow users to distinguish between the embedded PDF and the rest of the page’s content.

When the PDF viewer is embedded on the page, it comprises:

An overflow toolbar header
A container for rendering the PDF file (determined by the application owner)

Schematic visualization of popup mode

Schematic visualization of embedded mode

Developer Hint

The footer can be extended by any desired buttons. However, both the Close and Download buttons must be displayed. This is to ensure that the accessibility requirements are fulfilled. Additional information about action placement and order can be found in the Action Placement article.

Components

The PDF viewer in popup mode is rendered within a Dialog and consists of:

Title(Header): The title text appears in the dialog header.

Content: This area contains the actual PDF file displayed within the content of the dialog.

Footer with actions: The footer contains two mandatory buttons: Close and Download. Other actions can be added to the footer as well.

The PDF viewer in embedded mode can be rendered in any container desired by the application.

The title is displayed within the Toolbar (Overflow Toolbar).

Developer Hint

Use a Flexbox container to wrap the embedded mode of the PDF viewer inside the application.

Behavior and Interaction

All the interactions for the PDF files themselves must remain the same across platforms and browsers: paging, scrolling, zooming, and print must all be available.

Download – For accessibility reasons, the PDF viewer always provides an additional download button for downloading the displayed PDF file and gives users the option to download the embedded PDF renderer on a specific device or system (not all PDF reader plugins have their own download button).

Popup mode interactions:

No custom resizing of the dialog
No dragging of the dialog

Guidelines

To avoid the risk of performance issues, do not embed more than three instances of the PDF viewer per page. You may embed more instances of the PDF viewer in one page if the number of PDFs does not affect performance. Carry out benchmark tests to ensure that performance will not be affected.

The PDF viewer can be used within other sap.m components, such as carousel and panel, respecting the specific guidelines of these components.

The embedded mode of the PDF viewer can be used on the Object Page if the container is as wide as the object page. If this is not the case, use the popup mode of the PDF viewer instead.

The PDF viewer can provide accessibility options when used with screen readers and other accessibility software. To ensure that all the accessibility options are supported, you need to have Adobe PDF Reader installed.

Resources

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

Elements and Controls

Dialog (guidelines)

Implementation

PDF Viewer (SAPUI5 samples)
Dialog (SAPUI5 samples)
Dialog (SAPUI5 API reference)

Title

The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.

The difference between a title and a manually styled heading is that the title can be used by assistive technologies such as screen readers to create a hierarchical site map for faster navigation.

The title is used, for example, by panel, toolbar, or list components.

Table with title in toolbar and header

Usage

Use the title if:

You want to set the title above a table or form.
You want to show text in the page header.

Do not use the title if:

The text is inside a text block.
The text is inside a form element.

Responsiveness

Long titles can be truncated or wrapped if the screen is narrower than the full title (property: wrapping).

A long title that is truncated on small screens

Styles

The actual appearance of the title and the different styles always depends on the theme being used.

The semantic level of the title can be set automatically or explicitly. With the automatic setting (property: level, value: Auto) no explicit level information is written (HTML5 header element). If you want to set it explicitly, use an HTML H1-H6 element (property: level, value: H1-H6).

The level (property: level, value: Auto, H1-H6) and title style (property: titleStyle, value: Auto, H1-H6) can be set independently.

Title with default level and style (H1)

Title with level H1 and default style

Title with level H2 and default style

Title with level H3 and default style

Title with level H4 and default style

Title with level H5 and default style

Title with level H6 and default style

Guidelines

When using the title in the dynamic page header, use wrapping in expanded mode and truncation in collapsed mode.
In other places, such as toolbars or dialog headers, do not use wrapping. Truncate the title instead.

Properties

The following properties are available:

The property text defines the text that should be displayed as a title.
The property level (default: auto) defines the semantic level used by assistive technology. The default level can be overridden with H1 to H6 to set the level explicitly.
The property titleStyle (default: auto) defines the actual appearance of the title. When you use automatic styling, the appearance of the title depends on the current position of the title and the defined level. This automatism can be overridden by explicitly setting a different style between H1 and H6.
The property width defines the width of the title.
The property textAlign (default: initial) defines the alignment of the text within the title. Note: This property only has an effect if the overall width of the title control is larger than the displayed text.

Resources

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

Elements and Controls

Toolbar (guidelines)
Panel (guidelines)
List (guidelines)

Implementation

Title (SAPUI5 samples)
Title (SAPUI5 API reference)

Label

A label is the name or title of a control or group of related controls.

Label "Name" in a form

Usage

Use the label control if:

You need a label for a control. We recommend that you 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).

Types

There are two types of labels:

Required
Optional

To indicate that a field is required, set the required property to true. An asterisk is then added automatically in front of the label.

Required label in an editable environment (horizontal layout)

Result of a required label in a display-only environment

Optional label in an editable environment (vertical layout)

Result of an optional label in a display-only environment

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.

Developer Hint

The boolean wrapping property for the sap.m.Label control determines whether or not the text wraps .

Note: Only use this property in forms.

Wrapping label

Guidelines

Always use a label for form controls.
Use title case for labels.
Do not use a placeholder (input prompt) instead of a label.
Do not use bold labels.
A label is not a help text: it must be meaningful, succinct, short, and descriptive.

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:

When the form pattern is easily understood, such as on a login screen. Since this screen consists of only two input controls (User Name and Password), the labels do not have to be used.
When the form is extremely small and has fewer than three input fields. This can be the case for messages or small feedback forms.
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.

Elements and Controls

Form (guidelines)
Text (guidelines)

Implementation

Label (SAPUI5 samples)
Label (SAPUI5 API reference)

PDF Viewer

The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open in a popup dialog. In addition, this control allows you to print and download the PDF documents it displays.

Usage

Use the PDF viewer control if:

You want your app to display PDF files on all devices and platforms.
You want the users of your app to be able to preview their documents as PDF files right inside your app.
You need to ensure the consistent behavior of PDF files across all SAP Fiori apps.
You need to work with events (loaded, validation, error) provided by the PDF viewer.

Do not use the PDF viewer if:

You need to provide an interactive PDF file (such as a data input form).

Responsiveness

The PDF viewer control is fully responsive on large-screen devices (size L). The range of responsive behavior available on desktop devices depends on the display mode.

When the PDF viewer opens in a dialog popup:
By default, the dialog supports two or more actions, such as Close and Download. On large-screen (desktop) devices, the action buttons are right-aligned. Use compact mode to ensure optimal padding and margins on desktop devices.
If the content height is increased beyond the screen height, the dialog height cannot go beyond 4 rem from the top and bottom of the screen.
The dialog popup must be resized automatically and cannot support dragging or custom resizing.

When the PDF viewer is embedded in a container on the app page:
The dimensions of the frame in which the PDF file is displayed are defined by the PDF viewer properties.
The control in which the PDF viewer is embedded must have at least 1 rem (16 px) padding to set it apart from the rest of the content.
Only vertical scrolling is allowed. The behavior of desktop touch devices should follow the default behavior of the device or platform.

On mobile devices (smartphones and tablets), the PDF viewer control renders a toolbar with the title and a download icon, which behaves as a standard device/browser file link.

If required, you can customize the behavior for mobile devices and trigger the default device action for the file link from a different anchor in the application.

Size L - popup mode

Size L - embedded mode

Size M - tablet

Size S - mobile

Layout

Displaying PDF Files in a Dialog

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

A dialog header
A dialog PDF content
A dialog footer

Displaying Embedded PDF Files

The secondary mode of the PDF viewer displays PDF files directly on the page. The application owner, using the PDF viewer control, provides the dimensions of the frame in which the PDF file is embedded. The container should have at least 1 rem (16px) padding from the other content on the page to allow users to distinguish between the embedded PDF and the rest of the page’s content.

When the PDF viewer is embedded on the page, it comprises:

An overflow toolbar header
A container for rendering the PDF file (determined by the application owner)

Schematic visualization of popup mode

Schematic visualization of embedded mode

Developer Hint

The footer can be extended by any desired buttons. However, both the Close and Download buttons must be displayed. This is to ensure that the accessibility requirements are fulfilled. Additional information about action placement and order can be found in the Action Placement article.

Components

The PDF viewer in popup mode is rendered within a Dialog and consists of:

Title(Header): The title text appears in the dialog header.

Content: This area contains the actual PDF file displayed within the content of the dialog.

Footer with actions: The footer contains two mandatory buttons: Close and Download. Other actions can be added to the footer as well.

The PDF viewer in embedded mode can be rendered in any container desired by the application.

The title is displayed within the Toolbar (Overflow Toolbar).

Developer Hint

Use a Flexbox container to wrap the embedded mode of the PDF viewer inside the application.

Behavior and Interaction

All the interactions for the PDF files themselves must remain the same across platforms and browsers: paging, scrolling, zooming, and print must all be available.

Download – For accessibility reasons, the PDF viewer always provides an additional download button for downloading the displayed PDF file and gives users the option to download the embedded PDF renderer on a specific device or system (not all PDF reader plugins have their own download button).

Popup mode interactions:

No custom resizing of the dialog
No dragging of the dialog

Guidelines

To avoid the risk of performance issues, do not embed more than three instances of the PDF viewer per page. You may embed more instances of the PDF viewer in one page if the number of PDFs does not affect performance. Carry out benchmark tests to ensure that performance will not be affected.

The PDF viewer can be used within other sap.m components, such as carousel and panel, respecting the specific guidelines of these components.

The embedded mode of the PDF viewer can be used on the Object Page if the container is as wide as the object page. If this is not the case, use the popup mode of the PDF viewer instead.

The PDF viewer can provide accessibility options when used with screen readers and other accessibility software. To ensure that all the accessibility options are supported, you need to have Adobe PDF Reader installed.

Resources

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

Elements and Controls

Dialog (guidelines)

Implementation

PDF Viewer (SAPUI5 samples)
Dialog (SAPUI5 samples)
Dialog (SAPUI5 API reference)

Status Indicator

The status indicator uses a filled icon to visualize a single value. Unlike the progress indicator or the radial micro chart, the indicator provides the user with a meaningful association through its use of icons.

Variety of status indicators

Usage

Use the status indicator if:

You want to display a single value with an icon that describes its context.
You want to display a single value that can change in real time without requiring a page reload.

Do not use the status indicator if:

You want to display a single value in a table. Use the progress indicator or radial micro chart instead.
You want to show a rating. Use the rating indicator instead.
The status indicator is decorative and does not provide the user with a meaningful association.

Responsiveness

The status indicator is fully responsive.

Types

Linear Fill

If the icon only shows one fill area, show a fill level.

Status indicators with linear fill.

Sequential Fill

If the icon has more than one fill area, fill them sequentially.

Status indicators with sequential fill.

Solid Fill

If the icon is very small, always provide a solid fill. You can use semantic colors to show the state.

Status indicators with solid fill - states represented by different semantic colors.

Behavior and Interaction

You can set a click event for the status indicator. If the status indicators are grouped, you can set a click event for the individual status indicators or for the entire group.

Guidelines

The status indicator can be used within (but is not restricted to) the following controls:

Shape Definition

You can download the predefined shapes for use in your own SAP Fiori apps.

Thresholds

You can set one or more thresholds for each status indicator. Apply a color for each threshold; the color changes when a threshold has been passed. Only use thresholds and semantic colors if they support the use case. Do not use them for decorative purposes.

Resources

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

Elements and Controls

Radial Micro Chart (guidelines)
Progress Indicator (guidelines)

Implementation

Status Indicator (SAPUI5 sample)
Status Indicator (SAPUI5 API reference)
Download Predefined Shapes (ZIP file)

Object Header

Progress Indicator

The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color to indicate the state of progress. The advancement depends on the specific process. The progress is shown either using absolute numbers or the current percentage of completion together with a progress bar.

Within SAP Fiori, the progress indicator is used as a “meter” or mini chart. It indicates a current object status and is not related to any process that is currently running.

Usage

Use the progress indicator if:

You need to visually show a current (static) status.
You need to visually strengthen a current (static) status.
You need to make different states comparable to each other at a higher level.

Do not use the progress indicator if:

Visual feedback is needed for an ongoing operation. In this case, use a busy indicator instead.

Responsiveness

The progress indicator itself is not responsive. It supports the cozy and compact form factors. The compact form factor is used for apps that run on a device operated by a mouse and keyboard. For more information, see Content Density (Cozy and Compact).

Progress indicator in compact mode

Progress indicator in cozy mode

Layout

Show the current progress as a percentage value between 0% and 100%. Property: percentValue.

Progress indicator displaying 10% progress

Progress indicator displaying 50% progress

Progress indicator displaying 80% progress

Alternatively, you can show the current progress as text in addition to the bar. In this case, the text is shown on the right of the bar if the progress is 50% or less. In all other cases, the progress is shown right-aligned on the bar itself. Property: showValue.

Textual presentation for progress of 50% or less

Textual presentation for progress of more than 50%

Progress indicator without textual representation

You also have the option of showing any application-specific text instead of a percentage. Property: displayValue.

App-specific textual representation of progress

Styles

The progress indicator can be enabled or disabled. Property: enabled.

Enabled progress indicator

Disabled progress indicator

For usage in read-only forms or read-only tables, the progress indicator provides a “display” state. This state is optimized for reading environments. The default height is lower, and the bar color darker. Property: displayOnly.

Progress indicator in display state

The progress indicator can visualize different value states that are represented by various theme-dependent semantic colors. The states are: normal, success, warning, and error. Property: state.

Value states can be combined with the “enabled” and “display” states.

Progress indicator in success state

Progress indicator in warning state

Progress indicator in error state

Guidelines

Use the progress indicator to add clarity and weight to an important state that needs to be perceived very quickly.

Progress indicator used for status display

Always provide a label for the progress indicator.

Exception: If the progress indicator is used as a single control inside a cell of a responsive table, the column header text is used as a label.

Progress indicator in a responsive table

Use a group of up to five bars to help users compare different states at a high level. Note that in a group of more than five bars, slight differences are much harder to perceive than a numeric display.

If the user has to compare a group of values, be sure to use the same visual display for all of them (only bars or only numbers).

Group of progress indicators

Progress indicators are typically used within (but not restricted to) the following controls:

Do not disable a progress indicator. A progress indicator is not interactive, therefore disabling it has no effect.

Exception: The progress indicator is shown inside a disabled UI area, such as a completely disabled form or panel.

Properties

The following additional properties are available for the progress indicator:

The property “width” defines the width of the progress indicator. The property “height” defines the height of the progress indicator. Adapt it only if the default height does not fit into the surrounding context. Do not use a height below 1.5 rems if text is shown inside the progress indicator.
The property “textDirection” is used for localiaztion (right-to-left languages).
The property “busy” sets the progress indicator to busy state.
The property “visible” shows or hides the progress indicator.
The property “tooltip” does not have an effect.

Resources

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

Elements and Controls

Busy Dialog (guidelines)
Busy Indicator (guidelines)
Busy State (guidelines)

Implementation

Progress Indicator (SAPUI5 samples)
Progress Indicator (SAPUI5 API reference)

Label

A label is the name or title of a control or group of related controls.

Label "Name" in a form

Usage

Use the label control if:

You need a label for a control. We recommend that you 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).

Types

There are two types of label:

Required
Optional

To indicate that a field is required, set the required property to true. An asterisk is then added automatically in front of the label.

Required label in an editable form (horizontal layout)

Label in a display-only form (horizontal layout)

Optional label in an editable form (horizontal layout)

Label in a display-only form (horizontal layout)

Optional label in an editable form (vertical layout)

Label in a display-only form (vertical layout)

Guidelines

Always use a label for form controls.
Use title case for labels.
Do not use a placeholder (input prompt) instead of a label.
Do not use bold labels.

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:

When the form pattern is easily understood, such as on a login screen. Since this screen consists of only two input controls (User Name and Password), the labels do not have to be used.
When the form is extremely small and has fewer than three input fields. This can be the case for messages or small feedback forms.
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.

Elements and Controls

Form (guidelines)
Text (guidelines)

Implementation

Label (SAPUI5 samples)
Label (SAPUI5 API reference)

Carousel

The carousel allows the user to browse through a set of items. It always displays one item at a time. From the displayed item, the user can navigate to either the next or the previous item. The interaction is similar to browsing through the pages of a book.

Optionally, a paging indicator displays the user’s current position inside the set of items.

The carousel control is best used for browsing through a set of images. Viewing images one by one helps users to distinguish between different items. However, the carousel is not limited to displaying images; it can contain any sap.m control.

Usage

Use the carousel if:

You have strong visual representations of the items you want to display.
You want to display the items one after the other.

Do not use the carousel if:

The items you want to display are uniform.
The items you want to display need to be visible at the same time.

Responsiveness

The size of the control’s content area is adjusted automatically, depending on the amount of space available.

On non-touch devices, the user can navigate with Previous and Next icons displayed on the left and right of the control.

On touch devices, the carousel control makes use of the swipe gesture to navigate through the items. As a result, Previous and Next icons are not displayed on touch devices.

The paging indicator (when activated) shows on all form factors. The paging indicator wraps if it is too long to fit onto one line.

Carousel - Size S

Carousel - Size M

Carousel - Size L

Layout

The main component of the carousel control is the content area in which the different items are displayed.

The (optional) paging indicator can float above or below the content area.

On non-touch devices, icons for navigating to the next or previous item either float above the left and right sides of the content area, or appear in the paging indicator area. This is controlled by the arrowsPlacement property.

Schematic layout of the carousel

Behavior and Interaction

The current item is displayed in the content area.

Navigating

When the user navigates from the current item to another item, the current item is moved out of the content area, and the next or previous item slides in (depending on the direction of navigation).

On touch devices, users navigate with swipe gestures (swipe right or swipe left).

On non-touch devices, users navigate with icons.

If the item set contains only one item, navigation is deactivated.

Navigation – Previous

Navigation – Next (hover)

Looping

The carousel can be set to loop (property: loop). In this case, the carousel jumps back to the first item once all items have been displayed. If looping is not enabled, there is no forward navigation on the last item.

Paging

The current position inside the set of items is displayed using an optional paging indicator (properties: showPageIndicator, pageIndicatorPlacement).

Paging indicator

If there are more than 8 pages, the paging indicator changes from icons to numbers.

Paging indicator

Resources

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

Elements and Controls

Image (guidelines)

Implementation

Carousel (sample in SAPUI5 Demo Kit)
Carousel (SAPUI5 API reference)

Progress Indicator

The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color to indicate the state of progress. The advancement depends on the specific process. The progress is shown either using absolute numbers or the current percentage of completion together with a progress bar.

Within SAP Fiori, the progress indicator is used as a “meter” or mini chart. It indicates a current object status and is not related to any process that is currently running.

Usage

Use the progress indicator if:

You need to visually show a current (static) status.
You need to visually strengthen a current (static) status.
You need to make different states comparable to each other at a higher level.

Do not use the progress indicator if:

Visual feedback is needed for an ongoing operation. In this case, use a busy indicator instead.

Responsiveness

The progress indicator itself is not responsive. It supports the cozy and compact form factors. The compact form factor is used for apps that run on a device operated by a mouse and keyboard. For more information, see Content Density (Cozy and Compact).

Progress indicator in compact mode

Progress indicator in cozy mode

Layout

Show the current progress as a percentage value between 0% and 100%. Property: percentValue.

Progress indicator displaying 10% progress

Progress indicator displaying 50% progress

Progress indicator displaying 80% progress

Alternatively, you can show the current progress as text in addition to the bar. In this case, the text is shown on the right of the bar if the progress is 50% or less. In all other cases, the progress is shown right-aligned on the bar itself. Property: showValue.

Textual presentation for progress of 50% or less

Textual presentation for progress of more than 50%

Progress indicator without textual representation

You also have the option of showing any application-specific text instead of a percentage. Property: displayValue.

App-specific textual representation of progress

Styles

The progress indicator can be enabled or disabled. Property: enabled.

Disabled progress indicator

The progress indicator can visualize different value states that are represented by various theme-dependent semantic colors. The states are: normal, success, warning, and error. Property: state.

Progress indicator in normal state

Progress indicator in success state

Progress indicator in warning state

Progress indicator in error state

Guidelines

Use the progress indicator to add clarity and weight to an important state that needs to be perceived very quickly.

Progress indicator used for status display

Always provide a label for the progress indicator.

Exception: If the progress indicator is used as a single control inside a cell of a responsive table, the column header text is used as a label.

Progress indicator in a responsive table

Use a group of up to five bars to help users compare different states at a high level. Note that in a group of more than five bars, slight differences are much harder to perceive than a numeric display.

If the user has to compare a group of values, be sure to use the same visual display for all of them (only bars or only numbers).

Group of progress indicators

Progress indicators are typically used within (but not restricted to) the following controls:

Do not disable a progress indicator. A progress indicator is not interactive, therefore disabling it has no effect.

Exception: The progress indicator is shown inside a disabled UI area, such as a completely disabled form or panel.

Properties

The following additional properties are available for the progress indicator:

The property “width” defines the width of the progress indicator. The property “height” defines the height of the progress indicator. Adapt it only if the default height does not fit into the surrounding context. Do not use a height below 1.5 rems if text is shown inside the progress indicator.
The property “textDirection” is used for localiaztion (right-to-left languages).
The property “busy” sets the progress indicator to busy state.
The property “visible” shows or hides the progress indicator.
The property “tooltip” does not have an effect.

Resources

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

Elements and Controls

Busy Dialog (guidelines)
Busy Indicator (guidelines)
Busy State (guidelines)

Implementation

Progress Indicator (SAPUI5 samples)
Progress Indicator (SAPUI5 API reference)

Label

A label is the name or title of a control or group of related controls.

Label "Name" in a form

Usage

Use the label control if:

You need a label for a control. We recommend that you 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, such as in display-only forms; do not use the label to display the data.

Types

There are two types of labels:

Required
Not required

To indicate that a field is mandatory, set the property:required. An asterisk will be automatically set in front of the label.

Required label in an editable form (horizontal layout)

Label in a display-only form (horizontal layout)

Non-required label in an editable form (horizontal layout)

Label in a display-only form (horizontal layout)

Non required label in an editable form (vertical layout)

Label in a display-only form (vertical layout)

Guidelines

Always use a label for form controls.
Use title case for labels.
Do not use a placeholder (input prompt) as a replacement for the label.
Do not use bold labels.

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:

When the form pattern is easily understood, such as on a login screen. Since this screen consists of only two input controls (username and password), the labels do not have to be used.
When the form is extremely small and has fewer than three input fields, such as in messaging and small feedback forms.
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.

Elements and Controls

Form (guidelines)
Text (guidelines)

Implementation

Label (SAPUI5 samples)
Label (SAPUI5 API reference)

Avatar

The avatar is a control that has various display options for representing images, icons, and initials.

Usage

Use the avatar if:

You want to display an image in a circular shape.
You want to use predefined sizes.
You want to display icons or initials.
You want to have placeholder images in case no image is provided.

Do not use the avatar if:

You would like to integrate an image into your app for any other use case. Instead, use the image control.
You want to display pictures in a carousel. Instead, use the carousel control.

Responsiveness

The avatar control has predefined sizes which are the same for both form factors – compact and cozy.

Types

Shapes

The avatar control can be set to a circular or square shape.

Avatar with both circular and squared shape

Content

The control can show images, icons, or initials.

Avatar showing an image, initials and an icon

Initials

The control can only display up to 2 Latin letters. If more or non-Latin letters are present, a placeholder will be shown.

Avatar with initials

Placeholder

If there is no image, icon, or initials provided, the avatar will show a default placeholder. There are two types of placeholders that can be shown. If the avatar is circular, a person icon will be shown. If the avatar is square, a product icon will be shown.

Avatar default placeholders for person and product

Custom Size

You can also set a custom size for the avatar.

Avatar with custom size

Predefined Sizes

The avatar control has five predefined sizes:

XL – 7 rem
L – 5 rem
M – 4 rem
S – 3 rem
XS – 2 rem

The predefined sizes are the same for both form factors – compact and cozy.

Predefined sizes - XL, L, M, S, XS

Fitting Images

With the imageFitType property, the avatar can fit images in two ways: Cover and Contain. The default value of the property is Cover.

Avatar with Cover and Contain property

Guidelines

Use the circular shape to display images of a person or contact.
Use the square shape to display images of a product, logo, and so on.
If you need to define a size different from the predefined one, make sure that the font size is consistent with the size of the control itself.
If you use initials or icons and want to display a custom size for the avatar that is between two predefined sizes, use the predefined font size for the smaller one. For example, if your avatar is 5.5 rem, between sizes L and XL, then you should use the font size for size L: 2 rem.
For accessibility reasons, provide each image in the avatar with an alternative text in case the image is not available or cannot be displayed.
High-resolution images that are unnecessarily large in file size can drastically slow down page speed. Optimize your images in this case.

Resources

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

Elements and Controls

Image (guidelines)
Carousel (guidelines)

Implementation

Avatar (SAPUI5 samples)
Avatar (SAPUI5 API reference)

Image

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.

Responsiveness

The size of the image is simply adjusted to the amount of space available.

Size S (Smartphones)

Object page (size S)

Size M (Tablets)

Object page (size M)

Size L (Desktops)

Object view (size L)

Layout

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.

Images placed in a table

Image placed in the object header

Image placed in a carousel

Image placed in a dialog

Behavior and Interaction

Clicking an Image (Optional)

Various options are available in terms of size setting, and the images can also be combined with actions. The most common behavior is clicking the image to enlarge it.

Properties

The original image size can be modified.
An image can be decorative only.
An image can be connected to an image map.
You can trigger an action for navigation.
Connection to an on-screen user assistance is supported.

Guidelines

For accessibility reasons, provide each image with an alternative text in case the image is not available or cannot be displayed.
Do not use placeholder images if you do not plan to replace them with real images.
Do not use icons as images. There is a separate icon font for such cases, which consists of more than 500 scalable pictograms in SAP’s illustrative style.
It is extremely important that you choose the right file format when saving your images. Three image formats are used consistently in browsers – PNG, JPG, and GIF.
When choosing the format for your image, you should always be conscious of the image quality and file size.
High-resolution images that are unnecessarily large in file size can drastically slow down page speed. Optimize your images in this case.

Good quality

Poor quality

Resources

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

Elements and Controls

Carousel (guidelines)

Implementation

Image (SAPUI5 samples)
Image (SAPUI5 API reference)

Token

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.

Token

Usage

Use tokens only in the multi-combo box, multi-input control, or value help dialog.

Components

The tokenizer is an invisible container that can display multiple tokens.

Tokens have the following properties:

They usually contain single text items.
They may also contain key-value pairs, such as John Miller (ID1234567).
They contain a Remove icon , which is invisible if the token is in edit mode.

Tokens with a surrounding tokenizer

Behavior and Interaction

Interacting

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

Selecting and Deselecting Tokens

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.

Adding Tokens

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.

Information

For information on how to manage leading and treading whitespace (blanks) when copying and pasting text into input controls, please see removing leading and trailing whitespace.

Removing Tokens

The user can instantly remove tokens via the keyboard, or by clicking or tapping the Remove icon .

Styles

There are five different styles of tokens: regular, on hover, selected, selected on hover and read-only. These styles correspond to the type of interaction being used.

Regular

On hover

Selected

Read only

Hover selected

Guidelines

The tokenizer can also be used as a tag container.

Resources

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

Elements and Controls

Multi-Combo Box (guidelines)
Multi-Input Field (guidelines)
Value Help Dialog (guidelines)
Combo Box (guidelines)

Implementation

Tokens (SAPUI5 samples)
Tokenizer (SAPUI5 samples)
Tokens (SAPUI5 API reference)
Tokenizer (SAPUI5 API reference)

Carousel

The carousel allows the user to browse through a set of items. It always displays one item at a time. From the displayed item, the user can navigate to either the next or the previous item. The interaction resembles browsing through the pages of a book.

Optionally, a paging indicator displays the user’s current position inside the set of items.

The control is best known for browsing through a set of images, as it works best when the single items are represented in a way that the user can easily distinguish. Nonetheless, the carousel is not limited to displaying images; it can contain every sap.m control.

Usage

Use the carousel if:

You have strong visual representations of the items you want to display.
You want to display the items one after the other.

Do not use the carousel if:

The items you want to display need to be visible at the same time.
The items you want to display are uniform.

Responsiveness

The size of the control’s content area is automatically adjusted to the amount of space available.

When used in non-touch mode, the user can navigate with forward and backward icons displayed on the left and right side of the control.

On touch devices, the carousel control makes use of the swipe gesture to navigate through the items. Therefore, the forward and backward icons are not displayed on touch devices.

The paging indicator (when activated) is visible on each form factor. The paging indicator wraps if not all items fit in one line.

Carousel (size S)

Carousel (size M)

Carousel (size L)

Layout

The carousel control mainly consists of a content area in which the different items are displayed and cycled through.

Optionally, a paging indicator can be displayed floating either above the top or at the bottom of the content area.

On non-touch devices, icons for navigating to the next or previous item are displayed either floating above the left and right side of the content area or in the paging indicator area. This is controlled by the arrowsPlacement property.

Schematic layout of carousel

Behavior and Interaction

The current item is displayed in the content area.

Navigating

When the user navigates from a displayed item to another item, the item is moved out of the content area and the next or previous item (depending on the direction of navigation) appears with a sliding transition.

On touch devices, navigation is performed with swipe gestures (swipe right or swipe left).

On non-touch devices, navigation is provided by icons.

When the item set contains only one item, the navigation is deactivated.

Navigation – Previous

Navigation – Next (hover)

Looping

The carousel can be set to loop (property: loop). In this case, the carousel jumps back to the first item once all items have been displayed. If looping is not enabled, there is no forward navigation on the last item.

Paging

The current position inside the set of items is displayed using an optional paging indicator (properties: showPageIndicator, pageIndicatorPlacement).

Paging indicator

If there are more than 8 pages, the paging indicator changes from icons to numbers.

Paging indicator

Resources

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

Elements and Controls

Image (guidelines)

Implementation

Carousel (SAPUI5 samples)
Carousel (SAPUI5 API reference)

Info Bar

The info bar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:

Filter criteria: The info bar indicates the filter criteria that have been applied for a filter or contextual filter. Do not show the info bar if no filter is applied.
Selected items: In a multi-select dialog, the info bar shows the number of selected items.

Info bar is placed above the content and shows the applied filters.

Responsiveness

The bar has the same height, text size, and icon size in both cozy and compact formats. The text inside the bar will be truncated if there’s not enough space.

Text is truncated on a small screen. The example shows an info bar for a contextual filter.

Types

There are three situations in which an info bar is shown:

After a general filter has been applied.
After a contextual filter has been applied.
After the user has selected multiple items in a select dialog.

General Filter

All applied filters are shown as labels in the info bar.

Info bar after a filter has been applied

Contextual Filter

The contextual filter allows the user to see a prefiltered view of a list. The title on the left side and an icon on the right side display the filter criteria. The Filter icon should represent the filter category. Do not use a generic filter icon, otherwise it may be confused with the user-triggered filters. For more information, see contextual filter.

Info bar after a contextual filter has been applied

Multiselection

If the user selects multiple items, the info bar shows the number of selected items. For more information, see select dialog.

Info bar after multiselection has been applied

Components

The info bar is a toolbar that consists of a label on the left side and an icon on the right side.

The label shows the filter criteria, and the icon selected depends on the use case.

General Filter and Multiselection

No icon is shown. The only exception is the Cancel icon, which is used to reset the current filter criteria.

Info bar with optional Cancel icon

Contextual Filter

The icon is mandatory and represents the current filter criterion.

There is one exception in which it is useful to be able to cancel the contextual filter. In this special case, the contextual filter is used to prefilter the listed items in a select dialog. For this case, use the Cancel icon instead of the Filter icon. For more information, see contextual filter.

In all other use cases, show an icon that represents the filter criterion.

Contextual filter with filter icon

Behavior and Interaction

The bar can have two active areas: either the entire bar can be active, or if an icon is added, it creates a second active area. We recommend that you use the active behavior for the bar and the icon.

Bar Area

When the user clicks or taps the bar, the filter dialog from the view settings dialog is shown. If only one filter is applied, the filter can be changed directly in the detailed filter selection. If more than one filter is applied, the filter dialog shows a list with general filter categories.

Clicking the info bar with a single filter shows the detailed filter selection.

Clicking the info bar with multiple filters shows the filter categories.

Icon Area

Cancel: The user clicks or taps the icon to delete the current filter settings. We recommend that you use the cancel icon.
Filter (only contextual filter): Clicking the icon has the same effect as clicking the bar. The filter dialog is shown.

Properties

The contextual filter is not a separate control. If you want to build an info bar, you need to use the sap.m.toolbar control. To achieve the info bar design, set the design toolbar property to “info”.

Resources

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

Elements and Controls

Select Dialog (guidelines)
Contextual Filter (guidelines)
Toolbar (guidelines)
View Settings Dialog (guidelines)

Implementation

No links

Object Header

Information

Do not use the object header control for the object page floorplan. For object pages, always use the snapping header control.

The object header usually represents an object instance. As such, it contains the most important information a user needs to see in order to understand what the object is about and what its status is. It is the first control on a page dedicated to a single object instance, usually the object view.

The control can also be used as the header of other pages, such as the full screen layout. In that case, the object header contains the most important aggregated information of the items that are listed below.

Usage

Use the object header:

As the first component on a page that handles a single object instance to enable the user identify it easily.
As the header of other pages, such as the full screen layout. In this case, the object header contains the most important aggregated information of the items that are listed below.

Do not use the object header:

Inside the content area as a work-around for visualizing something that is not possible with current means.

Responsiveness

The object header generally adjusts to different screen sizes. To achieve this, there is a built-in rule set that defines which content wraps or truncates when necessary, and how attributes and status texts are arranged depending on the screen size.

The object header has two flags that influence its appearance and resizing behavior: Responsive and FullScreenOptimized.

Object header – Split-screen layout (Responsive = true, FullScreenOptimized = false)

Responsive

As of SAPUI5 1.28, the app team should generally set the responsive flag to ‘true’. In this case, the attributes are the first set of entries in the header, followed by the second set of statuses. The on-screen distribution differs from previous SAPUI5 versions. Even if there are many attributes and only a few statuses, use of the space is now optimized as the entries fill the respective columns equally.

Object header – Smartphone size (Responsive = true, FullScreenOptimized = false)

Full Screen Optimized

The second attribute, FullScreenOptimized, should be activated when the header makes full use of the screen width and is not used in a split-screen layout.

Object header – Full screen optimized (responsive = true, FullScreenOptimized = true)

Attribute/Status Distribution

The following table shows how the attributes are distributed automatically when the responsive flag is set to ‘true’ on various screen sizes.

Screen Size	2 Attributes	3 Attributes	4 Attributes	5+ Attributes
Desktop (full screen)	Next to the title area (1 column of 1-2 attributes)	Next to the title area (1 column of 3 attributes)	Underneath the title area (4 columns split by 1/1/1/1)	Underneath the title area (4 columns split by 2/1/1/1)
Desktop (split screen layout)	Underneath (2 columns split by 1/1	Underneath (2 columns split by 2/1)	Underneath (2 columns split by 2/2)	Underneath (3 columns split by 2/2/1)
Tablet (full screen – landscape)	Underneath (2 columns split by 1/1)	Underneath (3 columns split by 1/1/1)	Underneath (3 columns split by 2/1/1)	Underneath (3 columns split by 2/2/1)
Tablet (split screen layout) or Tablet (full screen – portrait)	Underneath (2 columns split by 1/1)	Underneath (2 columns split by 2/1)	Underneath (2 columns split by 2/2)	Underneath (2 columns split by 3/2)
Smartphone	Underneath (1 column of 1-2 attributes)	Underneath (1 column of 3 attributes)	Underneath (1 column of 4 attributes)	Underneath (1 column of 5+ attributes)

Prior to SAPUI5 1.28 (Responsive Set to ‘False’)

The responsive flag is deactivated by default in apps that were built before SAPUI5 1.28. As mentioned above, this mainly impacts the attributes and status arrangement. If the responsive flag is turned off, all attributes are left-aligned in the object header and all statuses are right-aligned, regardless of their individual number.
The object header still reacts correctly to resizing, but does not make optimal use of the space available.

For example, three attributes and one status with Responsive and FullScreenOptimized both set to ‘false’ results in two columns: the first (left) column contains three attributes, and the other column (right) has one status. Altogether, this is three rows in height, whereas the same number of entries on a desktop full screen with the two flags set to ‘true’ results in a height of just one row (spread over four columns).

Components

Title

The object header has a mandatory title that serves as the key identifier of the object instance (property: title).
Long titles wrap once before they truncate on the second line.
A title can be actionable (property: titleActionable), in which case, it looks like a link and triggers an event, which usually results in a quick view.
An additional icon or image that identifies the object (property: icon) can be shown in front of the title. The icon or image can also be set to actionable (property: IconActionable).
Additionally, the title can show a title selector (which is visualized like a menu). It is mainly used to provide navigation targets, allowing the object to be opened in a different app.

Object header (Responsive=false) – Title not actionable

Object header (Responsive=false) – Title actionable

Object header (Responsive=false) – Title selector

Object Number

The object number contains the key attribute of the object instance.
The object number consists of text that represents the key attribute of an object, usually a number (property: number) and its unit (property: numberUnit). The object number has a semantic color (property: state). The unit inherits the semantic color of its number.
As usual in SAP Fiori, the semantic colors available are negative (property: error), critical (property: warning), positive (property: success), and neutral (property: none).

Object header (Responsive=false) – Negative object number

Object Attribute

The object header can contain 0 to n attributes (property: objectAttribute).
The attributes are listed first in the list of attributes in the object header.
Attributes can be text (property: text) or actionable (property: actionable), in which case, they are rendered similar to links.

Object header (Responsive=false) – Attribute active

Object Status

The object header can contain a list of 0 to n object statuses (property: objectStatus).
The statuses are listed as the second set of attributes in the object header.
The status has a semantic color.
Statuses can be text or icons. A combination of the two is technically also possible, in which case, the icon is placed in front of the text. We generally recommend that you use text only (see guidelines below).
A progress indicator may also be shown as a status. If used, the progress indicator should be the last item in the list of statuses.

Object header (Responsive=true) – one object marker, three object attributes, and one object status

Object Marker

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

Objects can be flagged and marked as favorites. The object header provides flags for both (properties: markFavorite, markFlagged).
To show them in the object header, you also need to activate the respective flag (property: showMarkers).
When they are used and shown, they appear directly behind the title.
With version 1.42 an editing status is available in object header. This status is part of draft handling concept. There are four editing statuses – unchanged/active version, draft, locked and unsaved changes.
- Unchanged: The default status for a saved entity that no one is working on. There is no special indicator for this status on the screen.
- Draft: A user’s own draft is tagged as Draft.
- Locked: If a user is editing a business entity, it is locked for other users. The object remains locked until the user has finished editing or until the locking time has passed.
- Unsaved changes: If the locking time has expired, other users can see that there are unsaved changes by the person who edited the object.

Object header (Responsive=false) – Two object markers, three object attributes, and one object status

Object header with three object markers

Object marker - editing status types

Intro

As mentioned above, another component from the early days of SAP Fiori called the intro (property: intro) is available.
It is now shown directly below the title in a smaller font size.
The intro can call an event if it is set to actionable (property: introActionable).
Previously, the intro appeared above the title, and was used to indicate the origin of an object (for example, Forwarded by…, On behalf of …). It now tends to be used as a short subtitle.

Object header (Responsive=true) – Intro text used as subtitle

Object header (Responsive=false) – Intro text

Condensed

The object header provides a condensed flag for cases in which it is used as a page header with little information (property: condensed).
When turned on, the object header displays only the title, object number, and one attribute.

Object header – Condensed mode

Guidelines

Settings

Set the object header responsiveness flag to ‘true’ (property: responsive) to make optimal use of the screen real estate.
If your app runs in full-screen mode (not master/details), make optimal use of the header area by setting the respective property to ‘true’ (property: FullScreenOptimized).
If you need to enforce the sequence and stable display of the attributes independently of the screen size, such as for an address, you might still decide to set the Responsive property to ‘false’ as an exception.

Title

The object header contains a mandatory title, which serves as the key identifier of the object instance (property: title). The title should be easily readable text without any IDs. If an ID is essential to the user, for example, to distinguish between identical titles, it can be put in brackets, such as Product ABC (1234567). If it is usually a long number, you can also consider adding it as a first attribute. In that case, however, you must give it a label (property: title of the Object Attribute).
Although the title can be truncated, keep it as short as possible and only as long as necessary.
If you make the title actionable and use an image or icon as well, both should be actionable and trigger the same event.
If you do use a title selector, it should open an action sheet that allows the user to choose from different options.

Object Number

The object number contains the key attribute of the object instance, which is usually a numeric attribute. In rare cases, it can also be used with text if that is the key attribute of the item. Be careful when you use text because it often leads to issues during translation if the text is too long.
As usual with SAP Fiori, the semantic colors available are negative (property: error), critical (property: warning), positive (property: success), and neutral (property: none).
For very long numbers, use a formatter.
The object number can be left blank if there is no key attribute worth showing.

The object number contains the key attribute of the object instance, which is usually a numeric attribute. In rare cases, it can also be used with text if that is the key attribute of the item. Be careful when you use text because it often leads to issues during translation if the text is too long.
As usual with SAP Fiori, the semantic colors available are negative (property: error), critical (property: warning), positive (property: success), and neutral (property: none).
For very long numbers, use a formatter.
The object number can be left blank if there is no key attribute worth showing.

For more information, see object number.

Object Attribute

These object attributes do not generally need a label if it is clear what they refer to. If attributes are not distinct, you can use a label (property: title).
To facilitate recognition of the object header, we recommend using no more than four attributes.

For more information, see object attribute.

Object Status

Although it is technically possible to show icons together with text, we recommend using text only.
- Only use icons that are clear and unambiguous. If you think your icon would need a descriptive text to be understood, use text only.
- In the case of locked items, however, you may also add further information about who has locked the item (when available).
The same rule for choosing semantic colors as elsewhere in SAP Fiori applies for the statuses negative (property: error), critical (property: warning), positive (property: success), and neutral (property: none).
In terms of indicating status priority, the general guidance is: very high (property: error), high (property: warning), medium, low, or other (property: none).
You can also show a progress indicator as a status. If you use it, the progress indicator should be the last item in the list of statuses.
As with the attributes, statuses do not need a label if it is clear what they refer to. If statuses are not distinct, you can use a label (property: title).
Here, too, we recommend that you have no more than four entries in the status list (including progress indicators and flag or favorite).

For more information, see object status.

Intro

The intro usually contains a short subtitle and should only be used when necessary.
Do not use the intro for standard attributes.

Object Marker

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

Every technical status has a default visualization that can be changed by the app developer depending on the usage context.

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

The default behavior for the editing status is described below.

On S size:

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

For more information, see object marker.

Master/Details

When used in the details area of the split screen (master/details) and the master list contains object list items, the object header should show the same information as the object list item, plus additional information if necessary.
Unlike the object list item, the object number uses large number formatting because the object header has more space for handling long text.

Resources

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

Elements and Controls

Object Display Elements (guidelines)
Progress Indicator (guidelines)

Implementation

Object Header (SAPUI5 samples)
Object Header (SAPUI5 API reference)

Progress Indicator

The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color to indicate the state of progress. The advancement depends on the specific process. The progress is shown either using absolute numbers or the current percentage of completion together with a progress bar.

Within SAP Fiori, the progress indicator is used as a “meter” or mini chart. It indicates a current object status and is not related to any process that is currently running.

Usage

Use the progress indicator if:

You need to visually show a current (static) status.
You need to visually strengthen a current (static) status.
You need to make different states comparable to each other at a higher level.

Do not use the progress indicator if:

Visual feedback is needed for an ongoing operation. In this case, use a busy indicator instead.

Responsiveness

The progress indicator itself is not responsive. It supports the cozy and compact form factors. The compact form factor is used for apps that run on a device operated by a mouse and keyboard. For more information, see Content Density (Cozy and Compact).

Progress indicator in compact mode

Progress indicator in cozy mode

Layout

Show the current progress as a percentage value between 0% and 100%. Property: percentValue.

Progress indicator displaying 10% progress

Progress indicator displaying 50% progress

Progress indicator displaying 80% progress

Alternatively, you can show the current progress as text in addition to the bar. In this case, the text is shown on the right of the bar if the progress is 50% or less. In all other cases, the progress is shown right-aligned on the bar itself. Property: showValue.

Textual presentation for progress of 50% or less

Textual presentation for progress of more than 50%

Progress indicator without textual representation

You also have the option of showing any application-specific text instead of a percentage. Property: displayValue.

App-specific textual representation of progress

Styles

The progress indicator can be enabled or disabled. Property: enabled.

Disabled progress indicator

The progress indicator can visualize different value states that are represented by various theme-dependent semantic colors. The states are: normal, success, warning, and error. Property: state.

Progress indicator in normal state

Progress indicator in success state

Progress indicator in warning state

Progress indicator in error state

Guidelines

Use the progress indicator to add clarity and weight to an important state that needs to be perceived very quickly.

Progress indicator used for status display

Always provide a label for the progress indicator.

Exception: If the progress indicator is used as a single control inside a cell of a responsive table, the column header text is used as a label.

Progress indicator in a responsive table

Use a group of up to five bars to help users compare different states at a high level. Note that in a group of more than five bars, slight differences are much harder to perceive than a numeric display.

If the user has to compare a group of values, be sure to use the same visual display for all of them (only bars or only numbers).

Group of progress indicators

Progress indicators are typically used within (but not restricted to) the following controls:

Do not disable a progress indicator. A progress indicator is not interactive, therefore disabling it has no effect.

Exception: The progress indicator is shown inside a disabled UI area, such as a completely disabled form or panel.

Properties

The following additional properties are available for the progress indicator:

The property “width” defines the width of the progress indicator. The property “height” defines the height of the progress indicator. Adapt it only if the default height does not fit into the surrounding context. Do not use a height below 1.5 rems if text is shown inside the progress indicator.
The property “textDirection” is used for localiaztion (right-to-left languages).
The property “busy” sets the progress indicator to busy state.
The property “visible” shows or hides the progress indicator.
The property “tooltip” does not have an effect.

Resources

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

Elements and Controls

Busy Dialog (guidelines)
Busy Indicator (guidelines)
Busy State (guidelines)

Implementation

Progress Indicator (SAPUI5 samples)
Progress Indicator (SAPUI5 API reference)

Object Header

Information

Do not use the object header control for the object page floorplan. For object pages, always use the snapping header control.

The object header usually represents an object instance. As such, it contains the most important information a user needs to see in order to understand what the object is about and what its status is. It is the first control on a page dedicated to a single object instance, usually the object view or flat object view.

The control can also be used as the header of other pages, such as a full screen. In that case, the object header contains the most important aggregated information of the items that are listed below.

Usage

Use the object header:

As the first component on a page that handles a single object instance (object view or flat object view) to enable the user identify it easily.
As the header of other pages, such as a full screen. In this case, the object header contains the most important aggregated information of the items that are listed below.

Do not use the object header:

Inside the content area as a work-around for visualizing something that is not possible with current means.

Responsiveness

The object header generally adjusts to different screen sizes. To achieve this, there is a built-in rule set that defines which content wraps or truncates when necessary, and how attributes and status texts are arranged depending on the screen size.

The object header has two flags that influence its appearance and resizing behavior: Responsive and FullScreenOptimized.

Object header – Split-screen layout (Responsive = true, FullScreenOptimized = false)

Responsive

As of SAPUI5 1.28, the app team should generally set the Responsive flag to ‘true’. In this case, the attributes are the first set of entries in the header, followed by the second set of statuses. The on-screen distribution differs from previous SAPUI5 versions. Even if there are many attributes and only a few statuses, use of the space is now optimized as the entries fill the respective columns equally.

Object header – Smartphone size (Responsive = true, FullScreenOptimized = false)

Full Screen Optimized

The second attribute, FullScreenOptimized, should be activated when the header makes full use of the screen width and is not used in a split-screen layout.

Object header – Full screen optimized (responsive = true, FullScreenOptimized = true)

Attribute/Status Distribution

The following table shows how the attributes are distributed automatically when the Responsive flag is set to ‘true’ on various screen sizes.

Screen Size	2 Attributes	3 Attributes	4 Attributes	5+ Attributes
Desktop (full screen)	Next to the title area (1 column of 1-2 attributes)	Next to the title area (1 column of 3 attributes)	Underneath the title area (4 columns split by 1/1/1/1)	Underneath the title area (4 columns split by 2/1/1/1)
Desktop (split screen layout)	Underneath (2 columns split by 1/1	Underneath (2 columns split by 2/1)	Underneath (2 columns split by 2/2)	Underneath (3 columns split by 2/2/1)
Tablet (full screen – landscape)	Underneath (2 columns split by 1/1)	Underneath (3 columns split by 1/1/1)	Underneath (3 columns split by 2/1/1)	Underneath (3 columns split by 2/2/1)
Tablet (split screen layout) or Tablet (full screen – portrait)	Underneath (2 columns split by 1/1)	Underneath (2 columns split by 2/1)	Underneath (2 columns split by 2/2)	Underneath (2 columns split by 3/2)
Smartphone	Underneath (1 column of 1-2 attributes)	Underneath (1 column of 3 attributes)	Underneath (1 column of 4 attributes)	Underneath (1 column of 5+ attributes)

Prior to SAPUI5 1.28 (Responsive Set to ‘False’)

The Responsive flag is deactivated by default in apps that were built before SAPUI5 1.28. As mentioned above, this mainly impacts the attributes and status arrangement. If the Responsive flag is turned off, all attributes are left-aligned in the object header and all statuses are right-aligned, regardless of their individual number.
The object header still reacts correctly to resizing, but does not make optimal use of the space available.

For example, three attributes and one status with Responsive and FullScreenOptimized both set to ‘false’ results in two columns: the first (left) column contains three attributes, and the other column (right) has one status. Altogether, this is three rows in height, whereas the same number of entries on a desktop full screen with the two flags set to ‘true’ results in a height of just one row (spread over four columns).

Components

Title

The object header has a mandatory title that serves as the key identifier of the object instance (property: title).
Long titles wrap once before they truncate on the second line.
A title can be actionable (property: titleActionable), in which case, it looks like a link and triggers an event, which usually results in a quick view.
An additional icon or image that identifies the object (property: icon) can be shown in front of the title. The icon or image can also be set to actionable (property: IconActionable).
Additionally, the title can show a title selector (which is visualized like a menu). It is mainly used to provide navigation targets, allowing the object to be opened in a different app.

Object header (Responsive=false) – Title not actionable

Object header (Responsive=false) – Title actionable

Object header (Responsive=false) – Title selector

Object Number

The object number contains the key attribute of the object instance.
The object number consists of text that represents the key attribute of an object, usually a number (property: number) and its unit (property: numberUnit). The object number has a semantic color (property: state). The unit inherits the semantic color of its number.
As usual in SAP Fiori, the semantic colors available are negative (property: error), critical (property: warning), positive (property: success), and neutral (property: none).

Object header (Responsive=false) – Negative object number

Object Attribute

The object header can contain 0 to n attributes (property: objectAttribute).
The attributes are listed first in the list of attributes in the object header.
Attributes can be text (property: text) or actionable (property: actionable), in which case, they are rendered similar to links.

Object header (Responsive=false) – Attribute active

Object Status

The object header can contain a list of 0 to n object statuses (property: objectStatus).
The statuses are listed as the second set of attributes in the object header.
The status has a semantic color.
Statuses can be text or icons. A combination of the two is technically also possible, in which case, the icon is placed in front of the text. We generally recommend that you use text only (see guidelines below).
A progress indicator may also be shown as a status. If used, the progress indicator should be the last item in the list of statuses.

Object header (Responsive=true) – Favorite, three object attributes, and one object status

Flag and Favorite

Objects can be shown flagged and marked as favorites. The object header provides flags for both (properties: markFavorite, markFlagged).
To show them in the object header, you also need to activate the respective flag (property: showMarkers).
When they are used and shown, they appear directly behind the title.

Object header (Responsive=false) – Flag, favorite, two object attributes, and two object statuses

Intro

As mentioned above, another component from the early days of SAP Fiori called the intro (property: intro) is available.
It is now shown directly below the title in a smaller font size.
The intro can call an event if it is set to actionable (property: introActionable).
Previously, the intro appeared above the title, and was used to indicate the origin of an object (for example, Forwarded by…, On behalf of …). It now tends to be used as a short subtitle.

Object header (Responsive=true) – Intro text used as subtitle

Object header (Responsive=false) – Intro text

Condensed

The object header provides a condensed flag for cases in which it is used as a page header with little information (property: condensed).
When turned on, the object header displays only the title, object number, and one attribute.

Object header – Condensed mode

Guidelines

Settings

Set the object header responsiveness flag to ‘true’ (property: responsive) to make optimal use of the screen real estate.
If your app runs in full-screen mode (not master/details), make optimal use of the header area by setting the respective property to ‘true’ (property: FullScreenOptimized).
If you need to enforce the sequence and stable display of the attributes independently of the screen size, such as for an address, you might still decide to set the Responsive property to ‘false’ as an exception.

Title

The object header contains a mandatory title, which serves as the key identifier of the object instance (property: title). The title should be easily readable text without any IDs. If an ID is essential to the user, for example, to distinguish between identical titles, it can be put in brackets, such as Product ABC (1234567). If it is usually a long number, you can also consider adding it as a first attribute. In that case, however, you must give it a label (property: title of the Object Attribute).
Although the title can be truncated, keep it as short as possible and only as long as necessary.
If you make the title actionable and use an image or icon as well, both should be actionable and trigger the same event.
If you do use a title selector, it should open an action sheet that allows the user to choose from different options.

Object Number

The object number contains the key attribute of the object instance, which is usually a numeric attribute. In rare cases, it can also be used with text if that is the key attribute of the item. Be careful when you use text because it often leads to issues during translation if the text is too long.
As usual with SAP Fiori, the semantic colors available are negative (property: error), critical (property: warning), positive (property: success), and neutral (property: none).
For very long numbers, use a formatter.
The object number can be left blank if there is no key attribute worth showing.

Object Attribute

These object attributes do not generally need a label if it is clear what they refer to. If attributes are not distinct, you can use a label (property: title).
To facilitate recognition of the object header, we recommend using no more than four attributes.

Object Status

Although it is technically possible to show icons together with text, we recommend using text only.
- Only use icons that are clear and unambiguous. If you think your icon would need a descriptive text to be understood, use text only.
- In the case of locked items, however, you may also add further information about who has locked the item (when available).
The same rule for choosing semantic colors as elsewhere in SAP Fiori applies for the statuses negative (property: error), critical (property: warning), positive (property: success), and neutral (property: none).
In terms of indicating status priority, the general guidance is: very high (property: error), high (property: warning), medium, low, or other (property: none).
You can also show a progress indicator as a status. If you use it, the progress indicator should be the last item in the list of statuses.
As with the attributes, statuses do not need a label if it is clear what they refer to. If statuses are not distinct, you can use a label (property: title).
Here, too, we recommend that you have no more than four entries in the status list (including progress indicators and flag or favorite).

Intro

The intro usually contains a short subtitle and should only be used when necessary.
Do not use the intro for standard attributes.

Master/Details

When used in the details area of the split screen (master/details) and the master list contains object list items, the object header should show the same information as the object list item, plus additional information if necessary.
Unlike the object list item, the object number uses large number formatting because the object header has more space for handling long text.

Resources

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

Elements and Controls

Object Display Elements (guidelines)
Progress Bar (guidelines)

Implementation

Object Header (SAPUI5 samples)
Object Header (SAPUI5 API reference)