Showing and Hiding Fields (Visibility)

Showing and Hiding Fields (Visibility)

There are many situations where you may want to show/hide fields (or even whole pages) based on the answer to a previous question. For example, say we have a Choices field that asks "Do you see any hazards?", with the options of Yes or No. Now if the user answers Yes, then we may want to show another field that let them fill in details about the hazard. However, if they answer No, we don't want to clutter the form with unnecessary fields.

To enable the above scenario, we will use the Visibility property found on most Form fields in the Form designer. Let's assume your Form design currently has the "Do you have any hazards?" field with a Data Name of "seeHazards." Also assume that the seeHazards field has the values "Yes" and "No" as available option answers.

  1. Add a new Text field to your Form design under the seeHazards field.
  2. Give the new field a Data Name such as "hazardsDescription."
  3. Find the Visibility property on the new field.  It's located near the bottom of the properties list, in the Advanced section.
  4. Now we need to create a formula that will give a True or False result. When the formula result is True, the field will be shown in the app. When the result is False, the field will be hidden.

Enter the following formula into the Visibility property:

{{seeHazards}} = 'Yes'

What the above means is that when the seeHazards field is answered with a value of Yes, then the app should show the hazardsDescription field. Save your Form and Test it on your device to see the show/hide functionality in action.

If you would like to see an example of how the visibility rules work download the csv file from below.

Then create a new Form and when you are in the Form designer, use the "Import" button to import the CSV file. Make sure to click on Save and add yourself to the Manage Test button so you can test it out in the app.



    • Related Articles

    • Controlling Field Visibility with Logic

      A great form feels like a conversation, not an interrogation. By controlling field visibility, you can create “branching” experiences that hide irrelevant questions and only show fields when they are actually needed. This keeps your forms clean, ...

    • Hiding Content in Custom Templates

      Sometimes, you’d like to show or hide sections of your data template based on the outcome of each Form entry’s answers. For example, you may have an optional section in your Form that is not displayed or filled out, depending on what the app user ...

    • Controlling Required Fields

      The standard Required and Read Only option on the Form designer lets you define fields that are always required or read only respectively. However sometimes you need to make a field required or read only based on the answer(s) to a previous field. ...

    • Conditionally Required Fields (Required Condition)

      The standard Required and Read Only option on the Form designer lets you define fields that are always required or read-only respectively. However, sometimes you need to make a field required or read only based on the answer(s) to a previous field. ...

    • Making fields in a repeating table required

      The following workaround can be used to enforce that a field within a repeating table be required for the user to complete, even if the table is not required. Add a hidden field inside the table field {{tally}} with the following Dynamic Value, with ...