UI Form schema
More information about the forms editor here
The UI Schema plays a crucial role in defining how the form fields are presented and organized within the user interface. It leverages JSON Forms' elements to configure the layout and visual styling of the form, ensuring an intuitive and user-friendly experience.
Here's a simple example to illustrate the concept:
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/name"
},
{
"type": "Control",
"scope": "#/properties/email"
},
{
"type": "Control",
"scope": "#/properties/age"
}
]
}
In this example, we use the "VerticalLayout" element to stack the form fields vertically. Each form field is represented by a "Control" element, and the "scope" property specifies the path to the corresponding field in the JSON Schema. This simple UI Schema configuration results in a user interface where the fields "firstName," "lastName," and "email" are displayed vertically, one below the other.
By utilizing JSON Forms' elements and configuring the UI Schema effectively, you can create visually appealing and logically organized forms that enhance the overall user experience.
UI Components
In the UI Schema, you can utilize various elements to define the layout and appearance of your form. Here are some commonly used UI Schema elements with explanations and short examples to help you understand their purpose and usage
Control
The "Control" element is used to render a form field or control in the UI. It allows users to interact with the form by inputting data or making selections. For example, a text input field, a dropdown menu, or a checkbox can be rendered using the "Control" element.
Example:
The type: control is exclusively utilized within the UI Schema.
{
"type": "control",
"scope": "#/properties/name"
}
Group
Example:
The type: group is exclusively utilized within the UI Schema.
{
"type": "group",
"title": "Personal Information",
"elements": [
{
"type": "control",
"scope": "#/properties/firstName"
},
{
"type": "control",
"scope": "#/properties/lastName"
}
]
}
This UI Schema element provide flexibility in designing the layout and structure of your forms, allowing you to create user-friendly and intuitive interfaces for data entry.
Label
Example:
The type: label is exclusively utilized within the UI Schema.
...
{
"type": "Label",
"text": "Personal data",
<<options>>
}
...
{
"type": "Label",
"text": "History information",
"options": {
"size": "lb-1"
}
}
...
| Options | Description |
|---|---|
| size | Set the label size. The possible values are (from smallest to largest font size): lb-1, lb-2, lb-3, lb-4, lb-5 |
VerticalLayout
Example:
The type: VerticalLayout is exclusively utilized within the UI Schema.
{
"type": "VerticalLayout",
"elements": [
{
"type": "control",
"scope": "#/properties/firstName"
},
{
"type": "control",
"scope": "#/properties/lastName"
}
]
}
HorizontalLayout
Example:
The type: HorizontalLayout is exclusively utilized within the UI Schema.
{
"type": "HorizontalLayout",
"elements": [
{
"type": "control",
"scope": "#/properties/email"
},
{
"type": "control",
"scope": "#/properties/phone"
}
]
}
Rules
Rules enable the inclusion of interactive features in a form, such as the ability to hide or disable certain user interface elements based on specific conditions.
These rules can be applied to any element within the user interface schema and are defined using the "rule" property, which follows the format:
"rule": {
"effect": "HIDE" | "SHOW" | "ENABLE" | "DISABLE",
"condition": {
"scope": "<UI Schema scope>",
"schema": JSON Schema
}
}
A rule basically works by first evaluating the condition property and in case it evaluates to true, executing the associated effect.
Rule Effect
The effect property determines what should happen to the attached UI schema element once the condition is met. Current effects include:
HIDE: hide the UI schema elementSHOW: show the UI schema elementDISABLE: disable the UI schema elementENABLE: enable the UI schema element
Rule Condition
The condition object of a rule comprises a scope and a schema property. The schema property adheres to the JSON schema standard, allowing for the utilization of any JSON schema specification within the rule condition. The schema undergoes validation against the data specified in the scope property. When the scope data matches the schema, the rule evaluates to true, triggering the application of the rule effect.
Below a rule example:
{
"title": "Form",
"description": "A form example",
"type": "object",
"properties": {
"name": {
"type": "string"
},
"education": {
"type": "boolean"
},
"kindOfStudy": {
"type": "string",
"enum": ["Primary School", "High School", "University"]
},
"vegetables": {
"type": "boolean"
},
"kindOfVegetables": {
"type": "string",
"enum": ["All", "Some", "Only potatoes"]
}
}
}
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"label": "Name",
"scope": "#/properties/name"
},
{
"type": "Group",
"elements": [
{
"type": "Control",
"label": "Student?",
"scope": "#/properties/education"
},
{
"type": "Control",
"label": "Education Level",
"scope": "#/properties/kindOfStudy",
"rule": {
"effect": "ENABLE",
"condition": {
"scope": "#/properties/education",
"schema": {
"const": true
}
}
}
}
]
},
{
"type": "Group",
"elements": [
{
"type": "Control",
"label": "Eats vegetables?",
"scope": "#/properties/vegetables"
},
{
"type": "Control",
"label": "Kind of vegetables",
"scope": "#/properties/kindOfVegetables",
"rule": {
"effect": "HIDE",
"condition": {
"scope": "#/properties/vegetables",
"schema": {
"const": false
}
}
}
}
]
}
]
}
This example demonstrates the usage of two rules. The first rule controls the enabling of a control based on the status of the 'Student' checkbox. The second rule manages the visibility of a control depending on the selection of the "Eats vegetables?" checkbox.
