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

Components

Behavior and Interaction

Basic Interactions

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.

Error Handling

Resources

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

Usage

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

Responsiveness

The text control is fully adaptive to all screen sizes. You can also set a specific width and overwrite the default value. The resizing behavior depends on the settings that the apps use for the text.

Properties

Resources

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

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

Usage

Use the object status if:

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

Do not use the object status if:

• You want to use it for decoration.
• You want to display system messages.

Responsiveness

The object status wraps if it becomes too long for the screen width available.

Components

Guidelines

Resources

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

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 displayed in emphasized format (default) when used for the key attribute, and non-emphasized when used for any other numeric attribute of the item.

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

Usage

Use the object number if:

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

Do not use the object number if:

• You want to use it for decoration.
• You want to display system messages.

Responsiveness

The object number does not wrap or truncate. For large numbers, you need to consider using the appropriate formatting.

Components

Guidelines

Resources

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

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

Responsive

Full Screen Optimized

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.

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

Object Number

Object Attribute

Object Status

Intro

Condensed

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.

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

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

Usage

Use the object identifier if:

• You want to indicate the key identifier of the object.

Do not use the object identifier if:

• You intend to use it for decoration.

Responsiveness

The object identifier text wraps when the screen size becomes too small to display the full text on one line.

Components

Guidelines

• The object identifier should be easily readable, preferably with just the display text but no ID. If the ID is necessary to distinguish between items that use the same title, it should appear in brackets, such as “Product ABC (1234567)”. Whether you include the ID in the text property can also depend on how long you expect the text to be.
• The object identifier can also be represented as a link, in which case, the event would open the quick view of the object.

Resources

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

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

Components

Title

Object Number

Object Attribute

Object Status

Intro

Condensed

Guidelines

Title

• The Object Header contains a mandatory title, that serves as key identifier of the object instance (property: title). The title should be in general a human readable text (no IDs). In case an ID is absolutely crucial to the user, e.g. to distinguish same named titles it can be put in brackets, e.g. “Product ABC (1234567)”. If this is usually a very long number you can also consider adding it as first attribute. But in that case give it a label (property: title of the Object Attribute).
• Though the title can truncate you should keep the title as short as possible and only as long as needed.
• In case you make the title actionable and use an image/icon as well, both should be actionable and in general trigger the same event.
• If used at all, the title selector should usually opening an action sheet, allowing the user to choose from different options.

Object Number

• The Object Number holds 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 using text, as it will usually cause issues during translation if the texts get to long.
• As usual throughout SAP Fiori available semantic colors are Negative (property: error), Critical (property: warning), Positive (property: success), Neutral (property:none).
• For very long numbers use a formatter.
• The Object Number can be left blank in case there is no key attribute that makes sense to be shown.

Object Attribute

• In general these object attributes do not need a label if it is clear what they are referring to. If attributes are not distinct, you can use a “label” (property: title).
• In order to anticipate the Object Header fast, we do not recommend using more than 4 attributes.

Object Status

• Though it is technically possible to show icons together with text, we recommend using text only.
  • Use icons only when they are obvious and understood. If you feel your icon would need a descriptive text in order to be understood, use text only.
  • In case of locked items it is though allowed to add the additional information who is currently locking the item (when available).
• The same rule for choosing semantic color as elsewhere in SAP Fiori applies for the status:Negative (property: error), Critical (property: warning), Positive (property: success), Neutral (property:none).
• For showing priorities within the status general guidance is: Very high (property: error) High (property: warning), Medium, Low, Other (property:none).
• It is also allowed to show a progress indicator as status. If used the progress indicator should be the last item in the list of status.
• Similar to the attributes, the status do not need a label if it is clear what they are referring to. If status are not distinct, you can use a “label” (property: title).
• Also here in general it is not recommended having more than four entries in the status list (including Progress Indicators and Flag/Favorite).

Intro

• The intro should not be used if not absolutely necessary. Usually it contains information in approvals about the origin (e.g. “Forwarded by XY”, “On behalf of YZ”).
• Do not use the intro for standard attributes.

