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
Schema
Dynamic Configurations
Last modified 1yr ago