Controlling Form Fields with Visibility Rules

Overview

On a Form, users are able to use Visibility Rules to control if a Form control is displayed to the user based on end-user input.

Example

1. In a Designer Project, click CREATE FLOW to create a new Flow.  
2. Attach a Show Form step to the Start step and click PICK OR CREATE FORM to create a new Form.
   
3. In the Form Designer, configure the Form with a Check Box (Shipping Address Same As Billing), a Text Box (Address), Date Time Picker (DoB), and a Button (Submit Purchase) control. 
4. Select the workspace. On the Properties panel, under Form Rules > Legacy > Visibility Rules, select ADD.
   
5. In the Add Visibility Rules dialog window, name the Rule, select PICK OR CREATE RULE, and select PICK. Navigate to All > System > Designers > Catalog > System Defaults > Default Form Validation Rule, select Value is True, and click PICK.
   
6. Click UPDATE INPUTS. Under the Rule Inputs field, click the pencil icon.
   
7. In the Edit Rule Inputs dialog window, select Form Component for the Input Type field. This will indicate which field on the Form the visibility rule will be triggered by. Select Shipping Address Same As Billing from the Form Data Name dropdown list. Click OK.
   
8. Under the BEHAVIOR category, select Hide / Show for the Behavior setting. Change the Evaluation field to Hide if rule Evaluates as TRUE. Under the Triggers field, select the Shipping Address Same as Billing [CheckBox] : Value Changed option. Under the Apply to Controls field, select Address [TextBox].
9. Click OK.
   
10. Under FORM RULES > Legacy > Visibility Rules, click ADD. 
11. Name the Rule, click PICK OR CREATE RULE, and click CREATE. Select Form Rule [Validation/Visibility], name the Rule, and click CREATE.
12. Select SETUP INPUT DATA.
    
13. In the Input Data window, enter "DoB" under NAME and change the TYPE to Date Time. Click Save and close the window.
    
14. Configure the Rule to read "If DoB is After 7665 Days (In Past)" (for this example, it is assumed that 21 years = 7,665 days). Click Save and close the Rule Designer.
    
15. On the Add Visibility Rules window, click UPDATE INPUTS and select the pencil icon.
16. In the Edit Rule Inputs window, select Form Component for the Input Type field and select DoB for the Form Input Name field. Click OK.
    
17. Under the Behavior field select Enable / Disable. Change the Evaluation field to Disable if rule Evaluates as TRUE. Under Triggers, select DoB [DateTimePicker] : Value Changed. Under Apply to Controls, select Submit Purchase [Button].
18. Click OK. Click Save and close the Form Designer.
19. Connect the Submit Purchase path to the End step. Click Save to save changes to the Flow.

Debug

1. On the top action bar, click Debug. 
2. Select START DEBUGGING.
3. Set the Date Picker to be older than 21 years and younger than 21 years to disable/enable the Submit Purchase button. Click the Shipping Address Same as Billing checkbox to hide the text box field.