Object Card

This type of card can display information about any object in groups. Each group can contain as much items as needed. The Object Card header is coupled with the content, which means that the header cannot make separated requests.

Properties

Property Type Default Value Required Description Schema Version Since
groups ObjectGroup[] Yes An array of groups. 1.15.0 1.64
actions Actions[] No Actions that are triggered when the content is pressed. 1.15.0 1.64
hasData boolean|object|array true No Whether the card has data. If it doesn't, the message for "No data" will be shown. Empty object or empty array mean that the card has no data. 1.45.0 1.105

ObjectGroup Properties

Property Type Default Value Required Description Schema Version Since
title string No The title of the object group. 1.15.0 1.64
items ObjectGroupItem[] Yes Represents items of information. 1.15.0 1.64
visible boolean true No Determines the visibility of the group. 1.25.0 1.81
alignment string "Default" No The alignment of the group. Possible values are:
  • "Stretch" - the group stretches to the full width of the card
  • "Default" - group takes flexible width, aligned with the other non-stretched groups

Note: This property is experimental and may change!
1.38 1.98
titleMaxLines number 1 No Limits the number of lines for wrapping the group title.
Note: This property is experimental and may change!
1.46 1.106
labelWrapping boolean false No Determines whether the labels of the group items will be wrapped.
Note: This property is experimental and may change!
1.46 1.106

ObjectGroupItem Properties

Property Type Default Value Required Description Schema Version Since
type string "Default" No Type of the item. Based on it additional properties of the item are available. Possible values are: 1.15.0 1.64
icon Icon No Defines the icon of the item. 1.15.0 1.64
label string No Label for the item. When the item has actions it should be set. 1.15.0 1.64
tooltip string No Tooltip for an item that is a link (has defined action). It provides a hint about this action. 1.45.0 1.105
visible boolean true No Determines the visibility of the item. 1.25.0 1.81

Additional Properties for ObjectGroupItem of type Default

Property Type Required Description Schema Version Since
value string Yes Represents the text, which is associated with the label. 1.15.0 1.64
actions Actions[] No Actions that are triggered when the item is pressed. 1.31.0 1.87
maxLines int No Limits the number of lines for wrapping texts.
Note: This property is experimental and may change!
Note: This property cannot be used together with actions.
1.38 1.98

Additional Properties for ObjectGroupItem of type NumericData

Property Type Default Value Required Description Schema Version Since
mainIndicator MainIndicator Yes Numeric indicator. 1.38 1.98
sideIndicators SideIndicator[] No Side indicators that relate to the main numeric indicator. You can have a maximum of two side indicators. 1.38 1.98
sideIndicatorsAlignment sap.f.cards.NumericHeaderSideIndicatorsAlignment "Begin" No The alignment of the side indicators in the numeric header. 1.38 1.98
details string No Additional information about the numeric data. The text overflows with ellipsis after the first line. 1.38 1.98

Additional Properties for ObjectGroupItem of type Status

Property Type Required Description Schema Version Since
value string Yes The status. 1.38 1.98
state sap.ui.core.ValueState No The semantic state of the status. 1.38 1.98

Additional Properties for ObjectGroupItem of type IconGroup

Property Type Required Description Schema Version Since
path string Yes The binding path. 1.41 1.100
template IconGroupTemplate Yes The template from which all the icons in the group will be created. 1.41 1.100
size string No One of "XS", "S" or "M". By default it is set to "XS".
Note: This property is experimental and may change!
1.40 1.100

IconGroupTemplate

Property Type Required Description Schema Version Since
icon IconGroupIcon Yes Defines the properties of the icons. 1.41 1.100
actions Actions[] No Actions that are triggered when the icon is pressed. 1.41 1.100

IconGroupIcon

Property Type Required Description Schema Version Since
src string Yes Icon name or source URL 1.41 1.100
initials string No Used as fallback if the "src" property is not set or there is an issue with the resource. Up to two Latin letters can be displayed. If there are more than two letters, or if there's a non-Latin character present, a default image placeholder will be created. 1.47.0 1.107
alt string No Alternative text for the icon. Also shown as a tooltip. Enables you to provide meaningful alternative texts to support screen-reader users. 1.41 1.100

Icon Properties

