Enhancing Object-based Lightning Message Service

Enhancing Object-based Lightning Message Service

Information:-

Lightning Message Service (LMS) allows us to communicate between Visualforce and Lightning components (Aura and Lightning web components both) on any lightning page.

LMS API allows you to publish messages throughout the lightning experience and subscribe to the same message anywhere with in a lightning page. It is similar to Aura Application Events to communication happens between components.

Lightning Message Service is based on a new metadata type: Lightning Message Channels. We need to use the 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 the global variable $MessageChannel.

3. In Aura, use lightning:messageChannel in your component

When to use Lightning Message Service:-

In Lightning Experience, if we want a Visualforce page to communicate with a Lightning web component then we have to implement a custom publish-subscribe solution because this is currently not possible with LWC Event. Now, we can use the Lightning Message Service API to handle this communication.

Steps to create Lightning Message Service:-

• Create a message channel called SampleMessageChannel__c using the Metadata API.
• Create a Lightning web component called publisherComponent that publishes on SampleMessageChannel__c message channel.

 

The Publisher Component code is:-

// publisherComponent.js

import { LightningElement, wire } from ‘lwc’;

import { publish, MessageContext } from ‘lightning/messageService’;

import SAMPLEMC from “@salesforce/messageChannel/SampleMessageChannel__c”;

export default class PublisherComponent extends LightningElement {

 @wire(MessageContext)

   messageContext;

   handleClick() {

        const message = {

            recordId: “Any string”,

            recordData: {

             value: “any data”

            }

        };

        publish(this.messageContext, SAMPLEMC, message);

    }

}

In the HTML template file of component includes a Publish button that calls the handleClick() method. OnClick of that button it publishes the record data to SampleMessageChannel__c. The subscribing Visualforce page then receives that data.

publisherComponent.html Code:-

<template>

    <lightning-card title=”MyLwcPublisher” icon-name=”custom:custom14″>

        <div class=”slds-m-around_medium”>

            <p>MessageChannel: SampleMessageChannel</p>

            <br>

            <lightning-button label=”Publish” onclick={handleClick}></lightning-button>

        </div>

    </lightning-card>

</template>

Lightning Web Component Code:-

<apex:page>

    <div>

        <p>Subscribe to SampleMessageChannel</p>

        <button onclick=”subscribeMC()”>Subscribe</button>

        <p>Unsubscribe from SampleMessageChannel</p>

        <button onclick=”unsubscribeMC()”>Unsubscribe</button>

        <br/>

        <br/>

        <p>Received message:</p>

        <textarea id=”MCMessageTextAreaId” 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(“#MCMessageTextAreaId”);

            textArea.innerHTML = message ? JSON.stringify(message, null, ‘\t’) : ‘no message payload’;

        }

        function subscribeMC() {

            if (!subscriptionToMC) {

                subscriptionToMC = sforce.one.subscribe(SAMPLEMC, onMCPublished, {scope: “APPLICATION”});

            }

        }

        function unsubscribeMC() {

            if (subscriptionToMC) {

                sforce.one.unsubscribe(subscriptionToMC);

                subscriptionToMC = null;

            }

        }

    </script>

</apex:page>

Summary:-

Lightning Message Service (LMS) facilitates seamless communication between Visualforce and Lightning components within a Lightning page via Lightning Message Channels. LMS API enables message publication and subscription, akin to Aura Application Events. In Lightning Web Components (LWC), access the channel using @salesforce/messageChannel module; in Visualforce, utilize $MessageChannel; and in Aura, employ lightning:messageChannel. Use cases include enabling communication between Visualforce and Lightning Web Components. Key steps involve creating a message channel and a Lightning web component for publishing.