Form and Column Containers
Description
When designing a Form Layout in a FormView control using Genie mode, the flow and column Layout Container types can be used to create complex form layouts.
When inserting a Layout Container, you can choose one of the following types to create complex layouts:
flow
column
The flow container allows you to lay out controls that flow from left to right and then start a new line when an explicit break is inserted, or the sum of the widths of the control on a line equals 100%.
The column container allows you to lay out the controls in multiple columns in which the controls flow from top to bottom and then start a new column.
Flow and Column containers can be nested, allowing you to create extremely complex layouts, all from within the Genie.
In the image below, the form has been laid out using a column container. The container has been divided into two equal width columns and a vertical line spacer has been inserted between the columns.
In the next image, the controls have been laid out using a flow container. Notice that explicit breaks to start a new line have been inserted after some of the controls and the width of each control has been explicitly set (using a percentage, although explicit widths are also supported).
For example, the Customerid control width was set to 25% and a break was inserted after the field to start a new row.
The City Region and Postalcode fields all have a width of 33.33%. The Phone and Fax field are each 50% and the Thumb and Thumb2 fields are also 50% each.
In the next image a more complex layout is created by nesting Flow and Column layout containers.
At the top level a Column container is defined with column widths of 50%, 25% and 25%.
Within the first column a nested Column container is defined. This container has two columns showing Companyname and Contactname in the first column and Contacttitle in the second column.
Also within the first column a nested Flow container is defined. This flow container has Address (with a width of 100%) and City, Region ad Postalcode, each with a width of 33.33%.
In the third column a nested Flow container is used to put Thumb and Thumb2 on the same line (each with a width of 50%).
Here is how this layout is defined in the FormView Builder:
Using the Column Container
To insert a Column Container into the Form Layout click the Add Item button and select a Layout Container and set the Layout type to 'Column'. All of the controls that should be laid out in columns should be placed inside this container.
You can start a new column at any time by inserting a break after a control. In the above example, the nested Column layout container has two columns because only one control in the container (LAYOUTCONTAINER_5) has a break (i.e. ContactName).
The outer Column container has three columns because there is a break on [LayoutContainer End: LAYOUTCONTAINER_3], and Phone.
You can control whether there is a line between columns, how much space to leave to the left of the first column and the right of the last column and how much space to insert above the columns and below the columns.
You can also control the spacing between columns.
The columns can either be equal sizes. or you can specify explicit widths for each column (using either percentages or absolute sizes). To specify explicit sizes for each column, enter a comma delimited list of sizes. The first size in the list applies to column 1, the second size in the list applies to column 2 and so on.
Using the Flow Column Container
To insert a Flow container into the Form Layout click the Add Item button and select a Layout Container and set the Layout type to 'Flow'. All of the controls that should be flowed should be placed inside this container.
You can assign an explicit width to each control and you can add breaks after certain controls to force a new line.
You can control the horizontal spacing between each control on a line. You can also specify if the spacing should be added before the first control on a line or after the last control on a line.
