Overview

The status indicator control can be used to display a percentage value in the form of a fillable shape or a group of shapes, translating plain numbers into meaningful visuals that convey the status of the items they represent.

Each status indicator may consist of a single group or multiple groups of shapes that display the value. The filling of the shapes can be proportional to the percentage value of the status indicator, or it can be based on thresholds that are specified using the discreteThresholds aggregation.

You can fully customize the control by setting fill direction and fill color and by picking a shape that matches the value measured. In addition to standard shapes, you can define your own custom SVG shapes. This allows you to create a powerful connection between your data and business by using symbols from a specific domain.

The status indicator is best used in tiles, tables, and object pages.

For more information about this control, see the API Reference and the Sample.

Details

Element Structure

A status indicator must contain at least one group that includes at least one shape.

• Groups can be defined using ShapeGroup elements joined in the groups aggregation.

• Shapes are defined using Shape elements joined in the shapes aggregation.

Supported Shapes

You can use any of the predefined shapes or create your own custom shapes:

• Simple shapes that include circular shapes, rectangular shapes, and shapes defined as SVG paths.

• Custom shapes that consist of an SVG definition, height, width, and other parameters defining the shape. The filling of a custom shape is defined by the FillingOption control.

For more information on simple shapes, see the API Reference .

For more information on custom shapes, see the API Reference .

Shape Filling

You can choose among the following filling types:

• Linear – The shape is filled with a linear gradient.

• Radial – The shape is filled with a radial gradient.

• None – No filling is applied.

For more information, see the API Reference.

The direction of the filling animation can be:

• Up – The shape is filled from bottom upwards.

• Down – The shape is filled from top to bottom.

• Left – The shape is filled from right to left.

• Right – The shape is filled from left to right.

For more information, see the API Reference.

To define how the filling color should change based on the status indicator value, you can use the PropertyThresholds aggregation. For each threshold, you can define a filling color that will be applied until the status indicator value reaches this threshold.

For more information, see the API Reference.

Value Distribution

By default, the filling of the status indicator shapes is proportional to the status indicator value. To adjust the filling, you can specify discrete thresholds using the discreteThresholds aggregation. When discrete thresholds are used, the displayed value may not exactly match the actual value of the status indicator.

For more information, see the API Reference sap.suite.ui.commons.statusindicator.DiscreteThreshold.

When multiple groups of shapes are used, the percentage value is distributed in the following way: shapes in the first group in the shapes aggregation are filled first, shapes in the second group second, and so on.