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 No
Cards array No
DataPaging DataPaging No
DataSubscriptions DataSubscriptions No
EmptySection EmptySection No
Footer Footer No
Header Header No
Layout ObjectCardCollectionLayout No
MaxItemCount integer No
OnPress ActionOrRule No
Search Search No
Separators Separators No
Target LinkQueryFunctionTarget No
Visible boolean No true
_Name string No
_Type const Yes

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.


Separators

To provide more flexibility with rendering of controls and sections, set the visibility of the separator lines.


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:

"Section.Type.ObjectCardCollection"

Examples

Dynamic ObjectCard Collection

{
  "_Type": "Page",
  "_Name": "ObjectCollectionPage",
  "Caption": "Work Orders",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "Card":{
            "_Type":"ObjectCardCollection.Type.Card",
            "_Name":"Card",
            "Title":"{OrderId}",
            "DetailImage":"/MDKDevApp/Images/workorder.png",
            "Subhead":"{MainWorkCenter}",
            "Footnote":"/MDKDevApp/Rules/GetFootnote.js",
            "StatusText":"{Priority}",
            "Description":"{OrderDescription}",
            "OverflowButtons":[
              {
                "_Type":"ObjectCard.Type.OverflowButton",
                "_Name":"Transfer",
                "Image": "sap-icon://accept",
                "Title":"Transfer",
                "OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction1.action"
              },
              {
                "_Type":"ObjectCard.Type.OverflowButton",
                "_Name":"Submit",
                "Title":"Submit",
                "Image": "sap-icon://home",
                "OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction2.action"
              }
            ],
            "OnPress":"/MDKDevApp/Actions/Toast/ObjectCardOnPress.action",
            "PrimaryAction":{
              "_Type":"ObjectCard.Type.ActionItem",
              "_Name":"PrimaryAction",
              "Title":"Primary",
              "Visible":true,
              "OnPress":"/MDKDevApp/Actions/Toast/PrimaryActionMessage.action"
            },
            "SecondaryAction":{
              "_Type":"ObjectCard.Type.ActionItem",
              "_Name":"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":"ObjectCardCollection.Type.Card",
              "_Name":"Card",
              "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":[
                {
                  "_Type":"ObjectCard.Type.OverflowButton",
                  "_Name":"menuAction1",
                  "Title":"Action 1",
                  "Image":"/MDKDevApp/Images/workorder.png",
                  "Visible":true,
                  "OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction1.action"
                },
                {
                  "_Type":"ObjectCard.Type.OverflowButton",
                  "_Name":"menuAction2",
                  "Title":"Action 2",
                  "Image":"sap-icon://begin",
                  "OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction2.action",
                  "ButtonType":"Destructive" /* iOS Only */
                },
                {
                  "_Type":"ObjectCard.Type.OverflowButton",
                  "_Name":"menuAction3",
                  "Title":"Action 3",
                  "Image": "font-icon-class",
                  "Visible":false,
                  "OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction3.action"
                },
                {
                  "_Type":"ObjectCard.Type.OverflowButton",
                  "_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":{
                "_Type":"ObjectCard.Type.ActionItem",
                "_Name":"PrimaryAction",
                "Title":"Primary",
                "Visible":true,
                "OnPress":"/MDKDevApp/Actions/Toast/PrimaryActionMessage.action"
              },
              "SecondaryAction":{
                "_Type":"ObjectCard.Type.ActionItem",
                "_Name":"SecondaryAction",
                "Title":"Secondary",
                "OnPress":"/MDKDevApp/Actions/Toast/SecondaryActionMessage.action"
              }
            }
          ]
        }
      ]
    }
  ]
}