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 | |
titleMaxLines | int | 3 | No |
Limits the number of lines for the title. Note: This property is experimental and may change! |
1.47.0 | 1.107 |
subTitle | string | No | The subtitle. | 1.14.0 | 1.64 | |
subtitleMaxLines | int | 2 | No |
Limits the number of lines for the subtitle. Note: This property is experimental and may change! |
1.47.0 | 1.107 |
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 | |
detailsMaxLines | int | 1 | No |
Limits the number of lines for the details. Note: This property is experimental and may change! |
1.47.0 | 1.107 |
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 |
visible | boolean | true | No |
Visibility of the card header. If the header is hidden, the menu that holds custom extension or host actions will also be hidden. Therefore, the header should only be hidden in special cases and when it doesn't bring important information. Note: This property is experimental and may change! |
1.47.0 | 1.107 |
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