Generate UI Schema Example

If you provide no UI schema to JSON Forms it'll generate one. The generated layout will be a VerticalLayout containing controls for the provided JSON schema.

Demo

Name *

Vegetarian

Birth Date *

Personal Data

Age *

Postal Code *

Schema

schema.json

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string"
    },
    "vegetarian": {
      "type": "boolean"
    },
    "birthDate": {
      "type": "string"
    },
    "personalData": {
      "type": "object",
      "properties": {
        "age": {
          "type": "integer"
        }
      },
      "additionalProperties": true,
      "required": [
        "age"
      ]
    },
    "postalCode": {
      "type": "string"
    }
  },
  "additionalProperties": true,
  "required": [
    "name",
    "vegetarian",
    "birthDate",
    "personalData",
    "postalCode"
  ]
}

UI Schema

uischema.json

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/name"
    },
    {
      "type": "Control",
      "scope": "#/properties/vegetarian"
    },
    {
      "type": "Control",
      "scope": "#/properties/birthDate"
    },
    {
      "type": "Control",
      "scope": "#/properties/personalData"
    },
    {
      "type": "Control",
      "scope": "#/properties/postalCode"
    }
  ]
}

Data

{
  "name": "John Doe",
  "vegetarian": false,
  "birthDate": "1985-06-02",
  "personalData": {
    "age": 34
  },
  "postalCode": "12345"
}