Topics on this page

Tutorial: Use the markup plugin slot to render UI elements

BriteCore provides a beta JavaScript library that you can use to build your plugins. This tutorial walks you through using the 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.

With britequote:risk-edit:markup, you can:

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

View code
"plugin_slots": [
{
"location": {"type": "bottom-row"},
"plugin_file_path": "",
"slot_name": "britequote:risk-edit:markup"
},],

Slot type initialization

The markup slot type initialization take three options:

  • template
  • data
  • methods

template

A Vue.js template that will be rendered dynamically on the UI after initialization.

Example

View code
"markup": {
template: "

Hello, Plugins!

"
}

data

The state of the generated Vue.js component, values in the data object can be accessed inside the template.

Example

View code
"markup": {
template: "

Hello, {{ name }}!

",
data: {
name: "Plugins"
}
}

Methods

Pass your event handlers to the `methods` object so they can be accessed inside the Vue.js template.

Example

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!

View code
"markup": {
template: "

Hello, {{ name }}!

",
data: {
name: "Plugins"
},
methods: {
handleClick() {
this.parent.setData({"name": "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

View code
import {

BriteCorePlugin,

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

"use strict";

const PLUGIN_NAME = "Capitalizer"

function logger1(context) {

this.parent.displayErrors("Oh An error!")

console.log(context);

}

function logger2(context) {

this.parent.displayInfoPopUp("Oh An error!")

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(item);

console.log(context);

}

let p = new BriteCorePlugin(PLUGIN_NAME)

p.initialize({

"button-row": {

buttons: [

{

text: "Button 1",

callback: logger1,

visible: () => true,

enabled: () => true,

},

{

text: "Button 2",

callback: logger2,

visible: () => true,

enabled: () => true,

},

],

},

"auto-complete": {

inputs: [

{

placeholder: "Search",

querySearch,

handleSelect,

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

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

triggerOnFocus: true

}

]

},

"markup": {

template: `

 

{{i}}

 

 

Click Here

 

<el-dialog

title="Tips"

:visible.sync="dialogVisible"

:before-close="() => {isPluginRunning = false; dialogVisible = false}"

max-width="30rem">

Please select an option

Option A

Option B

 

Confirm

 

 

click to open the Dialog

 

<el-autocomplete

class="inline-input"

v-model="queryString"

suffix-icon="search"

:fetch-suggestions="querySearch"

placeholder="Please Input"

:trigger-on-focus="false"

@select="handleSelect"

>

 

`,

data: {

buttons: [

'primary','success','info','warning','danger'

],

isPluginRunning: false,

dialogVisible: false,

queryString: '',

option: ''

},

methods: {

log (anything) {

console.log(anything)

},

handleClick (e) {

this.parent.displayMessage(e)

},

openDialog() {

this.parent.setData({dialogVisible: true, isPluginRunning: true})

},

async closeDialog() {

const option = await this.parent.getData('option')

this.parent.displayErrors(option)

this.parent.setData({dialogVisible: false, isPluginRunning: false})

},

handleSelect (selected) {

console.log(selected)

},

querySearch (queryString) {

return [

{ "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" }

].filter(item => item.value.includes(queryString))

}

}

}

});

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.