Sections and Layout

A section is the unit of content on editor steps, details tabs, and the editor sidebar. A standard section lists fields with include; a section with type renders built-in content instead, such as pricing or documents (see Section Types). Overview pages use predefined cards (see Overview Pages). For example:

{
	"title": "Submission",
	"include": [
		"data.policyType",
		"data.policySource",
		"data.floridaMarket",
		"data.policyTerm"
	]
}

Include Paths

Path	Refers to
`data.<field>`	A data field
`elements.<ElementType>`	A nested element
`coverageTerms.<term>`	A coverage term
`startTime` (bare name)	A quote-root field
`static.<field>`	A static data field

An include entry can also be an inline override of the field's properties. See Baseline and Inline Overrides.

Template Entries

A template entry is display-only text built from fields and literal text:

{
	"template": "${data.expireIn} days",
	"display": { "label": "Days Until Expiration" }
}

A template entry has no fieldName, and display.label is required
It always shows as read-only text, even in a section of inputs
${…} can read ${data.<field>}, a bare ${<field>} (looked up in data), ${static.<field>}, a quote-root field such as ${startTime}, and ${index}, the item's 1-based position in a list

Section Properties

Property	Type	Description
`title`	string or array	The section heading. `${entityType}` inserts the entity's name. Can be a list of gated variants.
`hideTitle`	boolean	Renders the section without its header.
`include`	array	Field, element, and coverage-term paths, or inline overrides.
`type`	string	Selects a built-in renderer. Omit for a standard section. See Section Types.
`config`	object or array	Settings for a built-in renderer. See Section Configuration by Type.
`sectionName`	string	References a section defined in `collections`, instead of defining it inline. See Reusing Sections.
`elementName`	string	The element or data type the section edits.
`layout`	object	See Layout.
`access`	object	Visibility, editability, and run rules for the whole section. A read-only section is `"access": { "write": false }`.
`scope`	array	Which entities the section applies to, such as renewals only.
`await`	number	Maximum polling window, in seconds, for asynchronously generated content, such as on `documents` and `underwriting` sections.
`refetchInterval`	number	Seconds between refetches during the `await` window.
`exclude`	array	Field paths to leave out, such as when `include` pulls in a whole object.
`readOnlyDiff`	boolean	Renders the section read-only and shows only the fields the user changed, such as on a transaction review step.
`autoPopulate`	array	Rules that fill fields when an item is added to or copied in a list, one rule per field. `{ "fieldName": "index", "options": { "type": "indexIncrement", "offset": 1 } }` numbers each new item from the previous one; `"type": "omit"` leaves the field empty when an item is copied.

Read-Only Sections

For a read-only label/value section, don't use a special type. Set layout.presentation to summary:

{
	"title": "Quote Validity",
	"include": ["static.quoteDueDate", "data.expireIn"],
	"layout": { "presentation": "summary", "variant": "card" }
}

To keep inputs but block editing, use "access": { "write": false } instead.

Reusing Sections

Define a section once under collections and reference it by name with sectionName. This example defines a section in uiConfigs/operationsWorkbench/collections/config.json:

{
	"sections": {
		"Broker Details": {
			"title": "Broker Details",
			"include": ["data.brokerOfRecord"]
		}
	}
}

A step or tab then references it:

{ "sectionName": "Broker Details" }

A sectionName that matches no section in collections shows an "Incorrect UI config" alert in place of the section.

A sectionName must point to a single section. A list of sections saved under one name in collections.sections isn't supported yet.

Layout

One layout object is used by sections, fields, overview-page cards, and overview-page columns.

Axis	Values	Description
`width`	`full`, `3/4`, `2/3`, `1/2`, `1/3`, `1/4`	Width in the parent. Fractions tile to a row, such as `2/3` + `1/3`.
`variant`	`card`, `flat`, `accordion`	Framing. `card` is framed, `flat` is frameless, `accordion` gives one collapsible panel per item (form element sections only).
`collapse`	`fixed`, `expanded`, `collapsed`	Whether the section can collapse, and its initial state.
`orientation`	`vertical`, `horizontal`	Field flow: `vertical` stacks one per row; `horizontal` uses the responsive grid.
`presentation`	`form`, `summary`	`form` renders inputs; `summary` renders read-only label/value text.
`nested`	`full`, `list`	In a summary, how arrays and custom data type fields render. `full` (default) omits them; `list` shows one line per item.

summary with card gives a framed read-only section; summary with flat gives a plain label/value grid.
A section that shows an exposure with its own editor also takes layout.buttons and layout.elementEditorQuery. See Exposure Editor.
In a summary, accordion behaves as flat, because there is nothing to collapse. Use card or flat.
An overview-page column takes only width. See Overview Pages.
Fields accept a subset of these axes. See Field Layout.

Next Steps

Section Types