05e - Layout primitives reference – Help Center

Info: This article is work in progress and subject to change.

Layouts are how you arrange components inside a section. The Workflow Assistant Configurator gives you a small set of layout primitives — three column-based grids, a divider, and a small number of preset combinations that pair common components into ready-to-use shapes.

This article documents each primitive. For the conceptual material on rows and how they nest inside sections and tabs, see 02a — Panel anatomy.

Grid x1

A single-column row. Components placed in a Grid x1 row span the full width of the section.

This is the default and the right choice for almost every component. Long text fields, rich text fields, large dropdowns, and any field with substantial validation messaging benefits from a full-width row.

Tip: When in doubt, use Grid x1. The two- and three-column layouts are appropriate for short paired components — Grid x1 is appropriate for everything else.

Grid x2

A two-column row. Components placed in a Grid x2 row split the available width equally.

Best for short paired components — Date and Datetime, two-button decision rows like Approve / Reject, or pairs of related Number fields.

When Grid x2 works	When it does not
Two short Number fields (Width / Height)	Two long Text fields with hints — the hints push the labels onto two lines
Approve and Reject buttons	A Text field paired with a Rich text field — the Rich text field needs the full width
Date and matched Datetime	A Dropdown next to a Tags field — the Tags field can grow tall

Grid x3

A three-column row. Components placed in a Grid x3 row split the available width into three equal parts.

Best for short reference triplets — for example, Dimensions / Size / Duration for a media asset.

Note: The Configurator ships with a Horizontal asset data preset combination (covered below) that places a Grid x3 row already populated with these three Formatted fields. Use the preset rather than building it by hand.

Divider

A single horizontal line that separates two parts of a section.

The Divider is technically a row, but it has no components. Use it to separate visually distinct parts of a long section without splitting the section in two.

When to use a Divider	When to split into a new section instead
Two related groups of components that share a label	Two unrelated groups of components — make a new section with its own label
A short cluster of fields followed by a single decision button	The button drives a different task — make a new section for it

Preset combinations

Two ready-made shapes ship with the Configurator. Each is a row pre-populated with components and configured for a common case. Drag them in like any other component.

Horizontal asset data

A Grid x3 row containing three Formatted fields:

Slot	Field	Field name	Display name
Left	Formatted	`dimension`	`Dimension(px)`
Middle	Formatted	`fileSize`	`Size(kb)`
Right	Formatted	`duration`	`Duration`

All three are set to Disabled: on because the underlying values are system-managed. The visibility checklist is set so the row appears for Image and Video assets.

This preset saves a few minutes of repetitive configuration and ensures every panel handles the read-only system fields the same way.

Approve / Reject

A Grid x2 row containing two Metadata stamper buttons:

Slot	Button	Stamps
Left	Set Approved	`status: Final`, `approvalComment:"Approved by {user}"`, `folderPath: /approve-path`
Right	Set Rejected	`status: Correction`, `approvalComment:Rejected by {user}`

Both buttons appear for Image and Video assets by default. Adjust the stamps and the Applies to checklist to match your organisation’s specific approval flow — but the shape (two side-by-side stamper buttons in a Grid x2) is the right starting point in nearly every case.

Tip: Treat preset combinations as starting points, not final shapes. Drop the preset in, then immediately configure the metafields, the visibility checklist, and the confirmation popup to match your workflow. You inherit the right shape and rewrite the details.

When to add a Divider versus a new section

The choice between adding a Divider inside a section and splitting into a new section is the most-asked layout question. The rule of thumb:

A new section when the next part has a different purpose — the user is doing a different task. New label, new description
A Divider when the next part has the same purpose but needs visual separation — the same task, with a natural pause in the middle

Two examples to make the distinction concrete:

Situation	Use
Section labelled “Asset facts” with read-only fields, followed by editable user-input fields in the same section	Divider
Section labelled “Asset facts” followed by buttons that operate on the asset	New section, labelled (for example) “Take action”

Cross-references

02a — Panel anatomy — the conceptual model for tabs, sections, rows, and components
05a — Fields reference — the field types you will most often place in rows
05b — Actions and buttons reference — the buttons in the Approve / Reject preset
04b — Patterns and anti-patterns— including the “one section per task” pattern

Revisions

8 May 2026: First publication of the manual