Using Flow Data In FormLast Updated: 07/25/2016 Introduced in Verision: 2.0 |
To add dynamic to the Form behavior Form Designer can use Data From Different Flow in the Portal. For instance, in this way Form control (like textbox) can trigger a Flow and serve as an input to this Flow. The outcome from the Flow can serve to populate another Form control with some data.
Example:
In this example we are going to create a Form where the user will be able to input some text into the textbox and reversed text will appear underneath the textbox.
First, we need to create a Flow that will be used in our Form. We begin in the Designer Folder with pressing Create Flow button on the Folder Actions Panel.
In the resulting window we Name the Flow and click Create to proceed to the Flow Designer.
Our Flow should have an Input (text that user will type in the textbox on the Form) and Output (reversed user’s input). We select Start step on the workspace and click Add New link to add an Input to our Flow.
We Name our UserInput, define its type String, and check Can Be Null checkbox. Click Ok to save and close Flow Input Data definition window.
Next, we click Add Step in the Step Information Layer.
It is a good practice of Flow building to create all custom Data first. We add the Create Data step from Favorite Steps category.
We define this Data as an Array of Integers. Click Ok when finished.
This array will hold positions of each character in the String that we are reversing. Click Add to continue,
Next, we add another Create Data step from Favorite Steps category to our Flow.
We define this data as an Array of Strings. Check Can Be Null checkbox and click Ok to close this pop-up window.
This Create Data step will hold an Array of characters from user’s input in reversed order. Click Add to save and continue.
Next, we add Get String Length step from All Steps [Catalog] > Data > Text category.
We select this Step on the workspace and Step Information Layer pops up. For the input configuration of this step we use Select Value Mapping Type and using Path picker choose UserInput string. Click Add Step to continue.
Then, we add ForLoop Step from the All Steps [Catalog] > Flow Management category.
For No of Iterations input to this step we Select Value of the GetStringLength_Output. Mention, that we Renamed Outcome from this step to Position. With this ForLoop Step we are going to populate our Positions array of integers.
On the Next outcome from the ForLoop step we add Add Item To List step from the All Steps [Catalog] > Data > List category.
We select Add Item To List step on the workspace, define List Type Int32, and click Show Mapping Editor.
In the Mapping Editor in the Inputs section on the left-hand side we use Position (outcome from the ForLoop step) as a New Item to add to the list, and Positions (array of integers we have defined previously in Create Data step) as an Original List input. Note: On the right-hand side in the Outputs section we Change Value of the Positions array of integers. Click Ok to save and close Mapping Editor.
We connect Done outcome from the Add Item To List step back to the ForLoop Step.
Because we do not need to split our String at position ‘0’, we need to remove ‘0’ from the Positions array. On the Done outcome from the Forloop Step we add Remove Item by Index step from the All Steps [Catalog] > Data > List category.
We define Remove Item by Index step in the following manner: set List Type to Int32, Item Index – Constant ‘0’, List – select Positions. With New List output we are Changing Value of the Positions array. Click Add Step when finished.
Next, we are going to use our Positions to split our String into array of characters. We add Split String by Character Positions step from the All Steps [Catalog] > Data > Text category.
We configure this step as following: Ignore failIfPOsitionNotFoung input, select Positions array for positions, and UserInput string for source. Then click Add Step to continue.
We have created an array of characters from the UserInput. Now, we will reverse the order of these characters and put them in another array that we have defined in the beginning of this Flow. We add another ForLoop Step from the All Steps [Catalog] > Flow Management category.
To configure this ForLoop Step we use String Length as No of Iterations input and Rename output to Index.
To find the Character that should be placed into the Reversed Array on current iteration we need to subtract the number of current iteration from the total number of items in the Positions array. We add Subtract step from the All Steps [Catalog] > Data > Numbers category on the Next outcome from the ForLoop Step.
To configure the Subtract step we use Show Mapping Editor option.
In the Mapping Editor we connect Index field to the subtractValue field. Then, we expand Positions field and connect its Count field to the fromValue field. Click Ok to save and close Mapping Editor.
With previous step we have index of the Character that we need to find. Next, we add Get Item by Index step from All Steps [Catalog] > Data > List category.
To configure this step, we use Subtract_Output as Index and SplitStringByCharacterPositions_Output as List. Then, click Add Step to continue.
Next, we are going to add this Character to the Reversed List of Characters. We add Add Item to List step from the All Steps [Catalog] > Data List category.
We connect Done outcome from this step back to the ForLoop Step and click Show Mapping editor to configure inputs to this step.
In the Mapping Editor we connect List Item to the New Item and StringsWitheversedPositions to the Original List. On the right-hand side of the Mapping Editor we Change Value of the StringsWitheversedPositions array. Click Ok to save and close Mapping Editor.
Back in the Flow Designer we connect Done outcome from the ForLoop Step to the End step in our Flow. Then, we click Add New link to add an Output to our Flow.
We define our Output as String and check Can Be Null checkbox. Click Ok to save and close this pop-up window.
Next, we click Show Mapping Editor to configure data for our Output.
To connect our array of Strings in Reversed Order to the String output we use Merge String List To Single String converter Flow.
Then, we connect StringsWithReversedPositions to the List Of Strings input into Converter Flow and Ignore Separating Character. Click Ok to close Mapping Editor.
This completes our helper Flow. We can save and close Flow Designer.
We can create Main Flow with the Form now. In the Designer Folder we click Create Flow from the Folder Actions Panel.
In the resulting window we Name the Flow and click Create to proceed to the Flow Designer.
In the Flow Designer we add Show Form step from the Favorite Steps category.
Next, we Name the Form and click Create to proceed to the Form Designer.
For our Form design we drag Label for title, TextBox for user input, Label for reversed display, and Button for Form outcome. Then we locate Form Configurations and click Add New under Form Rules > Data Flows.
In the resulting pop-up window we Name the Flow and using Flow picker select the Flow that we have created previously in this tutorial.
After we picked the Flow we should be able to see Flow Inputs and Outputs. We click Edit to configure Flow Input.
In the resulting window we use the From Form Component option for the Input Type and UserInput textbox variable name for the FormDataName. Click Ok to save and close this window.
If we click Edit for Output…
…we should be able to see our Flow’s output and Name that we can use to populate Form control with this Data. Click Ok to close.
Finally, we pick a desirable Trigger for our Flow. In this case we pick a Trigger on Value Changed in the Textbox. Click Ok to save and close this window.
Next, we select Label control for our reversed display and configure it in the following manner: check Text from Data Name checkbox, click pick Form Data and select our Flow Output.
This completes our Form design. We can save the Form and close Form Designer.
Back in the Flow Designer we connect the outcome from the Form Step to the End Step. Our Form Step does not require any configurations. We click Debug Flow from the top pane 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 this process.
Our Form opens in the Debugger. As we type in the Textbox, a reversed version of our input appears underneath of the textbox.
