Numeric Header
The numeric header shows general information about the card and allows the configuration of a numeric value visualization. Using properties you can configure the title, subtitle, and status text.

Usage
To show only basic information, use the default header instead. You should always set a title. Optionally, you can add a maximum of two side indicators that relate to the main numeric indicator.
Properties
Property | Type | Default Value | Required | Description | Schema Version | Since |
---|---|---|---|---|---|---|
type | string | Yes | The type of the header. Should be set to "Numeric". | 1.14.0 | 1.64 | |
title | string | Yes | The title. | 1.14.0 | 1.64 | |
subTitle | string | No | The subtitle. | 1.14.0 | 1.64 | |
unitOfMeasurement | string | No | Represents unit of measurement for the whole numeric header. | 1.14.0 | 1.64 | |
mainIndicator | MainIndicator | No | Numeric indicator. | 1.14.0 | 1.64 | |
details | string | No | Represents additional information about the numeric header. | 1.14.0 | 1.64 | |
sideIndicators | SideIndicator[] | No | Side indicators that relate to the main numeric indicator. You can have a maximum of two side indicators. | 1.14.0 | 1.64 | |
status | No | Represents the status of the card. | 1.14.0 | 1.64 | ||
actions | Actions[] | No | Actions that are triggered when the header is pressed. | 1.15.0 | 1.65 | |
dataTimestamp | string | No |
Defines the timestamp of the oldest data in the card. Use this to show to the end user how fresh the information in the card is. Must be in ISO 8601 format. Will be shown as a relative time like "5 minutes ago". Note: This property is experimental and may change! |
1.33.0 | 1.89 | |
sideIndicatorsAlignment | sap.f.cards.NumericHeaderSideIndicatorsAlignment | "Begin" | No | The alignment of the side indicators in the numeric header. | 1.37.0 | 1.96 |
MainIndicator properties
Property | Type | Default Value | Required | Description | Schema Version | Since |
---|---|---|---|---|---|---|
number | string | No | The value of the main indicator. | 1.14.0 | 1.64 | |
unit | string | No | The unit of measurement of the main indicator. | 1.14.0 | 1.64 | |
trend | sap.m.DeviationIndicator | "None" | No | The trend indicator (direction). | 1.14.0 | 1.64 |
state | sap.m.ValueColor | "Neutral" | No | The state color of the main indicator. | 1.14.0 | 1.64 |
SideIndicator properties
Property | Type | Default Value | Required | Description | Schema Version | Since |
---|---|---|---|---|---|---|
title | string | No | The title of the side indicator. | 1.14.0 | 1.64 | |
number | string | No | The value of the side indicator. | 1.14.0 | 1.64 | |
unit | string | No | The unit of measurement of the side indicator. | 1.14.0 | 1.64 | |
state | sap.m.ValueColor | "None" | No | The state color of the side indicator. | 1.36.0 | 1.95 |
Example
"header": { "type": "Numeric", "title": "Project Cloud Transformation", "subTitle": "Revenue", "unitOfMeasurement": "EUR", "mainIndicator": { "number": "44", "unit": "%", "trend": "Down", "state": "Critical" }, "details": "Some details", "sideIndicators": [ { "title": "Target", "number": "17", "unit": "%" }, { "title": "Deviation", "number": "5", "unit": "%" } ] }Try It Out