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.

Example of numeric header

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