BriteQuote

Quote Flows

Quote Flow is a flexible solution to create custom Quoting wizards without touching a single line of code.

A Quote Flow is a configurable file defining a series of steps, fields to display in each step, the order we want the fields to appear in, how we want the fields to look, and even to define custom actions for each step.

Each Quote Flow is rendered as a wizard by the frontend, in which users can quickly fill in customers’ data and quickly get a quote for them.

If you want to jump straight to the tutorial on how to create a Quote Flow, click here.

Summary

Concepts

Quote Flow defines a set of building blocks to be used together in the configuration file in order to compose a quoting wizard:

At this moment, Quote Flows can be defined via YAML files using the concepts listed above. Check out this section for more information on YAML.

Page Group

A Page Group is collection of pages that together make for a step in the Quoting Wizard.

Properties

Example

version: '1.0'
pageGroups:
  - title: Setup
    name: setup
    pages:
      - title: Policy Setup
        name: policySetup
      - title: Additional Questions
        name: additionalQuestions
  - title: Drivers
    name: drivers
    pages:
      - title: Drivers
        name: setup
  - title: Vehicles
    name: vehicles
    pages:
      - title: Vehicles
        name: setup

The YAML above represents a wizard consisting of three Page Groups, which are rendered as steps in the sidebar by the UI:

Page

A Page will be rendered as an inner step inside a Page Group, as the latter may contains several instances of the former. When clicking on the “Continue” button in the UI, the user will be redirected to the next Page from the current Page Group or to the next Page Group in case there aren’t more pages.

Properties

Example

The YAML file from the Page Group section defines two different pages in its first Page Group, as you can see in the excerpt below:

pages:
  - title: Policy Setup
    name: policySetup
    continueButtonLabel: Continue to Additional Questions
    components:
      - type: totalPremiumDisplay
    headerToolbar:
      type: headerToolbar
      components:
        - type: pluginSlot
          slotName: britequote:policy-setup-header
          slotType: button-row
  - title: Additional Questions
    name: additionalQuestions

Supported components

Some Quote Flow components such as Page and Risk Table will render a list of components for user interaction, as defined in the YAML file. Right now, they supports rendering any of the components below:

Header Toolbar

A Header Toolbar renders a toolbar at the top of every page in the Quote Flow. It can be placed in a specific page or globally in all pages.

Properties

Example

headerToolbar:
  type: headerToolbar
  components:
    - type: pluginSlot
      slotName: britequote:header
      slotType: button-row
pageGroups:
  - title: Drivers
    name: setup
    pages:
      - title: Drivers
        name: driverSetup
        headerToolbar:
          type: headerToolbar
          components:
            - type: pluginSlot
              slotName: britequote:drivers:header
              slotType: button-row

The above configuration will render the plugin slots in the Quote Flow header depending on where it is placed:

Header Toolbar

A Footer Toolbar renders a sticky toolbar at the bottom of every page in the Quote Flow. It is placed as a top-level component in the Quote Flow.

It can be used to put any component in the footer. For example, Continue Button and Back Button for pagination.

Continue Button and Back Button will be added automatically in the left column if not defined in the Footer Toolbar Component.

Properties

Example

footerToolbar:
  type: footerToolbar
  name: footerToolbar
  rows:
    - type: row
      name: paginationRow
      columns:
        - align: left
          name: continueButtonCol
          component:
            type: continueButton
        - align: left
          name: backButtonCol
          component:
            type: backButton
        - align: right
          name: textCol
          component:
            type: block
            text: Progress is being saved.

The above configuration will render the footer toolbar with the defined columns:

Footer Toolbar

A Sidebar component can be used to render components in the Quote Flow sidebar. It is placed as a top-level component in the Quote Flow.

Properties

Example

sidebar:
  type: sidebar
  name: sidebar
  components:
    - type: pluginSlot
      slotName: britequote:sidebar
      slotType: button-row

The above configuration will render the sidebar components in the Quote Flow sidebar:

Sidebar

Risk Edit

A Risk Edit renders a form containing several Data Field Groups used for editing a single Risk Type.

It is a generic YAML object, whose type attribute is set to riskEdit.

Properties

type: riskEdit
riskType: drivers
fieldGroups:
- title: Personal Information
  name: Personal Info
  fields:
  - name: isNamedInsured
  - name: firstName
