Controlling Fields and Layout
The Configuration Editor comes with many default visualizations for fields for basic type. The below examples can help to find the matching field configurations based on your needs.
Examples for Field Configuration
The following examples are part of the items of the form map within the design-time file.
Purpose | Visualization | Example Code |
---|---|---|
Simple String field | Loading... |
{ "manifestpath": "/sap.card...param/value", "label": "Fixed Label Text", "type": "string" } |
Simple Boolean field | Loading... |
{ "manifestpath": "/sap.card...param/value", "label": "Fixed Label Text", "type": "boolean" } |
Simple Integer field | Loading... |
{ "manifestpath": "/sap.card...param/value", "label": "Fixed Label Text", "type": "integer" } |
Simple Date field | Loading... |
{ "param1": { "manifestpath": "/sap.card/configuration/parameters/param1/value", "label": "Fixed Label Text", "type": "date" } } |
Simple Date Time field | Loading... |
{ "param1": { "manifestpath": "/sap.card/configuration/parameters/param1/value", "label": "Fixed Label Text", "type": "datetime" } } |
Two columns with fields. If fields semantically belong together, put them next to each other |
Loading... |
{ "param1": { "manifestpath": "/sap.card...param/value1", "label": "Field 1", "type": "string", "cols":1 }, "param2": { "manifestpath": "/sap.card...param/value2", "label": "Field 2", "type": "string", "cols": 1 } } |
Group header before a field | Loading... |
{ "group": { "label": "Group Header", "type": "group" }, "param1": { "manifestpath": "/sap.card...param/value1", "label": "Field", "type": "string" } } |
Simple Separator field | Loading... |
{ "param1": { "type": "separator" }, "param2": { "manifestpath": "/sap.card...param/value2", "label": "Field 2", "type": "string", "cols": 1 } } |
Showing a Slider for an integer field Please define "sap/m/Slider" as type in your designtime.js file. |
Loading... |
sap.ui.define(["sap/ui/integration/Designtime"], function ( Designtime ) { "use strict"; return function () { return new Designtime({ "form": { "items": { "integer": { "manifestpath": "/sap.card/.../integer/value", "type": "integer", "visualization": { "type": "sap/m/Slider", "settings": { "value: "{currentSettings>value}", "min": 0, "max": 10, "width": "100%", "showAdvancedTooltip": true, "showHandleTooltip": false, "inputsAsTooltips": true } } } } } }); }; }); |
Showing a Switch for an boolean field. Please define "sap/m/Switch" as type in your designtime.js file. |
Loading... |
sap.ui.define(["sap/ui/integration/Designtime"], function ( Designtime ) { "use strict"; return function () { return new Designtime({ "form": { "items": { "boolean": { "manifestpath": "/sap.card/.../boolean/value", "type": "boolean", "visualization": { "type": "sap/m/Switch", "settings": { "state": "{currentSettings>value}", "customTextOn": "Yes", "customTextOff": "No" } } } } } }); }; }); |
Showing the fields with layout property. | Loading... |
{ "param1": { "manifestpath": "/sap.card/configuration/parameters/param1/value", "label": "In one line", "type": "string", "layout": { "alignment": { "field": "end" } } }, "param2": { "manifestpath": "/sap.card/configuration/parameters/param2/value", "label": "Label alignment: end", "type": "string", "layout": { "alignment": { "label": "end" } } }, "param3": { "manifestpath": "/sap.card/configuration/parameters/param3/value", "label": "Field first", "type": "string", "layout": { "position": "field-label" } }, "param4": { "manifestpath": "/sap.card/configuration/parameters/param4/value", "label": "Label width: 40%", "type": "string", "layout": { "label-width": "40%" } }, "param5": { "manifestpath": "/sap.card/configuration/parameters/param5/value", "label": "In one column", "type": "string", "layout": { "label-width": "50%" }, "cols": 1 }, "booleanLabel1": { "manifestpath": "/sap.card/configuration/parameters/booleanLabel1/value", "label": "boolean in one line", "type": "boolean", "layout": { "label-width": "92.4%", "position": "field-label" } }, "booleanLabel2": { "manifestpath": "/sap.card/configuration/parameters/booleanLabel2/value", "label": "boolean in one line and one column", "type": "boolean", "layout": { "label-width": "83%", "position": "field-label" }, "cols": 1 } } |