Flow Data Input Into Form
  • Updated on 15 Dec 2014
  • 4 minutes to read
  • Print
  • Dark
    Light

Flow Data Input Into Form

  • Print
  • Dark
    Light

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 clickingCreate Flow button from Folder Actions panel.
2018-01-04_091540-1024x602.png

Next, we name this Flow and click Create to proceed to the Flow Designer.
2018-01-04_091811.png

We select the [End Step] and Connect our Start Step and End Step .
2018-01-04_091946.png

Next, we select Start Step and using Step Information dialog we click Add New link to add new Flow Input Data.
2018-01-04_092104.png

In the resulting popup window we define name for our Flow Input Data as InputString . Then, we can click CLOSE to save and close this window.
2018-01-04_092208.png

Next, we select our End Step on the work space and click Show Editor link in theStep Information dialog to add new Output Data.
2018-01-04_092307.png

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.
2018-01-04_092449.png

Next, using Step Information dialog 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.
2018-01-04_092550.png

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 aNew Flow.

We name it and click Create to proceed to the Flow Designer.
2018-01-04_092739.png

In theFlow Designer we expand Flows, Rules, Forms and Reports > Forms[Interaction] category in the Quick Add Step dialog and add [Pick or Create Form] component to our Flow .
2018-01-04_093120-1024x701.png

In the resulting window we click Pick Or Create Form link to start creating our Form .

2018-01-04_093349-1024x701.png

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

2018-01-04_093523-1024x593.png

In the Form Designer we drag a Button component from Actions category in the Form Controls panel to the work space. 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 > URL category in the Form Controls panel to our work space.
2018-01-04_093718-1024x522.png

Next, we add Radio Button List component from Data category in the Form Controls panel.
2018-01-04_093904-1024x522.png

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 .
2018-01-04_094452.png

Next, we select Open URL Button on our work space and navigate to its Properties . In the Properties Panel there are multiple properties that need configured with the Open URL component:
Text : What the button/link will say

URL : Static URL

URL from Data Name : URL passed in from flow.

Is Relative to base : URL depends on base URL. Example: localhost or google.com are base URLs. Designer doesn't need to pass in the base URL if this is checked. 
In this example we use URL From Data Name . In the Data Name text box we type Flow: OutputString which is the name of the Outcome from our Helper Flow.

2018-01-04_094611.png

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.

2018-01-04_094649.png

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.

2018-01-04_094800.png

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.
2018-01-04_094830.png

In the resulting popup window we select Form Component option from InputType drop down.
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.
2018-01-04_094907.png

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.

2018-01-04_095114.png

Our Form opens in the Debugger and we can check Radio Button in the list and click Open URL Button control.
2016-12-26_100947.png

We can observe that the result is as we designed. The URL that we chose opens in the new Window.
2016-12-26_100913.png

Was this article helpful?