Preview

Configure the Editor's Preview

An additional section in the configuration allows to influence the preview shown in the Configuration Editor

sap.ui.define(["sap/ui/integration/Designtime"], function (
	Designtime
) {
	"use strict";
	return function () {
		return new Designtime({
			"form": {
				"items": {

				}
			},
			"preview": {

			}
		});
	};
});
Field Type items
Property Type Required Default Description Since
modes string No "Abstract" Possible values are
"None" : No preview is shown.
"Abstract" : An abstract preview is shown with placeholders for the possible result.
"Live" : A small scaled preview of the real Card is shown.
"AbstractLive" : The user will be able to toggle between abstract and live preview, starting with the abstract preview.
"LiveAbstract" : The user will be able to toggle between live and abstract preview, starting with the live preview.
modes : "AbstractLive"
1.83
src string No "" Relative path to an image (png, gif, jpeg) within the card bundle. Is image will be used as the abstract view and can replace the card internal preview. If omitted the abstract preview is created based on the card type and settings in the card manifest. The path to the image is relative to the baseUrl of the card. To support theming options on the customer side, the image should use transparency settings and gray shades explained here.
src : "dt/preview.png"
1.83

Preview of the Card in Configuration Editor

Preview Modes

Create a Themeable Preview for a Card

Preview images for card should present an abstract preview to give the user an impression of look of the final card. As a card developer, you should create the picture for such abstract in case you want to override the default representation that is created based on the card type you chose. To avoid additional overhead the preview image should be created in a themeable fashion. Working with gray shades and transparency this is easily possible. The image should work with these sizes and colors.

After creation of the image save it with the card sources, ideally in the configuration folder, and refer to the image in the preview section's src property.

Preview Position

When creating the Card Editor, we can set the preview position via parameter "previewPosition".



Try it Out