Topics on this page

Developer docs > 

Example tutorial: How to write the auto-complete plugin

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:

  1. Call VINMASTER or other services and display possible options for a user to select.
  2. 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:

View code

<script src="https://d1zol2vqugn1g2.cloudfront.net/britecore-ui-plugins.js"> </script>

Example initialization object

View code
let p = new BriteCorePlugin(“”)

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

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

View code
import {

BriteCorePlugin,

} from "@intuitivewebsolutions/ui-plugins-client";

​

"use strict";

const PLUGIN_NAME = "Capitalizer"

​

function firstButtonCallback(context) {

console.log(context);

}

​

function secondButtonCallback(context) {

console.log(context);

}

​

function querySearch(queryString, context) {

console.log(context);

const vals = [

{ 'value': 'vue', 'link': 'https://github.com/vuejs/vue' },

{ 'value': 'element', 'link': 'https://github.com/ElemeFE/element' },

{ 'value': 'cooking', 'link': 'https://github.com/ElemeFE/cooking' },

{ 'value': 'mint-ui', 'link': 'https://github.com/ElemeFE/mint-ui' },

{ 'value': 'vuex', 'link': 'https://github.com/vuejs/vuex' },

{ 'value': 'vue-router', 'link': 'https://github.com/vuejs/vue-router' },

{ 'value': 'babel', 'link': 'https://github.com/babel/babel' }

]

return vals.filter(item => item.value.includes(queryString))

}

​

function handleSelect(item, context) {

console.log(context);

this.parent.displayErrors(item.value)

}

​

let p = new BriteCorePlugin(PLUGIN_NAME)

​

​

p.initialize({

"button-row": {

buttons: [

{

text: "Button 1",

callback: firstButtonCallback,

visible: () => true,

enabled: () => true,

},

{

text: "Button 2",

callback: secondButtonCallback,

visible: () => true,

enabled: () => true,

},

],

},

"auto-complete": {

inputs: [

{

placeholder: "Search",

querySearch,

handleSelect,

prefixIcon: ["far", "search"],

// suffixIcon: ["far", "search"],

triggerOnFocus: true

}

]

}

});