Links

UiSchema

In the UISchema, you're able to set the elements which impact the user interface of your configuration. It defines how this data is rendered as a form, e.g. the order of controls, their visibility, and the layout

Scope

The mandatory scope property, which expects a JSON schema reference value, defines to which property of the data the control should be bound to.
type: Control
label: A Boolean Input
scope: "#/properties/bool_input"
In this example the scopeproperty refers to the bool_input field that was defined int the schema:
schema:
type: object
properties:
bool_input:
type: boolean
default: true

Label

The label property can be used to customize the text seen when the UI renders. For the above example, when the UI renders, the end user will see:
"A Boolean Input" is defined by the label property in the UISchema

Layouts

Layout elements in the UI Schema contain other UI Schema elements like controls or other layouts and serve the purpose of defining the layout of those. There are four different kinds of layouts supported: VerticalLayout and HorizontalLayout, a slightly modified version of the vertical layout called Group , which is often used to bundle related data.

Vertical Layout

Used to List the elements of the form vertically to the end user.
type: VerticalLayout
elements:
- type: Control
label: Name
scope: "#/properties/name"
- type: Control
label: Birth Date
scope: "#/properties/birthDate"
Elements displayed vertically in the UI

Horizontal Layout

Used to List the elements of the form vertically to the end user.
type: HorizontalLayout
elements:
- type: Control
label: Name
scope: "#/properties/name"
- type: Control
label: Birth Date
scope: "#/properties/birthDate"
Elements displayed horizontally in the UI

Section

Used to display elements in a group with a shared label, subtitle, and tooltip
type: Section
label: My Group
elements:
- type: Control
label: Name
scope: "#/properties/name"
- type: Control
label: Birth Date
scope: "#/properties/birthDate"
Form elements displayed as a group

Combining Layout Elements

---
type: VerticalLayout
elements:
- type: Section
label: First Section
elements:
- type: Control
label: Name
scope: "#/properties/name"
options:
trim: true
- type: Control
label: Birth Date
scope: "#/properties/birthDate"
options:
trim: true
hintText: This is the hint text of the first section.
subtitle: This is the subtitle of the first section.
- type: Divider
- type: Section
label: Second Section
elements:
- type: Control
label: Option One
scope: "#/properties/option1"
- type: Control
label: Option Two
scope: "#/properties/option2"
hintText: Note the horizontal line between the two section. You can add this to your
own coniguration form by including a 'Divider' element.
subtitle: The second section contains two boolean fields.
Two sections in a vertical layout, seperated by a divider