Skip to content

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.


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.


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.


PrimaryAction

Defines the primary action button for the Object Card.


SecondaryAction

Defines the secondary action button for the Object Card.


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

Footnote

The string value is a style class name of Footnote.

StatusText

The string value is a style class name of StatusText.

Subhead

The string value is a style class name of Subhead.

Title

The string value is a style class name of Title.

BackgroundColor

The string value is a style class name of BackgroundColor.


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;
}