Add Buttons, Menus, and Editors

In these exercises, you wire buttons to actions, replace the quote's menu, add a sidebar, and give the dwelling its own editor. Then you issue your quote. For every option, see Editor Page and Actions.

13. Buttons and Actions

• Task: Replace Finalize Quote's "Continue" button with a "Generate Quote" button that prices the quote, and add a "Refresh Flags" button that re-checks its flags, both through the tutorial's lifecycle plugin.
• Look at: The quote, Finalize Quote step: "Generate Quote" in the footer and "Refresh Flags" after the Flags section (Overview gets "Refresh Flags" too). Don't click "Generate Quote" yet: it prices the quote, and you'll use it when you issue the quote after exercise 16.
• Where: Define the actions once in collections/config.json. In products/HO3/config.json, add "Generate Quote" to Finalize Quote's footer buttons, and add a "Refresh Flags" button section after the Flags section.

What you can use (see Actions and Buttons and Navigation): a button runs a list of actions, then navigates. Actions are built-in, or your own:

• An action in collections.actions: name (the automation plugin), action (which of its actions), and automationPluginSetupData (passed to the plugin; the plugin decides what it means). An action's own setup data replaces automationPluginSetupData/config.json; they aren't merged.
• Actions run in three phases: checks (validateForm); then save, lifecycle actions, and plugin actions in one request; then refreshes. Within each phase, actions run in the listed order.
• navigation: the destination after the actions run, such as { "flow": … }, { "flow": …, "step": … } or { "page": "policy360" }
• type: "buttons" puts a row of buttons inside a step; type: "custom" is a button that only runs its actions.

{
	"actions": {
		"quote_pricingGate": {
			"name": "PolicyLifecycleOrchestrator",
			"action": "run",
			"automationPluginSetupData": {
				"socotraAction": "price",
				"gatingLevel": ["red"]
			}
		}
	}
}

{
	"type": "next",
	"title": "Generate Quote",
	"actions": ["validateForm", "save", "quote_pricingGate"]
}

For plugin authors (see Actions):

• The plugin receives the entity's locator (quoteLocator or transactionLocator), each key of the action's data, and automationPluginSetupData.
• data passes constants or field values. Write a field value as { "field": "data.policyType" }.
• The plugin returns HTTP 2xx with { "success": { "message": … } } or { "error": { "errorCode": 404, "errorMessage": … } }. An error shows its message and stops the button; on success, the page reloads the quote or transaction.

The answer also adds "Refresh Flags" to Bind, wires "Bind Quote" the same way, makes Quote Summary's "Continue" run quote_resetForBindEdits, and adds automationPluginSetupData/config.json, which sets every external integration to false. You need these to issue the quote after exercise 16.

Answer: ex-13 (what changed)

14. Editor Menu

• Task: Replace the quote's default actions menu (⋮), "Copy" and "Decline", with "Reset" and "Copy": "Reset" sends a priced quote back to draft so you can keep editing it, and "Copy" duplicates the quote.
• Look at: The quote's actions menu (⋮), top right of the page. On a draft quote, it shows only "Copy" ("Decline" is gone); "Reset" is for a priced quote, so it shows after you click "Generate Quote".
• Where: pages.editor.menu in products/HO3/config.json, beside workflows and journeys.

What you can use (see Menu):

• menu: a list of entries, each with buttons. A menu button takes the same types as a step button.
• type: "reset": a built-in button; it needs no actions.
• type: "custom" with actions: runs the listed actions, such as quote_copyToGroup from collections/config.json (exercise 13), which copies the quote into a quote group (see Quote Groups)
• Exercise 20 adds a second entry for transactions, with "Reset" and "Discard".

{
	"menu": [
		{
			"buttons": [{ "type": "reset" }]
		}
	]
}

Answer: ex-14 (what changed)

15. Editor Sidebar

• Task: Add a File Attachments panel, shown beside every step, that lists the quote's attached documents.
• Look at: The quote, any step: a new paperclip button on the right edge of the page (its tooltip says "File Attachments"). Click it to open the panel; it lists the quote's attachment fields, read-only.
• Where: pages.editor.sidebar in products/HO3/config.json, beside menu.

What you can use (see Sidebar):

• sidebar: a name (the panel's header) and sections, written like a step's sections
• One sidebar for the whole editor: it shows beside every step.
• On a section: hideTitle hides its title; layout.orientation: "vertical" puts one field per row.

{
	"sidebar": {
		"name": "File Attachments",
		"sections": [
			{
				"hideTitle": true,
				"include": ["data.documents"]
			}
		]
	}
}

Answer: ex-15 (what changed)

16. Exposure Editor

• Task: Give the dwelling its own editor: a Dwelling Details step with the dwelling's fields in 12 sections (Property Address, Catastrophe Exposure, Roof, and so on), then a Coverages step.
• Look at: The quote, Dwelling Details step.
  • Before: the dwelling's card is editable in place, with copy and remove icons
  • After: the card shows its fields as read-only text and gets a pencil icon. Click it to open the dwelling's own editor: a Dwelling Details step, then a Coverages step where you select the coverages. On a priced quote, the pencil becomes an eye icon, since the dwelling is read-only.
  • To get back to the quote, click "← Steps" at the top of the step list.
• Where: exposures/HO3Dwelling/config.json. The starting configuration has only its display.label; add pages.editor beside it.

What you can use (see Exposure Editor):

• An exposure editor has steps directly, with no workflows or journeys.
• Once the exposure has its own editor, its card on the quote shows read-only fields and a pencil that opens the editor.
• Paths are the dwelling's own: data.<field> for its fields, elements.<Coverage> for a coverage on it.
• The editor moves forward only from a footer button whose actions include save. type sets the button's role (next goes to the next step, save finishes), and actions does the saving.
• headerTemplate and navigation.back are accepted but not applied yet.

{
	"pages": {
		"editor": {
			"steps": [
				{
					"name": "Dwelling details",
					"sections": [
						{
							"title": "Property Address",
							"include": [
								"data.propertyStreetAddress",
								"data.propertyStreetAddressTwo",
								"data.propertyCity",
								"data.propertyState",
								"data.propertyZipCode"
							]
						}
					],
					"buttons": [
						{
							"type": "next",
							"title": "Select Coverages",
							"actions": ["validateForm", "save"]
						}
					]
				},
				{
					"name": "Coverages",
					"sections": [
						{
							"title": "Coverages",
							"include": ["elements.HO3CoverageA", "elements.HO3CoverageB"]
						}
					],
					"buttons": [
						{
							"type": "save",
							"title": "Save",
							"actions": ["validateForm", "save"]
						}
					]
				}
			]
		}
	}
}

Answer: ex-16 (what changed)

Issue Your Quote

The rest of the tutorial works on the policy your quote becomes. Click through the flow:

1. Go to Finalize Quote and click "Generate Quote". It prices the quote and moves on to Quote Summary.
2. On Quote Summary, click "Continue".
3. On Bind, click "Bind Quote".
4. On Issue, click "Issue Policy". Policy 360 opens on your new policy.

Keep that page open for exercises 17 and 18.

Next Steps

• Arrange Policy and Account Pages

See Also

• Configurable UI Tutorial
• Editor Page
• Actions