# Build Sections
In these exercises, you group the quote's fields into sections, add producer pickers with plugin sections, reuse a section, and hide a section based on the quote's data (for producers, see [Producers](/features/producer-management/producers)). For every option, see [Sections and Layout](/configuration/configurable-ui/sections) and [Scope, Access, and Conditions](/configuration/configurable-ui/scope-and-access).
4. Group Fields into Sections [#4-group-fields-into-sections]
* **Task**: Replace the first step's long sections with five short ones, starting with a General Submission Details section, and rename the step to Submission Details.
* **Look at**: Same step, from the top. The step list shows its name.
* **Where**: `products/HO3/config.json`, the first step in `pages.editor.workflows.default.steps`.
What you can use (see [Section Properties](/configuration/configurable-ui/sections#section-properties), [Layout](/configuration/configurable-ui/sections#layout), and [Validation](/configuration/configurable-ui/fields#validation)):
* A section: `title` and `include`
* `include` lists field paths: `data.`, `static.` for [Static Data](/configuration/data-extensions/static-data), `elements.` for an exposure, or the bare name for the quote's own fields, such as `startTime`.
* A step shows only the sections you list. The eligibility questions come back on their own step in exercise 7.
* A field can appear in more than one section; its settings from exercise 1 follow it.
* `layout` on a section: `orientation` (`vertical` puts one field per row), `width` (`full`, `3/4`, `2/3`, `1/2`, `1/3`, `1/4`; fractions tile into a row), `variant` (`card`, `flat`, `accordion`), `collapse` (`fixed`, `expanded`, `collapsed`)
* `layout.width` on a field: `full` or `1/2`
* Static data (`static.quoteDueDate`) is configured like `data`, under a top-level `staticData`.
* `validation` on a field: `min` and `max` as a number or calculated like a `compute`; `step` for a multiple, such as `1000`
Hint
The first section:
```json
{
"title": "General Submission Details",
"include": [
"data.submissionDate",
"static.quoteDueDate",
"data.expireIn",
"startTime",
"endTime"
]
}
```
The answer also adds a "Continue" button (buttons are covered in exercises 7 and 13). It removes the untitled lifecycle section and Advanced Details, so "Quote Expiration Date" doesn't show on this step until exercise 9.
Answer: [`ex-04`](https://github.com/socotra/configurable-ui-learning-paths/tree/ex-04) ([what changed](https://github.com/socotra/configurable-ui-learning-paths/compare/ex-03...ex-04))
5. Plugin Sections and Reusable Sections [#5-plugin-sections-and-reusable-sections]
* **Task**: Add agency and broker pickers to Submission Details, each with a summary of the selected producer under it.
* **Look at**: Same step (now Submission Details), scrolled to the end.
* **Where**: The end of the Submission Details step's `sections` in `products/HO3/config.json`. Define the summaries once in a new `collections/config.json`.
What you can use (see [Section Types](/configuration/configurable-ui/section-types#types) and [Reusing Sections](/configuration/configurable-ui/sections#reusing-sections)):
* `type: "plugin"` with `config.pluginName`: mounts a frontend plugin in the section. `producer-selection` and `broker-selection` are built into the Operations Workbench.
* `type: "producer-summary"`: a read-only summary of a producer. `config.producerCodeLocation` names the field that holds the producer.
* `sectionName`: reuse a section defined once under `collections.sections`, on any step or page
* `producers/config.json`: the producer's own labels and summary layout (`overview.sections`)
Hint
The agency picker and the reusable summary under it, as two entries in `sections`:
```json
[
{
"title": "Producer/Agency Selection",
"type": "plugin",
"config": { "pluginName": "producer-selection" }
},
{ "sectionName": "Agency Details" }
]
```
The answer also adds a new `producers/config.json` for the producers' fields and their read-only overview, which uses template entries (see [Template Entries](/configuration/configurable-ui/sections#template-entries)).
Answer: [`ex-05`](https://github.com/socotra/configurable-ui-learning-paths/tree/ex-05) ([what changed](https://github.com/socotra/configurable-ui-learning-paths/compare/ex-04...ex-05))
6. Access by Data [#6-access-by-data]
* **Task**: Hide "Commission" until a broker of record is selected; once it shows, let only admins edit it.
* **Look at**: The quote, Submission Details, scrolled to the end. "Commission" shows below the Broker/Agent summary because a broker is selected; on a quote with no broker, it stays hidden. When you're done, click "Continue" to go to the next step.
* **Where**: `products/HO3/config.json`, a new section at the end of Submission Details.
What you can use (see [Access](/configuration/configurable-ui/scope-and-access#access) and [Conditions](/configuration/configurable-ui/scope-and-access#conditions)):
* `access.read` (who can see), `access.write` (who can edit), `access.execute` (who can run a button)
* A rule is `false` (never), a list of roles, or a gate: `roles`, `when`, `unless`.
* Roles are matched by their exact, case-sensitive names on your tenant.
* A condition: `field`, `operator` (`eq`, `neq`, `in`, `notIn`, `isEmpty`, `isNotEmpty`), and `value` when the operator needs one. Combine with `all` (and) or `any` (or). The field is read from the same record; `"scope": "root"` reads it from the quote or transaction itself.
* A list of gates grants access if any one matches; for example, lead underwriters always and everyone else only in draft: `[{ "roles": ["leadUnderwriter"] }, { "when": { "scope": "root", "field": "quoteState", "operator": "eq", "value": "draft" } }]`.
* Access narrows down the tree: a hidden section hides its fields; a read-only section locks them.
Hint
The rule on the section:
```json
{
"access": {
"read": {
"unless": { "field": "brokerOfRecord", "operator": "isEmpty" }
},
"write": {
"roles": ["admin"],
"when": { "field": "brokerOfRecord", "operator": "isNotEmpty" }
}
}
}
```
Answer: [`ex-06`](https://github.com/socotra/configurable-ui-learning-paths/tree/ex-06) ([what changed](https://github.com/socotra/configurable-ui-learning-paths/compare/ex-05...ex-06))
Next Steps [#next-steps]
* [Build Steps and Workflows](/learning/configurable-ui/steps-and-workflows)
See Also [#see-also]
* [Configurable UI Tutorial](/learning/configurable-ui/overview)
* [Sections and Layout](/configuration/configurable-ui/sections)
* [Scope, Access, and Conditions](/configuration/configurable-ui/scope-and-access)