JSON Schema Form

Allows users to add one or more custom fields to the configure and define a JSON schema and UI schema, to build a form. The schemas decide the behaviour of the fields and the form.

https://json-schema.org/learn/getting-started-step-by-step https://jsonforms.io/examples/basic/ https://jsonforms.io/docs/uischema/ https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema/

Basic

JSON Schema

The JSON schema defines the underlying data to be shown in the UI (objects, properties, and their types).

{
  "title": "User Information",
  "description": "Form Example",
  "type": "object",
  "required": [
    "name",
    "phone"
  ],
  "properties": {
    "name": {
      "type": "string",
      "title": "Name"
    },
    "phone": {
      "type": "string",
      "title": "Phone",
      "minLength": 11
    },
    "birthday": {
      "type": "string",
      "title": "Birthday"
    }
  }
}

UI Schema

The UI Schema defines how this data is rendered as a form, e.g. the order of controls, their visibility and the layout.

{
  "name": {
    "ui:autofocus": true,
    "ui:emptyValue": ""
  },
  "phone": {
    "ui:help": "at least 11 characters"
  },
  "birthday": {
    "ui:widget": "date"
  }
}

Pre-filled Form Data

The actual data or the values for the fields defined by the schema. These values must be provided using JSON format as well, mapped with their fields.

{
  "name": "David",
  "phone": "13488886666",
  "birthday": "1980-03-16"
}

Interaction

Submit - This is triggered when the user submits the form after filling out the details with valid values.

Hide

This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.

Reset After Successful Submit

All the input widgets on the form are cleared out after the form is submitted successfully, when this property is set ON.

Layout

Height

Style

PreviousFormNextContainer

Last updated