Making Space-Reclaiming Forms with Stack Panel
- Updated on 16 Apr 2019
- 3 minutes to read
The stack panel layout can make it possible for form controls to move up in a form, thus reclaiming "white space" in the form.
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 the Designer Projects folder, select Create Flow. Name the flow "Customer Order" and select OK.
In the Flow Designer workspace , expand the Flows, Rules, Forms and Reports > and select the Show Form then Add to add this form to the workspace.
In the Default Editor for Step: Show Form, name the form "Customer Information Form" and select CREATE.
The first component in the form will be the vertical stack layout, which is required for the reclaiming of space.
From the Form Controls, expand the Layouts 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.
Right-click the new 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 Form Controls panel, expand the Data category and drag and drop a Checkbox component into the top left grid field. Select 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.
Select the Checkbox component and in the Properties panel, configure the Data section as follows:
Select the Is Checked checkbox, since we want to show the fields only if the shipping address isn't the same.
Next, add rows to the second grid. Select the bottom grid, and from the Properties panel select Advanced Layout and configure the grid rows and margins as follows:
Next, add labels and text boxes to the form by dragging and dropping them into the grid cells from the Form Controls panel , from the Data category. The data names should be: Address, City, State, Zip Code.
Lastly, drag the grid that contains the "Submit Order" button into the vertical stack under the bottom grid.
Next, create the rule that will determine the visibility of the second data grid. Select the whitespace in the Form Designer, in the Properties panel scroll to Visibility Rules and select Add New.
Within the Edit Visibility Rules dialog, name the Visibility Rule then select create.
Under Rule Input Data select Show Editor. Name the input for the rule "Show Field"and give it a Boolean type, 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.
To achieve that logic build the rule as follows. Then save and close the Rule Designer .
Back in the Edit Visibility Rules dialog select "Update Inputs". Under Triggers scroll to and select Same as Billing Address [CheckBox] : Value Changed. Beneath Apply to Controls select Bottom Grid. Select the pencil icon next to Show Field [Boolean].
In the Edit Rule Input dialog, chose Form Component as the Input Type and Same Billing Address as the Form Data Name. Select OK. Then select Ok to close the Edit Visibilty Rules dialog.
Save and close the Form Designer and back in the Flow Designer, connect the Submit Order path out of the form to the End step.
Select the form and from the Properties panel, set the input mapping type for each field to Ignore.
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: