Build Steps and Workflows

In these exercises, you shape the quote editor: new steps, built-in section types such as pricing and validation, workflows that group the steps, and a field that shows only when another field has a value. For every option, see Editor Page and Sections and Layout.

7. Steps

• Task: Replace the starting configuration's Dwelling step with a Dwelling Details step that edits the dwelling's "Census Block Group" field directly, and add an Eligibility Questions step after it. The dwelling gets its own full editor in exercise 16.
• Look at: The draft quote, the Dwelling step in the step list; after deploying, the new Dwelling Details and Eligibility Questions steps. If the Dwelling step says "No dwelling added", click "+ Dwelling" first.
• Where: The default workflow's steps in products/HO3/config.json.

What you can use (see Steps):

• A step: name, sections, and footer buttons
• elementName on a step: the step edits that exposure. Paths in it, such as data.censusBlockGroup, are the dwelling's fields, not the quote's.
• A button with type: "next" runs its actions, then moves to the next step. validateForm checks the fields on this step; save saves them.
• Steps show in the order of the steps array.

{
	"name": "Dwelling Details",
	"sections": [
		{
			"title": "Property Highlights",
			"include": ["data.censusBlockGroup"]
		}
	],
	"buttons": [
		{
			"type": "next",
			"title": "Continue",
			"actions": ["save"]
		}
	],
	"elementName": "HO3Dwelling"
}

Answer: ex-07 (what changed)

8. Built-In Section Types

• Task: Add a Pricing Preview step with the quote's pricing and any validation errors.
• Look at: The quote, on Eligibility Questions, click "Continue". Before this exercise, it opens the starting configuration's Pricing step; after it, the new Pricing Preview step. If you're on the Pricing step when you reload after deploying, click "Previous" (or Pricing Preview in the step list).
• Where: products/HO3/config.json, a new step after Eligibility Questions.

What you can use (see Section Types and Section Configuration by Type): a section with a type shows something the platform builds instead of your fields.

The pricing snapshot shows as unavailable until the quote is priced. Exercise 13 adds the "Generate Quote" button, which prices it.

[
	{
		"title": "Pricing Preview",
		"type": "pricing-review",
		"config": {
			"presentation": { "hideReferenceRate": true }
		},
		"hideTitle": true
	},
	{ "title": "Pricing Validation Errors", "type": "validation-preview" }
]

Answer: ex-08 (what changed)

9. Catch-Up: Add the Review and Closing Steps

• Look at: The quote, Overview is the new step after Submission Details. From Pricing Preview, click "Continue" to reach Finalize Quote, then Quote Summary.

These steps reuse what you've practiced in exercises 4–8, so check out the exercise's branch and deploy. Here's what it changes:

• products/HO3/config.json, pages.editor.workflows.default.steps: three new steps
  • Overview, after Submission Details: the reusable Submission Information section (titled Summary), the Agency Details and Broker Details summaries (exercise 5), and a Flags section of type: "underwriting" (exercise 8)
  • Finalize Quote, after Pricing Preview: Submission Information, Flags, Subjectivities, and Quote Validity, and a "Continue" button so you can reach Quote Summary (exercise 13 replaces it with "Generate Quote")
  • Quote Summary, after Finalize Quote: Quote Validity, producer and broker summaries, a read-only Subjectivities section, and the quote's generated documents
• collections/config.json, sections: two new reusable sections, Submission Information and Quote Validity, with layout.presentation: "summary", which shows each field as read-only label-and-value text. Quote Validity also has a template entry, ${data.expireIn} days (see Template Entries).

Answer: ex-09 (what changed)

10. Workflows

• Task: Group the steps under Submission and Underwriting in the step list, and show the product and customer under every step's title.
• Look at: The quote, the step list, and the header under the quote's title. After you deploy, the quote starts again at Submission Details with the later steps grayed out: click "Continue" to reach Overview, and keep clicking "Continue" to move through the rest.
• Where: pages.editor in products/HO3/config.json. Under workflows, replace default with submission (Submission Details, Overview) and underwriting (the other five steps), and delete lifecycle.

What you can use (see Workflows, Journeys, and Subheaders):

• A workflow: display.label (its name in the step list), subheaders, and steps
• subheaders: the rows under the title. productName and account are built in; display.label adds a label in front.
• journeys: the workflows a quote goes through, in the order listed. That order is the order of the step list.
• A journey without scope applies to quotes and every transaction; exercise 19 adds scopes.

{
	"display": { "label": "Submission" },
	"subheaders": [
		{
			"type": "productName",
			"display": { "label": "Product" }
		},
		{
			"type": "account",
			"display": { "label": "Customer" }
		}
	]
}

Answer: ex-10 (what changed)

11. Catch-Up: Add the Issuance Workflow

• Look at: The quote, the step list: a third group, Issuance, at the end.

This is another workflow like the two you built in exercise 10, so check out the exercise's branch and deploy. Here's what it changes:

• products/HO3/config.json, pages.editor.workflows: a new issuance workflow with two steps
  • Bind: the quote's Subjectivities and Flags
  • Issue: producer and broker summaries, a read-only Subjectivities section, a pricing-review section, and a button that runs the built-in issue action, then navigation: { "page": "policy360" } opens the new policy
• products/HO3/config.json, pages.editor.journeys[0].workflows: issuance added after underwriting, so its steps come last in the step list.
• collections/config.json, sections: a reusable Binder Landing section, used in exercise 20

Answer: ex-11 (what changed)

12. Field Conditions

• Task: Add a Prior Address section to Submission Details whose address fields appear only when the applicant hasn't lived at the property for two years.
• Look at: The draft quote, Submission Details, the Prior Address section. Answer "No" to "Have you been living at the same property address for the last 2 years".
• Where: The section goes after Primary Applicant; each address field gets an access rule under data in products/HO3/config.json.

What you can use (see Field Access):

• access on a field hides just that field, wherever it shows. Exercise 6's rule was on a section, so it hid the whole section.
• A field's read takes false or one unless condition (or one all or any group).
• You can't make a field read-only by condition. A field's write can only be false or omitted; put a conditional read-only rule on a section instead.
• The condition field is in the same record, so you write it without the data. prefix.

{
	"data": {
		"previousStreetAddress": {
			"access": {
				"read": {
					"unless": {
						"field": "twoYearsLivingAtProperty",
						"operator": "neq",
						"value": "No"
					}
				}
			}
		}
	}
}

Answer: ex-12 (what changed)

Next Steps

• Add Buttons, Menus, and Editors

See Also

• Configurable UI Tutorial
• Editor Page
• Sections and Layout