Form Components Visibility Using Flow Data

Last Updated: 05/03/2018 Introduced in Version: 2.0

Overview

You can set form controls to be visible or invisible based on Flow data. This is a very useful feature for creating simple and well designed forms, for example hiding information on a form that isn’t relevant to a given user.

You can 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 Forms Designer.

Example

In this example we will create a Flow with two forms. On the first form the user will be able to decide if he or she wants to display an input on the next form.

In the Decisions Studio, we begin by creating a new form. For more information on creating a form, see Creating Your First Form. 

This Form is designed as follows. It has a Text Box where the user can input his or her Email Address, and it has a Check Box that represents the user’s decision about displaying their Email Address on the next Form. The Check Box component outputs a Boolean data type which can be used for Form Component Visibility on the next Form. When finished designing this Form, we can save it and close Form Designer.

Back in the Flow Designer we add another Form using Show Form component from the Favorite Steps category.

Next we name our second Form and click Create.

First, we add two buttons on the Form. One button will close the Form and terminate the Flow Execution and the other button will navigate to the previous Form. Then we add a Label component from the Data category in the Tool Box.

 

We want the visibility of this label to be controlled from the Flow. Therefore, we locate label’s configurations and in the Behavior section we change the Initially Visible Source from Constant Value to From Flow Data.

Next in the Initially Visible Data we type in a variable that will be used to control this label’s visibility.

Then, we need to add a Label that will display user’s input from the previous Form. In order for the Label to expose the data from our previous Form, we have to alter it’s properties. Under Common Properties, click the checkbox Text from Data Name. In this example we want to display input from the previous form. The variable that we are looking for is called Email Address. In the Data Name box we can type in Email Address. We also need to set the visibility rule for this label. Under Behavior > Initially Visible Source drop down, select From Flow Data. 

Back in the Flow Designer we connect steps in our Flow as pictured below. Next, we select our second Form step on the workspace and the Edit Step window displays. We select Edit Input Mappings to access the Mapping Editor

In the Mapping Editor we connect the output from the Check Box in the first form to the Label Behavior/Visibility controls on the second form. Click Ok to save and close the Mapping Editor.

This completes our Flow. To test it we can click Debug Flow link on the top panel of the Flow Designer.

The first form in our workflow opens in the DebuggerWe fill in the Text Box with our Email Address, leave the check box unchecked, and click Done to continue to the next Form.

The second form in our workflow opens and our labels are not visible. This verifies that are forms have been configured correctly. Now we click the Back button to go back to the first form.

The first form opens again. This time we fill in our Email Address and check the check box. Then we click Done to observe the results of the second form.

The second forms opens and our labels are visible this time as we designed it. 

 

We click Done to terminate the Flow execution.

 

Additional Resources