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. The filename of this ZIP has the following format: [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, other resources might also be needed for runtime or configuration 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
• Artifacts that define the Configuration Editor 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. If both manifest URL and base URL are defined - the base URL will be used for 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.

Component Cards

For production environments the resources of the card should be optimized. For Component cards all modules should be packed into one single file called Component-preload.js. For instructions how to build it read Component Preload.

Example

Here is an example folder structure of a Card Bundle that includes a manifest.json, i18n translation files, an icon and Configuration Editor.
Download the Card Bundle: news.card.zip

-  manifest.json
-  images
   -  news.png
-  i18n
   -  messagebundle.properties
   -  messagebundle_en.properties
   -  messagebundle_de.properties
-  dt
   -  Configuration.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": {
		"configuration": {
			"editor": "./dt/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/value}",
					}
				},
				"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