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¶

type: ObjectCard

Cards¶

type: array

DataPaging¶

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

type: DataPaging

DataSubscriptions¶

Array of data change events to subscribe to.

type: DataSubscriptions

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.

type: EmptySection

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

type: Footer

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

type: Header

Layout¶

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

type: Layout

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.

type: ActionOrRule
Formatter and Binding are not supported

Search¶

Defines if search is to be enabled in the ObjectCardCollection.

type: Search

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.

type: LinkQueryFunctionTarget

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

ObjectCardCollection¶