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

The Object Card contains an array of groups.

Object Group properties

Property Type Required Description Schema Version Since
title string No Defines language-dependent title of the object group. 1.15.0 1.64
items array Yes Represents items of information. 1.15.0 1.64
visible boolean No Determines the visibility of the group. 1.25.0 1.81

Object Group Item properties

Property Type Required Description Schema Version Since
icon Icon No Defines the icon of the item. 1.15.0 1.64
label string Yes Defines the label of the item. 1.15.0 1.64
value string Yes Represents the text, which is associated with the label. 1.15.0 1.64
visible boolean No Determines the visibility of the item. 1.25.0 1.81
actions Actions[] No Actions that are triggered when the content area is pressed. 1.31.0 1.87

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. 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

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",
	"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}",
					"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}"
					}
				}
			]
		}
	]
}

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