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