Lightning Message Service (Generally Available) | MessageChannel | Salesforce

Lightning, Lightning Web Components, Salesforce

In Winter 20 Salesforce Introduce the new feature Lightning Message Service & it is generally available in Summer 20. LMS allows you to communicate between AURA, LWC & VF Page including the Utility Items as well. LMS allows publishing the event across the lightning environment that can be handled by either AURA, LWC and VF pages. This sounds like an Application Event in Aura Component however this is limited to Aura Components only.

  1. LMS is the first Salesforce technology which enables VF pages to communicate with Lightning Components anywhere in lightning pages including utility components.

Lightning Message Service is based on a new metadata type: Lightning Message Channels. We need to use Lightning Message Channel to access the Lightning Message Service API.

  1. In LWC we can access Lightning Message Channel with the scoped module @salesforce/messageChannel
  2. In Visualforce, we can use global variable $MessageChannel
  3. In Aura, use lightning:messageChannel in your component

How to Create a Lightning Message Channel

We can create LMS using VSCode.

To Create LMS you need to create a folder under force-app/main/default folder and the Folder name will be “messageChannels“.

After you have created the folder then we need to create a file and the structure of the file will be MyMessageChannel.messageChannel-meta.xml. Where “MyMessageChannel” is the name of the LMS and you can name it as per your requirement. Once you have created the file, we need to put some XML code which looks like below

<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>SampleMessageChannel</masterLabel>
    <isExposed>true</isExposed>
    <description>This is a sample Lightning Message Channel.</description>
    <lightningMessageFields>
        <fieldName>recordId</fieldName>
        <description>This is the record Id that changed</description>
    </lightningMessageFields>
    <lightningMessageFields>
        <fieldName>message</fieldName>
        <description>This is sample message</description>
    </lightningMessageFields>
    <lightningMessageFields>
        <fieldName>source</fieldName>
        <description>This is the source message</description>
    </lightningMessageFields>
    <lightningMessageFields>
        <fieldName>recordData</fieldName>
        <description>The current data representing the record that changed</description>
    </lightningMessageFields>
</LightningMessageChannel>

Where lightningMessageFields tag is used to create the fields/parameters that we need to send via event/lms. We can create many fields we wan.

Now, Add the entry for Lightning Message in Package.xml

<types>
		<members>*</members>
		<name>LightningMessageChannel</name>
	</types>

Now. Let’s create Lightning Component & Lightning Web Component along with the VF page to publish and subscribe the LMS.

Create VF Page and use below code.

To subscribe, publish or unsubscribe the LMS using VF we use sforce.one API

<apex:page lightningStylesheets="true">

    <apex:includeScript value="/sforce/one/49.0/api.js"></apex:includeScript>
    <apex:includeScript value="/soap/ajax/49.0/connection.js"></apex:includeScript>
    <apex:includeScript value="/soap/ajax/49.0/apex.js"></apex:includeScript>

    <apex:slds />
    <div>
        <p>Subscribe to SampleMessageChannel</p>
        <button onclick="subscribe_Message_Channel()">Subscribe</button>
        <div id="subscMessage" style="color:red"></div>
        <p>Unsubscribe from SampleMessageChannel</p>
        <button onclick="unsubscribe_Message_Channel()">Unsubscribe</button>
        <div id="unsubscMessage" style="color:red"></div>
        <p>Publish a message from VF</p>
        <button onclick="publishMC()">Publish</button>
        <br/>
        <br/>
        <p>Received message:</p>
        <textarea id="MCMessageTextArea" rows="10" style="disabled:true;resize:none;width:100%;" />
    </div>
    <script>

        // Load the MessageChannel token in a variable
        var SAMPLEMC = "{!$MessageChannel.SampleMessageChannel__c}";
        var subscriptionToMC;

        function onMCPublished(message) {
            var textArea = document.querySelector("#MCMessageTextArea");
            textArea.innerHTML = message ? JSON.stringify(message, null, '\t') : 'no message payload';
        }

        function subscribe_Message_Channel() {
            if (!subscriptionToMC) {
                subscriptionToMC = sforce.one.subscribe(SAMPLEMC, onMCPublished);
                var divAr = document.querySelector("#subscMessage");
                divAr.innerHTML = 'Message Channel Subscribed! ';
                var divAr = document.querySelector("#unsubscMessage");
                divAr.innerHTML = '';

            }
        }

        function unsubscribe_Message_Channel() {
            if (subscriptionToMC) {
                sforce.one.unsubscribe(subscriptionToMC);
                subscriptionToMC = null;
                var divAr = document.querySelector("#unsubscMessage");
                divAr.innerHTML = 'Message Channel UnSubscribed! ';
                var divAr = document.querySelector("#subscMessage");
                divAr.innerHTML = '';
            }
        }

        function publishMC() {
            const payload = {
                recordId: "003HSGHHJDHJHE637",
                recordData: { value: "Amit Singh" },
                channel: 'SFDCPanther',
                source: 'VF'
            }
            sforce.one.publish(SAMPLEMC, payload);
        }

    </script>
</apex:page>

Create LWC

Subscriber Component

To use LMS in LWC first step is that we need to import the methods from the lightning/MessageChannel library and import the Message channel

import {
  subscribe,
  unsubscribe,
  APPLICATION_SCOPE,
  MessageContext
} from "lightning/messageService";

import SAMPLEMC from "@salesforce/messageChannel/SampleMessageChannel__c";

Where SampleMessageChannel is the name of the Message Channel

Publisher Components

The first step is that we need to import the methods from the lightning/MessageChannel library and import the Message channel

Create Aura Components

Publisher Component

Subscribe Component

Now, we are done with the development. Time to test it. Refer video.

To Learn about lightning web component get the my Udemy course from here.

https://www.udemy.com/course/salesforce-lightning-web-component/

Resource:-

https://developer.salesforce.com/blogs/2019/10/lightning-message-service-developer-preview.html

https://developer.salesforce.com/docs/component-library/bundle/lightning-message-service/documentation

https://amitsalesforce.blogspot.com/2019/10/lightning-message-service-lms.html

Happy Learning šŸ™‚ #KeepLearning #KeepSharing