Generate Both Schemata Example

This example demonstrates that JSON Forms is already able to render a form just by specifying the data to be rendered. Both, the JSON schema as well as the UI schema have been omitted in this example as you can see yourself if you check the provided schema and UI schema.

If no JSON schema is provided to JSON Forms it will generate one. In most uses cases this might not be the thing you want, but it's a useful feature nevertheless, e.g. for rapid prototyping.

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

{}

Data

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