For this sample use case, we will explore how to use to plugins so a user can retrieve vehicle information based on its VIN and automatically fill the form with the user data.
- Plugin Input: The form data (VIN, year, state, etc).
- Plugin output: A JSONPatch object with the new data.
- Slot capability employed: Update the data in a UI form.
Step 1: Set up
- BriteQuote offers a slot called
britequote:risk-edit:button-rownext to the quoting form.
- Upload the plugin file and the name of the slot in which they want the plugin to be loaded, all via BriteUIPlugins.
Step 2: Initialize the plugin
Once the page containing such slot is rendered, we have the plugin initialization:
- The plugin exposes its
fetchDetailsmethod so BriteQuote can call it when it’s time.
- The plugin sends a message to BriteQuote (via an event) to let it know that it should render a button next to that iframe. It sends along the button information that the slot is waiting for (label and callback name).
- The slot in BriteQuote renders that button and hooks up its @click event with the callback provided by the plugin.
Step 3: Plugin interaction
Now, they are ready to work together. When a user selects the Lookup vehicle button:
- BriteQuote sends a message invoking the plugin’s
fetchDetailsmethod, passing the VIN as a parameter.
- The plugin code calls the third-party service API and, once it’s done, sends the data back to BriteQuote by emitting a specific event to it.
- Finally, the BriteQuote slot applies this data to the quoting form.