Updated: February 21, 2023

Latest Version 1.128

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