Introduction
Lightning Web Components (LWC) may communicate with one another thanks to Salesforce’s strong Lightning Message Service (LMS) capability. No matter where different components are in the hierarchy, it makes it easier for them to interact and share data.
What is Lightning Message Service (LMS)?
Lightning Message Service is a framework designed for communication between Salesforce. It allows components to communicate with each other without any direct relationship(parent-child relationship). Components can send and receive messages by using channels, allowing for flexible data sharing throughout the application.
How Lightning Message Service Works in LWC
Lightning Message Service operates using message channels defined in XML. Components can publish messages using the message channel and subscribe to the message channel to receive notifications.
- Publishing: Components send messages to the Message channel
- Subscribing: Components receive messages from the Message channel
- Message Context: Provides information about the Lightning Web Components using the Lightning Message Service for Pub-Sub Messaging.
Step-by-Step Implementation of LMS in LWC
Step 1: Create the Message Channel
- In your Salesforce project, create a messageChannels folder at the force-app/main/default directory.
- In the messageChannels directory created above, create a file with the suffix .messageChannel-meta.xml—for example, myMessageChannel.messageChannel-meta.xml.
In the XML file, give the following values.
- masterLabel tag refers to the label for a Lightning Message Channel
- isExposed tag specifies the availability of the component.
- description refers to the description of the Lightning Message Channel
- LightningMessageFields refers to the list of the payload fields for the Lightning Message Channel
In the LightningMessageFields fieldname refers to the unique name, and description refers to the description for the Lightning Message Field
senderComponent.html
senderComponent.js
- Import the message service features, which are required for publishing, and the message channel
- Import message channel
- @wire(MessageContext) is used to create a MessageContext object. This object provides information about the Lightning Web Component that uses the Lightning Message Service.
- To publish a message in Lightning Web Component using Lightning Message Service we use the publish() method from the messageService.
- The publish() method accepts three parameters:
- Message Context – provides the information about the LWC that is using the Message Service
- Message Channel – The message channel object which is imported using the module @salesforce/messageChannel/messageChannelName__c;
- Message Payload – a serialized JSON object containing the message that will be published and received in the receiver component.
Step 3: Create the Receiver Component.
- Create a new LWC named receiverComponent in your Salesforce project.
- In the receiverComponent.html file, add the following code which shows the received message.
receiverComponent.html
receiverComponent.js
- Import message service features like APPLICATION_SCOPE, subscribe, unsubscribe, MessageContext.
- Import Message Channel.
- @wire(MessageContext) is used to create a MessageContext object. This object provides information about the Lightning Web Component that uses the Lightning Message Service.
- In this example, the subscribeToMessageChannel() function from connectedCallback() checks whether the subscription is null. If it is, it calls the subscribe() method from the Lightning Message Service and assigns it to the subscription.
- To subscribe to a message in Lightning Web Component using Lightning Message Service we use the subscribe() method from the messageService.
- The subscribe() method accepts four parameters:
- Message Context – provides the information about the LWC that is using the Message Service
- Message Channel – The message channel object which is imported using the module @salesforce/messageChannel/messageChannelName__c;
- Listener – it will handle the message published to the specific Message Channel that is importing.
- Subscriber Options – An optional Parameter that defines the scope of the subscription. When set to { scope: APPLICATION_SCOPE }, it specifies that messages can be received from the message channel anywhere in the application.
- In this example, the listener has the handleMessage() method. When the listener method is invoked, it passes the message to the handleMessage() method, which gets the method from the payload and assigns it to the message variable, which will show on the UI from the HTML.
- In this example, the unsubscribeToMessageChannel() function from disconnectedCallback() is called, the unsubscribe() function. This function is used to stop receiving messages from the Lightning Message Service. The unsubscribe() method accepts the subscription as a parameter, which refers to the subscription we want to unsubscribe. Then, the subscription is set to null.
Result:
Best Practices for Using LMS in LWC
- Use LMS only for communication between non-related components. This does not apply to parent-child and vice versa communications.
- Pass the information required for the component to perform its tasks.
- Components should be loosely coupled. Other than these, the other components should not know about the message channels.
- Always unsubscribe from the message channels when the component is removed from the DOM.
Conclusion:
Lightning Message Service is an essential framework for improving communication in Salesforce components. Comprehending its functionality and following industry best practices allows developers to produce more effective, interactive, and simpler-to-maintain apps.
Author: Suchitha Reddy
