BriteCore provides a beta JavaScript library that you can use to build your plugins. This tutorial walks you through writing an auto-complete plugin type for your quote form. The auto-complete plugin type renders a field (rather than a button) that receives events as the user types in it. With britequote:risk-edit:auto-complete
, you can:
- Call VINMASTER or other services and display possible options for a user to select.
- Handle the user selecting one of the possible options and emit a create-and-update-risk event to BriteCore.
Step 1: Find a plugin slot that will support your functionality
BriteCore UI provides a slot that allows a third party plugin to render a field that receives events as users type in it, called the auto-complete 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://unpkg.com/@britecore/ui-plugins-client"> </script>
Example initialization object
let p = new BriteCorePlugin(“”)
|
We are initializing the plugin with an object where the keys are the slots that our plugin needs to interact with and the values are the objects expected during the slot initialization. auto-complete supports the following attributes:
- Placeholder: Defines what appears on the input to help a user; in our example above, it’s Search.
- querySearch: Function that’s called whenever a user types on the input; it returns values that show up on the UI as options.
- prefixIcon/suffixIcon: Icon shows on the input. PrefixIcon displays on the right side of the field, while the suffixIcon displays on the left side of the field.
- handleSelect: Callback method that’s called whenever a user selects a value on the field; you can update a risk, display an error, etc.
- triggerOnFocus: An option that allows you to call a method before a user types anything (when they click on the field). For example, you may want to pre-fetch a message or list some options to choose.
Upon load, the BriteCorePlugin object will start the connection to the plugin slot and, once that is done, it will emit an initialization event to the slot, sending along the object with the field it wants to be rendered. The slot will be waiting for such an event and will render the field wherever it is placed.
For more information, refer to our design system documentation.
Sample code for the auto-complete plugin type
import {
|