Information :-
Lightning Message Service (LMS) allow us to communicate between visualforce and Lightning component(Aura and Lightning web component both) on any lightning page.
LMS API allow you to publish message throughout the lightning experience and subscribe the same message anywhere with in 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 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
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 publisherComponent 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 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>