Controlling Fields and Layout
The Card editor comes with many default visulaizations 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 designtime file.
Purpose | Visualization | Example Code |
---|---|---|
Simple String field | Loading... |
{ "manifestpath": "/sap.card...param/value", "defaultValue": "StringValue", "label": "Fixed Label Text", "type": "string" } |
Simple Boolean field | Loading... |
{ "manifestpath": "/sap.card...param/value", "defaultValue": true, "label": "Fixed Label Text", "type": "boolean" } |
Simple Integer field | Loading... |
{ "manifestpath": "/sap.card...param/value", "defaultValue": 1, "label": "Fixed Label Text", "type": "integer" } |
Simple Date field | Loading... |
{ "manifestpath": "/sap.card...param/value", "defaultValue": "", "label": "Fixed Label Text", "type": "date" } |
Simple Date Time field | Loading... |
{ "manifestpath": "/sap.card...param/value", "defaultValue": "2020-05-31T19:05:30", "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", "defaultValue": "", "label": "Field 1", "type": "string", "cols":1 }, "param2": { "manifestpath": "/sap.card...param/value2", "defaultValue": "", "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", "defaultValue": "", "label": "Field", "type": "string" } } |
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", "defaultValue": false, "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 integer 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", "defaultValue": false, "type": "boolean", "visualization": { "type": "sap/m/Switch", "settings": { "state": "{currentSettings>value}", "customTextOn": "Yes", "customTextOff": "No" } } } } } }); }; }); |