Default Header

The header displays general information about the card. Using properties you can configure the title, subtitle, status text, and icon.

Example of default header

Usage

You should always set a title. To show a KPI or any numeric information, use the numeric header instead.

Properties

Property Type Required Description Schema Version Since
type string No Represents the type of the header. Should be set to "Default". 1.14.0 1.64
title string Yes Represents language-dependent title. 1.14.0 1.64
subTitle string No Represents language-dependent additional information to the title. 1.14.0 1.64
actions array No Represents description of actions that can be applied on a part of a card. 1.15.0 1.65
icon Icon No Represents the icon of the card. 1.14.0 1.64
status No Represents the status of the card. 1.14.0 1.64
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

Icon Properties

Property Type Required Description Schema Version Since
src string No Icon name or source URL 1.14.0 1.64
shape sap.m.AvatarShape No The shape of the icon. 1.14.0 1.64
alt string No Alternative text for the icon. 1.26.0 1.82
backgroundColor sap.m.AvatarColor No By default it is set to "Transparent".
Note: This property is experimental and may change!
1.27.0 1.83

Example

"header": {
	"title": "An example title",
	"subTitle": "Some subtitle",
	"icon": {
		"src": "sap-icon://business-objects-experience"
	},
	"status": {
		"text": "5 of 20"
	}
}
Try It Out

Actions

Actions add behavior to the card. To add a navigation action to the header and to the items, you can configure it inside the manifest.