Form section visibility JSON example

This an example of form where user's replies affect which sections of form are visible and what are hidden.

Form section visibility rules and defined by "visibleIf" -property in section JSON.

This example has a radio list select where customer can choose whether they ate the brownie, cupcake or both. If customer has eaten brownie or both he/she is queried who would the rate the brownie and if the customer has eaten the cupcake the same thing is queried about it.

Initially when customer opens the form following screen is rendered:

This is because first section does not have any visibleIf rules and thus is always visible but because both the brownie and cupcake -sections have visibleIf -rules that do not yet mach, the remain hidden.

When customer selects a brownie following screen is rendered:

This is caused by following code block in brownie -section:

"visibleIf": {
  "field": "whatdidyoueat",
  "equals": "brownie",
  "notEquals": null,
  "and": [],
  "or": [{
    "field": "whatdidyoueat",
    "equals": "both",
    "notEquals": null,
    "and": [],
    "or": []
  }]
}

Which states that if field "whatdidyoueat" value equals "brownie" or field "whatdidyoueat" value equals "both" the field will be visible.

In the example customer has chosen "brownie" so the field is visible but the cupcake section remains hidden.

When the customer selects both following screen is rendered

This is because both visibleIf -rules match and thus both are rendered.

Here is a complete form JSON:

