Showing and Hiding Fields (Visibility)

Modified on Thu, 15 Oct 2020 at 01:29 AM

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.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article