Skip to content

ObjectCardCollection

The object card is a flexible visual container displaying critical information regarding a single object. It previews the object and serves as the entry point to the full object detail page. The object card is highly customizable to accommodate various content types and use cases.

Object Card supports two layout styles: HorizontalScroll and Vertical.

ObjectCardCollection Properties

Property Type Required Default
Card ObjectCard Optional
Cards array Optional
DataPaging DataPaging Optional
DataSubscriptions DataSubscriptions Optional
EmptySection EmptySection Optional
Footer Footer Optional
Header Header Optional
Layout Layout Optional
MaxItemCount integer Optional
OnPress ActionOrRule Optional
Search Search Optional
Target LinkQueryFunctionTarget Optional
Visible boolean Optional true
_Name string Optional
_Type const Required

Card


Cards

  • type: array

DataPaging

Configure the loading indicator shown at the end of the list, when loading next page of data.


DataSubscriptions

Array of data change events to subscribe to.


EmptySection

A section that will be displayed when the list is empty. This only applies if you are using Target binding. Allows you to show custom label when the list is empty.


Footer bar to be displayed below this control's content section.


Header bar to be displayed above this control's content section.


Layout

The layout of cards. Now ObjectCard only supports HorizontalScroll or Vertical for LayoutType.


MaxItemCount

The maximum number of items to be displayed in the section. If MaxItemCount is not specified, then all records are displayed in the section.

  • type: integer

OnPress

Action or rule to be performed when the event is triggered.


Defines if search is to be enabled in the ObjectCardCollection.


Target

Definition of the target binding to dynamically populate the collection. You can also set this to binding/rule to return an array of data items.

Note: If this is set to binding/rule, you must return an array of data items, you can't return Target definition.


Visible

Set the visibility of this control.

  • type: boolean
  • default: true

_Name

  • type: string

_Type

  • type: const

The value of this property must be equal to:

"Section.Type.ObjectCardCollection"

Examples

Dynamic ObjectCard Collection

{
  "_Type": "Page",
  "_Name": "ObjectCollectionPage",
  "Caption": "Work Orders",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "Card":{
            "_Type":"Control.Type.ObjectCard",
            "Title":"{OrderId}",
            "DetailImage":"/MDKDevApp/Images/workorder.png",
            "Subhead":"{MainWorkCenter}",
            "Footnote":"/MDKDevApp/Rules/GetCaption.js",
            "StatusText":"{Priority}",
            "Description":"{OrderDescription}",
            "OverflowButtons":[
              {
                "_Name":"Transfer",
                "Image": "sap-icon://accept",
                "Title":"Transfer",
                "OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction1.action"
              },
              {
                "_Name":"Submit",
                "Title":"Submit",
                "Image": "sap-icon://home",
                "OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction2.action"
              }
            ],
            "OnPress":"/MDKDevApp/Actions/Toast/ObjectCardOnPress.action",
            "PrimaryAction":{
              "Title":"Primary",
              "Visible":true,
              "OnPress":"/MDKDevApp/Actions/Toast/PrimaryActionMessage.action"
            },
            "SecondaryAction":{
              "Title":"Secondary",
              "OnPress":"/MDKDevApp/Actions/Toast/SecondaryActionMessage.action"
            }
          },
          "Layout":{
            "LayoutType":"Vertical"
          },
          "_Name":"ObjectCardCollection",
          "_Type":"Section.Type.ObjectCardCollection",
          "Target":{
            "EntitySet":"MyWorkOrderHeaders",
            "Service":"/MDKDevApp/Services/Amw.service",
            "QueryOptions":"$orderby=OrderId&$top=20"
          }
        }
      ]
    }
  ]
}

Static ObjectCard

{
  "_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":"menuAction3",
                  "Title":"Action 1",
                  "Image":"/MDKDevApp/Images/workorder.png",
                  "Visible":true,
                  "OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction1.action"
                },
                {
                  "_Name":"menuAction4",
                  "Title":"Action 2",
                  "Image":"sap-icon://begin",
                  "OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction2.action",
                  "Style":"destructive"
                },
                {
                  "_Name":"menuAction5",
                  "Title":"Action 3",
                  "Visible":false,
                  "OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction3.action"
                },
                {
                  "_Name":"menuAction6",
                  "Title":"Action 4",
                  "Image":"sap-icon://accept",
                  "OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction4.action",
                  "Style":"disabled"
                }
              ],
              "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

.ObjectCardBackground {
  background-color: #f0afa0;
}

.ObjectCardTitle {
  font-color: #339966;
}

.ObjectCardSubHead {
  font-color: #ff00ff;
}

.ObjectCardFootnote {
  font-color: #ff0000;
}

.ObjectCardDescription {
  font-color: #ffbb33;
}

.ObjectCardStatusText {
  font-color: #339966;
}

.ObjectCardPrimaryAction {
  font-color: green;
  background-color-normal: cyan; /*iOS only*/
  background-color-highlighted: red; /*iOS only*/
}

.ObjectCardSecondaryAction {
  font-color: green;
  background-color-normal: orange; /*iOS only*/
  background-color-highlighted: black; /*iOS only*/
}

.font-icon-class {
  color: #339966;
}

The CSS Shadow Parts are required for Web Background, Title, SubHead & StatusText

.ObjectCardBackground::part(root) {
  background-color: #ff0000;
}

.ObjectCardTitle::part(title) {
  font-color: #339966;
}

.ObjectCardSubHead::part(subtitle) {
  font-color: #ff00ff;
}

.ObjectCardStatusText::part(status) {
  font-color: #339966;
}