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.
- LMS is the first Salesforce technology which enables VF pages to communicate with Lightning Components anywhere in lightning pages including utility components.
To further my previous answer:
1) LMS is part of product (you don't have to worry about maintenance and tests)
2) LMS does more than pubsub, it covers VF/Aura/LWC commumications.
3) LMS channels are part of metadata.I haven't looked at LMS code but it's likely different.
— Philippe Ozil (@PhilippeOzil) May 11, 2020
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.
- In LWC we can access Lightning Message Channel with the scoped module @salesforce/messageChannel.
- In Visualforce, we can use global variable $MessageChannel.
- 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://amitsalesforce.blogspot.com/2019/10/lightning-message-service-lms.html
Happy Learning 🙂 #KeepLearning #KeepSharing
This is a perfect example! Thanks for the article
Good example. I’m newby, and the only thing I can’t figure out, is how to invoke a function in subscriber component after Publish complete.
Is there any callbacks or something?
There is a callback method that you need to execute.