Configurable UI Overview

UI configuration controls how the Operations Workbench presents your tenant's entities: field labels, controls, formats, help text, layout, visibility, editability, the steps of the quote and transaction editor, and the actions behind buttons. It is authored as JSON files in a uiConfigs/ folder of the tenant configuration and deployed with it.

For the concepts behind these structures, see the Configurable UI feature guide. To build a UI configuration step by step, see the Configurable UI Tutorial.

The examples use an HO3 homeowners product with a Policyholder account type and an HO3Dwelling exposure.

The following pages cover each part of a UI configuration:

• Field Properties - Set how a single field looks and behaves: its label, input control, format, help text, computed value, validation, visibility, and width
• Sections and Layout - Group fields into sections, reuse sections, and size and frame sections
• Section Types - Show built-in content, such as pricing, documents, or underwriting results, and set each type's options
• Scope, Access, and Conditions - Choose which quotes, policies, or transactions an item applies to, who can see, edit, or run it, and which variant is used
• Editor Page - Build the step-by-step editor for quotes and transactions from journeys, workflows, steps, and buttons
• Overview Pages - Arrange the cards on Policy 360 and Account 360
• Details Page - Set the read-only tabs of Policy Details and the policy actions menu
• Create Dialogs - Set the labels, defaults, and type picker of create transaction dialogs
• Actions - Run built-in actions and call your Automation Plugins from buttons
• Landing Page and Dashboard - Set the page users land on, the dashboard's task table, and app-wide form and timezone defaults

Folder Structure

UI configuration lives in a top-level uiConfigs/ folder of the tenant configuration, beside the data model folders. Each UI surface has its own folder.

Inside the surface folder, each kind of data model entity has its own folder, such as products/ and accounts/. Inside that, each entity has its own configuration, named as the data model names it. For example, the HO3 configuration used in this guide has one product, HO3, so its product UI configuration is in products/HO3/config.json. A tenant with two products, HO3 and DP3, would have products/HO3/config.json and products/DP3/config.json. A folder can also keep every entity in one file; see File Layout.

<tenant-config>/
├─ products/HO3/config.json                    ← data model
├─ accounts/Policyholder/config.json           ← data model
├─ exposures/HO3Dwelling/config.json           ← data model
│  …
└─ uiConfigs/                                  ← UI configuration
   └─ operationsWorkbench/
      ├─ products/HO3/config.json              ← the editor, Policy 360, Policy Details, create dialogs
      ├─ accounts/Policyholder/config.json     ← Account 360
      ├─ exposures/HO3Dwelling/config.json     ← the dwelling's own editor
      ├─ dataTypes/Applicant/config.json       ← labels for the Applicant data type's fields
      ├─ producers/config.json                 ← producer labels and summaries
      ├─ transactionTypes/config.json          ← transaction type labels and create dialogs
      ├─ collections/config.json               ← reusable sections and actions
      ├─ plugins/config.json                   ← the dashboard
      ├─ userExperiences/config.json           ← the landing page
      └─ automationPluginSetupData/config.json ← setup data for Automation Plugins

You only add the folders and files you need. Everything you leave out uses its default.

Mirror Folders

Each mirror folder holds UI configuration keyed by the same entity names the data model uses.

Presentation settings that used to live in the data model move to UI configuration:

UI-Specific Folders

plugins/config.json is keyed by where each plugin appears: dashboard (the task dashboard), accounts (account search), and editor.producerSearch (producer search in the editor). For example, { "dashboard": {} } adds the dashboard. See Landing Page and Dashboard.

File Layout

Each mirror folder can hold either a folder per entity or a single config.json with an entry for each entity. These two layouts give the same result:

products/HO3/config.json        products/config.json
products/DP3/config.json        { "HO3": { … }, "DP3": { … } }

Use a folder per entity when files are large or several people edit them. Use a single file when entries are small, such as transaction type labels. You can mix the two layouts across folders.

Most entity files start small. An account or exposure file may set only its name, such as { "display": { "label": "Dwelling" } }. This example is from uiConfigs/operationsWorkbench/dataTypes/Applicant/config.json:

{
	"display": { "label": "Applicant" },
	"data": {
		"dob": { "display": { "label": "Date of Birth", "format": "date" } }
	}
}

This example keeps every transaction type in one file, uiConfigs/operationsWorkbench/transactionTypes/config.json. Each type sets its label and its position in pickers, and "dialogs": { "create": false } keeps a type out of create dialogs (see Create Dialogs):

{
	"RenewalAmendment": { "display": { "label": "Renewal", "order": 0 } },
	"ManualPremiumReport": {
		"display": { "label": "Report Manual Premium" },
		"dialogs": { "create": false }
	}
}

Entity Nodes

Each entity's entry in its config.json is called its node. Properties marked All apply to every node; the others apply only to the entities listed.

Producers

Producers, such as Agency and Broker, are never navigated to directly, so they have no pages. A producer's overview sets how it renders read-only inside another page, such as a producer summary on a quote step. Its sections list the producer's fields, labeled from its data. This example is from uiConfigs/operationsWorkbench/producers/config.json:

{
	"Agency": {
		"display": { "label": "Agency Details" },
		"data": {
			"producerName": { "display": { "label": "Agency Name" } },
			"inforcePremium": {
				"display": { "label": "Inforce Premium", "format": "currency" }
			}
		},
		"overview": {
			"sections": [
				{ "title": "Agency", "include": ["data.producerName"] },
				{ "title": "Financials", "include": ["data.inforcePremium"] }
			]
		}
	}
}

Each overview section is a read-only summary, framed as a card by default. A producer-summary section can replace this layout in one place; see Section Types.

Templates

Some properties take a template: a string with ${…} placeholders filled from the item it describes. Examples are display.title (Class ${data.number}), display.summary, and a subheader's template. A placeholder can be:

• ${data.<field>}: a data field, such as ${data.number}. A bare ${<field>} is also read from data.
• ${static.<field>}: a static data field
• A quote-root field, such as ${startTime}
• ${index}: the item's position in a list, starting at 1

Deployment

UI configuration deploys with the tenant configuration. See Configuration Deployment and Redeployment.

Assets are managed separately from the configuration archive. Upload them before deploying a configuration that references them. [TODO: link to how assets are uploaded.]

Defaults

Everything you leave out of a UI configuration falls back to a default. For a minimal configuration and how it's built, see Starting Editor for Any Product.

• Labels: A field's label resolves in this order: the field's display.label in UI configuration, then its displayName in the data model, then a name deduced from the field name (grossPremium becomes "Gross Premium").
• Section titles: A section you author is not titled from its contents. Set title, or the section renders untitled. Only the default sections, generated when you author no sections, take their title from the complex field or exposure they show.
• Controls and formats: These default from the field's data type.
• Scope and access: An item with no scope or access applies to every entity and is granted to everyone, so a single unscoped default workflow serves quotes and every transaction type.
• Page header and subheaders: The header shows the quote or policy number, and the subheaders show the product name and a linked "Account:" row.
• Menu: The editor's actions menu shows a default set of actions. See Menu.

Next Steps

• Field Properties

See Also

• Configurable UI
• Configurable UI Tutorial
• Configuration Deployment
• Redeployment
• Data Extensions