Topics on this page

Plugin slots and functionality details

Plugin slots are predefined sections of BriteCore’s UI where third parties can connect their plugins.

For example, BriteCore provides a plugin slot called britequote:risk-edit:button-row, which lets users add custom action buttons into the quoting form.

Each plugin slot type may have instances spread in multiple locations in the UI; the standard format for naming them is {product}:{page}:{slot-type}. For example, the button-row slot could be available in different places across the system.

Note: At this point, you can add plugins only to BriteQuote risk edit pages. In BriteCore, risks are the assets protected by the insurance; for example, auto.

Each plugin slot can be placed in multiple locations on a given page. The plugin slot location property controls in what part of the page a plugin slot should be available. For instance, the britequote:risk-edit:button-row plugin slot is available in the sidebar and bottom-row locations of the quoting form, while the britequote:risk-edit:auto-complete plugin slot is placed in the bottom-row location of the quoting form.

Plugin slots reference

BriteCore has three plugin types available:

  • button-row
  • auto-complete
  • markup

button-row

The button-row slot allows you to plug in action buttons on various pages. The slot renders the buttons that the plugin requested during its initialization; when a user selects the button, it will call the plugin callbacks.

Details

  • Slot type: button-row
  • Slot instances in the UI: britequote:risk-edit:button-row
  • Slot locations:
    • sidebar: When using this location, the plugin will be rendered in the sidebar of the quoting form.
    • bottom-row: When using this location, the plugin will be rendered below the quoting form.
  • Interface: Requires an object upon initialization.

Example initialization object

View code
{ buttons: [{
text: 'Capitalize',
callback: capitalizeFields,Visible: (context) => true,
Enabled: (context) => true
}]
}

Usage considerations

  • The callback function must be defined in your plugin file; it will be called whenever the button is selected.
  • The button-row slot type allows developers to write plugins to read data from a page, process this data, and then send the results back to the page.
    • Such buttons can obtain the input data in a context object and perform any computations, third-party services lookups, validations, etc. As a result, they can emit events back to BriteCore UI with new data. Then, the latter can apply the changes on the data used by the page.

The britequote:risk-edit:button-row slot type is currently available in sidebar and bottom-row.

auto-complete

Render buttons, dialog boxes, check boxes, and other UI elements to dynamically display data and respond to user interactions.

For more information, refer to our design system documentation.

Details

  • Slot type: auto-complete
  • Slot instances in the UI: britequote:risk-edit:button-row
  • Slot locations:
    • bottom-row: When using this location, the plugin will be rendered below the quoting form.
  • Interface: Requires an object upon initialization.

Example initialization object

View code

