Salesforce Lightning Message Service (LMS) Explained

Salesforce Lightning Message Service (LMS) Explained.

This article will explain what Salesforce Lightning Message a.k.a. LMS is, when to use it, and how to use Salesforce Lightning Message Service with examples. We will also learn about the limitations of the Lightning Message Service.

1. What is Salesforce Lightning Message Service?

Lightning Message Service is a way to communicate or pass information between Visualforce pages, Aura, and LWC. The catch is that the Visualforce page or Aura Component must be in a lightning experience(not a salesforce classic). LMS allows communication to happen between components that may or may not have a relationship. 

Basically, the LMS has two components: the message channel and the message payload. The message channel defines the communication contract between components, while the message payload represents the data being sent between components.

To use the Lightning Message Service, we need to create a message channel, define its properties, and publish or subscribe to messages on that channel. Once a component publishes a message on a channel, any component that subscribes to that channel will receive the message payload.

2. When to use Salesforce Lightning Message Service?

1. Suppose we’re using Salesforce Classic and want to move to Lightning Experience, but we don’t want to construct new components for our Visualforce pages, and we require communication between Lightning Web Components on the page and Visualforce page. In that case, we can use the Lightning Message Service.
2. When we want to exchange messages between Visualforce pages, Aura components, and Lightning web components, including those present in pop-out utilities or utility bars.
3. When we want to exchange data between Lightning components, including those in a utility bar or pop-out utilities., etc.,

3. How to use Salesforce Lightning Message Service?

1. To create a Lightning message channel, we need to use the LightningMessageChannel metadata type.
2. For that we can go to our existing salesforce project directory or we can create a new project in VS Code. After that we will create a new folder with this name ‘messageChannels’ in force-app/main/default directory.
3. Once the folder is created we need to create our first lightning message channel xml file with this suffix ‘messageChannel-meta.xml’.

Eg. MyFirstLMC.messageChannel-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
   <masterLabel>MyFirstLMC</masterLabel>
   <isExposed>true</isExposed>
   <description>Description of the lightning message channel</description>

   <lightningMessageFields>
       <fieldName>data to send</fieldName>
       <description>data/messsage</description>
   </lightningMessageFields>

</LightningMessageChannel>

4. We need to add this LightningMessageChannel in our package.xml file and deploy it in the org.
5. The package.xml should look like this.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Package xmlns="http://soap.sforce.com/2006/04/metadata">
    <types>
       <members>MyFirstLMC</members>
       <name>LightningMessageChannel</name>
    </types>
    <version>47.0</version>
</Package>

6. If we have more than one Lightning message channel we can use * to deploy all LMS.
7. Now that we have created LMS, we are ready to publish it in Visualforce pages, Aura, and LWC and subscribe to it in any of the components.
8. Let’s see how we can publish and subscribe to the LMS in Visualforce Page.

3.1 Publish and Subscribe LMS in Visualforce Page

1. To publish a message in Visualforce, we can use the sforce.one JavaScript object to call the publish method. The publish method takes two parameters: the name of the channel to publish to and the payload of the message.

<apex:page>
  <script>
    function publishMessage() {
      var messageChannel = “{!$MessageChannel.MyFirstLMC__c}”
      var payload = { 'message': 'Hello, world!' };
      sforce.one.publish(messageChannel, payload);
    }
  </script>
  <button onclick="publishMessage()">Publish Message</button>
</apex:page>

2. In this example, clicking the “Publish Message” button will publish a message to the “MyFirstLMC__c” channel with a payload of { ‘message’: ‘Hello, world!’ }.
3. To subscribe to a channel in Visualforce, we can use the sforce.one JavaScript object to call the subscribe method. The subscribe method takes three parameters: the name of the channel to subscribe to, a callback function that is called when a message is received, and an optional scope object.

<apex:page>
  <script>
    function subscribeMessage() {
      var messageChannel = “{!$MessageChannel.MyFirstLMC__c}”
      var payload = { 'message': 'Hello, world!' };
      sforce.one.subscribe(messageChannel, function(message){
          console.log(‘Recieved message: ‘, message)});
    }
  </script>
  <button onclick="subscribeMessage()">Subscribe Message</button>
</apex:page>

5. In this example, clicking the “Subscribe Message” button will subscribe to the “MyFirstLMC__c” channel and log any received messages to the browser’s console.

3.2 Publish and Subscribe LMS in Aura

1. First, create a Lightning component that publishes to the Lightning message service:

<aura:component>
<lightning:messageChannel type="MyFirstLMC__c" aura:id="messageChannelId"/>
</aura:component>

2. Controller.js file

var payload = {‘message’: ‘Hello World!’};
component.find(‘messageChannelId’).publish(payload);

3. Now let’s create a lightning component for subscribing to the LMS

<aura:component><lightning:messageChannel type=”MyFirstLMC__c” onMessage=”{!handleMessage}” scope=”APPLICATION”/></aura:component>

<aura:component>
<lightning:messageChannel type="MyFirstLMC__c" onMessage=”{!handleMessage}” scope=”APPLICATION”/>
</aura:component>

4. Controller.js file for the subscribing component

handleMessage: function(cmp, message, helper){
    if(message != null && message.getParam(“message”) != null){
        console.log(message.getParam(“message”));
    }
}

When the component receives the message the message will be logged into the browser console.

3.3 Publish and Subscribe LMS in LWC

1. First we need to import LMS and our lightning message channel like this below.

import { APPLICATION_SCOPE, publish,subscribe,unsubscribe,createMessageContext,releaseMessageContext } from 'lightning/messageService';
import msgChannel from “@salesforce/messageChannel/MyFirstLMC__c”

2. For publishing the message we have to use payload and publish method like this

context = createMessageContext();
const payload = { data: “Payload Data”}; 
publish(this.context, msgChannel, payload);

3. For subscribing the message we have to use subscribe method like this

Subscription = subscribe(this.context, msgChannel, (msg) => { console.log(msg);

4. Limitations of Salesforce Lightning Message Service

1. LMS does not have the capability to integrate with the Salesforce Mobile app, AppExchange, Lightning Out, and Lightning Communities.
2. LMS Doesn’t work in iframes.
3. LMS doesn’t work in salesforce classic.
4. Doesn’t support creating lightning message channels directly in the salesforce UI.

5. Additional Resources

• Lightning Message Service in LWC and Aura

• Communicate Across the DOM with Lightning Message Service

Written By…

Recommended Articles

• Salesforce Lightning Interview Questions and Answers
• Salesforce CPQ Product Console Explained
• Enhanced Domains in Salesforce Explained