Form Components Visibility Using Flow Data

Overview

A Form control's visibility may be toggled based on Flow data. This is a useful feature for creating simple and well-designed Forms, for example, hiding information on a Form that isn't relevant to a given user. Configure a Form control's visibility by clicking on it and setting its visibility properties in the Properties tab on the right side of the Form Designer.

Example

In this example, create a Flow with two forms. On the first Form, the user will decide whether or not to display information on the following Form.

1. In a Designer Folder, create a Flow. This will automatically open the Flow Designer. 
2. Select the Done outcome path of the Start step.
3. 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
5. Select CREATE under Create New. Choose Form. Name the Form. Select CREATE.
6. This Form has a Text Box (Email), a CheckBox (ShowEmail), and a Button (Submit).
   The CheckBox control outputs a Boolean data type, which can be used for Form Component Visibility on the next Form.
7. Save and close Form Designer.
   
   
   
8. Back in the Flow Designer, select the Submit outcome path of the Show Form step.
9. In the Add After dialog, select the Show Form step in the Favorite Steps category. Select ADD.
10. With the Show Form step selected, in the Properties panel, select PICK OR CREATE FORM.
11. Select CREATE under Create New. Name the Form. Select CREATE.
    
12. This Form has a Label (Email) and two Buttons (Done, Go Back).
13. Navigate to the Data panel on the left side, drag and drop Email onto the Form, set Email to be a Label of Data Value.
14. In the Email label's Properties panel, expand Behavior. 
15. Change the Initially Visible Source to From Flow Data.
16. Change the Initially Visible Data to "Label Visibility".
17. Save and close the Form Designer.
    
    
    
18. Back in the Flow Designer, connect the Done outcome path of the second Show Form step to the End step; connect the Go Back step to the first Show Form step. 
19. Select the second Show Form step. In the Properties panel, under Inputs, select EDIT under Label Visibility.
20. In the Pick Data For Input dialog, choose Show Email, select DONE.
    

Debug

1. In the Flow Designer, select Debug in the top action panel.
2. The first Form in the Flow will display. Fill in the Text Box with an Email, set the checkbox to true, and select Submit to continue to the next Form. The second Form opens and the labels are visible. 
3. Select the Go Back button.
4. The first Form opens again. Set the checkbox to false. Then select Submit, the second Form in the Flow opens, and the labels are not visible. 
5. Select Done to finish the Flow.