Building a Form’s Layout

Last Updated: 05/03/2018 Introduced in Version: 2.0

The form layout defines the visual structure of a form’s fields, labels and other components both in the workspace of the Form Designer and in the form when a user views it. The layout can be set when creating a form or can be changed when editing it.The Form Designer includes five standard layouts: Canvas, Grid, Vertical Stack, Horizontal Stack and Tabs.  

To change a form’s layout, select the Surface component in the Explorer panel, then select the layout from the Properties panel’s Container Type drop-down list.
Example

Creating a form and demonstrate types of form layouts.
To begin, select a project folder and click the Create Form drop down button and the choose the Create From.option.

111

 

Give the form a name and click OK.

112

 

By default, our new form will have the least restrictive layout type – Canvas. The layout type displays in the Properties panel, in the Layout section, in the Container Type drop-down list.

113

 

Forms with the Canvas layout may have their components placed anywhere on the workspace. We locate a component under the Components panel, then drag it to the workspace.

 

114

To change the layout, we expand the Explorer panel at the bottom-right corner of the workspace.

115

 

We select Surface.

 

 116

Next, we locate the Layout section in the Properties panel. In the Container Type drop-down list, we select the Grid layout.

 

 117

The Grid layout allows us to set guidelines to help with the formatting of our form by resizing each row and column in the grid. Components added to a section of the grid will be automatically set to the size of that section.  Resizing the section will also resize the component, as well as the sections of the grid in the same row or column.

 

 118

Note that the components we added to the Canvas layout now appear as one section of the grid.  Containers like Canvas and Grid are themselves components.  By expanding the Container category in the Components pane, we can add any container to any layout.  Further, we can edit any of the components within the Canvas or even the Canvas itself.

We change the layout to Vertical Stack.

The Vertical Stack layout allows us to set components one after another, vertically.  Each added component will automatically be resized to the width of the workspace. We must manually resize the height of a component.

 

 119

We change the layout again to Horizontal Stack

The Horizontal Stack layout allows us to set components one after another, horizontally.  Each added component will automatically be resized to the height of the workspace. We must manually resize the width of a component.

 

 120

Finally, we change the layout to Tabs.

The Tabs layout allows us to place components on tabs. We click a tab at the top of the workspace to add components to it. To rename a tab, we locate the Layout section in the Properties panel, select a tab from the list and click Edit. We may also add or remove tabs as needed.

 

 121

Additional Resources