*** Lightning Message Channel (LMC) ***
1. Vs Code: Create a folder with the name "messagechannels" (under main\default)
2. Vs Code: Create meta file with the name "ChannelName.messageChannel-meta.xml" -
<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
<masterLabel>ChannelName</masterLabel>
<isExposed>true</isExposed>
<description>Message Channel used for the communication.</description>
<lightningMessageFields>
<fieldName>fieldData</fieldName>
<description>Variable used for lms data</description>
</lightningMessageFields>
</LightningMessageChannel>
3. Create a VS Page (lmcVfPage) -
<script>
let ChannelNameVar = "{!$MessageChannel.ChannelName__c}";
let subscribedRef;
function publish(){
const payload = {
fieldData: { //this name should be the channel field name
value: 'some data to send'
}
};
sforce.one.publish(ChannelNameVar, payload)
}
function subscribe(){
if(!subscribedRef)
subscribedRef = sforce.one.subscribe(ChannelNameVar, messageHandler, {scope:"APPLICATION"})
}
function unsubscribe(){
if(subscribedRef) {
sforce.one.unsubscribe(subscribedRef);
subscribedRef = null;
}
}
function messageHandler(message){
console.log(`message: ${message.fieldData}`);
}
</script>
4. Create a Aura Component (lmcAura) -
UI -
<lightning:messageChannel type="ChannelName__c" aura:id="ChannelNameId" onMessage="{!c.handleMessage}" scope="APPLICATION"/>
publish: function (cmp, event, helper) {
let msg = cmp.get("v.message")
let message ={
fieldData:{
value: msg
}
}
cmp.find("ChannelNameId").publish(message)
}
handleMessage: function (cmp, message, helper) {
if (message !=null && message.getParam("fieldData") !=null){
console.log(message.getParam("fieldData").value);
}
}
5. Create a LWC Component (lmcLwc) -
import { APPLICATION_SCOPE, publish, createMessageContext, releaseMessageContext, subscribe, unsubscribe } from 'lightning/messageService';
import ChannelNameVar from "@salesforce/messageChannel/ChannelName__c"
LightningElement {
context = createMessageContext();
publishMessage(){
const message = {
fieldData:{
value: 'Some Value'
}
}
publish(this.context, ChannelNameVar, message)
}
subscribeMessage(){
if (this.subscription){
return;
}
this.subscription = subscribe(this.context, ChannelNameVar, (message)=>{
this.handleMessage(message)
}, { scope: APPLICATION_SCOPE})
}
unsubscribeMessage(){
unsubscribe(this.subscription)
this.subscription = null
}
handleMessage(message){
console.log(lmsData? message.lmsData.value : 'No Message');
}
disconnectedCallback() {
releaseMessageContext(this.context)
}
}
5. Create an App Page and add all vf, aura and lwc components.
