Set conditional display logic in Form Builder

Use the Form Builder to set conditional display logic for components in a Skedulo Plus mobile form.

Overview

Conditional display logic allows you to show or hide components in a Skedulo Plus mobile form based on the values of other components. This feature is useful for creating dynamic forms that adapt to the user’s input.

Understand conditional logic in Form Builder

Conditional logic in mobile forms helps tailor the user experience by showing only the relevant components based on the information provided. Here’s how it works:

  • When to show: Components appear based on certain conditions. For instance, if a user selects Yes for a certain question, another question might appear.

  • Setting conditions: You can set conditions like Is True or Is False to control when components show up. For example, a text field asking for additional information might only appear if the user selects Other from a Drop down menu.

  • Combining conditions: You can also combine conditions using Or and And. If you want a component to show when either of two conditions are met, you’d use Or. If it should only show when both conditions are true, you’d use And.

  • Drop down selection: Finally, you can make components appear based on drop-down selections. For instance, if a user selects Priority from a drop-down, another field might appear to specify the priority level.

Tutorial: Add conditional display logic to a form

To set conditional display logic for a component, you must add the Toggle and/or Drop down components to the form. Then you can set the visibility of other components based on the value of these components.

The following procedure adds the Toggle component to the form so that we can use both Toggle and Drop down components to practice setting conditional display logic.

Add a Toggle component to the form

  1. Open the form in the Form Builder.

    This form already includes a Drop down component called Product.

  2. Click Add new component.

  3. Click the Toggle component.

  4. Configure the Toggle component:

    • Title: Toggle component
    • Click Save.

Set conditional display logic for the form components

Set the conditional display logic for the Product Drop down component:

  1. Open the Product Drop down component.

  2. Check the Enable logic checkbox.

  3. In the logic editor, select Toggle condition from the drop-down list to set a condition that will display the Product Drop down component "when the Toggle condition is true":

    Set conditional display logic for the Product Drop down component

  4. Click Save.

Set the conditional display logic for the Customer Name Text input component:

  1. Open the Customer Name Text input component.

  2. Check the Enable logic checkbox.

  3. In the logic editor, select Product from the drop-down list to set a condition that will display the Customer Name Text input component "when the Product is Product A".

  4. Add another condition by clicking the Add new drop-down list and selecting or.

    Set conditional display logic for the Customer Name Text input component

  5. Select Product from the drop-down list to set a condition that will display the Customer Name Text input component "when the Product is Product B".

  6. Add another condition that will display the Customer Name Text input component "when the Product is Product C".

    Set conditional display logic for the Customer Name Text input component

    The Customer Name Text input component will now only display if one of the products listed in the conditional logic is selected by the user from the Product Drop down component.

  7. Click Save.