UI Integration Cards
UI integration cards are SAPUI5 cards defined declaratively in a manifest.json file that describes the header, content, data source and actions, so a host such as SAP Build Work Zone or My Home can render them without a full app. UI integration cards show concise, actionable content and link to the app behind it.
Quick facts
- Type
- Manifest-defined UI widget (sap.ui.integration.widgets.Card)
- Layer
- Entry point & experience, built as UI content
- Card types
- List, Table, Object, Analytical, Timeline, Calendar; Component; WebPage; Adaptive
- Hosts
- SAP Build Work Zone, My Home, Joule, SAP Mobile Start
- Built with
- SAP Business Application Studio (UI Integration Card template), Card Explorer
- Who works with it
- SAP Fiori and SAP BTP developers, site administrators
- Applies to
- SAP BTP; SAP S/4HANA via My Home (all deployment options)
Layer: Entry point & experienceWhere it sits ▾
How does a UI integration card work?
A UI integration card separates what the card shows from where it is shown:
- The card developer writes a manifest.json with a
sap.cardsection that defines the card type, the header (title, subtitle, icon, status or a numeric KPI), the content, the data request and the actions, such as navigation to an app. - The host, for example an SAP Build Work Zone site, embeds the card, decides its size and position, and resolves connectivity, typically through destinations configured on the host side.
- At runtime the SAPUI5 card control reads the manifest, loads the data and renders a container with a header area and a content area.
Because the definition is declarative, the same card can be reused in several hosts. Alder Manufacturing's purchasing site could show a list card of overdue Bright Freight deliveries that opens the full app. A UI integration card is therefore a portable piece of content, not an app in its own right.
Which types of UI integration cards exist?
| Card type | What it is | Typical use |
|---|---|---|
| Declarative: List, Table, Object, Analytical, Timeline, Calendar | Configured entirely in the manifest | Most business cards: lists, KPIs, charts, one object |
| Component card | Embeds a small SAPUI5 component with its own code | Interaction the declarative types cannot express |
| WebPage card | Shows an external web page | Embedding non-SAPUI5 content |
| Adaptive card | Renders the open Adaptive Card format | Reuse of existing Adaptive Cards; SAP recommends the declarative types instead |
Declarative cards can still run custom logic through JavaScript extensions. SAP's comparison also stresses that these cards differ from the freestyle sap.f.Card control and from overview page cards, which belong to SAP Fiori elements. Choosing a declarative UI integration card first keeps a card portable across hosts and editions.
Where can UI integration cards be used?
- SAP Build Work Zone: both editions run cards on site pages. Declarative cards are fully supported in standard and advanced edition; some component card features work only in the advanced edition. In the standard edition, a card reaches users through a content package.
- My Home in SAP S/4HANA: users can create insights cards from list report tables and analytical list page charts in SAP Fiori elements apps, once an administrator has enabled My Home; SAP documents cards created from a list report table as integration cards. This applies to SAP S/4HANA Cloud Public Edition and to SAP S/4HANA, where My Home is available from release 2023 FPS01.
- Joule and mobile: Joule can return card manifests in responses, and SAP lists SAP Mobile Start among the card consumers. The Joule Work mobile app filters out component cards.
- Other SAP solutions: for example, SAP SuccessFactors supports custom UI integration cards in some profile areas.
Where a UI integration card can appear depends on the host, its edition and the card type, not on the card alone.
Why does a UI integration card not render?
- Component card features in the standard edition. SAP documents that a card using a feature reserved for SAP Build Work Zone, advanced edition appears in the content gallery and page editor but fails at runtime in the standard edition. Check the supported-features table for the target edition.
- Mobile filtering. Component cards are not shown in the Joule Work mobile app. Use a declarative card if mobile matters.
- Missing destination. Data requests resolve through the host. A destination missing in the subaccount leaves the card empty or in error.
- Not in a content package. In the standard edition, SAP requires a deployed card to be added to a content package before it can be used on a site.
- Editor limits. SAP notes that the Work Zone UI card editor supports card features only up to a specific SAPUI5 version; check the Work Zone documentation for the current one.
Most UI integration card failures are host configuration issues rather than errors in the card manifest.
UI integration card vs. overview page card vs. tile: what is the difference?
| UI integration card | Overview page card | Tile | |
|---|---|---|---|
| What it is | Manifest-defined, host-independent card | Card inside an SAP Fiori elements overview page | Launchpad entry that starts an app |
| Defined by | Card manifest.json (sap.card) | Overview page app descriptor and OData annotations | Technical catalog, with a target mapping |
| Where it appears | SAP Build Work Zone, My Home, Joule and other hosts | Only in its overview page app | SAP Fiori Launchpad pages and Work Zone sites |
| Content | Lists, tables, charts, object details, actions | Lists, tables and charts from OData services | Title, icon and optionally a number |
A UI integration card is portable content for many hosts, an overview page card lives inside one SAP Fiori elements app, and a tile only starts an app.
FAQ
Are UI integration cards the same as overview page cards?
No. SAP states explicitly that UI integration cards are not related to the cards of the SAP Fiori elements overview page. Overview page cards are configured inside one overview page app, while UI integration cards are defined by their own manifest and can be embedded in different hosts.
Do UI integration cards need SAP Build Work Zone?
No. SAP Build Work Zone is the most common host, but UI integration cards also appear in My Home in SAP S/4HANA, in Joule responses, in SAP Mobile Start and in other SAP solutions. Any SAPUI5 app can embed a card as well.
How do you create a UI integration card?
In SAP Business Application Studio, a dev space with the Development Tools for SAP Build Work Zone extension offers a UI Integration Card project template. The developer edits the manifest, previews it, and deploys the card to SAP Build Work Zone or downloads it as a ZIP file.
Should I use a declarative or a component card?
Start with a declarative card. Declarative types cover lists, tables, objects and charts, run in both SAP Build Work Zone editions and on mobile, and allow JavaScript extensions. Choose a component card only for interaction the declarative types cannot express, and check edition support first.
Sources
- SAP Help Portal: Cards — integration cards vs. freestyle cards (SAPUI5)
- SAP Help Portal: Developing UI Integration Cards (SAP Build Work Zone, standard edition)
- SAP Help Portal: Supported Declarative and Component Card Features (SAP Build Work Zone)
- SAP Help Portal: Creating Cards for the Insights Cards Section of My Home (SAP Fiori elements for OData V4)
- SAPUI5 SDK: Card Explorer (UI integration cards)
- Applies to
- SAP S/4HANA on-premise · SAP S/4HANA Cloud Private Edition · SAP S/4HANA Cloud Public Edition · SAP BTP
- Last reviewed