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.

Lets 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. OK 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.

To understand more about how to create a formula, see the Creating a Formula help page.

All done!

Save your Form and Test it on your device to see the show/hide functionality in action.

If you'd like to try the above example out for yourself, download the attached CSV file.

Then create a new Form and when you are in the Form designer, use the "Import Fields" button to import the CSV file.

This will import the above example for you to check out :)