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"
							}
						}
					}
				}
			}
		});
	};
});