Topics on this page

Example tutorial: How to write the Capitalizer plugin

BriteCore provides a beta JavaScript library that you can use to build your plugins. This tutorial walks you through writing a Capitalizer plugin for your quote form. When an agent selects the plugin, the field characters will automatically change to all caps. This is convenient to format certain fields like Vehicle Identification Numbers (VIN), which are usually rendered in all caps.

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

BriteCore UI provides a slot that allows a third-party plugin to render an action button to execute actions on a quoting form, called the button-row slot.

Note: At this point, you can add plugins only to 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 the following script to the header of your HTML file:

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

Sample code for the Capitalizer plugin

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

    <script>
      const PLUGIN_NAME = "Capitalizer";
      function capitalize(thing) {
        return thing.replace(/^\w/, (c) => c.toUpperCase());
      }

      function capitalizeFields(context) {
        let fa = context.riskState.field_answers;
        const jsonPatch = [
          {
            op: "replace",
            path: "/field_answers/make",
            value: capitalize(fa.make)
          },
          {
            op: "replace",
            path: "/field_answers/model",
            value: capitalize(fa.model)
          }
        ];
        this.emit(PLUGIN_NAME + "-update-risk", jsonPatch); 
// this namespaces the event and is important
      }

      let plugin = new BriteCorePlugin(PLUGIN_NAME);
      plugin.initialize({
        "button-row": {
          buttons: [
            {
              text: "Capitalize",
              callback: capitalizeFields,
              visible: () => true,
              enabled: () => true
            }
          ]
        }
      });
    </script>
  </head>

</html>

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.

We are providing an array of objects containing:

  • A label.
  • A callback function to handle the form data and send the JSON Patch object back.
  • Two booleans for visibility and an enabled state.

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.