Conditional Logic lets you configure a form to show or hide items based on the users input . You can show or hide fields, change a field name, or send a specific response based on a user’s response.
Dynamic forms offers this in two formats:
- Basic conditional logic: Available in all price plans
- Advanced conditional logic: Available in Turbo
Basic conditional logic
With basic conditional logic, you can add logic to each form component to determine when to hide or display the component. The settings for a conditional field, are configured on the component itself, and can be found by viewing the Conditional tab within the components settings.
The conditional logic is based on the following rules:
- Each field can hide or display.
- The visibility is dependent on another component defined within the form.
- The logic is activated when the configured field contains the plaintext value defined in the settings.
Advanced conditional logic
In addition to the basic conditional logic, it is also possible to apply advanced conditional rules using JavaScript. To add advanced conditional logic, open the configuration settings of the form component, go to the tab Conditional and scroll down.
Advanced conditional logic with JavaScript requires you to set the value of show to either true or false. Advanced Conditional logic will only work, if no basic conditional logic isn’t defined.
Adding conditional logic using JavaScript opens up a lot of possibilities for developers. Below we have listed a few examples that refer to other field types. To refer to other field types always use the external field ID.
Category fields with single choice
show = data[“external-field-id”] == 1
In this example, the form component will only be shown when the user selects the first category value. In this example, external-field-id is the external field ID of the referred category field and ‘1’ is the label ID of the category value.
Category fields with multiple choice
show = data[“external-field-id”][1] == true
In this example, ‘1’ is the label ID of the category value.
Text & Number fields
show = data[“external-field-id”] == “value”
In this case, the form component will only be shown when the value of the referred text or number field is equal to “value”.
Relationship fields with one reference
show = (data[“external-field-id”]||{})[‘podio_id’] === 1347727845
Conditional logic for relationship fields can be done on the Podio ID which is the unique item ID that can be found in the developer information (e.g. 1347727845).
show = (data[“external-field-id”]||{})[‘title’] === ‘Marketing Campaign’
Conditional logic for relationship fields can also be done on the title which is the description that appears on top of the reference layout (e.g. ‘Marketing Campaign’) of the related item.
Relationship fields with multiple reference
show = ((data[“external-field-id”]||[]).filter(
function(e){ return (e||{})[‘podio_id’] === 1347727845;}
).length > 0)
The form component will be shown it if at least on selected item matches the condition in the for statement.
Single condition
show = data[“external-id”] == “hello”
The condition above will show the form component if the field with external ID “text-field” has input value “hello”.
OR condition
show = data[“external-id”][1] == true || data[“external-id”][2] == true
The condition above will show the form component if the 1st OR 2nd label ID’s of a category field is selected.
AND condition
show = data[“text-field”] == “yes” && data[“category-field”][2] == true
The condition above will show the form component if the field with external ID ‘text-field’ has input value ‘yes’ AND if the 2nd option for field with external ID ‘category-field’ is selected.
Exclude condition
show = data[“externa-field-id”] != 1
The condition above will show the form component if a category field has an input value different from the 1st label.
Not blank condition
show = !!data[“external-field-id”]
The condition above will show the form component if the field with external ID ‘external-field-id’ has any value (or is not blank).
