UI Integration with Cards

The new way for developers, key users, and end users to create and share business content in an easy, declarative, and consistent way.
Consistent

Declarative

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

Consistent

Consistent

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

Consistent

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...

1

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"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
2

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>

Done

Launch your page and see the result.

Get the insights

Learn. Explore. Design. Integrate.

Get involved

Explore the source code and samples. Contribute. Report issues.

Framework Compatibility

UI Integration Cards are framework-agnostic and can run with arbitrary HTML framework or page

Vue Logo UI5 Logo Angular Logo React Logo Vue Logo
Browser Compatibility

UI Integration Cards are supported on all modern browsers out of the box

Chrome Logo Firefox Logo Safari Logo Opera Logo