Custom Controls Example

This example demonstrates that the default renderers of JSON Forms can be replaced with custom ones. We've replaced the default renderer for integers (which have a maximum value of 5 here) with one displaying stars (at the bottom of the form).

You can read more about custom controls in the Custom renderers section.

Demo

Schema

schema.json

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "default": "foo"
    },
    "name_noDefault": {
      "type": "string"
    },
    "description": {
      "type": "string",
      "default": "bar"
    },
    "done": {
      "type": "boolean",
      "default": false
    },
    "rating": {
      "type": "integer",
      "default": 5
    },
    "cost": {
      "type": "number",
      "default": 5.5
    },
    "dueDate": {
      "type": "string",
      "format": "date",
      "default": "2019-04-01"
    }
  },
  "required": [
    "name",
    "name_noDefault"
  ]
}

UI Schema

uischema.json

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/name"
    },
    {
      "type": "Control",
      "scope": "#/properties/name_noDefault"
    },
    {
      "type": "Control",
      "label": false,
      "scope": "#/properties/done"
    },
    {
      "type": "Control",
      "scope": "#/properties/description",
      "options": {
        "multi": true
      }
    },
    {
      "type": "Control",
      "scope": "#/properties/rating"
    },
    {
      "type": "Control",
      "scope": "#/properties/cost"
    },
    {
      "type": "Control",
      "scope": "#/properties/dueDate"
    }
  ]
}

Data

{
  "name": "Send email to Adrian",
  "name_noDefault": "Send email to Adrian",
  "description": "Confirm if you have passed the subject\nHereby ...",
  "done": true,
  "rating": 1,
  "cost": 3.14,
  "dueDate": "2019-05-01"
}