Flow Data Input Into Form

Last Updated: 08/06/2018 Introduced in Version: 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.

 

We select the [End Step] and Connect our Start Step and End Step.

 

 

Next, we select Start Step and using Step Information dialog 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 CLOSE to save and close this window.

 

Next, we select our End Step on the work space and click Show Editor link in the Step Information dialog 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 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.

 

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 Quick Add Step dialog 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 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.

 

Next, we add Radio Button List component from Data category in the Form Controls panel.

 

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

 

 

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

 

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.

 

 

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

 

 

We can observe that the result is as we designed. The URL that we chose opens in the new Window.

2016-12-26_100913

Additional Resources