Skip to main content

Readonly

All the component in the form can handle the property readOnly. It renders the field but only in text, so it is not editable. The goal is to display information, as an input but not editable. The readOnly property accepts a boolean, but also a Condition, or an array of Condition.

Example :

"first_name": {
  "component": "text",
  "label": "First Name",
  "readOnly": true
}
"first_name": {
  "component": "text",
  "label": "First Name",
  "readOnly": [
    {
      "property": "first_name_is_read_only",
      "assertion" : "isTrue"
    }
  ]
}
"first_name": {
  "component": "text",
  "label": "First Name",
  "readOnly": [
    {
      "operator": "or",
      "property": "first_name_is_read_only",
      "assertion" : "isTrue"
    },
    {
      "operator": "or",
      "property": "user_cannot_edit_first_name",
      "assertion" : "isTrue"
    }
  ]
}

Applies on structural elements​

It also can be set on the structural elements of the form.

Group​

"person": {
    "type": "group",
    "readOnly": true,
    "properties": {
      "name": {
        "component": "text",
        "label": "Name",
        "inline": true
      }
    }
  }

Section​

"person": {
    "type": "section",
    "readOnly": true,
    "properties": {
      "name": {
        "component": "text",
        "label": "Name",
        "inline": true
      }
    }
  }

Multiple input group​

Note that it will keep the display and design of a table.

"members": {
  "type": "array",
  "arrayType": "table",
  "label": "Members",
  "readOnly": true,
  "array_actions": {
    "max": 2,
    "add_label": "Add member",
    "title": "Member",
    "remove_label": "Remove member",
    "empty_label": "No member",
    "actions_title": "Remove"
  },
  "properties": {
    "name": {
      "label": "Name",
      "component": "text"
    }
  }
}

Premiums table​

Note that it will keep the display and design of a table.

"premium_table": {
  "type": "premiums_table",
  "readOnly": true,
  "headers": [
    {
      "size": "0%"
    },
    {
      "title": "Garanties",
      "size": "100%"
    }
  ],
  "rows": [
    {
      "cells": [
        {
          "type": "group",
          "properties": {
            "liability.selected": {
              "component": "checkbox",
              "disabled": true,
              "default": {
                "value": true
              }
            }
          }
        },
        {
          "type": "group",
          "properties": {
            "label": {
              "type": "text",
              "text": "RC",
              "label": false
            }
          }
        }
      ]
    }
  ]
}