{
"variables": {
"translations": {
}
},
"templates": [
],
"body": {
"elements": [
]
}
}This is the basic UI schema JSON structure.
- Variables: This section includes all variables like translations necessary for your UI. It adopts a standard dictionary format, where each dictionary key represents the property path, and the value is the actual translation value.
- Templates: These are reusable UI components, each distinguished by an ‘id’ property.
- Body: Serving as the UI’s foundation, this section contains all elements that collectively form the user interface.
Body example
This defines the HTML that will make up the UI
{
"body": {
"elements": [
{
"id": "edtFirstName",
"element": "input",
"title": "First Name",
"field": "model.firstName",
"attributes": {
"type": "text"
}
},
{
"id": "edtLastName",
"element": "input",
"title": "Last Name",
"field": "model.lastName",
"attributes": {
"type": "text"
}
},
{
"id": "edtAge",
"element": "input",
"title": "Age",
"field": "model.age",
"attributes": {
"type": "number"
}
}
]
}
}The ‘body’ object is the fundamental and sole mandatory component in the schema. Its essential property is ‘elements’. This structure is replicated in other schema sections, such as the ‘templates’, to maintain consistency and reusability.
Variables example
{
"variables": {
"translations": {
"labels": {
"firstName": "First Name",
"lastName": "Last Name",
"age": "Age"
}
}
},
"body": {
"elements": [
{
"element": "div",
"content": "@translations.labels.firstName"
}
]
}
}Variables is a value processor.
The “@” in front of the “content” property value indicates that this is a variable path. When generating the HTML the variable value will be used as the content of the div.
<div>First Name</div>Templates example
{
"variables": {
"translations": {
"labels": {
"firstName": "First Name",
"lastName": "Last Name",
"age": "Age"
}
}
},
"templates": [
{
"id": "person",
"elements": [
{
"id": "edtFirstName",
"element": "input",
"title": "First Name",
"field": "model.firstName",
"attributes": {
"type": "text"
}
},
{
"id": "edtLastName",
"element": "input",
"title": "Last Name",
"field": "model.lastName",
"attributes": {
"type": "text"
}
},
{
"id": "edtAge",
"element": "input",
"title": "Age",
"field": "model.age",
"attributes": {
"type": "number"
}
}
]
}
],
"body": {
"elements": [
{
"element": "template",
"id": "person"
}
]
}
}Templates are located in the ‘templates’ collection at the schema’s root. Each template is a dictionary consisting of two key components:
- ‘id‘ – This is utilized for identifying and referencing the template.
- ‘elements‘ – This outlines the UI elements in a manner similar to what is done in the ‘body’ section.
To reference a specific template, the element type “template” is used. The template provider is responsible for generating these elements.