Vlocity/Omnistudio

Pass Data from Omniscript to LWC

Using the data from the Omniscript on your custom Lightning Web Component could be really useful when your components need to interact with the Omniscript to display or handle values from there.

So, here is a quick example in how you can pass data from Omniscript to LWC.

Pass Data from Omniscript to LWC

Before to Start

First, make sure to extend the OmniscriptBaseMixin in the Javascript and define the Vlocity namespace on the XML of your Lightning Web Component.

Check your Vlocity version installed in your org. You can go to Setup > Installed Packages

Salesforce: Vlocity Namespace on Installed Packages from an organization

This is a template component that you can use, but utilize your own Vlocity version on the import:

import { LightningElement } from 'lwc';
import { OmniscriptBaseMixin } from "vlocity_ins/omniscriptBaseMixin";

export default class ExampleComponent extends OmniscriptBaseMixin(LightningElement) {

}

Also, here is the XML of the component, include the namespace on this file as well.

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

Once you have the basics of your component, here is a guide with three different ways to communicate your LWC to an Omniscript.

omniJsonData Variable

On your custom Lightning Web Component, you have a default variable: this.omniJsonData. It's a JSON that contains the entire Data JSON of the Omniscript. You will have access to all variables that you need to use.

These are all the nodes that you have access to when the component is rendered, if the variable that you're looking for is not there when the component is rendered, you won't get access to it.

Data JSON variables from an Omniscript in Vlocity Salesforce
connectedCallback() {
    console.log(JSON.stringify(this.omniJsonData.Text)); // Hello Word
    console.log(JSON.stringify(this.omniJsonData.userCurrencyCode)); // USD
}

LWC Properties

On your Omniscript, when you add your LWC, there is a section in which you can add some properties that your LWC will receive using the @api keyword.

You can send nodes from the Omniscript Data JSON as properties, from UI elements like Text or Formulas to backend elements like Integration Procedures or Dataraptors.

Configure properties on the LWC of the Omniscript to receive them on the component
Avoid using uppercase on the LWC Properties because the component isn't able to receive the property. If you need to use more than one word, include a hyphen between them and catch them on the LWC using uppercase: account-date will be received as @api accountDate.

And this is how you receive them on the Lightning Web Component using @api keyword.

import { LightningElement, api } from 'lwc';
import { OmniscriptBaseMixin } from "vlocity_ins/omniscriptBaseMixin";

export default class ARC_CheckrunSendZip extends OmniscriptBaseMixin(LightningElement) {
    @api property;

    connectedCallback() {
        console.log('property: ' + this.property);
    }
}
Using @api on LWC to receive property from Omniscript

Pub/Sub Messaging

You can create a communication between LWC and Omniscrips using events declared on the Properties of the Step in which your component is located.

First, on the Step of your LWC, you need to add all the properties that you want to pass to your component.

Pubsub properties to send data from Omniscript to LWC

Then, you need to subscribe to that event on the LWC and to do that you will need to import PubSub using your Vlocity namespace again.

import { LightningElement } from 'lwc';
import { OmniscriptBaseMixin } from "vlocity_ins/omniscriptBaseMixin";
import pubsub from 'vlocity_ins/pubsub';

export default class ExampleComponent extends OmniscriptBaseMixin(LightningElement) {

    // SUBSCRIBE TO EVENT ONLY ON FIRST RENDER
    initialRender = true;
    renderedCallback() {
        if (!this.initialRender) return;
        
        pubsub.register('omniscript_step', {
            data: this.handleOmniStep.bind(this),
        });

        this.initialRender = false;
    }

    // HANDLE THE EVENT WITH A FUNCTION
    handleOmniStep(data){
        console.log(data.pubmessage);
    }
}

Note: This registration to the PubSub must be once the component is rendered.

Finally, here is the console.log printing the variable from the Omniscript on the Browser Developer Console.

Vlocity Omniscript Step: Pubsub showing result on console

Important: If the variable is updated in the Omniscript, it won't be updated on the LWC.

Note: All these methods work only if the Omniscript is Activated, otherwise, the LWC won't be displayed on the layout.