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