Try It Yourself: Make a Field Visible Based on a Rule

This video will teach you how to hide and show fields on-demand using Dependencies.

Try it Yourself

First, we'll add a checkbox field to the form.

1. Right-click in the Form Outline panel, then choose Insert New Form Element > CheckBox.
    
2. In the Properties panel, change the value for the Field Name property to 'Attend Meet & Greet?'
    
3. Find the Field Values property, then click the  'edit values' icon.
   • The Field Options dialog opens to let you edit the checkbox options.
      
4. In the first row, enter 'Yes' for the Data Value and for the Display Value.
   • Press the <Tab> key to move between cells.
      
5. Click the Save button to close the Field Values window.
    

Next, we're going to add an image upload field that will show only when the 'Attend Meet & Greet?' checkbox is selected. This will be our dependent field.

1. Right-click the 'Attend Meet & Greet?' field in the Live Edit Preview panel, then choose Insert New Form Element > File Upload.
    
2. In the Properties panel, change the value for the Field Name property to 'HeadShot.'
    
3. Change the value for the Show Image Preview property to 'true' to display a preview of any uploaded image.
    

Finally, let's add our dependency so this field is only visible when we need it.

1. Select the HeadShot field in the Form Outline panel.
    
2. In the Properties panel, click the  'edit values' icon for the Dependency property to open the Dependency Editor window.
    
3. Click the  Click to Edit Rule button.
   • The Matching Options fields display.
      
4. Use the Matching Options fields to create the condition under which the 'HeadShot' field will display.
   • Choose 'Attend Meet & Greet?' from the left drop down.
   • Choose 'equals' from the center drop down (this is the matching criteria).
   • Choose 'Yes' from the right drop down..\
      
5. Click the Matching Options -  Save button to save the condition and close the Matching Options fields, then click the Dependency Editor -  Save button to close the Dependency Editor window.

Now when we the 'Attend Meet & Greet?' checkbox is selected and unselected, the 'HeadShot' field is shown and hidden on demand according to the rule we created.