Using Data Flow In a Form

Last Updated: 03/28/2018 Introduced in Version: 2.0

 

Having a Data Flow in a form allows a more personalized user interaction. A field on the form will change based off of what the user inputs. The flow within the form will run and have new data come back and populate on the form. The following example strictly shows the features of Data Flows in a Form and is not intended to simulate a business environment.

Example: Create a Form where the user will input a long date (Month Day, Year) into the Text Box and the Data Flow will convert the long date to a short date format and appear in the Date Picker.

First, we need to create a Flow that will house the Form. We create a new Designer Folder, once in the Designer Folder click Flow button.

 

In the Create Flow dialog click Default then Create. This will populate the dialog to name the Flow, type “TextToDate” in the Create Flow text box and click CREATE to proceed to the Flow Designer.

Our Flow will have an Input and Output. We click the Start step on the workspace which will bring up the Quick Add for Step dialog. In the Quick Add for Step dialog under the Favorite Steps tab, click Show Form, then click ADD.

Once ADD is clicked the Default Editor for Step dialog will appear. Name the new Form, “Convert Text To Date”. Click Create. Note: If there is already a form created it will appear on the right hand side under the Search Type column.

The Form Designer will appear with a blank work space. To create the form this example calls for, under Favorite Components click and drag Button to the bottom right hand corner of the form. Also click and drag Label to the form and name it “Long Date Format”. Do this step one more time to add a second Label to the work space and name that Label “Short Date Format”.

 

Under Favorite Components click and drag Text Box and place under Long Date Format. Name this Text Box, “Long Date Format”.  While this Text Box is selected, under Common Properties be sure to check either Required Outcome Scenarios or Optional Outcome Scenarios.

In the Form Controls panel, expand Data then click and drag Date Picker and place under the Short Date Format Label. While the Date Picker is selected, under Common Properties be sure to check either Required Outcome Scenarios or Optional Outcome Scenarios.

Click in the White space of the the work space (the empty area outside of the form, white and grey checkered). Then in the Properties panel, scroll down to the Form Rules tab. Under Data Flows click Add New.

An Add Data Flows dialog will appear. Name the Flow Data, “ConvertTextToDate”, under Flow click on Create.

This will populate a Create New Flow dialog. Under Name, type “ConvertingDate” then click OK.

Now the Data Flow can be created. Click the Steps panel, in the Search bar type Convert String. Click and drag Convert String to Date to the workspace. Click and drag the Done arrow from the Start step to Convert String to Date to connect the two steps. Then click and drag the Done arrow from the Convert String to Date to the End step connect the steps.

Click on the Start step to Edit Step. In the Edit Step dialog under Flow Input Data click Show Editor.

In the Data Definitions dialog type “Long Date Format” under Name. Leave Type as String [Text]. Click CLOSE to exit out of the Data Definitions dialog, then click the X in the top left corner of the Edit Step dialog to return to workspace.

Click on the Convert String to Date step in the workspace to have the Edit Step dialog appear. Under Inputs > String to Convert, change the Mapping Type to Select Value [From Flow]. Click Pick under the Path field. The Pick Data dialog will appear, in the dialog select Long Date Format then at the bottom of the dialog click Pick.  Notice under the Outputs tab the Mapping Type is already set to Rename and the Name is Converted Date.

Within Edit Step click on [EndStep]. Under Data > Output click Show Editor.

In the Data Definitions dialog type “Short Date Format” under Name. Change Type to Date Time. Under Inputs > Short Date Format, click Select Value [From Flow] for the Mapping Type. Click Pick under the Path field. In the Pick Data dialog click on Converted Date then at the bottom of the dialog click Pick. Click CLOSE to exit out of the Data Definitions dialog, then click the X in the top left corner of the Edit Step dialog to return to work space.

Now click Close Flow in the top panel. The Save dialog will appear, click Save. The Flow Designer will close and Add Data Flows will appear again. Click Update Inputs to generate the Inputs and Outputs that were just created in the Flow Designer

Once the Flow Inputs and Flow Outputs are updated, click the pencil icon in next to Long Date Format [String – List: False – Nulls Allowed: False].

The Edit Flow Inputs dialog will appear. From the Input Type drop down menu click Form Component. From the Form Data Name click Long Date Format. Notice RunOnValueChanged is already clicked. Click OK to exit from the Edit Flow Inputs dialog then click OK to exit from the Edit Data Flows dialog.

Back in the Form Designer click Close Form to save and close the Form Designer. The original Flow that was named “TextToDate” will appear. Click Debug Flow on the top panel.

The Debugger will appear, click the Run button in the middle of the screen to initiate the Debugger.

The Run Form dialog allows you to enter a Long Date Format and the Short Date Format will populate as you type. Once the project is debugged click the Exit button and click the Close Form button back in the Flow Designer to save and close the Flow.

Additional Resources