Create a Design-time module
A new design-time module will be used to configure and implement functionality used in the Card Editor. The Card Editor is launched by the host environment for the different personas and uses your design-time 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 adding a destination to the configuration section of the manifest. This destination can be
connected by the administrator in the design-time
editor of the Card.
Add a label that is translatable to the setting for better usability.
"sap.card": { "configuration": { "destinations": { "destinationName": { "defaultUrl": "https://testurl.test", "label": "{{TRANSLATABLE_LABEL}}" } } } }
Create a Design-time module and register it in the Cards 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 designt-time related artifacts. Create
a designtime.js file in this new folder.
Add the following inital 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 design-time module is registered in the manifest. As soon as the Card Editor is launched.
"sap.card": { "designtime": "dt/designtime" }
The designtime configuration that is returned in the
Designtime.prototype.createmethod of your designtime file will contain the field definitions that should be shown in the editor. Those are described in detail in the API section.