footerToolbar:
  type: footerToolbar
  name: footerToolbar
  rows:
  - type: row
    name: toolbarRow
    columns:
    - name: saveButtonCol
      align: right
      component:
        type: saveRiskButton
        label: Save Vehicle
    - name: removeButtonCol
      align: left
      component:
        type: removeRiskButton
        label: Vehicle
    - name: pluginSlotCol
      align: right
      component:
        type: pluginSlot
        slotName: britequote:footer
        slotType: button-row

The example in the next section shows an actual Risk Edit in action.

Data Field Group

A Data Field Group is a collection of Data Fields or nested Data Field Groups used to group a set of related fields together on the screen.

Data Field Groups are supposed to be children of Risk Edit components.

Properties

Example

version: '1.0'
pageGroups:
  - title: Setup
    name: setup
    pages:
      - title: Policy Setup
        name: policySetup
        components:
          - type: riskEdit
            riskType: policy
            fieldGroups:
              - title: Named Insured
                name: Contact Information
                displayType: el-card
                fields:
                  - name: firstNameNI
                    label: First Name
                  - name: middleInitialNI
                    optional: true

Notice how the Contact Information data field group is nested under a Risk Edit for editing an instance of the policy Risk Type.

This is how the Risk Edit and Field Group above would be rendered by the UI:

Data Field

A Data Field is rendered by the UI as a label plus an input element to be used by the agent to input customer’s data into the system.

It has to be a reference to a data field already setup in BriteLines. For example, to render a field to hold a drivers’s first name, we need to setup a data field referencing the firstName data field from the Drivers Risk Type.

Properties

Example

fields:
  - name: firstNameNI
    label: First Name
    helpText: As it appears on your birth certificate
  - name: middleInitialNI
    optional: true
    tooltip:
      text: Middle initials

The fields above will be rendered like this by the UI:

Tooltips

This component renders an interactive tooltip to optionally display extra information.

Properties

Example

fields:
  - name: businessName
    label: Business Name
    tooltip:
      text: Tooltip text goes here

Widget

Widgets are nothing but properties that we can set on fields so that they have a custom appearance.

Properties

Example

Consider this field:

fields:
  - name: gender

Without a widget, the gender field is going to be rendered as a select box, as it is defined in BriteLines as an enum field. This is how it looks by default:

However, we can change the way it looks with a widget:

fields:
  - name: gender
    widget:
      type: button-selection
      size: lg

And now, it is going to be rendered as:

Supported widgets

Quote Flow supports these types of widgets at this moment:

Example:

fields:
  - name: hasAntiLock
    widget:
      type: boolean-buttons
  - name: passiveRestraint
    widget:
      type: button-selection
  - name: originalCost
    widget:
      type: currency
      size: sm
  - name: customizationDescription
    widget:
      type: textarea

The YAML above is rendered like this by the UI:

Plugin Slot

Plugin slot is an object containing properties that we can set on the fields to render a plugin along with the field.

Properties

Example

fields:
  - name: serialVin
    label: VIN
    pluginSlot:
      slotName: britequote:risk-edit
      slotType: button-row

The field above will be rendered like this by the UI:

Grouped Risk Edit

A Grouped Risk Edit renders a single RiskEdit form for multiple Risk Types. It renders a select option above the risk edit form for selecting the Risk Type.

This is useful when multiple Risk Types represent a single logical unit. For example, different Risk Types like Private Passenger Auto, Motor Homes, Golf Carts, etc. can be logically a Vehicle.

Properties

Example

type: groupedRiskEdit
name: vehicleEditGroup
label: Vehicle
riskEdits:
  - type: riskEdit
    riskType: privatePassengerAutos
    fieldGroups:
      - title: Vehicle Information
        name: Vehicle Info
        fields:
          - name: serialVin
            label: VIN
          - name: modelYear
            widget:
              size: xs
          - name: make
          - name: model
  - type: riskEdit
    riskType: golfCarts
    fieldGroups:
      - title: Vehicle Information
        name: Vehicle Info
        fields:
          - name: serialVin
            label: Serial/VIN
          - name: modelYear
            widget:
              size: xs
          - name: make
          - name: model
  - type: riskEdit
    riskType: motorHomes
    fieldGroups:
      - title: Vehicle Information
        name: Vehicle Info
        fields:
          - name: serialVin
            label: Serial/VIN
          - name: modelYear
            widget:
              size: xs
          - name: make
          - name: model

