Dynamic Forms: Conditional Logic

Conditional Logic lets you configure a form to show or hide items depending on a user's selections. You can easily show or hide fields, change a field name, or send a specific response based on a user's response.

Simple condition

Any form component can use conditional logic to determine when to hide or display itself. 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 condition

In addition to Simple Conditional logic, you can also use Advanced Conditional logic, which uses actual JavaScript for any combination of conditions.

JavaScript conditional logic requires you to set the value of show to either true or false. Advanced Conditional logic will only work, if Simple Conditional logic isn’t already defined. Keep in mind that you need to refer to the External Field ID of a Podio field. 

Below we show you have can write conditional logic in Javascript for category fields (single and multi), text and number fields.

Single Category fields

show = data["single-category"] == 1

Multi Category fields

show = data["multi-category"][1] == true  

Text & Number fields

show = data["external-field-id"] == "value"

Single Relationship fields

Conditional logic for relationship fields can be done both on the podio id or title of the related item.

show = (data["external-field-id"]||{})['podio_id'] === 1003993969

show = (data["external-field-id"]||{})['title'] === 'description'

Multi Relationship fields

The form component will be shown it if at least on selected item matches the condition in the for statement.

var array = data['external-field-id']||[];
show = false;
for (var index = 0; index < array.length; index++) {
     show = (array[index]||{})['podio_id'] === 1003993969



JavaScript also allows you add more complex conditional logic. Below are a few examples to make you familiar with the possibilities of advanced conditions.

Single condition

show = data["text-field"] == "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["category-field-2"][1] == true || data["category-field-2"][2] == true

The condition above will show the form component if the 1st OR 2nd option of the category field with external ID "category-field-2" -field-1"  is selected.

AND condition

show = data["text-field-1"] == "yes" && data["category-field-1"][2] == true

The condition above will show the form component if the field with external ID "text-field-1" has input value "yes" AND if the 2nd option for field with external ID "category-field-1" is selected.

Exclude condition

show = data["single-category"] != 1

The condition above will show the form component if the field with external ID "single-category" has an input value different from the 1st label.