Intro

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

Usage

Use the generic tag:

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
Structure of the generic tag
KPI as a generic tag
KPI as a generic tag

Responsiveness and Adaptiveness

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

Generic tag overflow in the analytical list page - Size S
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

Implementation