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 | Defines actions that can be applied on the item. | 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