{
  "id": "xxx",
  "replyStrategy": null,
  "exportThemeId": null,
  "allowAnonymous": true,
  "allowDrafts": null,
  "title": "Did you enjoy it?",
  "sections": [
    {
      "title": null,
      "visibleIf": null,
      "fields": [
        {
          "visibleIf": null,
          "permissionContexts": null,
          "name": "summary-text",
          "type": "html",
          "title": null,
          "required": null,
          "contexts": [],
          "flags": null,
          "placeholder": null,
          "_class": null,
          "readonly": null,
          "help": null,
          "_default": null,
          "min": null,
          "max": null,
          "step": null,
          "checked": null,
          "printable": null,
          "options": [],
          "sourceUrl": null,
          "uploadUrl": null,
          "singleFile": null,
          "onlyImages": null,
          "maxFileSize": null,
          "addRows": null,
          "draggable": null,
          "columns": [],
          "src": null,
          "text": null,
          "html": "<b>Your enjoyment really matters to us</b><br/><br/><p>We would love to know how did you like your dessert so we could improve our services</p>"
        },
        {
          "visibleIf": null,
          "permissionContexts": null,
          "name": "whatdidyoueat",
          "type": "radio",
          "title": "What did you eat?",
          "required": null,
          "contexts": [
            "FORM",
            "MANAGEMENT_LIST",
            "MANAGEMENT"
          ],
          "flags": {
            "managementEditable": false
          },
          "placeholder": null,
          "_class": null,
          "readonly": null,
          "help": null,
          "_default": null,
          "min": null,
          "max": null,
          "step": null,
          "checked": null,
          "printable": null,
          "options": [
            {
              "name": "choose",
              "text": "- Choose - ",
              "checked": true,
              "selected": null
            },
            {
              "name": "brownie",
              "text": "Brownie",
              "checked": false,
              "selected": null
            },
            {
              "name": "cupcake",
              "text": "Cupcake",
              "checked": null,
              "selected": null
            },
            {
              "name": "both",
              "text": "Both",
              "checked": null,
              "selected": null
            }
          ],
          "sourceUrl": null,
          "uploadUrl": null,
          "singleFile": null,
          "onlyImages": null,
          "maxFileSize": null,
          "addRows": null,
          "draggable": null,
          "columns": [],
          "src": null,
          "text": null,
          "html": null
        }
      ]
    },
    {
      "title": null,
      "visibleIf": {
        "field": "whatdidyoueat",
        "equals": "brownie",
        "notEquals": null,
        "and": [],
        "or": [{
          "field": "whatdidyoueat",
          "equals": "both",
          "notEquals": null,
          "and": [],
          "or": []
        }]
      },
      "fields": [
        {
          "visibleIf": null,
          "permissionContexts": null,
          "name": "brownie-text",
          "type": "html",
          "title": null,
          "required": null,
          "contexts": [],
          "flags": null,
          "placeholder": null,
          "_class": null,
          "readonly": null,
          "help": null,
          "_default": null,
          "min": null,
          "max": null,
          "step": null,
          "checked": null,
          "printable": null,
          "options": [],
          "sourceUrl": null,
          "uploadUrl": null,
          "singleFile": null,
          "onlyImages": null,
          "maxFileSize": null,
          "addRows": null,
          "draggable": null,
          "columns": [],
          "src": null,
          "text": null,
          "html": "<b>Brownie!</b>"
        },
        {
          "visibleIf": null,
          "permissionContexts": null,
          "name": "brownie-rating",
          "type": "number",
          "title": "How would like to rate your brownie?",
          "required": null,
          "contexts": [
            "MANAGEMENT_LIST",
            "MANAGEMENT",
            "FORM"
          ],
          "flags": null,
          "placeholder": "give rating",
          "_class": null,
          "readonly": null,
          "help": null,
          "_default": "0",
          "min": 1,
          "max": 10,
          "step": null,
          "checked": null,
          "printable": null,
          "options": [],
          "sourceUrl": null,
          "uploadUrl": null,
          "singleFile": null,
          "onlyImages": null,
          "maxFileSize": null,
          "addRows": null,
          "draggable": null,
          "columns": [],
          "src": null,
          "text": null,
          "html": null
        }
      ]
    },
    {
      "title": null,
      "visibleIf": {
        "field": "whatdidyoueat",
        "equals": "cupcake",
        "notEquals": null,
        "and": [],
        "or": [{
          "field": "whatdidyoueat",
          "equals": "both",
          "notEquals": null,
          "and": [],
          "or": []
        }]
      },
      "fields": [
        {
          "visibleIf": null,
          "permissionContexts": null,
          "name": "cupcake-text",
          "type": "html",
          "title": null,
          "required": null,
          "contexts": [],
          "flags": null,
          "placeholder": null,
          "_class": null,
          "readonly": null,
          "help": null,
          "_default": null,
          "min": null,
          "max": null,
          "step": null,
          "checked": null,
          "printable": null,
          "options": [],
          "sourceUrl": null,
          "uploadUrl": null,
          "singleFile": null,
          "onlyImages": null,
          "maxFileSize": null,
          "addRows": null,
          "draggable": null,
          "columns": [],
          "src": null,
          "text": null,
          "html": "<b>Cupcakes!</b>"
        },
        {
          "visibleIf": null,
          "permissionContexts": null,
          "name": "cupcake-rating",
          "type": "number",
          "title": "How would like to rate your cupcake?",
          "required": null,
          "contexts": [
            "MANAGEMENT_LIST",
            "MANAGEMENT",
            "FORM"
          ],
          "flags": null,
          "placeholder": "give rating",
          "_class": null,
          "readonly": null,
          "help": null,
          "_default": null,
          "min": 1,
          "max": 10,
          "step": null,
          "checked": null,
          "printable": null,
          "options": [],
          "sourceUrl": null,
          "uploadUrl": null,
          "singleFile": null,
          "onlyImages": null,
          "maxFileSize": null,
          "addRows": null,
          "draggable": null,
          "columns": [],
          "src": null,
          "text": null,
          "html": null
        }
      ]
    },
    {
      "title": null,
      "visibleIf": null,
      "fields": [
        {
          "visibleIf": null,
          "permissionContexts": null,
          "name": "send",
          "type": "submit",
          "title": null,
          "required": null,
          "contexts": [
            "FORM"
          ],
          "flags": {
            "managementEditable": true
          },
          "placeholder": null,
          "_class": null,
          "readonly": null,
          "help": null,
          "_default": null,
          "min": null,
          "max": null,
          "step": null,
          "checked": null,
          "printable": null,
          "options": [],
          "sourceUrl": null,
          "uploadUrl": null,
          "singleFile": null,
          "onlyImages": null,
          "maxFileSize": null,
          "addRows": null,
          "draggable": null,
          "columns": [],
          "src": null,
          "text": "Send",
          "html": null
        }
      ]
    }
  ],
  "filters": [],
  "scripts": null
}