Then YAML above is rendered like this by the UI:

The Risk Type selection option will be disabled when editing an existing risk.

Risk List

A Risk List renders a list of cards, each card representing a Risk. It also renders an empty card with a button to add new Risks.

Properties

Example

- type: riskList
  name: driverList
  riskTypes:
    - drivers
  riskLabel: Driver
  addNewRiskLabel: Add Driver
  indicators:
    - name: securityFreezeIndicator
      field: securityFreezeDriver
      display:
        when: true
        icon: lock
        label: Security Freeze
  components:
    - type: riskEdit
      riskType: drivers
      fieldGroups:
        - name: Personal Information
          fields:
            - name: driverName
            - name: gender

The YAML above would render a list of editable cards like this:

In addition to that, when the user clicks on “Add Driver”, a page like this will open where the user will be able to add a driver:

Example with multiple Risk Types

- type: riskList
  name: vehcileList
  riskTypes:
    - privatePassengerAutos
    - golfCarts
    - motorHomes
  riskLabel: Vehicle
  components:
    - type: groupedRiskEdit
      name: vehicleEditGroup
      label: Vehicle
      riskEdits:
        - type: riskEdit
          riskType: privatePassengerAutos
          fieldGroups:
            - title: Vehicle Information
              name: Vehicle Info
              fields:
                - name: serialVin
                  label: VIN
        - type: riskEdit
          riskType: golfCarts
          fieldGroups:
            - title: Vehicle Information
              name: Vehicle Info
              fields:
                - name: serialVin
                  label: Serial/VIN
        - type: riskEdit
          riskType: motorHomes
          fieldGroups:
            - title: Vehicle Information
              name: Vehicle Info
              fields:
                - name: serialVin
                  label: Serial/VIN

The YAML above would render a list of editable cards of different risk types like this:

In addition to that, when the user clicks on “Add Vehicle”, a page like this will open where the user will be able to add a Vehicle.

Indicators

An Indicator displays a label and optionally an icon when a certain condition on the risk is met.

Properties

Example with Indicators

- type: riskList
  name: driverList
  riskTypes:
    - drivers
  riskLabel: Driver
  indicators:
    - name: securityFreezeIndicator
      field: securityFreezeDriver
      display:
        when: true
        icon: lock
        label: Security Freeze

The YAML above would be rendered like this by the UI, where one Driver has the securityFreezeDriver defined, and the other doesn’t:

Suffixes

A Suffix displays extra information on the risk identifier when a certain condition on the risk is met.

Properties

Example with Suffixes

- type: riskList
  name: driverList
  riskTypes:
    - drivers
  riskLabel: Driver
  suffixes:
    - name: driverRiskNameSuffix
      field: deceased
      display:
        when: true
        label: "(Deceased)"

The YAML above would be rendered like this by the UI, where one Driver has the deceased defined, and the other doesn’t:

Risk Table

A Risk Table is rendered by the UI as a table of Risks of a given type and, optionally, a button to add a new Risk using a popup modal.

It is a generic YAML object, whose type attribute is set to riskTable.

Properties

Example

- type: riskTable
  name: vehicleTable
  columns:
    - name: make
      header: Make
    - name: model
      header: Model
    - name: modelYear
      header: Year
  riskTypes:
    - vehicles
  riskLabel: Vehicle
  actions:
    - trigger: rowClick
      type: modal
      components:
        - type: riskEdit
          riskType: vehicles
          fieldGroups:
            - title: Vehicle Information
              name: Vehicle Info
              displayType: el-card
              fields:
                - name: vin
                - name: make
    - trigger: addNewClick
      type: modal
      components:
        - type: riskEdit
          riskType: vehicles
          fieldGroups:
            - title: Vehicle Information
              name: Vehicle Info
              displayType: el-card
              fields:
                - name: vin
                - name: make

The YAML above would render the following Risk Table:

In addition to that, when the user clicks on “Add Vehicle”, a page will show to allow for the user to add a new Vehicle.

Special Properties

The columns property can contain a special optional column named __premium__ which will display each risk’s total premium in the list if included.

- type: riskTable
  name: vehicleTableReview
  riskTypes:
    - vehicles
  title: Vehicles
  columns:
    - name: vin
      header: VIN
    - name: make
      header: Make
    - name: model
      header: Model
    - name: __premium__
      header: Premium

