DocMgt

Flexible Columns is a container field: the fields dropped into it are laid out side by side in columns instead of one under the other. It is in the Container Fields section of the toolbox. Any field type can be placed inside it, including another Flexible Columns or a Panel, which is how multi-column forms and dashboard-style pages are built.

The container has no value of its own and does not save to the record. Its job is layout: it decides how wide each contained field is, how the fields wrap onto new rows, and how the arrangement changes on smaller screens.

Adding and arranging fields

Drag a field from the toolbox onto the Add Fields to Container bar at the bottom of the container, or onto a field that is already inside it. Fields fill the columns in order: the first field goes into the first column, the second into the second, and when the pattern is used up the next field starts a new row with the same pattern. Drag fields within the container to reorder them, or drag them out to the page or into another container.

Hold Ctrl while dropping a new field to add it with a blank Field Label, which keeps the columns tidy when labels are not wanted.

While form controls are shown, the container's title bar has a Move Fields Out of Container button that moves every contained field onto the page directly after the container, and a Paste Field button that pastes the copied field at the end of the container. Use Hide Form Controls on the designer toolbar to see the columns without the designer borders.

To leave a column empty, drop a Spacer field into it. Fields hidden by conditions are handled by the Keep Space for Hidden Fields setting described below.

While form controls are shown, the container's title bar has a Move Fields Out of Container button that empties the container and places its fields directly after it, on the page or inside the surrounding container, and a Paste Field button that pastes the copied field at the end of the container.

Settings

Field Label - Optional. A label on the container takes the label column away from the fields inside, so most containers leave it blank. Enter a single dash (-) to keep an empty label column, which lines the container up with labelled fields above and below it.

Field Name - The name used to refer to the container in conditions and in Set Field Value actions.

Column Layout - The pattern of column widths. A row is 12 units wide and each pattern shows the width of its columns: |6|6| is two equal columns, |4|8| is a narrow column beside a wide one, and |3|3|3|3| is four equal columns. Patterns with two, three and four columns are available, including 1|11 and 2|10 shapes for an icon or a small button beside a wide field. Three layouts do not use fixed widths:

• Full / Auto and Auto / Full - Two fields per row. The Auto column shrinks to fit its content, such as a button or a short label, and the Full column takes all the remaining width.
• Auto - Every field gets the same width and Number of Columns sets how many fit on a row. Use it for a set of similar fields, such as a group of checkboxes or a row of images.
• Grid (tiles, col / row spans) - A grid of equal columns in which each contained field is a tile that can span more than one column or row. This is the layout for dashboards and card-style pages; it has its own section below.

Number of Columns (Auto and Grid only) - How many fields sit on one row, from 1 to 6.

Apply To (Auto and Grid only) - The screen sizes the columns apply to: All Screen Sizes, Medium, Large and Extra Large (about 768 pixels wide and up), Large and Extra Large (about 992 and up) or Extra Large Only (about 1200 and up). Below the chosen size the fields show one per row. This is how a three-across layout on a desktop becomes a single column on a phone.

Column Spacing - The gap between the columns, from 0 (the columns touch) to 5 (widest). In the Grid layout it is the gap between the tiles in both directions. A new container starts at 0, so raise it when you switch to Grid.

The fixed patterns are responsive as well: on phone-sized screens (narrower than about 576 pixels) the columns stack one above the other, and from small tablets up the pattern applies.

Display

Keep Space for Hidden Fields - When a contained field is hidden by a condition or an action, its column normally closes up and the following fields slide into its place. Turn this on to keep the empty column so the rest of the row stays where it is. In the Grid layout the hidden tile keeps its cell and its span.

Shadow Size - None, Small, Medium or Large drop shadow around the container.

Child Field Spacing - The vertical space, in pixels, below each field inside the container. Leave it at -1 to use the page or form Field Spacing.

Background - Gives the whole container a background, which is how banner and hero sections are built. Background Color fills the container. Background Image URL shows an image: an absolute address, a site path starting with ~/, a {field} reference or a [variable] such as [SERVERBANNERURL] for the site banner image. Once an image is set, Overlay Color lays a tint over it so text stays readable, Overlay Opacity sets how strong the tint is (60% to start), Image Size chooses Cover (fill the container and crop the edges), Contain (fit inside) or Actual size, Image Position anchors the image, and Repeat (tile) the image repeats it. Text Color sets the default text color for the fields inside; a field with its own color keeps it. Corner Radius rounds the corners and Padding adds space between the background edge and the fields. The Panel field has the same section, with a Hide the panel border switch in place of Padding.

Tooltip, Label Alignment, Fonts, Colors, and Borders, Sizing/Spacing and Custom CSS Settings work as they do for every field. Field Height and the minimum and maximum heights are worth knowing on a container: when the fields inside are taller than the height you set, the container scrolls its contents.

Advanced

Pre-Load Contents - On by default: the fields inside are loaded with the form even while the container is hidden, so actions and conditions can work with them straight away. Turn it off when the container holds an embedded E-form or a Search field that should load only when the container is shown, the same as a tab in a Tab Container.

Showing and hiding the container

The container's own Visible When and Hidden When conditions show or hide every field inside it at once, so a whole section of a form can depend on a single answer.

Grid layout for tiles and dashboards

Choose the Column Layout Grid (tiles, col / row spans) to turn the container into a grid. Number of Columns sets how many equal columns the grid has (a new grid starts at three) and Column Spacing sets the gap between the tiles. Each field inside is a tile that takes one cell unless you give it a span. Panels make the best tiles: each one gets its own header, background and shadow, and a row of Panels lines up as cards.

Stretch tiles to fill their cell - On by default. Tiles in the same row are stretched to one height, so a row of Panels lines up at the bottom even when their contents differ. Turn it off to let each tile be as tall as its own content.

Pack densely (later tiles may fill gaps left by wide ones) - Tiles are normally placed in order, so a tile that spans two columns can leave a hole at the end of a row. With dense packing a later, smaller tile is pulled forward to fill the hole. Turn it on for a compact dashboard when the exact order of the tiles does not matter.

Minimum Tile Height (px) - Gives every grid row at least this height. A tile that spans two rows only looks taller when the rows have a height of their own, so set this (150 is a reasonable start) when you use row spans. Leave it blank or 0 to size the rows by their content.

Grid Placement - Set on the tile, not on the grid. Select a field inside the grid and open its Display settings: the Grid Placement section has Columns and Rows, the number of grid columns and rows the tile spans. The column span cannot exceed the grid's Number of Columns. The section appears only while the field sits inside a Grid, and the spans travel with the field when it is copied, cut and pasted, or moved. Below the Apply To screen size the grid shows one column and all spans are ignored.

A typical dashboard is a Grid with three columns and Column Spacing 3, holding a Panel for each tile with a Background image or color, a two-column span on the featured tile, and Buttons, Text Labels, Data Source Charts or an Agenda Calendar inside the Panels.

Changing the layout from an action

The layout can be switched while the form is open. Use a Set Field Value action on the Flexible Columns field with the number of the layout you want; the value can also come from a {field} reference or a [variable]. The numbers are: