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
Comments
0 comments