- 05 Dec 2024
-
DarkLight
-
PDF
Using a JSON Schema to Create Forms
- Updated on 05 Dec 2024
-
DarkLight
-
PDF
With JSON Forms it is possible to create forms rather quickly in a workflow using just a JSON schema. You can use the renderJSONSchema
task available in JSON Forms via Automation Studio. It is a manual task that requires schema as input, creates a form using the schema, renders it and then forgets the form.
Using the Render JSON Schema Task
To use the renderJSONSchema
task:
- Navigate to Automation Studio and create a new automation.
- Under the list of tasks available in the right pane, select JsonForms.
- Add RenderJsonSchema to the canvas. This task alone is enough to render a form.
- Double-click on the task and the task editor (shown below) will display.
Figure 1: RenderJsonSchema Task Preview
Task Inputs
As seen in the image above, the task accepts five inputs. Each of these inputs define how the form elements are structured, rendered and behave.
Input Parameter | Description |
---|---|
jsonSchema |
As the name suggests this input expects the user to enter a JSON schema. The jsonSchema entered as input to this variable will define the structure of the entire form. |
uiSchema |
If you have worked with the JSON Forms app you might have seen the UI schema in the preview for a form built using canvas. The uiSchema defines the widgets to be used for the form elements. |
bindingSchema |
The bindingSchema input is used to define the external data binding with a form element, usually a dropdown field populated with options. It allows a user to define the hyper schema for an API. It is also used to define dynamic validation. To learn more about binding schema, refer to this Itential guide. |
validationSchema |
The validationSchema input is used to define dynamic validations for a field in the form. |
formData |
This input uses instance data to populate the form with. The instance data is a JSON object with a key-value format, where key is the field name and value is the value it takes when the form is rendered. The values inside a form rendered with instance data can be edited. |
Sample Input Schemas
Using the sample schemas detailed below as input, render a form using the renderJSONSchema
task. Once task inputs are complete, save the automation and start the job.
jsonSchema
{
"title": "inputFields",
"description": "",
"type": "object",
"required": [],
"properties": {
"text1": {
"type": "string",
"title": "Text 1",
"description": ""
},
"textArea1": {
"type": "string",
"title": "Text Area 1",
"description": ""
},
"number1": {
"type": "number",
"title": "Number 1",
"description": ""
},
"checkbox1": {
"type": "boolean",
"title": "Checkbox 1",
"description": "",
"default": false,
"enum": [
true,
false
]
},
"dropdown1": {
"type": "string",
"title": "Dropdown 1",
"description": "",
"enum": ["item 1", "item 2"]
}
}
}
uiSchema
{
"text1": {
"ui:placeholder": "Enter text only"
},
"textArea1": {
"ui:placeholder": "Enter text",
"ui:widget": "textarea"
},
"number1": {
"ui:placeholder": "Enter a number",
"ui:widget": "updown"
},
"dropdown1": {
"ui:placeholder": "Select an item"
}
}
Render the JSON Schema Form
Once the job is executed, you can work on the task from Jobs in Operations Manager, where you can also view task details and the incoming variables.
-
When you click the work task, the rendered form will display as shown below. The
inputFields
in the form will reflect the fields defined in the JSON schema sent as input variables.Figure 2: Rendered Form
-
Complete the
inputFields
in the form and then click the Confirm button to complete the task.Figure 3: Input Fields
-
Once the task is complete, the Outgoing tab in Task History will show that the form data is exported.
Figure 4: Outgoing Form Data
⚠ This task will not create a form instance in the json-form
application. When you open the json-forms
app, you will not see this form.