Property Type Required Description Schema Version Since
src string No Icon name or source URL 1.15.0 1.65
shape sap.m.AvatarShape No The shape of the icon. 1.26.0 1.82
alt string No Alternative text for the icon. If not provided, a default value is set, which might be confusing for screen reader users, when there are more than one card in the view. 1.26.0 1.82
size string No One of "XS", "S" or "M". By default it is set to "XS".
Note: This property is experimental and may change!
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
initials string No Used as fallback if the "src" property is not set or there is an issue with the resource. Up to two Latin letters can be displayed. If there are more than two letters, or if there's a non-Latin character present, a default image placeholder will be created. 1.47.0 1.107
visible boolean No Defines whether the icon should be displayed. 1.48.0 1.108

MainIndicator Properties

Property Type Default Value Required Description Schema Version Since
number string Yes The value of the main indicator. 1.38 1.98
unit string No The unit of measurement of the main indicator. 1.38 1.98
trend sap.m.DeviationIndicator "None" No The trend indicator (direction). 1.38 1.98
state sap.m.ValueColor "Neutral" No The semantic state color of the main indicator. 1.38 1.98
size string "L" No The size of the main indicator. Possible values are "S" and "L". 1.38 1.98

Additional Properties for ObjectGroupItem of type ComboBox (experimental since 1.104)

Check samples on how to submit a form with extension or with action handlers.
Property Type Required Description Schema Version Since
id string Yes Defines the id of the form input. Will be used in the submitted payload. 1.44 1.104
value string No Defines the initial free text value for the input.
For defining an initially selected option use "selectedKey".
1.44 1.104
selectedKey string No Defines the initially selected key from the given options.
If there is no option with that key, nothing will be selected.
This property overrides the "value" property.
1.44 1.104
placeholder string No Defines a short hint intended to aid the user with data entry when the control has no value. 1.44 1.104
item ComboBoxItemBindingInfo No Binding info object used to bind data to options of the ComboBox. 1.44 1.104
validations ObjectGroupItemValidation[] No Defines the user input validations. 1.44 1.106
ComboBoxItemBindingInfo Properties
Property Type Default Value Required Description Schema Version Since
path string / No The context path. 1.44 1.104
template Yes Binding template for items
title string Yes The title of the item which appears in the dropdown. 1.44 1.104
key string Yes The key of the item. This key corresponds to the value of the ComboBox. 1.44 1.104

Additional Properties for ObjectGroupItem of type TextArea (experimental since 1.104)

Property Type Required Description Schema Version Since
id string Yes Defines the id of the form input. Will be used in the submitted payload. 1.44 1.104
value string No Defines the initial value for the TextArea. 1.44 1.104
placeholder string No Defines a short hint intended to aid the user with data entry when the control has no value. 1.44 1.104
rows integer No Number of visible text lines. 1.44 1.104
validations ObjectGroupItemValidation[] No Defines the user input validations. 1.44 1.106

ObjectGroupItemValidation Properties


Note: The "validate" property should be provided in the following format (should start with 'extension.') e.g. 'extension.myValidator'.
Property Type Default Value Required Description Schema Version Since
message string No Defines custom validation message text. 1.44 1.106
type string "Error" No Defines the validation type - "Error", "Warning" or "Information". 1.44 1.106
required boolean false No Defines whether the user input is required. 1.44 1.106
minLength integer No Defines the minimum number of characters. 1.44 1.106
maxLength integer No Defines the maximum number of characters. 1.44 1.106
restrictToPredefinedOptions boolean false No Defines whether the value is restricted to predefined options. 1.44 1.106
pattern string No Defines the regular expression pattern that should match the value.
Note: The regular expression must be properly escaped in JSON format. E.g. a single backslash "\" should be escaped and therefore represented as double backslashes "\\".
Note: The "pattern" property cannot be used with binding.
1.47 1.108
validate string No The name of an extension function used to validate the value 1.47 1.108

Example

Define the type and data for the card:

{
	"sap.card": {
		"type": "Object",
		"data": {
			"request": {
				"url": "./employee.json"
			}
		}
	}
}

The content of the employee.json which we are requesting:

{
	"firstName": "Donna",
	"lastName": "Moore",
	"position": "Sales Executive",
	"phone": "+1 202 555 5555",
	"tooltip": "Make a call",
	"photo": "../images/Woman_avatar_01.png",
	"manager": {
		"firstName": "John",
		"lastName": "Miller",
		"photo": "../images/Woman_avatar_02.png"
	},
	"company": {
		"name": "Company A",
		"address": "481 West Street, Anytown OH 45066, USA",
		"website": "www.company_a.example.com"
	}
}

