How To Use the Address Verification Flow Component (AVFC) Within an OmniScript

Overview

This article provides guidance on how to use the Address Verification Flow Component (AVFC) by ProvenWorks within an OmniScript.

How to include the Address Verification Flow Component in an OmniScript

Firstly, you will need to set up a development environment and link it to your Org. If you’re not familiar with this process, Salesforce have a great guide.

Open the command palette, and select SFDX: New Project, then SFDX: Create Lightning Web Component. We need this LWC to function as a wrapper around the Address Verification LWC, as we can’t directly implement a managed package within an OmniScript. Once the process has completed, navigate to force-app/main/default/lwc and find the newly created files for your LWC.

In the .js-meta.xml file, make sure isExposed is set to true, and runtimeNamespace is set to the namespace of the package containing your installation of OmniStudio. For example, here’s what ours looks like:

avfcWrapper.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>59.0</apiVersion>
  <isExposed>true</isExposed>
  <runtimeNamespace>vlocity_cmt</runtimeNamespace>
</LightningComponentBundle>

Next, copy and paste the following into your .html file. This is a template that includes the Address Verification LWC, so feel free to remove any fields that you do not specifically need or instead, change the existing fields to meet your requirements. For a full list of attributes that can be used with the component, see here.

avfcWrapper.html

<template>
  <pw_avfc-address-verification-flow-base-component
    use-county="true"
    use-status="true"
    countries="GB,US,CA"
    origin="US"
    country=""
    state=""
    postalcode=""
    city=""
    street=""
    street2=""
    county=""
    status=""
    onaddresschange={changeHandler}>
  </pw_avfc-address-verification-flow-base-component>
</template>

Finally, we need to configure our LWC wrapper to listen to the events raised from the Address Verification component. This will allow us to read the address values from the component when the values change (i.e., a new verified address has been selected). I have given this method the name changeHandler in the above document, but you can use any name that you would like.

So that you can access the component’s values within the OmniScript, we must pass them to the OmniScript JSON Object. The event handler is passed the users input under the event.detail object, in easy-to-parse key-value pairs.

avfcWrapper.js

import { LightningElement } from 'lwc';
import { OmniscriptBaseMixin } from 'vlocity_cmt/omniscriptBaseMixin';
  
export default class avfcWrapper extends OmniscriptBaseMixin(LightningElement) {
    address = {};
    changeHandler(event) {
        this.address = event.detail["address"];
        this.omniApplyCallResp({"address": this.address});
    }
}

You can, if necessary for your use case, manipulate the data in this method before calling this.omniApplyCallResp(), as this is what adds it to the OmniStudio JSON Object.

Adding the LWC into the OmniScript Editor

Under the build tab, drag the Custom Lightning Web Component into the step, and inside that component’s properties, set the LWC Component Override field to the name of the wrapper LWC that you created earlier. Click activate version, followed by preview to see it in action.

To check everything is set up correctly, click over to the Data JSON tab inside OmniStudio. The user’s address data should be populated, as in the screenshot below: