Card Bundle Overview
What is a Card Bundle?
A Card Bundle is the zipped version of a folder that contains all resources that the card needs for
rendering and configuration.
This zip file should have the extension [CARDNAME].card.zip
What is contained in the Card Bundle?
The card's manifest.json contains the most important information to configure a card. Nevertheless there might be the necessity to add other resources needed for design-time or runtime purposes. Such files are:
- Image resources that are used instead of icons from an icon font
- Translations of texts for the card details
- Other static resources, for example static JSON data
- Design-time artifacts that define the design-time behavior of the card
- UI5 Component files in case of a Component Card
- JavaScript logic held in Extension file
How are paths resolved?
When the manifest
property of the card is set as a URL to the manifest.json
file all paths are
resolved relatively to that file and will be loaded from there. If the manifest
property is set as an object
the baseUrl property can be used as a
starting point when resolving paths.
Conventions
A Card Bundle should have the name: [CARDNAME].card.zip
Translation files and images should be stored in a separate folders for convenience.
Example
Here is an example folder structure of a Card Bundle which includes a manifest.json, i18n translation
files, an icon and designtime configuration.
Download the Card Bundle: news.card.zip
- manifest.json - images - news.png - i18n - messagebundle.properties - messagebundle_en.properties - messagebundle_de.properties - designtime - Card.designtime.js
The manifest.json refers these files
{ "_version": "1.15.0", "sap.app": { "id": "cardexplorer.sample.news", "type": "card", "i18n": "i18n/messagebundle.properties" "title": "{{mainTitle}}", "subTitle": "{{mainDescription}}", "applicationVersion": { "version": "1.0.0" } }, "sap.ui": { "technology": "UI5", "icons": { "icon": "images/news.png" } }, "sap.card": { "designtime" : "designtime/Card.designtime", "configuration": { "parameters": { "city": { "value": "Berlin" } } }, "type": "List", "header": { "title": "{{cardTitle}} {{parameters.city}}", "subTitle": "{{cardSubTitle}}", "icon": { "src": "sap-icon://customer-briefing" }, "actions": [ { "type": "Navigation", "parameters": { "url": "https://services.odata.org/V2/Northwind/Northwind.svc" } } ] }, "content": { "data": { "request": { "url": "https://services.odata.org/V2/Northwind/Northwind.svc/Customer_and_Suppliers_by_Cities", "parameters": { "$filter": "{{parameters.city}}", } }, "path": "/articles" }, "item": { "title": "{CompanyName}", "description": "{ContactName}", }, "maxItems": 5 } } }
NOTE: The paths to the i18n translation files and to the header icon are relative to the manifest.json