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

First Name

Last Name

Schema

schema.json

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

UI Schema

uischema.json

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

Data

{
  "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

First Name

Last Name

Schema

schema.json

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

UI Schema

uischema.json

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

Data

{
  "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

First Name

Last Name

Schema

schema.json

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

UI Schema

uischema.json

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

Data

{
  "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

First Name

Last Name

Schema

schema.json

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

UI Schema

uischema.json

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

Data

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

Evaluation order

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

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