UI Elements Data Visualization Status Indicator

Updated: March 17, 2021
SAPUI5 Version 1.76

Status Indicator

sap.suite.ui.commons.StatusIndicator

Intro

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

  • Status indicator embedded in tiles
  • Status indicator embedded in an overview page card
  • Status indicator embedded in a header facet
  • Status indicator embedded in an object page
  • Status indicator embedded in a table (micro process flow)

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)

  • Status indicator - Size S
  • Status indicator - Size M
  • Status indicator - Size L
  • Status indicator - Size 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
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
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
Status indicator with linear fill

Circular Fill

For round shapes, you can use the circular fill.

Status indicator with 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
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
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
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

Implementation