Last Updated: 07/29/2016Introduced in Verision: 2.0
A form displays controls that allow a user to perform an action, such as enter data, display a report or folder, or manage entities. You can create a flow that, when run, opens a form.
Create a new flow in which the form will be placed. In the Toolbox panel, expand the category Forms [Interaction] > [Pick or Create Form], and drag a form to the workspace.
Example
In our example, we will:
Create a flow that opens a form to capture a simple information request (name, email, topic of interest).
Access the Form Designer from within the Flow Designer to edit the form.
Preview the form in the Form Designer, then make additional changes to it.
Close the Form Designer and return to the Flow Designer.
For our example a form, Send Email Form, has been created and stored in the Designer Folder. To start, the form is not built; this example covers the building of the form content. Below is a snapshot of the form in its completed state for reference.
First, navigate to a Designer Folder and click the Create Flow button.
Name the flow and click Create.
In the Flow Designer start-up window, from the Flows, Rules, Forms and Reports category, under the category Forms [Interaction] > [Current Folder], select a Send Email Form component. Click Add to add it to the flow.
When the flow runs, this form will open.
Connect the Start step to the Send Email Form.
Next, edit the form by selecting it in the workspace. In the menu that displays, select Edit Form to access the Form Designer.
The form in this example is completely blank. It is recommended to introduce a basic layout element – a grid. A grid helps keep controls in place proportionally when presented to an end user. The number of grid fields and the layout will depend on what the form contains; this example asks for “To” and “Subject” information for configuring an email message (rather short text), and a “Body” message, which is typically longer and therefore should get more space in the grid.
Begin in the Toolbox panel, under the Containers category. Drag a Grid component into the workspace. Expand the size of the grid by dragging the sides of the grid so it resembles as follows:
With the grid component selected, configure its layout in the Properties panel under Layout > Columns and Layout > Rows using the values pictured. Also set the inner and outer margin values to 10.
Next, introduce the controls to enter data. Begin in the Toolbox panel, under the Data category.
From the Toolbox panel, expand Data and drag a Label component to the top left of the grid.
In the Properties panel, under Common, select the Label Attributes picker to change the label’s font size, then click OK.
In the Alignment drop-down list, select Right.
In the Data section, in the Text field, enter the text “To:” that will appear on the label.
Drag and drop another Label component into the field under the “To:” label, and configure its font attributes to match.
Update the label’s text in the Text field to “From:”
Drag and drop one more Label component into the field under the “From:” label, and configure its font attributes to match. Set its Vertical Alignment selection to Top.
Update the label’s text in the Text field to “Message:”
Now that we’ve formatted our labels, the next step is to add a button to the form. This should be done before introducing the text box input fields, because those fields will need to be aware of the path that a button provides in order to mark the input field as “required” or “optional.”
From the Toolbox, expand the Actions category. Drag a Button component to the lower right of the form, outside of the grid.
With the button selected, configure the Properties panel, Data section as follows:
Next, introduce the text boxes to the email form. One method is to use the grid Add function. Click in the field next to the To: label, and click add [+].
Select Text Box and click Finish.
Configure the properties of the text box as follows:
Note that if a button did not exist, the text box configuration would not reflect the Send Email outcome scenario.
Next, introduce another text box for the “From:” field.
From the Toolbox panel, under the Data category, drag a Text Box component to the workspace and place it to the right of the From: label in the grid.
Configure this text box in the Properties panel. In the Data section, in the Data Name field, enter EmailFrom. Check the Output Only checkbox. This tells the form that no mapping of input data is required; the data will only exist after the user provides an entry in this field and submits the form.
Mark this field as required as well by checking the Required Outcome Scenarios > Send Email checkbox.
Lastly, add a text block for the Message: field. From the Toolbox, expand Data and drag a Text Block component to the workspace and place it to the right of the Message: field.
Configure it similarly to the other text fields, as pictured below:
Each of these text boxes will capture data that can then be mapped to another step in the flow. The Data Name is used to refer to each of these fields when mapping inputs and outputs in the Mapping Editor. For example, map the output to the respective fields in the Send Email step in the Flow Designer.
To view our form with the components added, click the Preview link at the top of the Form Designer. This completes the Send Email form, therefore save the form and close the Form Designer.
This completes the demonstration of adding a form to a flow.
To complete the flow, back in the Flow Designer, we would continue by mapping the form’s fields to a Send Email step, and saving the flow.
