markup plugin slot to render UI elements on the quote form. You can use the
markup plugin type to render buttons, dialog boxes, check boxes, and other UI elements to dynamically display data and respond to user interactions.
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
markupplugin 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.
Step 1: Find a plugin slot that will support your functionality
BriteCore UI provides a slot that allows a third-party plugin to render UI elements with more flexibility, called the Markup slot.
Note: At this point, you can only add plugins to the BriteQuote risk edit pages. In BriteCore, risks are the assets protected by the insurance, for example, auto.
Step 2: Add the script tag to your plugin HTML file
Add this following script to the header of your HTML file:
<script src="https://d1zol2vqugn1g2.cloudfront.net/britecore-ui-plugins.js"> </script>
Step 3: Register the plugin in BriteIntegrations
Send the plugin data to BriteIntegrations and make sure
britequote:risk-edit:markup is the plugin slot name:
Slot type initialization
The markup slot type initialization take three options:
A Vue.js template that will be rendered dynamically on the UI after initialization.
The state of the generated Vue.js component, values in the data object can be accessed inside the template.
Pass your event handlers to the `methods` object so they can be accessed inside the Vue.js template.
This example will render a div with the text Hello, Plugins! inside it, and the div will listen for click events and then call the
handleClick method, which will set the name to BriteCore, so the rendered text will be Hello, BriteCore!
In the template, you can use the BriteCore design system to render UI that looks exactly like BriteCore UI. For more information on BriteCore UI elements, refer to the BriteCore UI design system docs.
Upon loading, the BriteCorePlugin objects will start the connection to the plugin slots and, once that is done, will then emit initialization events to the slots, sending along the object with the UI element it wants to be rendered. The slot will be waiting for such an event and will render the UI element wherever it is placed.
Sample code for the markup plugin type
This sample code creates buttons and autocomplete inputs using the Markup slot in addition to notification buttons that display dynamic messages when selected. This illustrates the flexibility of using the Markup plugin slot.