Arrange Policy and Account Pages

In these exercises, you work on the policy your quote became: you arrange the cards on Account 360 and Policy 360, give Policy Details its tabs, and relabel the cancel dialog. For every option, see Overview Pages, Details Page, and Create Dialogs.

17. Account 360

• Task: Arrange Account 360 in two columns: policies and quotes in the first, account details and billing in the second.
• Look at: From Policy 360, click the account name to open Account 360.
• Where: accounts/Policyholder/config.json. Add pages.account360 beside display.

What you can use (see Overview Pages):

• A 360 page is columns of cards. Each column has cards, and optionally layout.width for its share of the page.
• A card is a name (the predefined card with its defaults) or an object with type, title, layout, and config.
• Account 360's cards: policies, quotes, workManagement, accountDetails, billing

{
	"pages": {
		"account360": {
			"columns": [{ "cards": ["policies", "quotes"] }]
		}
	}
}

Answer: ex-17 (what changed)

18. Policy 360, Policy Details, and Create Transaction Dialogs

• Task: Arrange Policy 360 with history and documents beside the policy summary; give Policy Details read-only tabs; label the cancel dialog's fields "Cancellation Reason" and "Cancellation Date".
• Look at: Your policy: Policy 360, then "View Policy Details", then "Cancel" in the actions menu (⋮) at the top right of Policy Details. Close the cancel dialog without submitting; exercise 19 comes back to it.
• Where: pages.policy360, pages.policyDetails, and a top-level dialogs in products/HO3/config.json, plus transactionTypes/config.json.

What you can use (see Overview Pages, Details Page, and Create Dialogs):

• Policy 360 works like Account 360 (exercise 17): columns of cards.

• A card hides itself when it has nothing to show or the user lacks permission. You can't add a custom card yet.
• Leave a 360 page out, and it keeps its default: Policy 360 shows billing, workManagement, and history, with overview, documents, and fnols beside them.
• Policy Details consists of section tabs, always read-only, with the same section properties as the editor.
• type: "divider" separates tabs, and menu holds change, renew, cancel, and reinstate.
• Role and data conditions on tabs don't take effect yet; use scope instead.
• Create transaction dialogs: dialogs.create<Category>.fields sets labels and defaults. transactionTypes/config.json labels and orders each type in the picker; dialogs.create: false hides a transaction type from the picker.

{
	"policy360": {
		"columns": [
			{
				"layout": { "width": "2/3" },
				"cards": [
					{
						"type": "documents",
						"layout": { "collapse": "expanded" },
						"config": {
							"options": { "external": false }
						}
					}
				]
			},
			{
				"layout": { "width": "1/3" },
				"cards": [
					"overview",
					{ "type": "accountDetails", "title": "Account Details" }
				]
			}
		]
	}
}

{
	"dialogs": {
		"createCancellation": {
			"fields": {
				"transactionType": { "label": "Cancellation Reason" },
				"effectiveTime": { "label": "Cancellation Date", "default": "now" }
			}
		}
	}
}

The answer also adds producer summary, attachments, billing, claims, and quotes cards to Policy 360, subheaders on Policy 360, labels for the change and renewal dialogs, and a Policy Details menu.

Answer: ex-18 (what changed)

Next Steps

• Set Journeys, Scope, and the Landing Page

See Also

• Configurable UI Tutorial
• Overview Pages
• Details Page
• Create Dialogs