Skip to content

Card

Card Properties

Property Type Required Default
Footer CardFooter No
Header CardHeader No
Media CardMedia No
OnPress ActionOrRule No
Styles object No
Visible boolean No true
_Name string No
_Type const No

Footer

The card footer, also referred to as card toolbar, is the bottom part of a card that contains important or routine actions that directly impact the card, such as “Approve” or “Submit”. The footer can accommodate a maximum of two action buttons.

The card header is the uppermost part of the card that provides important information about the card and its related content on the detail page.

Media

An optional decorative element that allows you to include an image that matches the card context.

OnPress

Action/Rule to be triggered when the card is pressed. The ClientAPI object to be received in rule function is CardProxy.

Styles

Style to be applied on the card.

  • type: object with following properties.
Property Type Required Default
Card string No

Card

The string value is a style class name for Card.

Visible

Only valid for static section, will be ignored in dynamic sections and List pickers.

  • type: boolean
  • default: true

_Name

  • type: string

_Type

  • type: const

The value of this property must be:

"CardCollection.Type.Card"

Examples

{
  "_Type": "CardCollection.Type.Card",
  "OnPress": "/MDKDevApp/Rules/Description.js",
  "Styles": {
    "Card": "card-background-1"
  },
  "Media": {
    "_Type": "Card.Type.Media",
    "Image": "sap-icon://home",
    "Styles": {
      "Image": "card-media-image-1",
      "Media": "card-background-1"
    }
  },
  "Header": {
    "Title": "Title",
    "DetailImage": "sap-icon://task",
    "DetailImageIsCircular": false,
    "Subtitle": "Subtitle",
    "CounterText": "1 of 3",
    "Styles": {
        "Title": "card-title-1",
        "Subtitle": "card-subtitle-1",
        "CounterText": "card-counter-text-1",
        "DetailImage": "card-media-image-1",
        "Icons": "card-font-icon-1",
        "Header": "card-background-1"
    },
    "ActionButton": {
      "Image": "sap-icon://share",
      "OnPress": "/MDKDevApp/Rules/Description.js",
      "Styles": {
        "Image": "card-font-icon-1"
      },
      "OverflowItems": [
        {
          "_Name": "menuAction1",
          "Title": "Action 1",
          "Image": "sap-icon://badge",
          "Visible": true,
          "OnPress": "/MDKDevApp/Rules/Description.js",
          "Styles": {
            "Image": "card-font-icon-1",
            "Title": "card-label-1"
          }
        }
      ]
    },
    "ExtendedHeaders": [
      {
        "_Type": "ExtendedHeader.Type.Label",
        "ItemSeparator": true,
        "Items": [
          {
            "_Name": "CA_EHL_1a",
            "Text": "Negative",
            "Image": "sap-icon://warning",
            "ImagePosition": "Trailing",
            "Styles": {
              "Text": "card-label-1",
              "Image": "card-font-icon-1"
            }
          }
        ]
      },
      {
        "_Type": "ExtendedHeader.Type.Rating",
        "Items": [
          {
            "_Name": "CA_EHR_1a",
            "Score": 2,
            "Label": "256 Reviews",
            "IconOn": "sap:icon//arrow-up",
            "IconOff": "sap:icon//arrow-down",
            "Styles": {
              "Label": "card-label-1",
              "IconOn": "card-font-icon-1",
              "IconOff": "card-font-icon-2"
            }
          }
        ]
      },
      {
        "_Type": "ExtendedHeader.Type.Tag",
        "Items": [
          {
            "Text": "Tag1",
            "Style": "card-tag-1"
          }
        ]
      }
    ],
    "KPIView": {
      "RightMetric": "999",
      "RightUnit": "K",
      "LeftMetric": "265",
      "LeftUnit": "M",
      "Footnote": "New KPIView"
    }
  },
  "Footer": {
    "_Type": "Card.Type.Footer",
    "Styles": {
      "Footer": "card-background-1"
    },
    "PrimaryAction": {
      "_Type": "CardFooter.Type.Button",
      "_Name": "submitButton4",
      "Title": "Submit",
      "ButtonType": "Primary",
      "Image": "sap-icon://complete",
      "ImagePosition": "Leading",
      "OnPress": "/MDKDevApp/Rules/Description.js",
      "Styles": {
        "Image": "card-font-icon-1",
        "Button": "card-button-1"
      }
    },
    "SecondaryAction": {
      "_Type": "CardFooter.Type.Button",
      "_Name": "shareButton4",
      "Title": "Share",
      "Image": "sap-icon://share",
      "Semantic": "Negative",
      "OnPress": "/MDKDevApp/Rules/Description.js",
      "Styles": {
        "Image": "card-font-icon-1",
        "Button": "card-button-1"
      }
    }
  }
},

Style Classes Definition

.card-background-1 {
  background-color: @mdkYellow1;
}

.card-media-image-1 {
  color: red;
  font-size: 40;
}

.card-font-icon-1 {
  color: red;
  font-size: 20;
}

.card-font-icon-2 {
  color: blue;
  font-size: 12;
}

.card-title-1 {
  font-color: white;
  font-style: title1;
}

.card-subtitle-1 {
  font-color: red;
  font-style: title2;
}

.card-counter-text-1 {
  font-color: yellow;
  font-style: title3;
}

.card-tag-1 {
  background-color: #e6f0ff;
  font-color: blue;
  border-color: red;
}

.card-label-1 {
  font-color: @mdkRed3;
  font-style: body;
}

.card-button-1 {
  font-size: 20;
  font-color: black;
  background-color: @mdkBlue1;
}