Form Container Layouts

Last Updated: 10/12/2018 Introduced in Version: 2.0

Overview

This tutorial demonstrates variety of Form Layouts and Form Container behaviors in the Form Designer.

Example

To overview Form Layouts we navigate to the Designer Folder and click Create Form > Create Form action on the Folder Actions Panel.

 

Next, Name the Form and select Create to proceed to the Form Designer.

 

If we locate Form Configurations, in Layout section, configure Form Container type. Choose from Canvas, Grid, Vertical Stack, Horizontal Stack, and Tabs. These containers have different behavior in terms of Form element positioning.

 

Canvas.

Canvas Form container is specific in the way that designer can quickly position components on the Form. When Form component is being dropped on canvas it will keep its default Size and position.

 If the Form grows more than the size of the Designed Form window, scroll bar appears.

46-scroll-bar

 

Tabs.

If we choose Tabs container for our Form layout, we can create a multi-page Form. If we drop a component on the Tab container, it will occupy the whole size of the Tab.

47-tabs

 

Grid.

Grid is the default form container. Best practices of Form Design is to create a Form using Grid Layout. With Grid container we can markup our Form in the best manner.  When dragging a Form component on the Grid container, it will occupy the size of the cell which it is dropped on.

 

To create a desirable markup we create Columns and Rows of desirable size in pixels and with desirable behavior.

 

It is important to understand Resize behavior for the Columns and Rows. Resize types are: Fixed, Grow, and Resize.

               Fixed: Column or Row will always have strictly specified size.

               Grow: Column or Row can be automatically increased in size. For example, if we have 600×600 Form and only two rows. First row is Fixed 30px and Second row is Grow 30px. Second Row will be automatically resized to 570px. Note: with Grow Resize type Columns or Rows will not automatically decrease in size.

               Resize: with this option Column or Row can automatically increase or decrease in size.

 

 

 

To demonstrate resizing behavior we have created 600×600 Form with Grid Layout. We marked the grid up as following. First column 100px Fixed, second column 100px Grow, third column 100px Resize. First row 100px Fixed, second row 100px Grow, third row 100px Resize. In this case sizes for columns and rows are following: 100:100, 150:150, 150:150.

 

 

51-layout-config

 

If we decrease the size of our Form to be 250×250, our Grid Layout will be automatically resized according Resize rules. Now sizes for our columns and rows are next: 100:100 (Fixed did not change), 100:100 (Grow cannot be less than specified), 50×50 (Resize, can be changed in both ways).

52-adjust-the-grid

 

 

Vertical and Horizontal Stack.

Vertical and Horizontal Stack Layouts have similar behaviors. If we drop Form components on such type of Container they are “stacked” horizontally or vertically. For this type of container, we have additional Layout Configuration. We have several options for Children Size Mode: Scroll, ExpandChildrenThenScroll, FitChildren.

 

53-stack-layout-config

 

 

By default, Children Size Mode is Scroll. In this mode if Form components are greater than Form size, scroll bar appears.

54-childrenscroll

 

 

If we choose ExpandChildrenThenScroll option, Form components will be spread evenly until Form size exceeded.

55-childrenexpand

 

 

With FitChildren option, Form components will be resized to spread evenly on the Form.

 

56-fit

Additional Resources