1. The Pubsub Component enables data sharing between components. Multiple components can register and receive data from the same channel when two different components are available on the same component.
2. This component exposes 4 functions:
Register
unregister
fire
shouldExecuteCallbackHandler.shouldExecuteCallback
3. Create an LWC from where we need to subscribe/fire/unregister pubsub.
4. Lwc must import pubsub class of vlocity
Subscribe/Register Pubsub From Custom LWC
To subscribe to an event, the connectedCallback method calls a method to register to the pubsub as shown.
Declare the event and mention the method to execute(handleEventAction) when the particular pubsub is fired.
this.handleEventObj = {
eventName: this.handleEventAction.bind(this)
};Register to the channel using the statement.
pubsub.register(“channelName”, this.handleEventObj);
To access data sent from FlexCard it is available to access from the actionObj Node on the handleEventAction method.
Publish/Fire Pubsub From Custom LWC
To fire the pubsub we have to call the fire method of pubsub class and then pass the channel name of the pubsub listener can pass the input parameters like in the below screenshot, we are passing “currentPage”.
Now we will create a listener in the FlexCard
In this way we can communicate with LWC from FlexCard.
UnRegister Pubsub From Custom LWC
To UnRegister the Pubsub call a method from disconnectedCallback method called unregisterEvents.
To Unregister mention channelName and Event declared on connectedCallback
pubsub.unregister("channelName", this.handleEventObj);
References: