Communicating between Independent LWC in Omniscript

This is a simple example that shows a button that, when clicked, publishes a message.

This shows how two separate custom LWCs can communicate with each other inside of an OmniScript.

Below is the overall design using the Pub/Sub model.

So, lets get started!

Step 1: Create a LWC component and use below code to fire events with parameters to pass an omniscript and component to Community Page. Below is the HTML and JS code for reference.

SampleLWCComponent.html

<template>

<lightning-button label="Send Event" onclick={handleClick}></lightning-button>

</template>

SampleLWCComponent.js

import { LightningElement } from 'lwc';

import pubsub from 'vlocity_ins/pubsub';

export default class SampleLWCComponent extends LightningElement {

handleClick(e){

let accId = '0015g00000gWY8VAAW';

pubsub.fire("handlePubSubEventChange", "result", {"accId":accId});

}

}

Step 2: Create another LWC component and include it in OmniScript. This LWC component will handle events from the Independent LWC component. Below is the code screenshot for reference.

OSChildLWCComponent.js

import { LightningElement } from 'lwc';

import { OmniscriptBaseMixin } from 'vlocity_ins/omniscriptBaseMixin';

import pubsub from 'vlocity_ins/pubsub';

export default class OSChildLWCComponent extends OmniscriptBaseMixin(LightningElement) {

connectedCallback() {

pubsub.register('handlePubSubEventChange', {

result: this.handlePubSubChange.bind(this),

});

}

handlePubSubChange(data){

this.callVipForData(data.accId);

}

//call VIP to get acc data and pass to OS data json

callVipForData(accId) {

let params = {

sClassName: 'vlocity_ins.IntegrationProcedureService',

sMethodName: 'sample_getAccountDetails',

input: {

AccountId : accId

},

options: '{}'

};

this.omniRemoteCall(params, true).then((response) => {

this.omniApplyCallResp({ 'Id': response.result.IPResult.Account[0].Id });

this.omniApplyCallResp({ 'Name': response.result.IPResult.Account[0].Name });

});

}

}

Finally we are done and thanks for reading.