Risk Table Action

A Risk Table Action represents a configurable action that can be triggered when a given event happens on a Risk Table.

Even though they are pretty much configurable from the YAML standpoint, it is worth noticing that new triggers and action types will probably require code changes in the UI component that will handle them.

Properties

Example

- trigger: rowClick
  type: showModal
  components:
    - type: riskEdit
      riskType: drivers
      fieldGroups:
        - title: Personal Information
          name: Personal Info
          fields:
            - name: firstName
            - name: gender

When the action above is triggered, a page like this is going to show up on the screen:

Nested Risk Table

The Nested Risk Table component is in charge of handling children risk quotes for a Risk Edit.

Let’s say that we need our Quoting wizard to handle the following risk hierarchy:

Policy
  - Drivers
    - Violations

That is, for each driver in our policy we want to be able to add multiple violations.

In this case, all we have to do is to add a Risk Edit for the driver and nest a Nested Risk Table for the driver violations on it.

Properties

Example

- type: riskEdit
  riskType: drivers
  fieldGroups:
  - title: Personal Information
    name: Personal Info
    fields:
    - name: firstName
      label: First Name
    - name: lastName
      label: Last Name
  components:
  - type: nestedRiskTable
    name: violationsRiskTable
    riskTypes:
      - violations
    title: Accident/Violation (5 Year History) Information
    columns:
      - header: Date
        field: violationDate
        width: 15%
      - header: Type
        field: violationType
      - header: Source
        field: risk.generated_by
        width: 15%
        tooltip:
          text: This shows whether or not the information has been pulled from an external source.
      - header: Actions
        type: action
        width: 20%
    dialog:
      title: Accident/Violation (5 Year History) Information
      components:
        - type: riskEdit
          riskType: violations
          fieldGroups:
          - name: Violations
            fields:
              - name: violationDate
                widget:
                  size: md
              - name: violationType
                widget:
                  size: md
              - name: violationTotalDamages
                widget:
                  type: currency
                  size: sm
              - name: violationBodilyInjury
                label: Was anyone injured or killed as a result of this accident?
              - name: violationInformation
                widget:
                  type: textarea
                  size: full

The YAML above would be rendered like this by the UI:

The dialog would be rendered like this by the UI:

Multi Risk Edit

The Multi Risk Edit component is in charge of handling children risk quotes for a Risk Edit.

Let’s say that we need our Quoting wizard to handle the following risk hierarchy:

Policy
  - Drivers
    - Violations

That is, for each driver in our policy we want to be able to add multiple violations.

In this case, all we have to do is to add a Risk Edit for the driver and nest a Multi Risk Edit for the driver violations on it.

Properties

Example

- type: riskEdit
  riskType: drivers
  fieldGroups:
    - title: Personal Information
      name: Personal Info
      displayType: el-card
      fields:
        - name: firstName
          label: First Name
  components:
    - type: multiRiskEdit
      riskType: violations
      headerText: Violations
      addButtonLabel: Add Violation
      fieldGroups:
        - name: Past Violations
          fields:
            - name: violationDate
            - name: violationType

The YAML above would be rendered like this by the UI:

Risk Item Group

The Risk Item Group is a collection of Risk Items used to group a set of related Risk Items on screen.

Risk Item Groups are supposed to be children of RiskEdit components.

Properties

Example

- type: riskEdit
  riskType: privatePassengerAutos
  fieldGroups:
    - name: Vehicle Info
      fields:
        - name: serialVin
  components:
    - type: riskItemGroup
      label: Core Coverages
      riskItems:
        - name: bodilyInjury
          label: Custom Bodily Injury
          fields:
            - name: bodilyInjuryLimit

The YAML above would be rendered like this by the UI:

Risk Item

The Risk Item component is used to display a Risk Item for a Risk Item Group.

For example when we want the wizard to show items such as Medical Expense Coverage or Comprehensive Coverage.

Properties

Example

- type: riskItemGroup
  label: Optional Coverages
  riskItems:
    - name: medicalExpense
      displayType: inline
      label: Custom Medical Expense Label
      tooltip:
        text: Optional coverage for certain medical expenses
      fields:
        - name: medicalExpenseLimit
        - name: passiveRestraint
    - name: incomeLossBenefits

The YAML above would be rendered like this by the UI:

Block

The Block component renders an arbitrary block of Markdown text as HTML on a page. It may be useful for displaying extra information about the Quoting process to the agents.

Properties

Example

components:
  - type: block
    text: A **block**, including a [link](http://foobar.com/).

The YAML above would be rendered like this by the UI:

Separator

The Separator component renders a visual horizontal separator on the page.

Properties

Example

components:
  - type: separator

The YAML above would be rendered like this by the UI:

Rate Quote Button

The Rate Quote Button component is a simple component which renders an action button that is responsible for rating a Quote.

It is a generic YAML object, whose type attribute is set to rateQuoteButton.

Properties

Example

components:
  - type: rateQuoteButton
    label: Rate Quote

The YAML above would be rendered like this by the UI:

Submit Quote Button

The Submit Quote Button component is a simple component which renders an action button that is responsible for submitting a Quote to BriteRules for STP Review (Straight Through Processing).

It is a generic YAML object, whose type attribute is set to submitQuoteButton.

Properties

Example

components:
  - type: submitQuoteButton
    label: Submit Quote

The YAML above would be rendered like this by the UI:

Bind Quote Button

The Bind Quote Button component renders an action button that allows the user to bind a quote when clicking on it. If a quote is bound, the Bind Quote Button is replaced with a Go to Policy button that when clicked takes the user to the policy associated with the quote.

Properties

Example

components:
  - type: bindQuoteButton
    label: Bind Quote

Request Document Button

The Request Document Button component renders an action button that allows the user to request a Document from BriteDocs. The kind of document that will be generated is configurable via the documentName property.

Properties

components:
  - type: requestDocumentButton
    name: requestConfirmationOfCancellation
    label: Request Document
    documentName: document-type-slug
    rateRequired: false

Email Document Button

The Email Document Button component renders an action button that allows the user to email a Document from BriteDocs. The kind of document that will be generated is configurable via the documentName property.

Upon clicking the button, a dialog is displayed that contains a form to fill the Recipient’s Email addresses, Subject and Body.

Properties

components:
  - type: emailDocumentButton
    name: emailConfirmationOfCancellation
    label: Email Document
    documentName: document-type-slug
    rateRequired: false

Upon clicking the button, the email composition dialog is displayed.

Continue Button

The Continue Button component renders a button that should take the user to the next step in the quoteflow.

Properties

components:
  - type: continueButton
    label: Continue to Drivers

Back Button

The Back Button component renders a button that should take the user one step back in the quoteflow.

Properties

components:
  - type: backButton
    label: Back to Previous

Total Premium Display

This is a very simple component which basically renders the value for the current quote’s total premium.

It is a generic YAML object, whose type attribute is set to totalPremiumDisplay.

Properties

Example

components:
  - type: totalPremiumDisplay

Attachment Upload Panel

This component allows uploading files to a quote and listing the files already uploaded.

Properties

components:
  - type: attachmentUploadPanel
    name: attachments
    title: Attachments

Associate Contacts Panel

This component is used to select and view the Agency and Agent associated with a quote.

It lets you search Agency and Agent contacts by their name and saves the selected contact in the quote.

Properties

Example

components:
  - type: associateContactsPanel
    name: associatedContacts

View Associated Contacts

The select inputs for both fields are searchable:

Search Agencies

Search Agents

Row

This component is used to create a layout with Rows and Columns. It allows us to place components in the directions of our choice.

Currently only Footer Toolbar supports rows.

Properties

Column

This component represents a column inside the Row component. It allows aligning any child component inside the layout.

It can only be used inside the Row component’s columns property.

Properties

Example

type: row
name: footerRow
columns:
  - name: continueBtn
    align: left
    component:
      type: continueButton
  - name: backBtn
    align: left
    component:
      type: backButton
  - name: submitBtn
    align: center
    component:
      type: submitQuoteButton
      label: Submit
  - name: pluginSlotCol
    align: right
    component:
      type: pluginSlot
      slotName: britequote:footer
      slotType: button-row

The above configuration will render this layout:

Discard Endorsement Button

The Discard Endorsement Button component is a simple component which renders an action button that is responsible for discarding an unbound endorsement.

Properties

Example

type: discardEndorsementButton
label: Discard Endorsement
confirmDialog:
    title: Discard Endorsement
    text: This will discard the Endorsement, Continue?
    confirmButtonLabel: "Yes"
    cancelButtonLabel: "No"
discardSuccessMessage: Endorsement discarded

The above configuration represents the default values for all optional values and will render this layout:

For the button:

For the confirmation dialog:

For the discard success message:

Review Panel

This component is used to provide feedback to the user once the quote has been declined, referred or approved by the underwriter.

Properties

Example

components:
  - type: reviewPanel
    name: reviewPanel
    labels:
      approved:
        title: Congratulations! Your quote has been approved by underwriting.
        subtitle: Please note any changes to quote details will require another underwriter review.
      referred:
        title: Underwriter review is pending.
        subtitle: An underwriter will review and respond within 10 days.
      declined:
        title: This quote has been declined by underwriting.
        subtitle: For any immediate questions or concerns please call the underwriting team.

The YAML above would be rendered like this by the UI when the quote has been approved by the underwriter:

Review Panel Approved

When the quote has been referred to an underwriter:

Review Panel In-Review

When the quote has been declined by underwriting:

Review Panel Declined

Payment Plans Display

This component is used to display different payment plans for the agents. Configure the payment plans in BriteQuote Django Admin by following this documentation.

Properties

Example

- type: paymentPlansDisplay
  name: paymentPlansDisplay

The YAML above would be rendered like this by the UI:

Notes

  1. The payment methods in the Billing Panel will be restricted to the ones allowed in the selected payment plan.

Billing Panel

This component is used to collect billing information. Currently, only the recurring payment type is supported.

Properties

Example

components:
  - type: billingPanel
    name: billingPanel
    paymentMethods:
      CC:
        label: Credit Card
      manual_pay:
        label: Manual Pay
      ACH:
        label: EFT

The YAML above would be rendered like this by the UI:

Setup requirements

There are two additional requirements to start using the Billing Panel in a Quote Flow:

  1. The billing_schedules table must be populated.
  2. The BriteCore Contacts Integration must be set up. In production environments, it should be setup already.

Save Risk Button

This component is used to render a button that saves the risk being edited. Currently, its only supported inside the Footer Toolbar for Risk Edit component. If the quote is locked, a Back button is rendered instead of the Save Button.

Properties

Example

component:
  type: saveRiskButton
  label: Save Vehicle

The YAML above would be rendered like this by the UI:

Remove Risk Button

This component is used to render a button that deletes the risk being edited. Currently, its only supported inside the Footer Toolbar for Risk Edit component. If the risk is not saved, a Cancel button is rendered instead of the Remove Risk Button.

Properties

Example

component:
  type: removeRiskButton
  label: Remove Vehicle

The YAML above would be rendered like this by the UI:

Conversion Policy Number Input

This component should be used in a quote flow for creating Conversion Policies, allowing for adding the Policy Number that should be used when the quote is bound into a policy.

Properties

Example

- type: conversionPolicyNumberInput
  label: Conversion Policy Number
  showComponentFieldName: conversionPolicy

The YAML above would be rendered like this by the UI:

Defining a custom Quote Flow

A custom Quote Flow can be defined in a YAML file that must follow a specific schema.

The rest of this section will outline the steps needed in order to define a custom Quote Flow.

1. Define your steps

First of all, we have to think about which steps does our Quoting wizard require and then define a Page Group for each step.

Let’s say that all we need for our Quoting wizard are two steps: setup and review.

This is how our YAML would look like:

version: '1.0'
pageGroups:
  - title: Setup
    name: setup
  - title: Review
    name: review

Warning: the above YAML file wouldn’t work, because the schema requires at least one Page per Page Group. Hold on, as we’ll iterate over it in the next sections.

2. Define the pages

Each of the page groups defined in the last step may contain several pages.

Let’s say that all we need is:

version: '1.0'
pageGroups:
  - title: Setup
    name: setup
    pages:
      - title: Underwriting Questions
        name: underwritingQuestions
      - title: Personal Information
        name: personalInfo
  - title: Review
    name: review
    pages:
      - title: Confirmation
        name: confirmation

3. Define the forms for data collection

Now, we have to decide which fields we are going to place in each page. Let’s focus on the personalInfo page defined in the step above.

Let’s say that we want to collect data for these fields in that page:

(Each fields reference name can be found in BriteLines, in the Risk Type you would like to collect data for. The fields above are all related to the policy Risk Type).

Once we defined the fields that we need, it’s just a matter of placing a risk edit component pointing to the policy Risk Type and include a few field groups with the fields we need.

Here’s the YAML file including the fields above in two separate field groups, one for the personal information and the other for the address.

version: '1.0'
pageGroups:
  - title: Setup
    name: setup
    pages:
      - title: Underwriting Questions
        name: underwritingQuestions
      - title: Personal Information
        name: personalInfo
        components:
          - type: riskEdit
            riskType: policy
            fieldGroups:
              - name: Name Group
                fields:
                  - name: firstNameNI
                  - name: genderNI
              - name: Address Group
                title: Address
                displayType: el-card
                fields:
                  - name: streetAddressNI
                  - name: zipCodeNI
                    widget:
                      size: xs
  - title: Review
    name: review
    pages:
      - title: Confirmation
        name: confirmation

The YAML above is rendered like this by the UI:

If you want to include further components such as risk tables into your flow, please refer to the Risk Table section on this document.

Quote Flow Search Criteria

We can create as many QuoteFlow objects as we need. For example, we might want to have a given flow for quotes on the personalAuto line of business and a totally different one for homeowners.

When we load a quote using Quote Flow, the system is going to perform a search on the current Quote Flow objects to find which flow should be used for that quote.

The search is done by checking the Criteria defined for each of the of the QuoteFlow objects. The QuoteFlow whose criteria matches the current quote will be returned.

A Criteria is nothing but a JSON object that looks like this:

{
  "version": "x.y",
  "criteria": {}
}

So far, there’s only one kind of Criteria supported, but additional versions will be supported in the future.

Note: backend code changes are required for each new criteria version we may add in the future.

Criteria v0.1

Quote Flows defined with this type of criteria will be selected for a given Quote and user based on these three properties:

  1. Product name.
  2. Transaction type (optional).
  3. Current user’s role (optional).
  4. Product versions list (optional).

The search for Quote Flows that use this type of criteria will return the first QuoteFlow to have in its criteria:

  1. A product name that matches the Quote’s product name.
  2. A transaction type that matches the Quote’s transaction type (if defined).
  3. A user role that matches the current user’s role (if defined).
  4. A product version that matches the Quote’s product version. Important to be sure the correct quote flow is used when the version criteria is used, be sure to add it to every criteria related to that product.

Check out this example:

{
  "version": "0.1",
  "criteria": {
    "product": ["personalAutoNY", "personalAuto"],
    "version": ["af1304de-1110-4176-87c5-03ceeb1c25be"],
    "transaction": ["new_business"],
    "role": ["Agent", "Agency"]
  }
}

Let’s say we’ve attached the criteria above to a new QuoteFlow object that we’re creating. Now, if an Agent tries creating a new Quote for the personalAuto product version af1304de-1110-4176-87c5-03ceeb1c25be, this new flow is going to be returned, as long as it’s the first one having personalAuto in criteria.product, af1304de-1110-4176-87c5-03ceeb1c25be in criteria.version, new_business in criteria.transaction and Agent in criteria.role.

The YAML Format

YAML is a popular file format for software configuration and is currently supported by Quote Flow for custom Quoting wizards definition. If you’re not familiar with YAML, check out these links:

Observation

One possible caveat while creating the quote flow YAML file that can generate unexpected results is how it deals with some values, in some cases, textual values are treated as booleans by the system so values like “y/n”, “true”/”false”, “yes”/”no” or “on”/”off”, regardless of capitalization should appear in quotes to avoid this behavior.

Instead of:

- type: example
  label: Yes

They should be used as:

- type: example
  label: "Yes"

This way the value will be treated as expected.

Loading a Quote Flow

Once we’re done defining our Flow Configuration and the Criteria, now it’s time to use them in BriteQuote.

Loading QuoteFlow from Django Admin

  1. Go to the site admin page and click on “Add Quote Flow”.
  2. Add the Configuration YAML in the configuration field.
  3. Add the Criteria to define for which quotes this Quote Flow will be used.

The QuoteFlow Admin page looks like this:

The same interface can be used for making further changes to the QuoteFlow configuration.

Now, go to your BriteQuote UI and create a Quote.

The YAML editor

The YAML editor available in Django admin supports a few shortcuts to make navigation easier: