How to Pick Layout (Overview of Layouts)

Last Updated: 08/16/2016 Introduced in Verision: 2.0

There are several layout options when working with forms and pages. This topic provides a description of what each layout provides and shows an example. The layout options are the same for forms and pages. The layout defines the visual structure of a form and page both in the respective Designer workspace and in the form or page when a user views it. The containers are often used in conjunction with one another; for example, putting a grid layout inside of a stack panel, or a curve panel, or grid inside of a grid.


Canvas Layout

The Canvas layout is the most basic layout. It provides a container that acts like a background; form and/or page controls can be layered on top of the canvas. The color, border width, corner radius (to provide curved corners), and size are the properties available for this layout. Forms and pages with the Canvas layout may have their components placed anywhere on the workspace. The screenshot below shows a canvas on top of a grid layout.

Curve Panel Layout

The Curve Panel layout is similar to the canvas layout, providing a container that also acts like a background on which form and/or page controls are placed. The difference is that the border can be given a color and given varying thickness values, and varying corner radius values can also be used. This gives the ability to create a more unique background appearance than the basic canvas layout. The screenshot below shows a curve panel on top of a grid layout. Containers like Canvas and Grid are themselves components.    

Grid Layout

The Grid layout contains rows and columns that form a grid. It provides granular control over the placement and size of form and page content. This is especially relevant when the form or page size is not explicitly defined; when a user resizes the form or page, there is potential for content to “float.” 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. The grid layout can be useful when the form or page has a lot of content and/or sophisticated design requirements, since the grid can provide uniformity in placement, spacing, and padding. Grids can be nested, grid inside of another grid, for even more control over layout.
When using the grid layout, it is recommended to plan the content for the form or page. This is so you can set the approximate number of columns and rows, their padding, and sizing. Best practice is to first set up the grid with the desired layout and then add the components to its cells.

Header Container Layout

The Header Container layout acts like a “header” for a page or form. Use it for differentiating instructions for a form, for example, or have “fine print” inside of a Header Container that is collapsed by default.
In the Properties panel for the Header Container, the Settings > Part Type drop down list offers the following options:
  • BaseContent – This is the default, and gives the appearance that the Header Container is its own distinguished section of the form or page.
  • Container – Makes the Header Container transparent.
  • Child – Shrinks the title bar to make it appear secondary to the default BaseContent setting.
  • Chromeless – Makes the Header Container transparent, and strips away the header so the container renders like it doesn’t have any appearance-related properties.

Here is what the Header Container, set to use the default BaseContent part type looks like when run:



Horizontal Split Panel Layout

The Horizontal Split Panel layout provides two panels so the layout is separated horizontally. When the form or page runs, the user has the ability to move the divider left or right. The ability to move the divider is helpful when the user needs more space to get a better view of the content. Only two panels are available, and by default they are set to 50%.

Horizontal Stack Layout

The Horizontal Stack layout allows for components to be set one after another, horizontally. Each added component automatically resizes to the height of the workspace; the width of a component can be manually adjusted.
Adding to the Horizontal Stack is done by dragging and dropping components from the Toolbox into the stack, or by using the Add [+] feature. The width of the component is easily adjusted using the arrow buttons.

Scroll Panel Layout

The Scroll Panel Layout provides a container that offers horizontal and vertical scroll bars for when the content of the container is bigger than the container itself. This is useful for small forms or pages, or forms or pages that do not have a lot of space to accommodate a full-sized text area for comments, for example.

Tab Layout

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.
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.
Finally, we change the layout to Tabs.

Additional Resources