ReadOnly

JSON Forms allows to enable and disable any input, either programmatically, via JSON Schema or the UI schema.

Form Wide#

The whole form can be disabled by specifying the readonly flag on the JsonForms component itself. This will disable all elements of this form.

<JsonForms
  renderers={materialRenderers}
  cells={materialCells}
  data={data}
  schema={schema}
  uischema={uischema}
  readonly
/>

This flag is also supported by the Angular and Vue bindings.

Demo
Schema
UI Schema
Data

schema.json

{
  "properties": {
    "firstName": {
      "type": "string"
    },
    "lastName": {
      "type": "string"
    }
  }
}

uischema.json

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/firstName"
    },
    {
      "type": "Control",
      "scope": "#/properties/lastName"
    }
  ]
}

{
  "firstName": "Max",
  "lastName": "Mustermann"
}

Schema based#

UI Schema option#

The option readonly: true can be set on any element in the UI schema:

{
  type: "VerticalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/firstName",
      options: {
        readonly: true
      }
    }
  ]
}

Demo
Schema
UI Schema
Data

schema.json

{
  "properties": {
    "firstName": {
      "type": "string"
    },
    "lastName": {
      "type": "string"
    }
  }
}

uischema.json

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/firstName",
      "options": {
        "readOnly": true
      }
    },
    {
      "type": "Control",
      "scope": "#/properties/lastName"
    }
  ]
}

{
  "firstName": "Max",
  "lastName": "Mustermann"
}

JSON Schema#

To disable an input via JSON Schema, specify readOnly: true:

{
  properties: {
    firstName: {
      type: "string",
      readOnly: true
    },
  }
}

Note: JSON Forms will ignore readonly within JSON Schemas as only readOnly is part of the specification.

Demo
Schema
UI Schema
Data

schema.json

{
  "properties": {
    "firstName": {
      "type": "string",
      "readOnly": true
    },
    "lastName": {
      "type": "string"
    }
  }
}

uischema.json

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/firstName"
    },
    {
      "type": "Control",
      "scope": "#/properties/lastName"
    }
  ]
}

{
  "firstName": "Max",
  "lastName": "Mustermann"
}

Rule#

Any UI schema element can be enabled or disabled dynamically via our rule support.

{
  type: "VerticalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/firstName",
      rule: {
        effect: "DISABLE",
        condition: {
          scope: "#",
          schema: {} //always true
        }
      }
    },
    // OR
    {
      type: "Control",
      scope: "#/properties/firstName",
      rule: {
        effect: "ENABLE",
        condition: {
          scope: "#",
          schema: { not: {} } //always false
        }
      }
    }
  ]
}

Demo
Schema
UI Schema
Data

schema.json

{
  "properties": {
    "firstName": {
      "type": "string"
    },
    "lastName": {
      "type": "string"
    }
  }
}

uischema.json

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/firstName",
      "rule": {
        "effect": "DISABLE",
        "condition": {
          "scope": "#",
          "schema": {}
        }
      }
    },
    {
      "type": "Control",
      "scope": "#/properties/lastName"
    }
  ]
}

{
  "firstName": "Max",
  "lastName": "Mustermann"
}

Evaluation order#

JSON Forms determines the enabled status for each UI schema element based on the following order

When the form wide readonly is specified, all inputs will be disabled.
If an ENABLE or DISABLE rule exists, the UI schema element will be rendered accordingly.
If the UI schema readonly option is set, the UI schema element will be rendered accordingly.
If the JSON Schema readOnly: true attribute is specified, the UI schema element will be disabled.
If none of the above apply, the UI schema element will be enabled or disabled based on its parent.