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
- The extension should be defined in a UI5 Module and extend the sap.ui.integration.Extension class.
- For optimal loading performance it is recommended to avoid any dependencies to non-ui5 modules.
Using a Shared Extension
Shared extensions allow one extension to be reused by multiple cards. Prerequisite: The extension must be part of a UI5 library and this library has to be registered by the host developers. This library may also include other modules which are used in the extension if needed. To use an extension from a shared library first define this library as dependency of the card:
"dependencies": { "libs": { "my.lib.cards": {} } }Then you can refer to the extension from this library with the following syntax:
"sap.card"/"extension": "module:my/lib/cards/CommonExtension"Try it Out
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