Example tutorial: Add a plugin slot to the Policy Overview screen

Documentation

BriteCore provides a beta JavaScript library that you can use to build your plugins. A plugin can help you extend the functionality of the Overview screen. This tutorial walks you through adding a plugin slot to the Overview screen.

Step 1: Find a plugin slot type that will support your functionality

BriteCore provides a slot type that allows a third-party plugin to render an action button to execute. The slot type is called the markup.

Note: At this point, you can add plugins to the BriteQuote sidebar and risk edit pages, as well as the Policy Overview screen only.

The slot format is as follows: {product}:{page}:{location on the page}:{slot-type}

Note: While some plugin slots are dynamic, the new policy slot is static-  you cannot rename the slot.

For the Overview screen, set the following:

  • Product: The plugin slot name is britepolicies:view-policy:header-bottom:markup 
  • Page: The page value is: view-policy. The data available in the context object that is provided to the plugin includes: 
    • policyNumber
    • expirationDate
    • policyId
  • Location: header-bottom which places it at the bottom of the screen.

Figure 1 illustrates the possible location with test buttons as an example. 

Figure 1: Sample Overview screen with button.

Step 2: Add the script tag to your plugin HTML file

Add the following script to the header of your HTML file:

View code
<script src="https://unpkg.com/@britecore/ui-plugins-client">

Step 3: Initialize the plugin

Use the BriteCorePlugin helper so your plugin can communicate with BriteCore:

View code
let plugin = new BriteCorePlugin('Sample Policy Plugin')
plugin.initialize({
'slot-name': britepolicies:view-policy:header-bottom:markup
})

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 buttons it wants to be rendered. The slot will be waiting for such an event and will render the buttons wherever it is placed.

For more details on Plugin Integration please refer to the  Plugins overview documentation. 

Sample plugin code

View code
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Plugin</title>
</head>

<body>
  <script src="https://unpkg.com/@britecore/ui-plugins-client@0.9.2/dist/britecore-ui-plugins.js"></script>
  <script>
    let plugin = new BriteCorePlugin("Plugin Name");
    function lookupDetails(ctx) {
      this.parent.displayMessage("Hello there!!");
    }
    plugin.initialize({
      markup: {
        template: `
          <div>
            <el-row>
              <el-button v-for="type in buttonTypes" :type="type" @click="handleClick(type)">{{type}}</el-button>
            </el-row>
          </div>`,
        data: {
          buttonTypes: [
            "default",
            "primary",
            "danger",
            "success",
            "info",
            "warning",
          ],
          bgColor: "#399daf",
        },
        methods: {
          async handleClick(type) {
            const colorMapping = {
              info: "info",
              primary: "info",
              danger: "error",
              warning: "warning",
              success: "success",
            };
            this.parent.displayMessage(type, colorMapping[type]);
            let slotInfo = await this.parent.getSlotInfo()
            console.log(JSON.stringify(slotInfo))
          },
        },
      },
    });
  </script>
</body>

</html>