Horizontal and Vertical Stacks

Overview

The Horizontal and Vertical Stack Layouts dynamically resize its and its child controls within upon expanding/shrinking a child control. Each added control automatically resizes to the height of the workspace; however, the width measurement of a child control can be manually adjusted.

A recommended best practice involves populating a Stack Layout with a Grid Layout and then to populate the Grid with the desired controls. With the nested Grid Layout, its columns and rows help uniformly organize controls. Remember to rename the Stack, Grid, and any child controls for best organization practices.

A limitation of Stacks Layouts; however, is that it cannot dynamically resize the Form: stacks will not grow or shrink the whole Form's size.

This document will demonstrate how to use the Horizontal Stack Layout, but similar configurations are applicable to the Vertical Stack Layout.

Configuration

Besides naming the Stack, the Children Size Mode setting determines how its child controls are sized within the Stack. By default, this is set to Scroll.

Example

The following example creates 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, the billing address fields appear and expand vertically on the Form moving the other Form controls down.

1. In a Designer Folder, create a Flow.
2. In the Flow Designer, navigate to the Steps > Favorite Steps section and add a Show Form step to the workspace. Connect it to the Start step.
3.  With the Show Form step selected, select Pick or Create Form from the Properties panel. 
4. In the Create or Pick window, under Create New > Name, enter Customer Information Form. Click CREATE to enter the Form Designer.
5. In the Form Designer, navigate to the Form Controls > Layouts section and drag a Vertical Stack control to the Form. This is required for space reclamation within the Stack.
6. Resize the Vertical Stack control so that it takes up most of the space on the Form.
7.  From the Steps > Layouts section, drag and drop a Grid control to the Vertical Stack control. 
8. Name the Grid under Common Properties > Name.
9. Configure the Grid to have two resizable Columns at 0.15 and 1. 
10. Configure the Grid to have two resizable Rows at 1.
11. Right-click the new Grid control and Copy it.
12. Add a new Grid control to the Vertical Stack control. Name the Grid.
13. Paste the Grid copied to the clipboard into the clear Grid. Name this Grid.
14. From the Steps > Favorite Controls section, drag and drop a Button [Done] to the Grid controls below the Vertical Stack.
    For this function to work properly, each control must be placed in a separate Grid. For reference,  the Vertical Stack control contains four Grids: the Top Grid, the Bottom Grid Holder where the Bottom Grid lives, and the Button Grid.
    
15. From the Form Controls > Data category, drag and drop a Checkbox control to the top-left of the Grid field. Expand the control to fill the first row of the top Grid.
16. Add the text Shipping Address Same as Billing? as the Text and Data Name under Common Properties.
17. With the Checkbox selected, navigate to the Properties panel > Data and enable the Is Checked Boolean. This will show the fields only if the shipping address is not the same. 
18. Next, select the bottom Grid component within the additional Grid and navigate to the Properties panel > Grid Setup > Rows, and add two additional resizable Rows at 1.
19.  From the Form Controls > Favorite Controls section, add four Label controls (Address, City, State, Zip Code) and four corresponding Text Boxes.
20.  Drag the Grid containing the Button [Done] to the Vertical Stack controls.
21. Next, navigate to the Properties panel > Form Rules > Visibility Rules of the entire Form. Select Add New.
22. In the Add Visibility Rules window, name the Rule [Bottom Grid Visibility Rule].
23. Under Rule Data > Rule, select Create.
24. In the Create New Rule window, name the Rule [Visibility Rule]. 
25. Click CREATE to enter the Rule Designer.
26.  In the Rule Designer, select SETUP INPUT DATA.
27. In the Data Definitions window, name the input Show Field and select the type Boolean [Logical]. Click CLOSE.
28. In the If portion of the Rule statement, choose the Show Field input from the Select Data Element drop down list. 
29. Select Is False from the Logic Rules section of the Pick Verb drop down list. 
    The Rule evaluates if checkbox Boolean is enabled which it will be by default. Therefore, the Rule evaluate true until the Boolean is unchecked aka false.  The shipping information fields will appear on the Form. For more information regarding Visibility Rules, please navigate to the Controlling Form Fields with Visibility Rules article. 
30.  Save and Close the Rule Designer.
31. In the Add Visibility Rules window, select Update Inputs.
32. Navigate to Triggers and enable the Shipping Address Same as Billing? [Checkbox]: Value Changed boolean.
33. Navigate to Apply to Controls and enable the Bottom Grid Holder.
34. Select the pencil icon next to Show Field [Boolean]. 
35. In the Edit Rule Inputs window, change the Input Data > Input Type to Form Component.
36. From the Form Data Name drop down list, select Shipping Address Same as Billing?. 
37. Click OK in both windows.
38. Save and Close the Form Designer.
39. In the Flow Designer, connect the Done outcome of the Show Form step to the End step. 
40. With the Show Form step selected, navigate to the Properties panel > Inputs and change each input to an Ignore input mapping type.

Debug

1. Select Debug from the Top Action Panel, this will automatically save the Flow.
2. Notice by default the Form fields are hidden. Disable the boolean.
3. Notice the Form fields appear when the boolean is unchecked.