Render Conditions - smbc-digital/form-builder GitHub Wiki

Related

Render conditions allow you to specify the conditions required for a page to render. As such, in your DSL you can have multiple pages with the same page-slug eg "success", but different conditions for each page. The most common use case for this will be multiple success pages for different journeys, however it can be applied to any page (although the first page of a form shouldn't have any conditions).

The base condition object is the same as Conditions, with slightly different structure depending on what data type you're checking against.

Example

{
  "Title": "Thank you for submitting your views on fruit",
  "BannerTitle": "Thank you for telling us you like apples best",
  "LeadingParagraph": "Some additional information",
  "PageSlug": "success",
  "RenderConditions": [
    {
      "questionId": "doYouLikeFruit",
      "conditionType": "EqualTo",
      "comparisonValue": "yes"
    },
    {
      "questionId": "favouriteFruit",
      "conditionType": "EqualTo",
      "comparisonValue": "Apples"
    }
  ],
  "Elements": [
    {
      "Type": "h2",
      "Properties": {
        "Text": "What happens next"
      }
    },
    {
      "Type": "p",
      "Properties": {
        "Text": "We will contact you shortly to confirm if your request has been accepted."
      }
    }
  ]
}

Rules

  • The first page of a form shouldn't have any render conditions (as there is no data to check against yet)
  • You can't have more than 1 same-slug page with empty render conditions. An error will be thrown.
  • Conditions will be processed by highest number first eg. A page with 3 conditions will be checked before a page with 2 conditions, regardless of the order the pages are in the DSL.
  • You can check an optional question value, but you have to do a IsNullOrEmpty condition before the specific value condition eg.
  "RenderConditions": [
    {
      "questionId": "doYouLikeFruit",
      "conditionType": "EqualTo",
      "comparisonValue": "yes"
    },
    {
      "questionId": "favouriteFruit",
      "conditionType": "IsNullOrEmpty",
      "comparisonValue": "false"
    },
    {
      "questionId": "favouriteFruit",
      "conditionType": "checkBoxContains",
      "comparisonValue": "Apples"
    }
  ]