Conditional Components

The Conditional tab in the Form Designer allows you to place conditions on components in your form, in order to hide or display them.

The Conditional tab has two sections:

• Simple
• Advanced Conditions

Simple conditions

The Simple section of the Conditional tab allows you to hide or display a component, based on the value of another component.

The Simple section consists of three fields:

1. This component should Display - from this dropdown list, choose:

   • True if you want to condition when the component displays.
   • False if you want to condition when the component hides.
2. When the form component - from this dropdown list, choose a component in the form to act as a condition.

3. Has the value - type in the value that conditions the component when to display or hide.

   
   

   

   
   

Advanced conditions

The Advanced Conditions section allows you to use JavaScript code to make combinations of conditions.

Advanced Logic overrides the results of the Simple conditional logic.

In the JavaScript code section, enter a custom JavaScript code.

The show variable must be given a true or false value. The data variable is used to access other components in the form, through the API key.

Tutorial

Simple conditions

To configure a simple condition logic:

1. Open the Form Designer in the Create Form activity.

2. Drag and drop components into your form. For this example, drag and drop the following:

   1. Two Checkbox components 2.2. One Number component 2.3. One Text Field component.

      Pay attention to the field keys of each component. You need them to create your conditional logic.
3. 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 3.2. When the form component - choose the Number component from the dropdown list.
   2. Has the value - type in the value of the Number component that conditions the Text Field to display. 4. Save the component.

Advanced conditions

To configure an advanced condition logic:

1. Open the Form Designer in the Create Form activity.

2. Drag and drop components into your form. For this example, drag and drop the following:

   1. Two Checkbox components 2.2. One Number component 2.3. One Text Field component.

      Pay attention to the field keys of each component. You need them to create your conditional logic.
3. Navigate to the Conditional tab of the Number component.
4. Click Advanced Conditions and go to the JavaScript section.
5. If you want to create a condition, use the show variable and assign a condition to it using the equal = sign. Use the data.field_key_component variable to access the data in other form components.

   For this example, to display the Number component, you can type in this 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.

6. For this example, to hide the Number component, you can type in this script:

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

7. 7. Save the component.

Sample workflow

To check the complete workflow or to have a future reference, download the XAML example