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

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 | The type of the header. Should be set to "Default" or omitted. | 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 |
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 | |
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 |
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