Create a Configuration Module
A new configuration module will be used to configure and implement functionality used in the Configuration Editor. The Configuration Editor is launched by the host environment for the different personas and uses your configuration module to create the user interface.
Add Destinations for Data Sources in the Card Manifest
Administrators using your card, should be able to influence the runtime URL for data sources. This can
be achieved by adding a destination to the configuration section of the manifest. This destination can be
connected by the Administrator using the Configuration
Editor of the card.
Add a label that is translatable to the setting for better usability.
"sap.card": { "configuration": { "destinations": { "destinationName": { "name": "Northwind", "defaultUrl": "https://testurl.test", "label": "{{TRANSLATABLE_LABEL}}" } } } }
The label property with other ones can be set as destination parameters in Configuration Module too. Example.
"destinationName.destination": { "type": "destination", "label": "label of Northwind defined in dt", "editable": false, "visible": true, "sorter": [{ "path": "name", "descending": true }], "filter": { "path": "name", "operator": "Contains", "value1": "t" } }
Create a Configuration Module and Register it in the Card Manifest
Advanced design-time configuration and implementation should happen outside the manifest of the card.
With that, design-time code will not harm or influence the runtime or the card instance for the end-user.
Create a folder "dt" besides the manifest.json to store all configuration related artifacts. Create
a designtime.js file in this new folder.
Add the following initial module setup into the js file.
sap.ui.define(["sap/ui/integration/Designtime"], function ( Designtime ) { "use strict"; return function () { return new Designtime({ "form": { "items": { // here goes the configuration } }, "preview": { "modes": "Abstract" } }); }; });
Similar to a Card Extension, the configuration module is registered in the manifest. As soon as the Configuration Editor is launched.
"sap.card": { "configuration": { "editor": "dt/configuration" } }
The Configuration Editor configuration that is returned in the object
form.items
of your configuration file will contain the field definitions
that should be shown in the editor. Those are described in detail in the
API section.