How to define the UI Schema in a GERNERATED Array?

General
1

I have a question about the UI Schema in case I have a embedded array of data.
My json looks like this

Schema:

{
	"type": "object",
	"properties": {
		"name": {
			"type": "string"
		},
		"documentation": {
			"type": "string"
		},
		"conditions": {
			"type": "array",
			"items": {
				"type": "object",
				"properties": {
					"language": {
						"type": "string"
					},
					"expression": {
						"type": "string"
					}
				}
			}
		}
	}
}

I have two fields ‘name’ and ‘documentation’ and a array of data named ‘conditions’ with the detail items ‘language’ and ‘expression’.

My UISchema looks like this:


{
	"type": "Categorization",
	"elements": [
		{
			"type": "Category",
			"label": "General",
			"elements": [
				{
					"type": "VerticalLayout",
					"elements": [
						{
							"type": "Control",
							"scope": "#/properties/name"
						},
						{
							"type": "Control",
							"scope": "#/properties/documentation",
							"label": "Documentation",
							"options": {
								"multi": true
							}
						}
					]
				}
			]
		},
		{
			"type": "Category",
			"label": "Conditions",
			"elements": [
				{
					"type": "VerticalLayout",
					"elements": [
						{
							"type": "Control",
							"scope": "#/properties/conditions",
							"label": "Conditions",
							"options": {
								"detail": "GENERATED"
							}
						}
					]
				}
			]
		}
	]
}

This results in a output like this in the second category (conditions)

image
image1114×266 14.1 KB

My question is: How can I define in the UI Schema, that the item ‘expression’ in my detail array is rendered as a Multi Line input field?

2

I found the solution. My fault was using the option setting "detail": "GENERATED"

But the correct way to get full control over the detail section is to replace ‘GERNATED’ with a corresponding UI schema :

....
	"type": "Control",
	"scope": "#/properties/conditions",
	"label": "Conditions",
	"options": {
		"detail": {
			"type": "VerticalLayout",
			"elements": [
				{
					"type": "Control",
					"scope": "#/properties/language"
				},
				{
					"type": "Control",
					"scope": "#/properties/expression",
					"label": "Expression",
					"options": {
						"multi": true
					}
				}
			]
		}
	}
....

So in this way it is possible to add additional layout options to each control within the UI Schema:

image
image896×310 17 KB

Works perfect!

1 Like
3

Yes exactly! Nice that you managed to find a solution!