Define the header:

"header": {
	"icon": {
		"src": "{photo}"
	},
	"title": "{firstName} {lastName}",
	"subTitle": "{position}"
},

Define the content in groups:

"content": {
	"groups": [
		{
			"title": "Contact Details",
			"items": [
				{
					"label": "First Name",
					"value": "{firstName}"
				},
				{
					"label": "Last Name",
					"value": "{lastName}"
				},
				{
					"label": "Phone",
					"value": "{phone}",
					"tooltip": "{tooltip}",
					"actions": [
						{
							"type": "Navigation",
							"parameters": {
								"url": "tel:{phone}"
							}
						}
					]
				},
				{
					"label": "Email",
					"value": "{email}",
					"actions": [
						{
							"type": "Navigation",
							"parameters": {
								"url": "mailto:{email}"
							}
						}
					]
				}
			]
		},
		{
			"title": "Company Details",
			"items": [
				{
					"label": "Company Name",
					"value": "{company/name}"
				},
				{
					"label": "Address",
					"value": "{company/address}"
				},
				{
					"label": "Email",
					"value": "{company/email}",
					"actions": [
						{
							"type": "Navigation",
							"parameters": {
								"url": "mailto:{company/email}?subject={company/emailSubject}"
							}
						}
					]
				},
				{
					"label": "Website",
					"value": "{company/website}",
					"actions": [
						{
							"type": "Navigation",
							"parameters": {
								"url": "{company/url}",
							}
						}
					]
				}
			]
		},
		{
			"title": "Organizational Details",
			"items": [
				{
					"label": "Direct Manager",
					"value": "{manager/firstName} {manager/lastName}",
					"icon": {
						"src": "{manager/photo}",
						"visible": true
					}
				}
			]
		}
	]
}

Here is the final manifest definition:

{
	"sap.app": {
		"id": "card.explorer.object.card",
		"type": "card",
		"i18n": "i18n/i18n.properties",
		"applicationVersion": {
			"version": "1.0.0"
		}
	},
	"sap.card": {
		"type": "Object",
		"data": {
			"request": {
				"url": "./cardcontent/objectcontent/employee.json"
			}
		},
		"header": {
			"icon": {
				"src": "{photo}"
			},
			"title": "{firstName} {lastName}",
			"subTitle": "{position}"
		},
		"content": {
			"groups": [
				{
					"title": "{{contactDetails}}",
					"items": [
						{
							"label": "{{firstName}}",
							"value": "{firstName}"
						},
						{
							"label": "{{lastName}}",
							"value": "{lastName}"
						},
						{
							"label": "{{phone}}",
							"value": "{phone}",
							"actions": [
								{
									"type": "Navigation",
									"parameters": {
										"url": "tel:{phone}"
									}
								}
							]
						},
						{
							"label": "{{email}}",
							"value": "{email}",
							"actions": [
								{
									"type": "Navigation",
									"parameters": {
										"url": "mailto:{email}"
									}
								}
							]
						}
					]
				},
				{
					"title": "{{organizationalDetails}}",
					"items": [
						{
							"label": "{{directManager}}",
							"value": "{manager/firstName} {manager/lastName}",
							"icon": {
								"src": "{manager/photo}"
							}
						}
					]
				},
				{
					"title": "{{companyDetails}}",
					"items": [
						{
							"label": "{{companyName}}",
							"value": "{company/name}"
						},
						{
							"label": "{{address}}",
							"value": "{company/address}"
						},
						{
							"label": "{{email}}",
							"value": "{company/email}",
							"actions": [
								{
									"type": "Navigation",
									"parameters": {
										"url": "mailto:{company/email}?subject={company/emailSubject}"
									}
								}
							]
						},
						{
							"label": "{{website}}",
							"value": "{company/website}",
							"actions": [
								{
									"type": "Navigation",
									"parameters": {
										"url": "{company/url}"
									}
								}
							]
						}
					]
				}
			]
		}
	}
 }

Create the view to display the card:

<mvc:View xmlns:w="sap.ui.integration.widgets">
	<w:Card manifest="./manifest.json" width="400px" height="auto" />
</mvc:View>
Try it Out

Validate Input Fields

The user input provided in the form fields can be validated. More info here.