Making Space-Reclaiming Forms with Stack PanelLast Updated: 07/15/2016 Introduced in Verision: 2.0 |
The stack panel layout can make it possible for form controls to move up in a form, thus reclaiming “white space” in the form.
Example
This example uses an order form for a customer to complete. If the billing address is the same as the shipping address, the billing address fields will hide. Otherwise, they will appear and expand vertically on the form (moving other form controls down).
From a Designer Projects folder, click on Create Form. Name the form “Customer Information Form” and click OK.
The first component in the form will be the vertical stack layout, which is required for the reclaiming of white space. From the Toolbox, expand the Containers category and drag and drop a Vertical Stack component into the workspace. Re-size the vertical stack so it takes up the majority of the form space.
From the Actions category, drag and drop a Button component into the workspace below the vertical stack. Change the Outcome Name to “Submit Order”.
From the Containers category, drag and drop a Grid component below the vertical stack. From the Properties panel, configure the grid column and row layout as follows:
Drag the grid into the vertical stack. Right-click the grid, and select Copy. Under the grid in the vertical stack, right click and select Paste. The form should resemble:
Click on each grid and ensure each grid has a unique name in the Properties panel, Common > Name field. Rename the grids so they are unique.
From the Toolbox, expand the Data category and drag and drop a Checkbox component into the top left grid field. Click the arrow on the right of the Checkbox component to expand that control into the next cell in the grid, so the control takes up the whole first row of the grid. Click on the Checkbox component and from the Properties panel, configure the Data section as follows. Notice the Is Checked checkbox is selected, since we want to show the fields only if the shipping address isn’t the same; the default setting (Is Checked) will be set because in most cases, the customer shipping and billing addresses are the same.
Next, add rows to the second grid. Click on the second grid (not the grid containing the checkbox), and from the Properties panel, configure the grid rows and margins as follows:
Next, add the labels and fields to the form cells by dragging and dropping them into the grid cells from the Toolbox, from the Data category. The labels resemble as follows:
The address fields will simply be text boxes in this example. Drag and drop the Text Box component from the Toolbox > Data category into each corresponding address field, and configure each with a unique data name and marked as optional.
Lastly, drag and drop one more grid into the vertical stack, below the second grid.
Click on the Properties tab, configure the grid columns and rows and margins as follows. Resize the grid height by dragging up the yellow arrow at the bottom of the grid.
Drag and drop the Submit Order button into the third data grid. This completes the form. Save and close the Forms Designer.
Next, create the rule that will determine the visibility of the second data grid. From the Designer Projects folder, click on Create Rule. Name the rule “Show Field” and click OK. The input for the rule will be Boolean, since that is the data type of the checkbox (true or false data being evaluated by the rule). If the checkbox is checked (which it will be by default), then the rule will evaluate true. When the rule evaluates unchecked (i.e. false), the fields for the shipping information will appear.
Build the rule as follows:
Save and close the Rule Designer.
Next, create a new flow that will contain the form. From the Designer Projects folder, click on Create Flow. Name the flow “Customer Order” and click OK.
In the Flow Designer start-up window, expand the Flows, Rules, Forms and Reports > Forms [Interaction] > [Current Folder] category, and select the Customer Information Form. Click Add to add this form to the workspace.
Connect the Submit Order path out of the form to the End step.
Click on the form and from the Properties panel, set the input mapping type for each field to Ignore.
Lastly, configure the visibility rule in the form. Click on the Customer Information Form and select Edit Form from its Actions menu.
Click on the Explorer tab, then select Surface. In the Properties panel, check the Use Visibility Rules checkbox. Click on Add.
Configure the rule as follows:
Click on the Rule Input that appears once the rule is selected, and click Edit. Configure the input as follows, and click OK:
Click OK to close the rule. Save and close the form. The flow is now ready to test.
Save and close the flow. From the flow Action menu, select Run Flow.
By default, the form fields are hidden.
When the checkbox is unchecked, the form fields appear:
