Advanced

Rules & effects

Show, disable and compute fields from other answers — json-logic by default, sandboxed JavaScript when needed. Pick “Other”, tick the checkbox, set quantity above 10.

Loading the builder…

View the spec
{
  "type": "panel",
  "id": "column",
  "name": "Form",
  "configs": {
    "key": "rules"
  },
  "children": [
    {
      "type": "input",
      "dataType": "string",
      "id": "select",
      "name": "Channel",
      "configs": {
        "key": "channel",
        "label": "Preferred channel",
        "optionsSource": "static",
        "options": "Email\nPhone\nOther"
      }
    },
    {
      "type": "input",
      "dataType": "string",
      "id": "text",
      "name": "Other channel",
      "configs": {
        "key": "other",
        "label": "Which one?"
      },
      "rules": [
        {
          "name": "hide unless Other",
          "type": "jsonLogic",
          "logic": {
            "!=": [
              {
                "var": "channel"
              },
              "Other"
            ]
          },
          "effects": [
            {
              "property": {
                "target": "hidden",
                "type": "boolean"
              },
              "boolean": true
            }
          ]
        }
      ]
    },
    {
      "type": "input",
      "dataType": "boolean",
      "id": "checkbox",
      "name": "Lock",
      "configs": {
        "key": "lock",
        "label": "Lock the nickname"
      }
    },
    {
      "type": "input",
      "dataType": "string",
      "id": "text",
      "name": "Nickname",
      "configs": {
        "key": "nickname",
        "label": "Nickname"
      },
      "rules": [
        {
          "name": "disable when locked",
          "type": "jsonLogic",
          "logic": {
            "==": [
              {
                "var": "lock"
              },
              true
            ]
          },
          "effects": [
            {
              "property": {
                "target": "disabled",
                "type": "boolean"
              },
              "boolean": true
            }
          ]
        }
      ]
    },
    {
      "type": "input",
      "dataType": "number",
      "id": "number",
      "name": "Quantity",
      "configs": {
        "key": "quantity",
        "label": "Quantity"
      }
    },
    {
      "type": "input",
      "dataType": "string",
      "id": "text",
      "name": "Tier",
      "configs": {
        "key": "tier",
        "label": "Tier (computed by a JS rule)"
      },
      "rules": [
        {
          "name": "compute tier",
          "type": "jsonLogic",
          "logic": {
            "!!": {
              "var": "quantity"
            }
          },
          "effects": [
            {
              "property": {
                "target": "value",
                "type": "code"
              },
              "code": "return dataMap.quantity > 10 ? \"GOLD\" : \"STANDARD\";"
            }
          ]
        }
      ]
    }
  ]
}