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

    • 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 ...

    • Dynamic Features

      The Form Designer provides advanced functionality such as: Custom Invalid Messages Your own message to display to the App User if the answer to the question is invalid. Conditional Logic (Visibility of Questions) Whether or not a question or group of ...

    • Hiding Rows / Sections of Your Template

      TABLE OF CONTENTS Dynamically Hiding Sections in Templates Dynamically Hiding Rows in Templates Hiding Rows from a Repeating Table There are sometimes situations where you'd like to show or hide sections of your data template based on outcome of each ...

    • Importing Fields from Excel

      When you need to create a big form with many questions, it can be time consuming to build all of these in our Form Designer. In most cases, the form that you are creating already exists as a Word or Excel file that is being printed out. That file ...