Skip to content

UI Schema

Pratyush Kumar edited this page Dec 27, 2022 · 2 revisions

The UI schema is a valid JSON schema that defines the structure of the rendered form.

It supports normal form elements, element groups as well as special directives that allow you to create optional fields that are rendered only when certain conditions are met in the form.

Basic Structure

The schema starts with an Array

[]

The array contains a list of objects with various properties using which elements are rendered in the form.

[
 {...elem1}, {...elem2}, {...elem3}, ...
]

Each element requires 3 mandatory properties:

  • uiType (string) - defines the type of element.
  • jsonKey (string) - defines the name by which its data will be stored in the form.
  • sort (number) - defines the order in which elements are rendered in a form. In case of element groups, it defines the order in which the elements are rendered inside the group.
  • level (number) - defines the depth of nesting of the element.
{
  "uiType": "someValue",
  "jsonKey": "someValue",
  "level": 0
}

Every uiType requires its own set of properties apart from these 3 to be defined in order to be rendered fully. These are defined later for each uiType.

Clone this wiki locally