Use Lightning Message Service (LMS) in Salesforce LWC

Lightning Message Service (LMS) is a powerful feature in Salesforce that allows communication between different components.

It helps developers send messages between Lightning Web Components (LWC), Aura components, and even Visualforce pages.

In Salesforce Lightning Web Components, the Lightning Message Service (LMS) enables communication between Visualforce and Lightning Web Components on any Lightning page without requiring a reference.

It is also used to establish communication between LWC components that do not have a parent-child relationship.

In this Salesforce tutorial, we will learn how to use the Lightning Message Service (LMS) in Salesforce LWC.

Table of Contents

What is Lightning Message Service (LMS) in Salesforce?

Lightning Message Service is used to communicate between components that are not directly related.

Example:

One component sends data
Another component receives it

Even if:

They are not parent-child
They are on different parts of the page

Key Components of LMS

Message Channel
- A file that defines message structure
- Created in Salesforce
Publisher
- Sends message
Subscriber
- Receives message

In Salesforce, Lightning Message Service (LMS) is a framework that enables Lightning Web Components (LWCs) and other Salesforce components (such as Aura components and Visualforce pages) to communicate with one another.

The main use of LMS is to enable communication between multiple Lightning web components.

The Lightning Message Service (LMS) is preferred over other communication methods, like parent-child events or Aura events, because it enables communication between Lightning Web Components (LWCs), Aura components, and Visualforce pages, regardless of hierarchical relationships.

Unlike parent-child events that require a direct connection, LMS allows components to communicate across a page without needing a reference to each other.

Use Lightning Message Service (LMS) in Salesforce LWC

In the example below, we will see how to implement the Lightning message service in Lightning web components. To do so, we will cover the following points.

Create a message channel folder in the default folder for Lightning Message Service.
A Publisher(parent) component from where the message will be sent.
A Subscriber(child) component that receives the message.

Setup Message Channel Folder for the Lightning Message Service

In order to use the functionalities of the Lightning Message Service, it is necessary to establish a Lightning Message Channel.

To set up a message channel folder for the Lightning Message Service, follow the steps below.

1. Create a folder inside force-app>main> default and name it messageChannels. Ensure the name matches the exact letter case. Inside the new folder, create a meta.xml file with the name ComponentCommunicationChannel.messageChannel-meta.xml.

Use Lightning Message Service (LMS) in Salesforce LWC

2. Enter the code below in the meta.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<MessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">    

<description>Channel for communication between ComponentA and ComponentB </description>
     <isExposed>true</isExposed>
     <masterLabel>Component Communication Channel</masterLabel>
</MessageChannel>

Using the <MessageChannel> tag, this file will be accessible for managing the Lightning Message Service (LMS) API.

After setting up the message channel, deploy the folder to the source org.

Create a Publisher Component to Send a Message Using LMS

In the steps below, we will create a publisher (parent) component to send a message to the child component.

1. Create an LWC component and enter the code below in the JS file. Here, the communication channel is referenced with suffic “__c” because it indicates a custom metadata object in Salesforce.

import { LightningElement, wire } from 'lwc';
import { publish, MessageContext } from 'lightning/messageService';
import COMPONENT_COMMUNICATION_CHANNEL from '@salesforce/messageChannel/ComponentCommunicationChannel__c';

export default class ComponentPublisher extends LightningElement {
    @wire(MessageContext)
    messageContext;

    handleButtonClick() {
        const msgInput = this.template.querySelector('lightning-input').value;
        if (msgInput) {
            const payload = { message: msgInput };
            publish(this.messageContext, COMPONENT_COMMUNICATION_CHANNEL, payload);
        }
    }
}

To enable sending or publishing the message, we have imported Publish and MessageContext, which contain information about the Lightning web component using the Lightning message service.

To connect the message service to the publisher component, we have used the @wire decorator. The message will be sent on the button click, for which we have defined

After this, publish(this.messageContext, COMPONENT_COMMUNICATION_CHANNEL, payload) will send the message using the Lightning Message Service (LMS).

2. Enter the code below to render the UI of the publisher component.

<template>
    <lightning-card title = "Component Publisher" >
        <div class="slds-m-around_medium">
            <lightning-input title="Enter message" label = "Enter message"></lightning-input>
            <lightning-button label = "Send Message" onclick={handleButtonClick}></lightning-button>
        </div>
    </lightning-card>
</template>

In the code above, the <lightning-input> component provides an input field for entering text. The <lightning-button> will display a button; on click, it will trigger the handleButtonClick event and send the message.

3. Make the LWC component visible to the Lightning pages using the code below in the meta.xml file inside the <LightningComponentBundle> tag.

 <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

After this, deploy the LWC component changes to the source org.

Create a Subscriber Component to Receive a Message Using LMS

In the steps below, we will create a subscriber (child) component to receive messages from the publisher component.

1. Create another LWC component and enter the code below in the JS file.

import { LightningElement, wire } from 'lwc';
import { subscribe, MessageContext } from 'lightning/messageService';
import COMPONENT_COMMUNICATION_CHANNEL from '@salesforce/messageChannel/ComponentCommunicationChannel__c';

export default class ComponentChild extends LightningElement {
    @wire(MessageContext)
    messageContext;

    subscription = null;
    receivedMessage = 'No message received'; 

    connectedCallback() {
        if (!this.subscription) {
            this.subscription = subscribe(
                this.messageContext,
                COMPONENT_COMMUNICATION_CHANNEL,
                (payload) => this.handleMessage(payload)
            );
        }
    }

    handleMessage(payload) {
        this.receivedMessage = payload.message; 
    }
}

This component subscribes to the ComponentCommunicationChannel and listens for messages sent via LMS. The connectedCallback() method ensures the subscription happens when the component is initialized.

When a message is received, the handleMessage() function updates the receivedMessage property, which is then displayed in the subscriber (child) component.

2. Enter the code below in the HTML file to display the received message.

template>
    <lightning-card title="Component Child">
        <div class = "slds-m-around_medium">
            <lightning-formatted-text value={receivedMessage}></lightning-formatted-text>
        </div>
    </lightning-card>
</template>

The value of “receivedMessage” will be displayed as the message received from the publisher component.

3. Enter the code below in the meta.xml file of the child component to expose it to the Lightning pages.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

After this, deploy the component to the source org.

Navigate to the Lightning page and deploy both Lightning web components there. Ensure that both components are present on the same record page for the Lightning Message Service to function properly.

In the parent component, enter the text message and press the “Send Message” button. The child component will then receive the message and display it.

Use Lightning Message Service in Salesforce LWC

This way, we can use the Lightning Message Service (LMS) in Salesforce Lightning web components to establish communication between the components with no relationship.

Conclusion

Lightning Message Service is a powerful, flexible feature in Salesforce that enables seamless communication between components. By using LMS, developers can build scalable and maintainable applications.

In this Salesforce tutorial, we have learned how to use the Lightning Message Service (LMS). To set it up, we created a Lightning Message Channel, defined a publisher component to send messages, and configured a subscriber component to receive them.

By implementing an LMS, we enabled communication between components on a Lightning page, regardless of their hierarchical relationships.

By following the steps above, you can efficiently set up Lightning Message Service in your Salesforce org and establish communication between LWC components.