ObjectCard¶
ObjectCard Properties¶
| Property | Type | Required | Default |
|---|---|---|---|
| Description | string |
No | |
| DetailImage | Image | No | |
| DetailImageIsCircular | boolean |
No | false |
| Footnote | string |
No | |
| OnPress | ActionOrRule | No | |
| OverflowButtons | OverflowButton | No | |
| PrimaryAction | ActionItem | No | |
| SecondaryAction | ActionItem | No | |
| StatusText | string |
No | |
| Styles | object |
No | |
| Subhead | string |
No | |
| Title | string |
No | |
| Visible | boolean |
No | true |
| _Name | string |
No |
Description¶
Will not be displayed if control is rendered within FlexibleColumnLayout (except for last column).
- type:
string
DetailImage¶
Image to be displayed in the cell.
- type: Image
DetailImageIsCircular¶
If the value is true, the image is displayed in a circular shape.
- type:
boolean - default:
false
Footnote¶
Text of footnote, which is initially hidden. Setting a non-empty string would no longer hide the label. This is supported only for iOS & Android.
- type:
string
OnPress¶
Action/Rule to be triggered when the object cell is pressed.
- type: ActionOrRule
- Formatter and Binding are not supported
OverflowButtons¶
Defines the ActionItems for the Object Card. On Mobile Platforms (iOS & Android), this is fully supported. On the web platform, only the first visible instance of the ActionItems would appear.
- type: OverflowButton
PrimaryAction¶
Defines the primary action button for the Object Card.
- type: ActionItem
SecondaryAction¶
Defines the secondary action button for the Object Card.
- type: ActionItem
StatusText¶
A status label displayed in the status view. It’s expected to either set StatusText or StatusImage to display
either one as the same position. When both are set, StatusImage would be displayed in priority. Would not be
displayed if control is rendered within FlexibleColumnLayout (except for last column), use StatusImage instead.
- type:
string
Styles¶
Style to be applied on the object card. Note that font size & bold style are not supported for Android. Only red, green
and default color are supported for Android StatusText style. CSS Shadow Parts are required for the
BackgroundColor, Title, SubHead & StatusText styles of Web Client.
- type:
objectwith following properties.
| Property | Type | Required | Default |
|---|---|---|---|
| Description | string | No | |
| Footnote | string | No | |
| StatusText | string | No | |
| Subhead | string | No | |
| Title | string | No | |
| BackgroundColor | string | No |
Description¶
The string value is a style class name of Description.
- TextPaint style class
Footnote¶
The string value is a style class name of Footnote.
- TextPaint style class
StatusText¶
The string value is a style class name of StatusText.
- Value style class
Subhead¶
The string value is a style class name of Subhead.
- TextPaint style class
Title¶
The string value is a style class name of Title.
- TextPaint style class
BackgroundColor¶
The string value is a style class name of BackgroundColor.
- Background style class
Subhead¶
A sub-header label in the main view.
- type:
string
Title¶
Title text to be displayed on the cell
- type:
string
Visible¶
Only valid for static section, will be ignored in dynamic sections and List pickers.
- type:
boolean - default:
true
_Name¶
- type:
string
Examples¶
{
"_Type": "Page",
"_Name": "StaticObjectCardCollectionPage",
"Caption": "Static Object Card Collection Page",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "StaticObjectCardCollectionTable",
"Sections": [
{
"_Type": "Section.Type.ObjectCardCollection",
"Layout": {
"LayoutType": "HorizontalScroll"
},
"Cards": [
{
"_Type":"Control.Type.ObjectCard",
"Title":"Title",
"DetailImage":"/MDKDevApp/Images/workorder.png",
"DetailImageIsCircular": true,
"Subhead":"SubHead",
"Footnote":"Footnote",
"StatusText":"StatusText",
"Description":"Static bound cards and dynamic bound cards in all use cases",
"OverflowButtons":[
{
"_Name":"menuAction1",
"Title":"Action 1",
"Image":"/MDKDevApp/Images/workorder.png",
"Visible":true,
"OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction1.action"
},
{
"_Name":"menuAction2",
"Title":"Action 2",
"Image":"sap-icon://begin",
"OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction2.action",
"ButtonType":"Destructive" /* iOS Only */
},
{
"_Name":"menuAction3",
"Title":"Action 3",
"Image": "font-icon-class",
"Visible":false,
"OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction3.action"
},
{
"_Name":"menuAction4",
"Title":"Action 4",
"Image":"sap-icon://accept",
"OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction4.action",
"ButtonType":"Disabled" /* iOS Only */
}
],
"OnPress":"/MDKDevApp/Actions/Toast/ObjectCardOnPress.action",
"PrimaryAction":{
"Title":"Primary",
"Visible":true,
"OnPress":"/MDKDevApp/Actions/Toast/PrimaryActionMessage.action",
"Style":"ObjectCardPrimaryAction"
},
"SecondaryAction":{
"Title":"Secondary",
"OnPress":"/MDKDevApp/Actions/Toast/SecondaryActionMessage.action",
"Style":"ObjectCardSecondaryAction"
},
"Styles":{
"BackgroundColor":"ObjectCardBackground",
"Title":"ObjectCardTitle",
"Subhead":"ObjectCardSubHead",
"Footnote":"ObjectCardFootnote",
"Description":"ObjectCardDescription",
"StatusText":"ObjectCardStatusText",
"DetailImage": "font-icon-class"
}
}
]
}
]
}
]
}
Style Classes Definition¶
Note that font size & bold style are not supported for Android. Only red, green and default color are supported for Android status text style. CSS shadow parts are required for the background color, title, subhead, and status text styles of the web client.
.ObjectCardBackground {
background-color: #f0afa0;
}
.ObjectCardTitle {
font-color: #339966;
}
.ObjectCardSubHead {
font-color: #ff00ff;
}
.ObjectCardFootnote {
font-color: #339966;
}
.ObjectCardDescription {
font-color: #ffbb33;
}
.ObjectCardStatusText {
font-color: #ff0000; /*Android support Red, Green & default color only*/
}
.ObjectCardPrimaryAction {
font-color: green;
background-color: cyan;
background-color-normal: cyan; /*iOS only*/
background-color-highlighted: red; /*iOS only*/
}
.ObjectCardSecondaryAction {
font-color: green;
background-color: orange;
background-color-normal: orange; /*iOS only*/
background-color-highlighted: black; /*iOS only*/
}
.font-icon-class {
color: #339966;
}
/* Additional CSS Shadow Parts for the BackgroundColor, Title, SubHead & StatusText styles of Web Client */
.ObjectCardBackground::part(root) {
background-color: #ff0000;
}
.ObjectCardTitle::part(title) {
font-color: #339966;
}
.ObjectCardSubHead::part(subtitle) {
font-color: #ff00ff;
}
.ObjectCardStatusText::part(status) {
font-color: #339966;
}