Configure Fields

In these exercises, you change how individual fields look and behave on your quote: their labels, help text, inputs, computed values, and the fields of a custom data type. For every option, see Field Properties.

1. Labels, Help Text, and Inputs

• Task: Relabel "Quote Expires In" to "Quote to expire in", show "days" after the input, and add help text.
• Look at: The draft quote, first step, the Details section ("Quote Expires In").
• Where: products/HO3/config.json, a new top-level data key, next to display and pages.

What you can use (see Display and Tooltip):

• data.<field>.display: label, suffix (text after the input), control (the input widget: radio-group, dropdown, multiselect, textarea, rich-text), format (currency, percentage, date)
• data.<field>.tooltip.content: help text behind an ⓘ
• A field's settings live on the field, not in the section that shows it, so they apply wherever the field appears.
• Write only the fields you're changing. Every other field keeps its displayName from the tenant configuration, or, without one, a label generated from its name.
• currency, percentage, and date are format values, not control values.
• The tenant configuration already sets two of these the older way, with tags: the 18 eligibility questions are tagged radio-group, and "Date Request Received" has a tooltip|… tag. The finished configuration moves both into display.control and tooltip. The answer sets all 18 radio groups, and exercise 2 replaces the help text on "Date Request Received". The page looks almost the same.

{
	"data": {
		"expireIn": {
			"display": { "label": "Quote to expire in", "suffix": " days" },
			"tooltip": {
				"content": "Number of days after quote generation that offer is valid for"
			}
		}
	}
}

Answer: ex-01 (what changed)

2. Computed and Read-Only Fields

• Task: Fill "Date Request Received" with yesterday's date. Show the quote's expiration date as a read-only date, calculated from "Quote to expire in". Rename "Start Time" and "End Time" to "Proposed Effective Time" and "Proposed Coverage Expiration", and set the end to one year after the start.
• Look at: Same step: the dates at the top, and "Date Request Received" further down.
• Where: products/HO3/config.json. submissionDate goes under data. expirationTime is the quote's own field, so it's a key at the top level of the file, beside data.

What you can use (see Compute, Field Access, and Quote-Root Fields):

• compute: from (a field such as startTime, or today), op (add or subtract), unit (days or years), and either a fixed amount or amountField (read the amount from another field)
• access.write: false: show the value but block editing
• display.format: "date": show the value as a date
• The quote's own fields (startTime, endTime, expirationTime) aren't in data; configure them at the top level.

{
	"data": {
		"submissionDate": {
			"display": { "label": "Date Request Received" },
			"tooltip": {
				"content": "This is the date the request was received from the Agent"
			},
			"compute": { "from": "today", "op": "add", "unit": "days", "amount": -1 }
		}
	}
}

Answer: ex-02 (what changed)

3. Data Types

• Task: Give the applicant's fields clearer labels, show the date of birth as a date, and add help text to the insurance score.
• Look at: Same step, the Applicant Details section.
• Where: dataTypes/Applicant/config.json. In the starting configuration, this file is empty ({}).

What you can use (see Entity Nodes):

• The same field settings as exercise 1, under the data type's own data
• display.label at the top level: the data type's own name
• The settings apply wherever the type shows. The product's applicant field is of type Applicant, so the applicant section on the quote picks them up.
• You can't yet give a data type its own editor or overview page.

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

Answer: ex-03 (what changed)

Next Steps

• Build Sections

See Also

• Configurable UI Tutorial
• Field Properties