Getting Started

Creating a card is as simple as creating a new manifest.json file. The manifest holds all configurations necessary to render a card.

Step 1: Add the manifest skeleton

Add sap.app namespace, set the type to "card" and set an id. Add the sap.card namespace where all card configurations will be added. Set the type of the card to "List". 

{
	"sap.app": {
		"id": "my.new.card",
		"type": "card",
		"applicationVersion": {
		  "version": "1.0.0"
		}
	},
	"sap.card": {
		"type": "List"
	}
}

Step 2: Add a header

Add a header property with title, subTitle, and icon. 

{
	"sap.app": {
		"id": "my.new.card",
		"type": "card",
		"applicationVersion": {
			"version": "1.0.0"
		}
	},
	"sap.card": {
		"type": "List",
		"header": {
			"title": "My Sales Orders",
			"subTitle": "New sales orders",
			"icon": {
				"src": "sap-icon://sales-order"
			}
		}
	}
}

Step 3: Add a navigation action

Add an actions property with an action of type "Navigation". Set a URL to navigate to, when the header is clicked. 

{
	"sap.app": {
		"id": "my.new.card",
		"type": "card",
		"applicationVersion": {
		  "version": "1.0.0"
		}
	},
	"sap.card": {
		"type": "List",
		"header": {
			"title": "My Sales Orders",
			"subTitle": "New sales orders",
			"icon": {
				"src": "sap-icon://sales-order"
			},
			"actions": [
				{
					"type": "Navigation",
					"url": "http://www.sap.com"
				}
			]
		}
	}
}

Step 4: Add a content

Add a content property to the card. Inside it add a data section with static JSON with an array of 3 sales orders. After that add an item template that will be used for all items in the data section. To bind the item title and description you can use UI5's binding syntax. The binding also allows expression binding. 

{
	"sap.app": {
		"id": "my.new.card",
		"type": "card",
		"applicationVersion": {
		  "version": "1.0.0"
		}
	},
	"sap.card": {
		"type": "List",
		"header": {
			"title": "My Sales Orders",
			"subTitle": "New sales orders",
			"icon": {
				"src": "sap-icon://sales-order"
			},
			"actions": [
				{
					"type": "Navigation",
					"url": "http://www.sap.com"
				}
			]
		},
		"content": {
			"data": {
				"json": [
					{
						"Name": "Sales order 1",
						"Description": "The description of sales order 1"
					},
					{
						"Name": "Sales order 2",
						"Description": "The description of sales order 2"
					},
					{
						"Name": "Sales order 3",
						"Description": "The description of sales order 3"
					}
				]
			},
			"item": {
				"title": {
					"value": "{Name}"
				},
				"description": {
					"value": "{Description}"
				}
			}
		}
	}
}

Step 5: Integrate the card in a host environment

The following are possible ways to integrate a card. For more information about integrating read the Integrate section.

Use the card in an HTML Page

Create a UI Integration Card inside an HTML Page that points to the created manifest:

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

Use the card in an XML View

Create a UI Integration Card inside an XML View that points to the created manifest:

<mvc:View xmlns:ui-integration="sap.ui.integration.widgets">
	<ui-integration:Card manifest="./manifest.json" width="400px" height="auto"/>
</mvc:View>