Skip to main content

JSON Forms Component

Create powerful custom forms for the configuration wizard

Component key: jsonforms

Description#

This component allows you to leverage JSON Forms to build forms for the integration configuration wizard.

Use this component to build static forms that do not need to fetch data from third-party apps. You can use our JSON Forms playground to see what your JSON forms will look like when rendered in the configuration wizard.

If you would like to build dynamic forms that fetch data from other sources, please see our documentation on building data sources in custom components.

Data Sources#

Generic JSON Form#

Generate a form for the configuration wizard using JSON schema | key: genericJsonForm | type: jsonForm

InputDefaultNotes
Input
Default Data
code
Default
{  "name": "Bob",  "age": 10}
Notes
The default data for the form
Input
JSON Schema
code
/ Required
Default
{  "type": "object",  "properties": {    "name": {      "type": "string",      "minLength": 3,      "description": "Please enter your name"    },    "age": {      "type": "integer",      "description": "Please enter your age",      "minimum": 0,      "maximum": 150    }  }}
Notes
The data/JSON schema defines the underlying data to be shown in the UI (objects, properties, and their types). See https://jsonforms.io/docs
Input
UI Schema
code
/ Required
Default
{  "type": "VerticalLayout",  "elements": [    {      "type": "Control",      "scope": "#/properties/name"    },    {      "type": "Control",      "scope": "#/properties/age"    }  ]}
Notes
The UI schema defines how this data is rendered as a form, e.g. the order of controls, their visibility, and the layout. See https://jsonforms.io/docs/uischema/