Controlling Form Fields with Visibility Rules
  • 19 Jul 2022
  • 2 Minutes to read
  • Dark
    Light
  This documentation version is deprecated, please click here for the latest version.

Controlling Form Fields with Visibility Rules

  • Dark
    Light

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. 
  2. When the Create Flow dialog appears, select Flow, name the Flow, then select CREATE. 
  3. Select the Done outcome path of the Start step. 
  4. In the Add After dialog, select the Show Form step in the Favorite Steps category. Select ADD. 
  5. With the Show Form step selected, in the Properties panel, select Pick or Create Form. 
  6. Select CREATE under Create New. Name the Form. Select CREATE.
  7. In the Form Designer, add a Check Box (Shipping Address Same As Billing), a Text Box (Address), and a Button (Submit Purchase). 
  8. Select the workspace, then navigate to the Properties panel. Under Form Rules > Visibility Rules, select Add New.
  9. In the Add Visibility Rules dialog, name the Rule, and under Rule select Pick.
  10. In the Pick Entity dialog, navigate to All > System > Designers > Catalog > System Defaults > Default Form Validation Rules choose Value is True, select PICK.
  11. In the Add Visibility Rules dialog, select Update Inputs
  12. Within the Rule Inputs box, choose the input and select Edit [pencil shaped icon].
  13. In the Edit Rule Inputs dialog, from the Input Type drop down list, select Form Component
  14. 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. Click OK.
  15. In the Edit Visibility Rules dialog, in the Behavior drop down list, select Hide/Show
  16. Change the Evaluation to Hide if rule Evaluates as TRUE.
  17. Under Triggers, select "Shipping Address Same as Billing [CheckBox] : Value Changed".
  18. Finally, under Apply to Controls, select the control to hide, "Address [TextBox]". Click OK.
  19. Save and close the Form Designer.

Debug: Hide/Show

  1. In the Flow Designer, connect the Show Form step to the End step. 
  2. Set all Form inputs to an Ignore input mapping.
  3. Select Debug in the top action panel. 
  4. In the Debugger, set the boolean 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 Picker (DoB) and a Label (Date of Birth).
  2. In the Properties panel, under Form Rules > Visibility Rules, select Add New.
  3. In the Add Visibility Rules dialog, name the Rule, and under Rule select Create.
  4. In the Create New Rule dialog, name the Rule and click CREATE.
  5. In the Rule Designer, select SETUP INPUT DATA.
  6. In the Data Definitions dialog, Name the input "DoB" and set the Type to Date Time. Click CLOSE.
  7. 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. 
  8. Save and close the Rule Designer.
    To learn more about building rules, navigate to the Create a Rule article.
  9. Back in the Add Visibility Rules dialog, select Update Inputs
  10. Within the Rule Inputs box, choose the input and select Edit [pencil shaped icon].
  11. In the Edit Rule Inputs dialog, from the Input Type drop down list, select Form Component
  12. 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. Click OK.
  13. Back in the Edit Visibility Rules dialog, in the Behavior drop down list, select Enable/Disable
  14. Change the Evaluation to Disable if rule Evaluates as TRUE.
  15. Under Triggers, select DateTime Picker: Value Changed.
  16. Finally, under Apply to Controls, select the control to disable: Button. Select OK.
  17. Save and close the Form Designer.

Debug: Disable/Enable

  1. In the Flow Designer, set the new input to an Ignore input mapping.
  2. Select Debug from the top action panel. 
  3. Select START DEBUGGING.
  4. Set the DoB Date Picker to be older than 21 years and younger than 21 years to disable/enable the Submit Purchase Button.

Was this article helpful?