Lightning Message Service (LMS)
- December 12, 2021
In today’s world of evolving technologies, it’s important to have an underlying functionality that binds both older/legacy and new/evolving technologies together. In the Salesforce ecosystem, this initially started with Visualforce/Apex pages, which then evolved to Lightning AURA components. Now, we have Lightning Web Components (LWC). LWC maintains connectivity between Visualforce, AURA and LWC.
Applications
LMS can be used to communicate across components residing almost anywhere, including:
- Console tabs
- Standard app tabs
- Lightning tabs
- Utility bar items
- Background utility items
- Minimized utility items
- Hidden items: tabs, sub-tabs and app-tabs
Lightning Message Channel
LMS provides a secure event bus, called the Message Channel, that helps pass data across components. Message Channel is a secure channel through which data (messages) passes across DOM components. It’s a lightweight, packageable component that can be created/deployed in Salesforce.
Assuming a SFDX project already created with authorization of a dev org:
- Create directory named “messageChannels” under the “force-app\main\default” folder
-
Create a file with extension “.messageChannel-meta.xml”
<messageChannelName>.messageChannel-meta.xml
For example: demoMessageChannel.messageChannel-meta.xml - Deploy this metadata to the org
The following is the body of a sample Message Channel, where the lightningMessageFields tag holds the field names. Actual data will be passed through these message fields. (You can have multiple fields in a single channel, based on your needs.)
<?xml version=”1.0″ encoding=”UTF-8″?>
<LightningMessageChannel xmlns=”http://soap.sforce.com/2006/04/metadata”>
<description>This Lightning Message Channel is used for demo purpose</description>
<isExposed>true</isExposed>
<lightningMessageFields>
<description>Holds name of the source cmp publishing the message</description>
<fieldName>source</fieldName>
</lightningMessageFields>
<lightningMessageFields>
<description>Holds actual message</description>
<fieldName>data</fieldName>
</lightningMessageFields>
<masterLabel>demoMessageChannel</masterLabel>
</LightningMessageChannel>
Implementation
There are three important methods for implementing LMS across any type of component in Salesforce (the syntax below is for LWC, but the methods and relevance remain the same across all three).
- createMessageContext() returns a MessageContextObject
- publish(messageContext, messageChannel, message/payload)
PARAMETER | TYPE | DESCRIPTION |
messageContext | object | Provides information about the component using the LMS.Get this via MessageContext wire adapter or via createMessageContext() |
messageChannel | object | The message channel object, use the scoped module @salesforce/messageChannel. |
message/payload | object | JSON object payload |
- subscribe(messageContext, messageChannel, listener/callback, subscriberOptions(optional))
PARAMETER | TYPE | DESCRIPTION |
messageContext | object | Provides information about the component using the LMS.Get this via MessageContext wire adapter or via createMessageContext() |
messageChannel | object | The message channel object, use the scoped module @salesforce/messageChannel. |
listener | function | A callback function that handles the message once published. |
subscriberOptions | object | (Optional) An object that, when set to {scope: APPLICATION_SCOPE}, specifies the ability to receive messages on a message channel from anywhere in the application. Import APPLICATION_SCOPE from lightning/messageService. |
The usage and implementation of the above methods vary based on the type of the component (VF, AURA, LWC) for which LMS is being implemented.
LMS in Lightning Web Components (LWC)
Access Message Channel with the scoped module ‘@salesforce/messageChannel’
import { subscribe, unsubscribe, publish, MessageContext, APPLICATION_SCOPE } from ‘lightning/messageService’;
import messageChannel from ‘@salesforce/messageChannel/demoMessageChannel__c’;
Imports
- Subscribe
- Unsubscribe
- Publish
- messageContext
- messageChannel
- APPLICATION_SCOPE
LMS in AURA Components (AURA)
Access Message Channel using the lightning:messageChannel tag.
<lightning:messageChannel type=”demoMessageChannel__c” onMessage=”{!c.handleChange}”/>
Attributes
- type
- onMessage
- scope
There’s no need for a separate subscription; it’s implicit when the lightning:messageChannel handler is provided.
Both the subscriber and the publisher use the same lightning:messageChannel tag.
LMS in Visualforce Pages (VF)
Access Message Channel using the $MessageChannel global variable.
{!$MessageChannel.demoMessageChannel__c}
Standard sforce.one functions
- Publish
- Subscribe
- Unsubscribe
Considerations
-
Supported experiences/features:
- Lightning Experience standard navigation
- Lightning Experience console navigation
- Salesforce mobile app for Aura and Lightning Web Components
- Lightning components used in Experience Builder sites.
- Lightning Message Service doesn’t support:
- Visualforce pages in mobile apps
- Lightning Communities
- Message Channel creation from Salesforce user interface
The working code for the above example is available here.
— By Shrikant Raut