Conditional components

To make your forms dynamic, you can use the Conditional tab of a form component. There you can apply conditions, that show up at runtime. You can apply two types of conditions:

• Simple conditions
• Advanced conditions

Simple conditions

This tutorial demonstrates how to create simple conditions on a form component.

1. Open your Form file in Studio, and add components into your form.
   For this example, add the following components:

   • Two Checkbox.
   • A single Number.
   • A single Text Field.
2. Navigate to the Conditional tab of the Text Field component and go to the Simple section.
   1. This component should Display - choose True from the dropdown list. This creates the condition under which the Text Field component displays. If you want to hide the component, choose False
   2. When the form component - choose the Number component from the dropdown list.
   3. Has the value - type in the value of the Number component that conditions the Text Field to display.
   
   

   

   
   
3. Save the component.

To see how the simple condition behaves, watch the video below:

Advanced conditions

This tutorial shows how to create advanced conditions on a form component.

Important: Advanced Conditions override Simple conditions.

1. Open your Form file in Studio, and add components into your form. You can use the same form file that you used for trying out Simple conditions.
   For this example, add the following components:

   • Two Checkbox.
   • One Number.
   • A single Text Field.
2. Navigate to the Conditional tab of the Number component.
3. Click Advanced conditions and go to the JavaScript section.
4. If you want to show the condition at runtime, start your condition with the show boolean variable. Use the data variable and the Property Name to access the data in other form components.

   For this example, to display the Number component, you can type the following script:

   show = (data.checkbox1 === true && data.checkbox === true)

   
   

   

   
   

If you want to hide a component under a condition, put an exclamation point ! after the equal = sign and before the condition.

To see how the advanced condition behaves, watch the video below: