Using Dynamic Form

Last Updated: 06/07/2018 Introduced in Version: 2.0

This tutorial demonstrates how to use Flow Data input to the Form in order to make the Form dynamic.

 

Example:

In this example we will create a simple Flow with a Form in it. On the Form we will have a Text Box for user to input a ZIP code. After user inputs desirable ZIP code, the Form dynamically updates with City and State.

First, we need to create a Flow that will search for the City and State information according to the given ZIP. We begin in the Designer Folder with clicking Create Flow from the Folder Actions Panel.

Next, we Name the Flow and click Create to proceed to the Flow Designer.

 

 

In the Flow Designer we select Start Step. Then, in the Step Information window we click Add New link to define Flow Input Data.

 

 

In the resulting window we define a Name for our Input, String Type, and check Can Be Null checkbox. Then, we click Ok to save and continue.

 

 

 

First, we add a Create Data step, located in our Favorite Steps category.

 

 

 

We select the Show Editor link under the Data Definitions property.

 

 

We name our definition and Pick our Type.  In this example, our type will be FileData.

 

 

 

We select our Input as a Constant  Mapping Type and Choose our file.

 

 

For the next step, we expand Integration > All Integrations > Excel and Csv category and add a For Each Excel Or CSV Row step. This step will iterate through our database (which is in csv format for this example).

 

 

On the Next Row outcome from the For Each Excel Or CSV Row step we add a [Pick Or Create Rule] step from the Flows, Rules, Forms and Reports > Rules category.

 

 

We Name the Rule and click Create to proceed to the Rule Designer.

 

 

In the Rule Designer in the Start Rule window we click Show Editor link to add inputs to our Rule.

 

 

In the resulting Add Rule Input Data window we Name our Input, define its Type String, and click Ok to save and close this window.

 

 

In the same manner we add second input to our Rule. The purpose of this Rule is to compare user input ZIP with a ZIP in the current record in the database. We click Add New Rule Step button to start building the Rule Phrase.

In the Phrase Builder we pick Zip input and click Next.

 

 

In the Verb definition for the Rule Phrase we pick the Is verb. Click Next to continue.

 

 

Finally, we use Select Value [From Flow] Mapping Type, and with Path picker we select our second CurrentZip input.

 

 

This completes our Rule Design. We can save the Rule and close Rule Designer to return back to the Flow Design.

Back in the Flow Designer, on the True outcome from the Rule we add Create Data step from Favorite Steps category in the Quick Add Step dialog.

 

 

In the Create Data Step we define two String variables: City and State. Then, click CLOSE to continue…

 

 

We connect the remaining outcomes from steps in our Flow as following…

 

 

Then, we select For Each Excel Or CSV Row step… Using Step Information Window we define Input File Type as Csv. For File Input we choose Select Value [From Flow] as the Type and the CSV output from the Create Data step as our Path.

 

 

Next, we select our Rule, and choose Edit Input Mapping from step’s Options.

 

 

In the Mapping Editor we connect Zip Flow Input (which will be user’s input) to the first input in the Rule. Then, we use Text Value from the First Field in the Current data row for the second input in the Rule (note that in our csv file for this example ZIP code is in the first column). Click Ok to save and close Mapping Editor.

 

 

Next, we call Mapping Editor for the Create Data Step. Here, we use City and State columns from the Current Row to populate Data Variables in the Create Data Step. Click Ok to close Mapping Editor.

 

 

Finally, we select End Step in our Flow. Then, we Add New output for our Flow.

 

 

In the resulting pop-up window we use map two outputs: City (String) and State (String) as follows.

 

 

Under the inputs section we map each value as a Select Value [From Flow] Type and Pick the path from the flow as follows: City for City and State for State.

 

This completes our Flow Design. This Flow takes in a Zip code and outputs City and State. We can close the Flow Designer.

Now, we can create a simple Flow with a Dynamic Form. We click Create Flow, Name the Flow and click Create to proceed to the Flow Designer.

 

 

In the Flow Designer we add Show Form step from Favorite Steps category.

Next, we Name the Form and click Create to proceed to the Form Designer.

 

 

Our Form should have a Button for the outcome, a Text Box for user input and Labels for informational purposes…

 

 

Then, we navigate to the Form Configurations > Form Data, locate Data Flows box, and click Add New link.

 

 

In the resulting Add Data Flows window we Name our Flow. Next, we pick the Flow that we have created previously in this tutorial to Get City and State by Zip. In the Flow Inputs we select Zip and click Edit.

 

 

In the resulting window we select Form Component as an Input Type. From Form Data Name we select ZipInput (which is a Data Name for the Text Box on our Form). Save and close this pop-up window.

 

 

Finally, in Triggers section in the Add Data Flows window we select desirable events that will cause this Flow to run. In this case we check ZipInput [Textbox]: Exit, so when the user finishes inputting ZIP code and moves insertion pointer out of the Textbox, the Form will update with City and State. Click Ok to close this window.

 

 

Lastly, we need to add couple more Labels that will reflect Flow outputs. To accomplish this we check Text from Data Name checkbox in Label’s configurations, and click pick from data link.

 

 

In the resulting pop-up window we should be able to pick data from our Flow outputs. This finishes our Form Design. We can save and close Form Designer.

 

 

Back in the Flow Designer we simply connect Continue outcome from our Form to the End Step. Then, we click Debug Flow link on the top panel of the Flow Designer to test our Flow.

 

 

Our Form opens, and when we enter desirable ZIP code into the Textbox, the Form displays City and State

 

2016-12-30_134016

 

If we change ZIP code, Form updates with City and State

 

2016-12-30_134109

 

 

If we click Continue, the Flow runs to the End Step with no errors.

 

2016-12-30_134149

Additional Resources