Using Dynamic FormLast Updated: 07/15/2016 Introduced in Verision: 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.
Next, we click Add Step button in the Step Information window for the Start Step.
We expand All Steps [Catalog] > Data > List > Excel and Csv category and add 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 [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 Add New 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 expand Equals category and pick Is verb. Click Next to continue.
Finally, we use Select Value 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 Flow Designer Wizard.
In the Create Data Step we define two String variables: City and State. Then, click Add 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 use Constant zipcodes.csv file with data.
Next, we select our Rule, and choose Show Mapping Editor 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 Pick from flow data link to add City output.
In the same manner we add State output to the Flow. 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, locate Data Flows box in the Form Data section, 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 FormDataName we select Zip (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 Textbox 1 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.
Note that in Decisions version 3.5 and above, you’ll need to click Test Flow to access the Debugger.
Our Form opens, and when we enter desirable ZIP code into the Textbox, the Form displays City and State…
If we change ZIP code, Form updates with City and State…
Mention, that user never leaves this Form or this Flow Step…
If we click Continue, the Flow runs to the End Step with no errors.
