Resources

Himani Panchgam

In this blog post, we are going to talk about the Publish-Subscribe model in the Lightning Web component. But before we dive in, let’s first understand what the Pub-Sub Model is

Pub-Sub Model is essentially used to transfer the information between the component which are not in the same DOM hierarchy – which means that the components are not connected/ related in any way with each other using the parent-child relationship.

Communicate Across the DOM:

In a publish-subscribe pattern, one component publishes an event, while others subscribe to receive and handle the event. It’s more or less like an Application event in aura where any component that subscribes to the event receives the event.

Let’s say there are two independent components named myPublisher and mySubscriber. The Publisher displays the list of Contacts whereas the Subscriber component will display all related cases to the selected/ clicked Account name from the Publisher component.

To establish the communication between two components we use a JavaScript library called pubsub, which acts as a helper js.

First things first, create an LWC component and add only .js file named pubsub.js. following that create myPublisher and mySubscriber components.

Link to Code: https://github.com/himanipanchgam/lwcEventsPubSub

Before Subscribing the event

Above is the image of the Publisher component named: myPublisher. myPublisher displays a list of contacts followed by a hyperlink to the Account name.

When the Account name is clicked, the event is loaded which is handled and subscribed by the Subscriber component named: mySubscriber. Furthermore, on subscribing to the event, all cases related to the subscribed account is displayed, as shown in the image below.

After Subscribing to the Event

After Subscribing to the Event

1) How the event is fired.

fireEvent(this.pageRef, “eventdetails”, accId);
Reference –

– pageRef is CurrentPageReference.
- eventdetails is the name of your event, which will be same while handling the event.
- accId is the data you want to transfer.

2) How event is handled – Registered.

connectedCallback() {
// subscribe to eventdetails event

registerListener(“eventdetails”, this.caseDetails, this);}
this.caseDetails holds the Account Id, which is passed via event. Post that, the JavaScript function is called which will execute when the component receives the event i.e.(fetched Account Id)

3) How the event is Unregistered.

Unregister the event once your work is done. This removes the references of call back from call-backs variable. Call disconnectedCallback to unsubscribe the event.

disconnectedCallback() {
// unsubscribe from eventdetails event

unregisterAllListeners(this);
}

4) There are two methods for unregistering listeners.

a) unregisterListener – Unregister a single listener (call back) at a time.

E.g. unregisterListener = (eventdetails, callback, accId);}

  • eventdetails – Name of the event to unregister from.
  • callback – Function to unregister.
  • accId – The value to be passed as the parameter to the callback function is bound.

b) unregisterAllListeners – Unregistering all listeners at once.
Eg. unregisterAllListeners(this);

References: Google, GitHub & LWC library

This blog is part of the series starting with Events in Lightning Web Components Part 1

Himani Panchgam

Stay Updated

For an Effective Cloud Strategy that aligns to your Digital Transformation goals, Talk to one of our Certified Experts today.

Thank you for contacting us. We will be in touch shortly.
Tags: Agile, Agile Methodology, COVID-19, Crisis, Lean, Lean Mindset, Pandemic, Resilience Through Disruption

Latest Insights

  • World's leading ethical
    Use Cases
    World's leading ethical beauty products...

    Providing QA and Testing Services...

  • Boost ROI
    Use Cases
    Boosting revenues with the right CPQ configuration...

    Primex is a global market leader focused...

  • Robotic Process Automation
    Use Cases
    Integrating Robotic Process Automation (RPA) ...

    A large manufacturing unit having numerous ...

  • Brand Building
    Use Cases
    Brand Building With A Creative, Unique Website & Social ...

    Naturocare was started in 2014 with a mission ...

  • Database Creation
    Use Cases
    Database Creation for Research Firm

    The client was looking for an offshore partner to conduct...

  • Seamless Onboarding
    Use Cases
    Salesforce Health Calculator for health check & ..

    The client is one of the leading independent...

  • Seamless Onboarding
    Use Cases
    Salesforce Health Calculator for an underutilized

    The client is one of the exclusive wineries ...

  • Hyperautomation
    Use Cases
    Hyperautomation for better processes and happier...

    The client is an investment consultant and helps its...