Flow Data Input Into FormLast Updated: 07/15/2016 Introduced in Verision: 2.0 |
This tutorial shows how to use Flow Data in the Form.
Example:
In this example we are going to create a Form with a Radio Button List type of URLs and Open URL Button. When user checks Radio Button in the list of URLs its value should be passed into Open URL Button control. When user clicks Open URL Button, new window should be opened using chosen URL from the list. It could be accomplished with the Helper Flow that will accept URL String from the List and serve as an Input to the Open URL Button control on the Form.
First, we need to create Helper Flow.
We begin in the Designer Folder with clicking Create Flow button from Folder Actions panel.
Next, we name this Flow and click Create to proceed to the Flow Designer.
In the Flow Designer using Flow Designer Wizard we expand Steps In This Flow category, select [End Step] and press Connect button to connect our Start Step and End Step.
Next, we select Start Step and using Step Information Wizard we click Add New link to add new Flow Input Data.
In the resulting popup window we define name for our Flow Input Data as InputString. Then, we can click Ok to save and close this window.
Next, we select our End Step on the workspace and click Add New link in the Step Information Wizard to add new Output Data.
In the resulting popup window we name our Output Data and define its type String. Notice, that we should remember the name of this output because we are going to use it in our Form for the Open URL Button control as Input Data Name field.
Next, using Step Information Wizard for our End Step we need to define mapping for our Outcome Data. We define its Mapping Type as Select Value and use Path Picker to map this Value to InputString value in our Flow. This completes our Helper Flow. We can save the Flow and close Flow Designer.
Now, we are ready to create our main Flow with Form in it. In the Designer Folder we click Create Flow button again to create a New Flow.
We name it and click Create to proceed to the Flow Designer.
In the Flow Designer we expand Flows, Rules, Forms and Reports > Forms[Interaction] category in the Flow Designer Wizard and add [Pick or Create Form] component to our Flow.
In the resulting window we click Pick Or Create Form link to start creating our Form.
Next, we name our Form and click Create to proceed to the Form Designer.
In the Form Designer we drag Button component from Actions category in the ToolBox to the workspace. We renamed this Button to Close Form because this Outcome will serve as Close Button for our Form. Additionally we drag Open URL Button from Actions category in the ToolBox to our workspace.
Next, we add Radio Button List component from List category in the ToolBox.
We configure this List as following… Define its Type as String. It is going to be a Static List of three URLs. It will serve for Output Only with Required Outcome Close Form control. Finally, we named Selected Item as SelectedUrl.
Next, we select Open URL Button on our workspace and navigate to its Properties. In the Properties we check URL From Data Name checkbox. In the Data Name textbox we type Flow: OutputString which is the name of the Outcome from our Helper Flow.
Then, we select our Form Container and navigate to the Form Properties. We locate Form Data configuration and click Add New for the Data Flows box.
In the resulting Add Data Flows window we are going to configure our Helper Flow’s Outcome as an Input Data for this Form. First, we name our Flow Input Data in the Flow Name textbox. Then, we use Flow picker to pick our Helper Flow.
Next, in the Flow Inputs box we select InputString input to our Helper Flow and click Edit to provide this variable with the values from our Radio Button List.
In the resulting popup window we select Form Component option from InputType dropdown.
Next in the FormDataName we choose SelectedUrl because this variable will hold the String value of the URL that the user choose. This completes our Form Design. We save and close all windows. We can also save our Form and close Form Designer to return back to the Flow Designer.
In the Flow Designer we connect Close Form outcome from our Form to the End Step in our Flow. This completes our Main Flow Design. We can click Debug Flow link on the top panel of the Flow Designer to test our Main Flow.
Note that in Decisions version 3.5 and above, you will need to click Test Flow rather than Debug Flow.
Our Form opens in the Debugger and we can check Radio Button in the list and click Open URL Button control…
As expected, the URL that we chose opens in the new Window…
We return to our Debugger and choose different URL from the list and click Open URL Button again…
We can observe that the result is as we designed. The URL that we chose opens in the new Window.
