Creating Your First Form in a Flow
- Updated on 12 Jun 2013
- 4 minutes to read
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 work space.
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 the example a form, Send Email Form , will be created and stored in the Designer Folder. To start, the form is not built; this example covers the building of the form content.
First, navigate to a Designer Folder and click the Create Flow button.
Name the flow and click Create .
In theFlow Designer start-up window , from the Flows, Rules, Forms and Reports category, under the categoryForms [Interaction] > [Pick or Create Form] , name it Send Email Form . Click Add to add it to the flow.
When the flow runs, this form will open.
Next, edit the form by selecting it in the workspace. In the menu that displays, select Create to access theForm Designer .
The default layout for this form is 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.
A grid can be manipulated to display columns and rows in certain sizes necessary for the build. To easily change the sizes select the grid and navigate to Properties > Advanced Layout select edit. Below is the size of the columns and rows used for the main grid that will house the labels and text boxes.
From the Toolbox panel, expand Data and drag a Label component to the top left of the grid.
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.
Update the label's text in the Text field to "Message:"
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. Configure the Properties panel, Data section as Send Email.
Next, introduce the text boxes to the email form. In the field next to the To: label, drag and drop a Text Box component.
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 theFrom: 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 Box Multi Line 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 .
To complete the flow, back in theFlow Designer, we finish by mapping the form's fields to a Send Email step to the end step, and saving the flow.