Dynamic Pages
The goal is to create dynamic forms where certain pages can be accessed or restricted based on specific answers given within the form. This allows for a more customized and interactive form-filling experience.
Uses
To make page dynamic, include it with the following specifications:
Properties
Required properties
- header: Title/header of the page.
- instructions: Guidelines or instructions for filling out the form on this page.
- fields: An array of field objects representing components on the page.
Optional properties
- enabled: Specifies whether the page is enabled or restricted. It can be either a boolean or an array of evaluation conditions. By default, the page is enabled.
- enabled_operator: Specifies the operator used to combine conditions for enabling the page when the "enabled" property is an array. The values can be
and
oror
, and the default operator isor
.
Enabled Property
- boolean:
true/false
to enable/disable the page. - array: Each condition within the "enabled" array is used to dynamically enable or disable the page based on certain criteria.
Evaluation condition
- condition:
if
,not if
,overlaps
,regex
- variable: The variable within the form from previous pages. It can be an array or a scalar value.
- value: The value to compare against the variable. It can be a single value or an array for multiple values. In case of regex condition, it is a regular expression pattern to match against the variable. It can be any valid regular expression.
Example
{
"component_name": "form_builder",
"pages": [
{
"header": "Sample",
"instructions": "Sample",
"fields": [{
"id": "select_tags",
"title": "test",
"component": "text_input",
"default_value": "test"
}],
"enabled": true // false
},
{
"header": "Sample Resticted",
"instructions": "Sample Restricted",
"fields": [],
"enabled_operator": "and", // or
"enabled": [
{
"condition": "if",
"variable": "select_tags",
"value": "abc"
}, {
"condition": "not if",
"variable": "select_tags",
"value": ["abc", "123"]
}, {
"condition": "overlaps",
"variable": "select_tags",
"value": "abc"
}, {
"condition": "regex",
"variable": "select_tags",
"value": "*"
}
]
}
],
"data_token": {}
}
Note: This example demonstrates the usage of the Form Builder with conditions for enabling or restricting pages based on specific input values.
Updated 2 months ago