Card Extension

Overview

Cards provide a rich set of capabilities out of the box. The Extension JavaScript module provides means for the card developers to define custom logic where additional functionality is needed. The module needs to be part of the card bundle and allows for:

Functionality Description Responsibility of
Custom logic for fetching data In case you need specific handling for the data retrieval, when direct request to a data service endpoint is not enough, you can provide a custom function that will collect and provide the data to the card. Extension, Manifest
Custom formatters Define custom formatters and then use them in the manifest the same way as the already predefined formatters which the card provides. Extension, Manifest
Custom actions In the extension you can define custom actions, which will appear in the header of the card. Extension

Manifest Properties

Property Type Required Default Description Schema Version Since
extension string No The path to the extension module. It is resolved relatively to the card. 1.23 1.79

Extension API

In the Extension JavaScript module you can use getCard() method, which provides an interface to the card API. For example you can resolve destinations or get access to the card parameters. For detailed information about all the available methods, read the sap.ui.integration.Extension API.

Extension Requirements

Note: The relation between the extension and the card is one-to-one, which means that one card can have only one extension.

Examples

Manifest

{
	"sap.app": {
		"id": "card.explorer.cardWithExtension",
		"type": "card",
		"applicationVersion": {
			"version": "1.0.0"
		}
	},
	"sap.card": {
		"extension": "./SampleExtension",
		"data": {
			"extension": {
				"method": "myGetDataMethod"
			}
		}
		"header": {
			...
		},
		"content": {
			...
		}
	}
}

Extension

sap.ui.define(["sap/ui/integration/Extension"], function (Extension) {

	var SampleExtension = Extension.extend("card.explorer.cardWithExtension.SampleExtension");

	SampleExtension.prototype.myGetDataMethod = function () {
		var oData1 = { user: "John" }; // this data can be fetched from data service
		var oData2 = { user: "Peter" }; // this data can be fetched from another data service

		// in the end data from both data services is combined into a single array
		return Promise.resolve([oData1, oData2]);
	};

	return SampleExtension;
});
Try it Out