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