UI Integration with Cards

Declarative

Based on JSON schema. Design-time and runtime tooling support. Portable to any device and host environment. Rich feature set.

Consistent

SAP Fiori design language and customer theming. Accessible. All enterprise product standards included.

Easy To Consume

UI5, Custom Element and Web Component support. Included JSON-based data consumption. Configurable styling. Speech and bot support.

Easy card integration in just two steps...

Define a cards manifest.json file

With the manifest.json you define the cards header and content. You can use static data to be displayed, or define a request object for your data endpoint. Translations for static texts on the card, such as the title and subtitle, can be provided in separate files.

{
  "sap.card": {
    "type": "Object",
    "header": {
      "icon": {
        "src": "../images/Sabine_Mayer.png"
      },
      "title": "Sabine Mayer",
      "subTitle": "Executive Assistant"
    },
    "content": {
      "groups": [
        {
          "title": "Contact Details",
          "items": [
            {
              "label": "Mobile",
              "value": "+001 6101 34869-0",
              "actions": [
                {
                  "type": "Navigation",
                  "parameters": {
                    "url": "tel:+001 6101 34869-0"
                  }
                }
              ]
            },
            {
              "label": "Phone",
              "value": "+001 4231 5424 0231",
              "actions": [
                {
                  "type": "Navigation",
                  "parameters": {
                    "url": "tel:+001 4231 5424 0231"
                  }
                }
              ]
            },
            {
              "label": "Email",
              "value": "sabine@cardadventure.com",
              "actions": [
                {
                  "type": "Navigation",
                  "parameters": {
                    "url": "mailto:sabine@cardadventure.com"
                  }
                }
              ]
            }
          ]
        },
        {
          "title": "Company Details",
          "items": [
            {
              "label": "Direct Manager",
              "value": "Michael Adams",
              "icon": {
                "src": "../images/Michael_Adams.png"
              }
            },
            {
              "label": "Phone",
              "value": "+001 4242 4242 0873",
              "actions": [
                {
                  "type": "Navigation",
                  "parameters": {
                    "url": "tel:+001 4242 4242 0873"
                  }
                }
              ]
            },
            {
              "label": "Email",
              "value": "madams@cardadventure.com",
              "actions": [
                {
                  "type": "Navigation",
                  "parameters": {
                    "url": "mailto:madams@cardadventure.com"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

Consume the card in your site

To enable any html page to consume cards, just use
<ui-integration-card> tag which will be served from the provided minimalistic sap-ui-integration.js bundle.

<html>
  <head>
    <script
      id="sap-ui-bootstrap"
      src="https://ui5.sap.com/resources/sap-ui-integration.js"
      data-sap-ui-compatVersion="edge">
    </script>
  </head>
  <body>
    ...
    <ui-integration-card
       manifest="../manifest.json">
    </ui-integration-card>
  </body>
</html>