Controlling Form Fields with Visibility Rules

Overview

On a Form, Decisions has Visibility Rules to control if a form component is shown/hidden and enabled/disabled depending on what is input by the end-user.

Hide/Show Visibility Rule

1. In a Designer Folder, select the CREATE FLOW button. When the Create Flow dialog appears, select Flow, name the Flow, then select CREATE. 
2. Select the Done outcome path of the Start step. 
3. In the Add After dialog, select the Show Form step in the Favorite Steps category. Select ADD. 
4. With the Show Form step selected, in the Properties panel, select PICK OR CREATE FORM. Select CREATE under Create New. Choose Form. Name the Form. Select CREATE.
   
   
5. In the Form Designer, add a Check Box (Shipping Address Same As Billing), a Text Box (Address), and a Button (Submit Purchase). 
6. Select the workspace, then navigate to the Properties panel. Under Form Rules > Legacy > Visibility Rules, select ADD NEW.
   
   
7. In the Add Visibility Rules dialog, name the Rule and select PICK RULE.
   
   
8. In the Pick or Create Rule dialog, select Pick Existing. Navigate to All > System > Designers > Catalog > System Defaults > Default Form Validation Rules choose Value is True, select PICK.
   
   
   
9. Back in the Add Visibility Rules dialog, select Update Inputs. Within the Rule Inputs box, choose the input and select Edit [pencil shaped icon].
   
   
   
10. In the Edit Rule Inputs dialog, from the Input Type drop-down list, select Form Component. To indicate which field on the Form that the visibility rule will be Triggered By, select "Shiping Address Same As Billing" from the Form Data Name drop-down list.
11. Select Ok.
    
    
    
12. Back in the Edit Visibility Rules dialog, in the Behavior drop-down list, select Hide/Show. 
13. Change the Evaluation to Hide if rule Evaluates as TRUE.
14. Under Triggers, select the "Shipping Address Same as Billing" CheckBox. 
15. Finally, under Apply to Controls, select the control to hide, "Address" [TextBox].
16. Select Ok.
17. Save and close the Form Designer.
    

Debug: Hide/Show

1. In the Flow Designer, select Debug in the top action panel. 
2. Select START DEBUGGING.
3. Set the Check Box to True and False to Show/Hide the Address Text Box.

Disable/Enable Visibility Rule

1. Edit the Form created in the first example. Add a Date Time control (DoB) and a Label (Date of Birth).
2. In the Properties panel, under Form Rules > Legacy > Visibility Rules, select Add New.
   
   
   
3. In the Add Visibility Rules dialog, name the Rule and select PICK RULE.
   
   
   
4. In the Rule Designer, select Setup Input Data.
   
   
   
5. In the Data Definitions dialog, name the input "DoB" and set the Type to DateTime. Select Save, click 'X' to close.
   
   
6. Set the rule to read: If the DoB is After 7665 Days (in Past), then Return True. For this example, it is assumed that 21 years = 7,665 days. Save and close the Rule Designer.
   To learn more about building rules, navigate to the Create a Rule article.
   
   
   
7. Back in the Add Visibility Rules dialog, select Update Inputs. Within the Rule Inputs box, choose the input and select Edit [pencil shaped icon].
   
   
   
8. In the Edit Rule Inputs dialog, from the Input Type drop-down list, select Form Component. To indicate which field on the form that the visibility rule will be triggered by, select "DoB" from the Form Data Name drop-down list.
9. Select Ok.
   
   
   
10. Back in the Edit Visibility Rules dialog, in the Behavior drop-down list, select Enable/Disable. 
11. Change the Evaluation to Disable if rule Evaluates as TRUE.
12. Under Triggers, select DateTime Picker: Value Changed.
13. Finally, under Apply to Controls, select the control to disable: Button.
14. Select Ok.
15. Save and close the Form Designer.
    

Debug: Disable/Enable

1. In the Flow Designer, select Debug in the top action panel. 
2. Select START DEBUGGING.
3. Set the DoB Date Picker to be older than 21 years and younger than 21 years to disable/enable the Submit Purchase Button.