UI Elements Tool Development Info Label

Information

This control has been designed specifically for the tool landscape for the SAP Cloud Platform. It is not intended for use in regular SAP Fiori applications. 

Intro

The info label is a non-interactive, non-semantic, text-based control. The label highlights a characteristic of an object or item (such as a state, type, quantity, or condition). You can use it in tables, headers, custom tiles, and display forms.

Usage of the Info Label

  • Info label in a responsive table
  • Info label in dynamic page header and form

Usage

Before using the info label, consider whether you are highlighting a characteristic of an object or displaying a status of an operation or transaction. This distinction is particularly valid if you would like to display the state of an object.

Consider the following example. You have an object or a system that is currently working as intended. Its state is therefore Running. You decide to perform a Stop operation to prepare it for replication. The status of the Stop operation is a success. As a result, the system state changes to Not Running. In this case, Running and Not Running are system states and should use the info label. The success of the Stop operation is a status and, if displayed, should use the object status control.

Use the info label if:

  • You are designing an administration or monitoring application for the SAP Cloud Platform tool landscape.
  • You want to highlight a characteristic of an object.

Do not use the info label if:

  • You are designing an SAP Fiori application
  • You want to indicate the status of an object. Use the object status instead.
  • You want to convey semantics. Use the object status instead.

Styles

The info label supports various styles based on its content, chosen highlight, and usage.

Color Scheme

Various info label colors
Various info label colors

The info label comes with 9 predefined color variants. Change the default color variant to best match the characteristic you are highlighting. Consider using separate colors for separate characteristic values.

Render Mode

Different control paddings based on content type
Different control paddings based on content type

The info label supports two render modes, which affect control padding. Choose the render mode that is most appropriate for your text content. Use loose for text content (default) and narrow for numeric content.

Display Mode

Difference between default and display mode
Difference between default and display mode

The info label supports a display mode option. This allows the control to be used inside display-only controls (such as forms and tables). Display mode reduces the overall control size, font size, and margins.

Guidelines

The info label can be used in any control and in a number of ways. In general, follow the principles below for best results:

  • Use different colors for different characteristic values.
  • Use narrow render mode for numeric values for better visuals.
  • Use display mode for forms in display mode.

Resources

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

Elements and Controls

Implementation