p.initialize({
"auto-complete": {
inputs: [
{
placeholder: "Search",
querySearch,
handleSelect,
prefixIcon: ["far", "search"],
// suffixIcon: ["far", "search"],
triggerOnFocus: true
}
]
}

markup

Render buttons, dialog boxes, check boxes and other UI elements to dynamically display data and respond to user interactions. With britequote:risk-edit:markup, you can:

  • Render elements to the UI with more flexibility. Refer to the BriteCore UI design system for available components and principles.
  • Handle the user selecting one of the possible options and emit a create-and-update-risk event to BriteCore .
  • Access plugin methods available to all plugin slots. In addition, the markup plugin slot has two additional methods:
    • setData(): Updates the state of your slot by sending data from the plugin to the UI slot.
    • getData(): Retrieve data from the state of the plugin slot.

Details

  • Slot type: markup
  • Slot instances in the UI: britequote:risk-edit:markup
  • Slot locations:
    • bottom-row: when using this location, the plugin will be rendered below the quoting form
      Interface: requires an object upon initialization

Britequote:risk-edit:markup is currently available in one location: bottom-row.

Example initialization object

This example shows how to render a dialog box that contains a form with two radio buttons using the markup slot type.

View code

let p = new BriteCorePlugin(PLUGIN_NAME)
p.initialize({
"markup": {
template: `
<div>
<el-dialog
title="Tips"
:visible.sync="dialogVisible"
max-width="30rem">
<span>Please select an option</span>
<div>
<el-radio v-model="option" label="A">Option A</el-radio>
<el-radio v-model="option" label="B">Option B</el-radio>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeDialog()">Confirm</el-button>
</span>
</el-dialog>

<el-button class="u-mt3" @click="openDialog()">click to open the Dialog</el-button>
</div>
`,
data: {
dialogVisible: false,
option: ''
},
methods: {
openDialog() {
this.parent.setData({dialogVisible: true})
},
async closeDialog() {
const option = await this.parent.getData('option')
this.parent.displayMessage(option)
this.parent.setData({dialogVisible: false})
},
}
}
});

Plugin slot locations

sidebar

Located in the sidebar next to quoting forms, it reads data from a form and passes it to the plugin, which emits an update-risk event back with a JSON Patch object specifying what fields in the form should be updated.

Plugins connected to this slot location will receive the following parameters in their context input object:

  • riskState: A JSON object representing the risk being edited. It contains information about fields and items along with other information about this risk.
  • quote: An object that contains general information about the current quote, including quote_number, product_name and root_risk_quote_id.

Plugins connected to this slot location are expected to emit the following events up to BriteCore-UI:

  • update-risk: BriteCore-UI expects plugins to send the following parameters along with this event:
    • jsonPatch: An object that specifies which fields of the currently editing riskState should be updated, and the new values for these fields.

bottom-row

Located in the bottom row of the first page, it allows the creation of new risk instances. It gets data from the page and passes it to the plugin, which emits a create-and-update-risk event.

Plugins connected to this slot location will receive the following parameters in their context input object:

  • riskTypes: An array containing all the available Risk Types. Each has its id, label, name, and parentRiskTypeId.
  • rootRiskQuote: A Risk Quote object combining information about a risk in a Quote. It contains data such as riskState object, riskTypeState object, and all child Risk Quote objects. Root Risk Quote here represents the main Risk Quote object.

Plugins connected to this slot location are expected to emit the following events up to BriteCore-UI:

  • create-and-update-risk: This event receives an array of objects containing the data required to create new risks. Each of these objects should contain:
    • parentRiskQuote: Risk Quote object that should be the parent for the new risk that’s going to be created.
    • riskType: Risk Type object that describes the type for new risk.
    • jsonPatch: Object specifying which fields should be updated, as well as the values for these fields in the new risk.

Plugin methods

Each plugin slot exposes a set of methods that can be called from the handler’s scope directly. For example, if you’re creating a plugin that handles a button click and you want to show an error to the UI from the plugin, you can do it by calling the method from the exposed interface of the button-row slot:

View code
function onClick(context) {
// ...
this.parent.displayErrors("error message")
// ...
}

 

The following plugin methods are available for both button-row and auto-complete.

The plugin methods available include:

  • updateRisk: Reads data from a form and passes it to the plugin, which emits an update-risk event back with a JSON Patch object specifying what fields in the form should be updated.
  • createAndUpdateRisk: Receives an array of objects containing the data required to create new risks.
  • displayErrors: Displays an error message if the plugin fails.
  • displayMessage: Displays a custom message to your users.
  • displayInfoPopUp: Can display a longer message using a pop-up.
  • attachFileToQuote: Attach a file to quote.
  • showLoadingIndicator: Shows a loading spinner on the UI while the plugin loads in data. showLoadingIndicator can be called from the plugin’s callback like showLoadingIndicator('component',true) and showLoadingIndicator('component', false). Additionally, you can also call the same method with fullscreen instead of component so that the entire site is locked until the plugin finishes running.
  • setData: Updates the state of your slot by sending data from the plugin to the UI slot (only available to the markup).
  • getData: Retrieve data from the state of the plugin slot (only available to the markup).

Object reference

riskTypes

  • id: Unique risk type ID
  • label: Risk type label
  • name: Risk type name
  • parentRiskTypeId: Risk type ID of parent risk type
  • __typename: Type of entity, such as RiskType

Example

View code
[
{
"id": "246fcbdc-42e9-4cdc-9783-0efa82cef984",
"label": "Accident/Violation (5 Year History)",
"name": "violations",
"parentRiskTypeId": "e1711652-8450-4492-b965-ed3a016152c3",
"__typename": "RiskType"
},
{
"id": "e1711652-8450-4492-b965-ed3a016152c3",
"label": "Driver",
"name": "drivers",
"parentRiskTypeId": "6bf23139-95ff-45ed-856e-b079573d851a",
"__typename": "RiskType"
},
{
"id": "6bf23139-95ff-45ed-856e-b079573d851a",
"label": "Policy",
"name": "policy",
"parentRiskTypeId": null,
"__typename": "RiskType"
},
{
"id": "3cbccfb0-68e6-4b21-ac18-176c1ea70496",
"label": "Private Passenger Auto",
"name": "privatePassengerAutos",
"parentRiskTypeId": "6bf23139-95ff-45ed-856e-b079573d851a",
"__typename": "RiskType"
}
]

riskState

  • id: Unique risk ID.
  • meta: Meta data information; for example, static_id.
  • name: Risk name as calculated via risk_name_template.
  • type: Risk type information; for example, Risk Type name, label, and ID.
  • number: Risk number is calculated based on type. It can be used in calculations to know how many risks of a particular type have been added.
  • total_premium: Sum of all enabled items coverages premium.
  • pro_rata: Sum of all enabled Items coverages pro rata.
  • items: Enabled and soft deleted items on risk. If an item contains deleted_at key, this means that the item is soft deleted. This key will only be present for soft deleted items in Endorsement transactions.
  • field_answers: Fields answers for enabled items.
  • detached_answers: Field answers for items that are disabled/unchecked by user. Used later to repopulate associated fields of an item when it gets re-enabled.
  • detached_items: Contains name of items having presence Default or Optional, which are removed from risk.
  • field_overrides: Contains replacement properties for fields defined in risk type state depending on the current risk state.
  • item_overrides: Contains replacement properties for items defined in risk type state depending on the current risk state.
  • calculations: Contains resolved shared calculations.
  • rate_tables: Contains resolved rate tables.
  • deleted_at: Contains a datetime string if the risk was soft deleted. This key will only be present for soft deleted risks in Endorsement transactions.
  • children: Array containing child risks, if any.

Example

View code
{
"schema_version": "1.3",
"id": "c26fffcd-7897-4384-98c4-95de6b0902e8",
"meta": {
"static_id": "012f3c80-23d5-4b32-bda4-7961b2356002"
},
"name": "Vehicle 1",
"type": {
"label": "Vehicle",
"id": "3aa43696-8c18-49d6-8c6d-dc03b5081e98",
"name": "vehicles"
},
"number": 1,
"total_premium": 54.0,
"pro_rata": {
"value": 0.0
},
"items": {
"additionalEquipment": {
"premium": 45.0,
"pro_rata": {
"value": null
},
"limits": {
"perRiskLimit": 100.0,
"policyAggregateLimit": 500.0
},
"deductible": 20.0
},
"medicalExpense": {
"premium": 0.0,
"pro_rata": {
"value": 0
},
"deleted_at": "2020-07-28T00:00:00+00:00"
}
},
"field_answers": {
"additionalEquipmentCoverageLimit": "501-1000",
"vin": "5YJSA1E28HF190648",
"make": "Tesla",
"model": "Model S",
"chosenDriver": ""
},
"detached_answers": {
"towingLimit": "75"
},
"detached_items": ["towing"],
"field_overrides": {
"chosenDriver": {
"options": [
{
"value": "ef763124-8b7f-4016-ac54-7d07e4adfe70",
"label": "John Doe"
}
]
}
},
"item_overrides": {
"towing": {
"visible": false
}
},
"calculations": {
"driverFactor": 1.0
},
"rate_tables": {
"towingRateTable": 0
},
"deleted_at": null,
"children": []
}