Using a JSON Schema to Create Forms
  • 05 Dec 2024
  • Dark
    Light
  • PDF

Using a JSON Schema to Create Forms

  • Dark
    Light
  • PDF

Article summary

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:

  1. Navigate to Automation Studio and create a new automation.
  2. Under the list of tasks available in the right pane, select JsonForms.
  3. Add RenderJsonSchema to the canvas. This task alone is enough to render a form.
  4. 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.

  1. 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
    35-IAP23.1-rendered-form

  2. Complete the inputFields in the form and then click the Confirm button to complete the task.

    Figure 3: Input Fields
    36-IAP23.1-input-fields

  3. Once the task is complete, the Outgoing tab in Task History will show that the form data is exported.

    Figure 4: Outgoing Form Data
    37-IAP23.1-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?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.