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": "String",
	"type": "string"
}
String field with translation button Loading...
{
	"manifestpath": "/sap.card/configuration/parameters/string/value",
	"label": "String",
	"type": "string",
	"translatable": true
}
Simple Boolean field Loading...
{
	"manifestpath": "/sap.card...param/value",
	"label": "Boolean",
	"type": "boolean"
}
Simple Integer field Loading...
{
	"manifestpath": "/sap.card...param/value",
	"label": "Integer",
	"type": "integer"
}
Simple Date field Loading...
{
	"param1": {
		"manifestpath": "/sap.card/configuration/parameters/param1/value",
		"label": "Date",
		"type": "date"
	}
}
Simple Date Time field Loading...
{
	"param1": {
		"manifestpath": "/sap.card/configuration/parameters/param1/value",
		"label": "Datetime",
		"type": "datetime"
	}
}
Simple String Array field (MultiComboBox) Loading...
{
	"param1": {
		"manifestpath": "/sap.card/configuration/parameters/param1/value",
		"label": "String Array (MultiComboBox)",
		"type": "string[]",
		"values": {
			"data": {
				"json": [
					{"text": "text1", "key": "key1", "additionalText": "addtext1"},
					{"text": "text2", "key": "key2", "additionalText": "addtext2"},
					{"text": "text3", "key": "key3", "additionalText": "addtext3"}
				],
				"path": "/"
			},
			"item": {
				"text": "{text}",
				"key": "{key}",
				"additionalText": "{additionalText}"
			}
		}
	}
}
Simple String Array field (MultiInput) Loading...
{
	"param1": {
		"manifestpath": "/sap.card/configuration/parameters/param1/value",
		"label": "String Array (MultiInput)",
		"type": "string[]",
		"values": {
			"data": {
				"request": {
					"url": "https://services.odata.org/V4/Northwind/Northwind.svc/Customers",
					"parameters": {
						"$select": "CustomerID, CompanyName, Country, City, Address",
						"$filter": "startswith(CompanyName,'{currentSettings>suggestValue}')"
					}
				},
				"path": "/value"
			},
			"item": {
				"text": "{CompanyName}",
				"key": "{CustomerID}",
				"additionalText": "{Country}"
			}
		},
		"visualization": {
			"type": "MultiInput"
		}
	}
}
Simple Object field (TextArea) Loading...
{
	"manifestpath": "/sap.card/configuration/parameters/object/value",
	"type": "object",
	"label": "Object Field"
}
Simple Object field (SimpleForm) Loading...
{
	"manifestpath": "/sap.card/configuration/parameters/object/value",
	"type": "object",
	"label": "Object properties defined",
		"properties": {
			"key": {
				"label": "Key"
			},
			"icon": {
				"label": "Icon"
			},
			"text": {
				"label": "Text",
				"translatable": true
			},
			"url": {
				"label": "URL"
			},
			"editable": {
				"label": "Editable",
				"type": "boolean"
			},
			"int": {
				"label": "Integer",
				"type": "int",
				"formatter": {
					"minIntegerDigits": 1,
					"maxIntegerDigits": 6,
					"emptyString": ""
				}
			},
			"number": {
				"label": "Number",
				"type": "number",
				"formatter": {
					"decimals": 1,
					"style":"short"
				}
			}
		}
}
Simple Object field with value from Json list (Table) Visualization for Object Field with value from Json list
{
	"manifestpath": "/sap.card/configuration/parameters/object/value",
	"type": "object",
	"label": "Object properties defined: value from Json list",
	"values": {
		"data": {
			"json": {
				"values": [
					{ "text": "text01", "key": "key01", "url": "https://sap.com/06", "icon": "sap-icon://accept", "iconcolor": "#031E48", "int": 1 },
					{ "text": "text02", "key": "key02", "url": "http://sap.com/05", "icon": "sap-icon://cart", "iconcolor": "#64E4CE", "int": 2 },
					{ "text": "text03", "key": "key03", "url": "https://sap.com/04", "icon": "sap-icon://zoom-in", "iconcolor": "#E69A17", "int": 3 },
					{ "text": "text04", "key": "key04", "url": "https://sap.com/03", "icon": "sap-icon://accept", "iconcolor": "#1C4C98", "int": 4 },
					{ "text": "text05", "key": "key05", "url": "http://sap.com/02", "icon": "sap-icon://cart", "iconcolor": "#8875E7", "int": 5 },
					{ "text": "text06", "key": "key06", "url": "https://sap.com/01", "icon": "sap-icon://zoom-in", "iconcolor": "#E69A17", "int": 6 },
					{ "text": "text07", "key": "key07", "url": "http://sap.com/02", "icon": "sap-icon://cart", "iconcolor": "#1C4C98", "int": 7 },
					{ "text": "text08", "key": "key08", "url": "https://sap.com/01", "icon": "sap-icon://zoom-in", "iconcolor": "#8875E7", "int": 8 }
				]
			},
			"path": "/values"
		},
		"allowAdd": true
	},
	"properties": {
		"key": {
			"label": "Key",
			"column": {
				"filterProperty": "key"
			}
		},
		"icon": {
			"label": "Icon",
			"defaultValue": "sap-icon://add",
			"column": {
				"hAlign": "Center",
				"width": "4rem"
			},
			"cell": {
				"type": "Icon",
				"color": "{iconcolor}"
			}
		},
		"text": {
			"label": "Text",
			"defaultValue": "text",
			"translatable": true,
			"column": {
				"hAlign": "Center",
				"width": "6rem",
				"filterProperty": "text",
				"defaultFilterOperator": "Contains"   // values are in enum sap.ui.model.FilterOperator
			}
		},
		"url": {
			"label": "URL",
			"defaultValue": "http://",
			"column": {
				"hAlign": "Center",
				"width": "10rem",
				"label": "URL Link",
				"filterProperty": "url",
				"defaultFilterOperator": "StartsWith"
			},
			"cell": {
				"type": "Link",
				"href": "{url}"
			}
		},
		"editable": {
			"label": "Editable",
			"defaultValue": false,
			"type": "boolean"
		},
		"int": {
			"label": "Integer",
			"defaultValue": 0,
			"type": "int",
			"formatter": {
				"minIntegerDigits": 1,
				"maxIntegerDigits": 6,
				"emptyString": ""
			},
			"column": {
				"hAlign": "Center",
				"width": "5rem",
				"label": "Integer",
				"filterProperty": "int",
				"defaultFilterOperator": "EQ",
				"filterType": "sap.ui.model.type.Integer"   //sap.ui.model.type
			}
		},
		"number": {
			"label": "Number",
			"defaultValue": 0.5,
			"type": "number",
			"formatter": {
				"decimals": 1,
				"style":"short"
			}
		}
	},
	"addButtonText": "Add a new step"
}
Simple Object field with value from requested file (Table) Visualization for Object Field with value from requested file
{
	"manifestpath": "/sap.card/configuration/parameters/objectWithPropertiesDefinedAndValueFromRequestedFile/value",
	"type": "object",
	"label": "Object properties defined: value from requested file",
	"values": {
		"data": {
			"request": {
				"url": "./objectWithRequestList.json"
			},
			"path": "/values"
		},
		"allowAdd": true
	},
	"properties": {
		"key": {
			"label": "Key",
			"column": {
				"filterProperty": "key"
			}
		},
		"icon": {
			"label": "Icon",
			"defaultValue": "sap-icon://add",
			"column": {
				"hAlign": "Center",
				"width": "4rem"
			},
			"cell": {
				"type": "Icon",
				"color": "{iconcolor}"
			}
		},
		"text": {
			"label": "Text",
			"defaultValue": "text",
			"column": {
				"hAlign": "Center",
				"width": "6rem",
				"filterProperty": "text",
				"defaultFilterOperator": "Contains"   // values are in enum sap.ui.model.FilterOperator
			}
		},
		"additionalText": {
			"label": "Additional Text",
			"column": {
				"hAlign": "Center",
				"width": "10rem",
				"filterProperty": "text",
				"defaultFilterOperator": "Contains"   // values are in enum sap.ui.model.FilterOperator
			}
		}
	}
}
Simple Object field with value from OData request (Table) Visualization for Object Field with value from oData Request
{
	"manifestpath": "/sap.card/configuration/parameters/objectWithPropertiesDefinedAndValueFromODataRequest/value",
	"type": "object",
	"label": "Object properties defined: value from OData request",
	"values": {
		"data": {
			"request": {
				"url": "{{destinations.northwind}}/Customers",
				"parameters": {
					"$select": "CustomerID, CompanyName, Country, City, Address"
				}
			},
			"path": "/value"
		},
		"allowAdd": true
	},
	"properties": {
		"CustomerID": {
			"label": "Customer ID",
			"column": {
				"filterProperty": "CustomerID",
				"defaultFilterOperator": "Contains"   // values are in enum sap.ui.model.FilterOperator
			}
		},
		"CompanyName": {
			"label": "Company Name",
			"column": {
				"width": "10rem",
				"filterProperty": "CompanyName",
				"defaultFilterOperator": "Contains"   // values are in enum sap.ui.model.FilterOperator
			}
		},
		"Country": {
			"column": {
				"hAlign": "Center",
				"width": "6rem",
				"filterProperty": "Country",
				"defaultFilterOperator": "Contains"   // values are in enum sap.ui.model.FilterOperator
			}
		},
		"City": {
			"column": {
				"hAlign": "Center",
				"width": "6rem",
				"filterProperty": "City",
				"defaultFilterOperator": "Contains"   // values are in enum sap.ui.model.FilterOperator
			}
		},
		"Address": {
			"column": {
				"width": "10rem",
				"filterProperty": "Address",
				"defaultFilterOperator": "Contains"   // values are in enum sap.ui.model.FilterOperator
			}
		}
	}
}
Simple Object Array field (TextArea) Loading...
{
	"manifestpath": "/sap.card/configuration/parameters/objects/value",
	"type": "object[]",
	"label": "Object Array Field"
}
Simple Object Array field (Table) Visualization for Object Array Field with object properties defined only
{
	"manifestpath": "/sap.card/configuration/parameters/objects/value",
	"type": "object[]",
	"label": "Object properties defined",
	"properties": {
		"key": {
			"label": "Key",
			"column": {
				"filterProperty": "key"
			}
		},
		"icon": {
			"label": "Icon",
			"defaultValue": "sap-icon://add",
			"column": {
				"hAlign": "Center",
				"width": "4rem"
			},
			"cell": {
				"type": "Icon",
				"color": "{iconcolor}"
			}
		},
		"text": {
			"label": "Text",
			"defaultValue": "text",
			"translatable": true,
			"column": {
				"hAlign": "Center",
				"width": "6rem",
				"filterProperty": "text",
				"defaultFilterOperator": "Contains"   // values are in enum sap.ui.model.FilterOperator
			}
		},
		"url": {
			"label": "URL",
			"defaultValue": "http://",
			"column": {
				"hAlign": "Center",
				"width": "10rem",
				"label": "URL Link",
				"filterProperty": "url",
				"defaultFilterOperator": "StartsWith"
			},
			"cell": {
				"type": "Link",
				"href": "{url}"
			}
		},
		"editable": {
			"label": "Editable",
			"defaultValue": false,
			"type": "boolean"
		},
		"int": {
			"label": "Integer",
			"defaultValue": 0,
			"type": "int",
			"formatter": {
				"minIntegerDigits": 1,
				"maxIntegerDigits": 6,
				"emptyString": ""
			},
			"column": {
				"hAlign": "Center",
				"width": "5rem",
				"label": "Integer",
				"filterProperty": "int",
				"defaultFilterOperator": "EQ",
				"filterType": "sap.ui.model.type.Integer"   //sap.ui.model.type
			}
		},
		"number": {
			"label": "Number",
			"defaultValue": 0.5,
			"type": "number",
			"formatter": {
				"decimals": 1,
				"style":"short"
			}
		}
	},
	"addButtonText": "Add a new step"
}
Simple Object Array field with value from Json list (Table) Visualization for Object Array Field with value from Json list
{
	"manifestpath": "/sap.card/configuration/parameters/objects/value",
	"type": "object[]",
	"label": "Object properties defined: value from Json list",
	"values": {
		"data": {
			"json": {
				"values": [
					{ "text": "text01", "key": "key01", "url": "https://sap.com/06", "icon": "sap-icon://accept", "iconcolor": "#031E48", "int": 1 },
					{ "text": "text02", "key": "key02", "url": "http://sap.com/05", "icon": "sap-icon://cart", "iconcolor": "#64E4CE", "int": 2 },
					{ "text": "text03", "key": "key03", "url": "https://sap.com/04", "icon": "sap-icon://zoom-in", "iconcolor": "#E69A17", "int": 3 },
					{ "text": "text04", "key": "key04", "url": "https://sap.com/03", "icon": "sap-icon://accept", "iconcolor": "#1C4C98", "int": 4 },
					{ "text": "text05", "key": "key05", "url": "http://sap.com/02", "icon": "sap-icon://cart", "iconcolor": "#8875E7", "int": 5 },
					{ "text": "text06", "key": "key06", "url": "https://sap.com/01", "icon": "sap-icon://zoom-in", "iconcolor": "#E69A17", "int": 6 },
					{ "text": "text07", "key": "key07", "url": "http://sap.com/02", "icon": "sap-icon://cart", "iconcolor": "#1C4C98", "int": 7 },
					{ "text": "text08", "key": "key08", "url": "https://sap.com/01", "icon": "sap-icon://zoom-in", "iconcolor": "#8875E7", "int": 8 }
				]
			},
			"path": "/values"
		},
		"allowAdd": true
	},
	"properties": {
		"key": {
			"label": "Key",
			"column": {
				"filterProperty": "key"
			}
		},
		"icon": {
			"label": "Icon",
			"defaultValue": "sap-icon://add",
			"column": {
				"hAlign": "Center",
				"width": "4rem"
			},
			"cell": {
				"type": "Icon",
				"color": "{iconcolor}"
			}
		},
		"text": {
			"label": "Text",
			"defaultValue": "text",
			"column": {
				"hAlign": "Center",
				"width": "6rem",
				"filterProperty": "text",
				"defaultFilterOperator": "Contains"   // values are in enum sap.ui.model.FilterOperator
			}
		},
		"url": {
			"label": "URL",
			"defaultValue": "http://",
			"column": {
				"hAlign": "Center",
				"width": "10rem",
				"label": "URL Link",
				"filterProperty": "url",
				"defaultFilterOperator": "StartsWith"
			},
			"cell": {
				"type": "Link",
				"href": "{url}aa"
			}
		},
		"editable": {
			"label": "Editable",
			"defaultValue": false,
			"type": "boolean",
			"column": {
				"hAlign": "Center"
			},
			"cell": {
				"type": "Switch",
				"customTextOn": "YES",
				"customTextOff": "NO"
			}
		},
		"int": {
			"label": "Integer",
			"defaultValue": 0,
			"type": "int",
			"formatter": {
				"minIntegerDigits": 1,
				"maxIntegerDigits": 6,
				"emptyString": ""
			},
			"column": {
				"hAlign": "Center",
				"width": "5rem",
				"label": "Integer",
				"filterProperty": "int",
				"defaultFilterOperator": "EQ",
				"filterType": "sap.ui.model.type.Integer"   //sap.ui.model.type
			}
		},
		"number": {
			"label": "Number",
			"defaultValue": 0.5,
			"type": "number",
			"formatter": {
				"decimals": 1,
				"style":"short"
			}
		}
	}
}
Simple Object Array field with value from requested file (Table) Visualization for Object Array Field with value from requested file
{
	"manifestpath": "/sap.card/configuration/parameters/objects/value",
	"type": "object[]",
	"label": "Object properties defined: value from requested file",
	"values": {
		"data": {
			"request": {
				"url": "./objectWithRequestList.json"
			},
			"path": "/values"
		},
		"allowAdd": true
	},
	"properties": {
		"key": {
			"label": "Key",
			"column": {
				"filterProperty": "key"
			}
		},
		"icon": {
			"label": "Icon",
			"defaultValue": "sap-icon://add",
			"column": {
				"hAlign": "Center",
				"width": "4rem"
			},
			"cell": {
				"type": "Icon",
				"color": "{iconcolor}"
			}
		},
		"text": {
			"label": "Text",
			"defaultValue": "text",
			"column": {
				"hAlign": "Center",
				"width": "6rem",
				"filterProperty": "text",
				"defaultFilterOperator": "Contains"   // values are in enum sap.ui.model.FilterOperator
			}
		},
		"additionalText": {
			"label": "Additional Text",
			"column": {
				"hAlign": "Center",
				"width": "10rem",
				"filterProperty": "text",
				"defaultFilterOperator": "Contains"   // values are in enum sap.ui.model.FilterOperator
			}
		}
	}
}
Simple Object Array field with value from OData request (Table) Visualization for Object Array Field with value from oData Request
{
	"manifestpath": "/sap.card/configuration/parameters/objects/value",
	"type": "object[]",
	"label": "Object properties defined: value from OData request",
	"values": {
		"data": {
			"request": {
				"url": "{{destinations.northwind}}/Customers",
				"parameters": {
					"$select": "CustomerID, CompanyName, Country, City, Address"
				}
			},
			"path": "/value"
		},
		"allowAdd": true
	},
	"properties": {
		"CustomerID": {
			"label": "Customer ID",
			"column": {
				"filterProperty": "CustomerID",
				"defaultFilterOperator": "Contains"   // values are in enum sap.ui.model.FilterOperator
			}
		},
		"CompanyName": {
			"label": "Company Name",
			"column": {
				"width": "10rem",
				"filterProperty": "CompanyName",
				"defaultFilterOperator": "Contains"   // values are in enum sap.ui.model.FilterOperator
			}
		},
		"Country": {
			"column": {
				"hAlign": "Center",
				"width": "6rem",
				"filterProperty": "Country",
				"defaultFilterOperator": "Contains"   // values are in enum sap.ui.model.FilterOperator
			}
		},
		"City": {
			"column": {
				"hAlign": "Center",
				"width": "6rem",
				"filterProperty": "City",
				"defaultFilterOperator": "Contains"   // values are in enum sap.ui.model.FilterOperator
			}
		},
		"Address": {
			"column": {
				"width": "10rem",
				"filterProperty": "Address",
				"defaultFilterOperator": "Contains"   // values are in enum sap.ui.model.FilterOperator
			}
		}
	}
}
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 TextArea for a string field
Please define "TextArea" 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": {
					"string": {
						"manifestpath": "/sap.card/configuration/parameters/string/value",
						"type": "string",
						"visualization": {
							"type": "TextArea",
							"settings": {
								"value": "{currentSettings>value}",
								"width": "100%",
								"editable": "{config/editable}",
								"placeholder": "{currentSettings>placeholder}",
								"rows": 7
							}
						}
					}
				}
			}
		});
	};
});
Showing a Slider for an integer field
Please define "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/configuration/parameters/integer/value",
						"type": "integer",
						"visualization": {
							"type": "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 "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/configuration/parameters/boolean/value",
						"type": "boolean",
						"visualization": {
							"type": "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
	}
}
Showing the fields in a sub group with panel. Loading...
	{
		"param0": {
			"manifestpath": "/sap.card/configuration/parameters/param0/value",
			"label": "Parameter 0",
			"type": "string"
		},
		"subGroup1": {
			"type": "group",
			"label": "Sub group 1",
			"level": "1",
			"expanded": true,
			"visualization": {
				"type": "Panel"
			}
		},
		"param1": {
			"manifestpath": "/sap.card/configuration/parameters/param1/value",
			"label": "Parameter 1",
			"type": "string"
		}
	}
							
Showing the fields in a sub group with tab. Loading...
	{
		"param0": {
			"manifestpath": "/sap.card/configuration/parameters/param0/value",
			"label": "Parameter 0",
			"type": "string"
		},
		"subGroup1": {
			"type": "group",
			"label": "Sub group 1",
			"level": "1",
			"expanded": true,
			"visualization": {
				"type": "Tab"
			}
		},
		"param1": {
			"manifestpath": "/sap.card/configuration/parameters/param1/value",
			"label": "Parameter 1",
			"type": "string"
		}
	}
							

Visualizations for special Fields

Visualization for Object Field with value from Json list

Loading...

Visualization for Object Field with value from requested file

Loading...

Visualization for Object Field with value from oData Request

Loading...

Visualization for Object Array Field with object properties defined only

Loading...

Visualization for Object Array Field with value from Json list

Loading...

Visualization for Object Array Field with value from requested file

Loading...

Visualization for Object Array Field with value from oData Request

Loading...