Master/Detail

• When used in the Details Area of the Split Screen (Master/Detail), and the master list contains Object List Items, the Object Header should in general show the same information as the Object List Item plus additional information if necessary.
• In contrary to the Object List Item, the Object Number would use large number formatting, as the Object Header has more space to handle 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.

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

Responsive

Full Screen Optimized

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.

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

Object Number

Object Attribute

Object Status

Intro

Condensed

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.

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

Usage

Use the text control if you want to display text inside a form, table, or any other content area. However, do not use this control together with labels.

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

Resources

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

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

Usage

Use the text control if you want to display text inside a form, table, or any other content area. However, do not use this control together with labels.

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

Resources

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

A label is the name or title of a control or group of related controls.

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

Required Labels

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.
• If a label is used within a form, the colon is set automatically; otherwise, you need to set it manually.
• 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.

A label is the name or title of a control or group of related controls.

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

Required Labels

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.
• If a label is used within a form, the colon is set automatically; otherwise, you need to set it manually.
• 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.

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)

Size M (Tablets)

Size L (Desktops)

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.

Behavior and Interaction

Clicking/Tapping an Image (Optional)

Properties

Guidelines

Resources

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

Images are not only for decoration. They can be a powerful way to capture the user’s attention and communicate your message. You can use the image control to integrate images into your apps. Images are visual representations of objects or functions.

Responsiveness

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

Size S (Smartphones)

Size M (Tablets)

Size L (Desktops)

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.

Behavior and Interaction

Clicking/Tapping an Image (Optional)

Properties

Guidelines

Resources

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

Images are not only for decoration. They can be a powerful way to capture the user’s attention and communicate your message. You can use the image control to integrate images into your apps. Images are visual representations of objects or functions.

Responsiveness

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

Size S (Smartphones)

Size M (Tablets)

Size L (Desktops)

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.

Behavior and Interaction

Clicking/Tapping an Image (Optional)

Properties

Guidelines

Resources

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

Images are not only for decoration. They can be a powerful way to capture the user’s attention and communicate your message. You can use the image control to integrate images into your apps. Images are visual representations of objects or functions.

Responsiveness

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

Size S (Smartphones)

Size M (Tablets)

Size L (Desktops)

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.

Behavior and Interaction

Clicking/Tapping an Image (Optional)

Properties

Guidelines

Resources

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

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

Layout

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

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.

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

Styles

The progress indicator can be enabled or disabled. Property: enabled.

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.

Guidelines

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

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.

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

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

• Object header
• Object page header
• Form
• List
• Responsive table

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.

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

Layout

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

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.

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

Styles

The progress indicator can be enabled or disabled. Property: enabled.

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.

Guidelines

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

Always provide a label for the progress indicator.

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

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

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

• Object header
• Object page header
• Form
• List
• Responsive table

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.

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

Layout

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

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.

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

Styles

The progress indicator can be enabled or disabled. Property: enabled.

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.

Guidelines

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

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.

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

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

• Object header
• Object page header
• Form
• List
• Responsive table

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.

The title control is a simple, one-line 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.

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

Styles

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.

The title control is a simple, one-line 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.

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

Styles

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.

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

Object Status

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

Object Identifier

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

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

Object Number

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

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

Object Marker

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

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

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

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

Usage

Do not use the object display components if:

• They are for decoration purposes only.

Responsiveness

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

Components

Object Status

Object Identifier

Object Number

Guidelines

Object Status

Object Identifier

Resources

Obje

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

Object Status

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

Object Identifier

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

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

Object Number

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

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

Object Marker

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

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

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

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

Usage

Do not use an object display components if:

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

Responsiveness

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

Components

Object Status

Object Identifier

Object Number

Object Marker

Guidelines

Object Status

Object Identifier

Object Marker

Resources

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

 Object Status

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

Object Identifier

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

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

Object Number

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

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

Object Marker

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

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

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

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

Usage

Do not use an object display components if:

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

Responsiveness

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

Components

Object Status

Object Identifier

Object Number

Object Marker

Guidelines

Object Status