Using a JSON Schema to Create Forms

Updated on 11 Sep 2023

Dark

Light
PDF

Article summary

Did you find this summary helpful?

Thank you for your feedback

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 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.

Was this article helpful?

What's Next

Using the Form Element Dropdown

Table of contents

Using the Render JSON Schema Task
Render the JSON Schema Form