Forms 2.0 - Layout Container
This page is preliminary and subject to change as Forms 2.0 continues to be developed.
A container that holds other fields, purely for layout purposes - arranging them into rows, columns, or a free-form grid. Layout Containers can be nested inside one another to build multi-column, panel-style layouts, as shown in the Form Builder example.
For a container that also allows fields to be added into it programmatically at runtime, see Dynamic Container. For a container that lets the end user add and remove repeating groups of fields, see Repeater.
Adding a Layout Container
Drag the Layout Container tile from the field palette onto the Canvas - see Build for more on adding and arranging fields in general. Once it's on the Canvas, drag other fields into it to group them.
Parameters
Only Layout Container-specific parameters are listed below. See Common Field Settings for the settings shared with other field types.
| Field | Description |
|---|---|
| Layout Mode | Vertical and Horizontal arrange the contained fields automatically. Manual allows free placement and resizing in a mosaic layout. |
| Columns | Only shown in Manual mode. The number of columns in the mosaic layout. |
| Alignment | Only shown in Horizontal mode (Top/Middle/Bottom) or Vertical mode (Left/Center/Right). The alignment of the contained fields. |
| Gap | Spacing between the contained fields - Compact, Normal, or Loose. Nested containers can also Inherit this from their parent. |
| Padding | The padding for the container, in CSS units (for example 8px 0px). |
| Root CSS Classes | One or more CSS class names, separated by spaces, applied to the field's root element only. Supports Tokens. |
Common settings that apply to Layout Container
A Layout Container supports these Common Field Settings:
- General (Label and Name only - Layout Container does not support Hint)
- Active
- Visibility settings
- Enabled settings
Because a Layout Container holds other fields, its Visibility settings and Enabled settings apply to everything nested inside it as a group: hiding the container hides every field within it, and disabling it disables every field within it, regardless of those fields' own individual Visibility and Enabled settings.
Layout Container does not support Field Automations or Field Validators, since it has no value of its own to bind or validate.
Tokens
A Layout Container returns a single token containing a JSON object with the value of every field it contains - for example, if the field's Name is NameContainer, [NameContainer] yields something like {"FirstName":"Jane","LastName":"Doe"}.