Making Space-Reclaiming Forms with Stack Panel
  • Updated on 16 Apr 2019
  • 3 minutes to read
  • Print
  • Dark
    Light

Making Space-Reclaiming Forms with Stack Panel

  • Print
  • Dark
    Light

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 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.

2019-04-16_140300.PNG

In the Default Editor for Step: Show Form, name the form "Customer Information Form" and select CREATE.

2019-04-16_140338.PNG

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.

2019-04-16_112943.PNG

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:

2019-04-16_114000.PNG

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.

2019-04-16_114121.PNG

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.

2019-04-16_115012.PNG

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:

2019-04-16_115126.PNG

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.

2019-04-16_143629.PNG

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.

2019-04-16_144222.PNG

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 .

2019-04-16_131548.PNG

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].

2019-04-16_131825.PNG

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.

2019-04-16_131931.PNG

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.
2019-04-16_132056.PNG

From the flow Action menu, select Run Flow.

2019-04-16_135648.PNG

By default, the form fields are hidden.

2019-04-16_135835.PNG

When the checkbox is unchecked, the form fields appear:

2019-04-16_135851.PNG

Was this article helpful?