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 following values are available in the "form" model for item of type "DateRange":

Path	Description
{form>/idOfTheItem/value/option}	The current option.
{form>/idOfTheItem/value/values}	The current option values.
{form>/idOfTheItem/range/start}	The start date of the range in ISO 8601 format in UTC time zone.
{form>/idOfTheItem/range/end}	The end date of the range in ISO 8601 format in UTC time zone.
{form>/idOfTheItem/range/startLocalDate}	The start date of the range in short ISO 8601 date format in the local time zone. Use this property if you want to select a single date without reference to the time of the day.
{form>/idOfTheItem/range/endLocalDate}	The end date of the range in short ISO 8601 date format in the local time zone.
{form>/idOfTheItem/rangeOData/start}	The start date of the range in ISO 8601 format in UTC time zone. It is in the boundaries of Edm.DateTime type of the OData protocol.
{form>/idOfTheItem/rangeOData/end}	The end date of the range in ISO 8601 format in UTC time zone. It is in the boundaries of Edm.DateTime type of the OData protocol.
{form>/idOfTheItem/range/startLocalDate}	The start date of the range in short ISO 8601 date format in the local time zone. It is in the boundaries of Edm.DateTime type of the OData protocol.
{form>/idOfTheItem/range/endLocalDate}	The end date of the range in short ISO 8601 date format in the local time zone. It is in the boundaries of Edm.DateTime type of the OData protocol.

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.