"lightning:messageChannel" provides access to the lightning message service API
Lightning Message Service is based on the Concept of event driven architecture but is different compared to the Platform Events because Lightning message channel actually sends the real data that can be utilised in the component logic while platform events even though based on the event driven architecture acts more like a messenger communicating that some event has taken place and if you subscribe to my event please take the appropriate action meaning it doesn't carry any actual data to build a logic against but works more as an informant and has a wider reach with respect to places it can reach in the salesforce Org
The Communication of data between un related lightning web components as well as Visualforce pages embedded in the same Lightning page, Aura components, and Lightning web components, including components in a utility bar and pop-out utilities can be achieved by utilising the feature called Lightning Message Channel.
You can use LMC to communicate across DOM within a Lightning Page and you can define if the Lightning Message Channel can communicate the data across the active page or in the complete application.
Lightning Message Channel is a reliable mode of communication that is more secure and has support from salesforce (that means any release updates would be duly incorporated keeping Lightning Message Channel in mind for the Developer Community ) compared to a pub sub model which is not supported by salesforce but has been utilised in the LWC space for Data Communication.
Sample code as used in Package.xml (Lightning Message Channel is created and deployed from VS Code and not created in Salesforce Org, hence the folder structure and their naming format is important )
<?xml version="1.0" encoding="UTF-8"?>
<Package xmlns="http://soap.sforce.com/2006/04/metadata">
<types>
<members>*</members>
<name>LightningMessageChannel</name>
</types>
<version>47.0</version>
</Package>
Sample Code for Lightning Message Channel
<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
<description>This event is fired when filters change.</description>
<isExposed>true</isExposed> -this enables other components to access the Lightning Message Channel
<lightningMessageFields>
<description>Current product filters</description> each field has their own description for better maintenance and debugging if neeeded
<fieldName>filters1</fieldName> this defines the fields that can help carry the data across components (there can be more than one field), the name has to be unique
</lightningMessageFields>
<masterLabel>ProdFilter</masterLabel> - this defines the API name to Import Lightning Message Channel in Other Subscribing Components
</LightningMessageChannel>
Component from where the Lightning Message Channel has be to published should import the lightning message service and the respective lightning message channel in order to publish the required data as below
// Lightning Message Service and a message channel
import { publish, MessageContext } from 'lightning/messageService';
- Publsih and MessageContext are the parameter imported from Lightning Message Service API where publish is used to publish the payload(or data in simpler terms ) to the subscribing components while MessageContext is used to provide the information about the component using the Lightning Message service
import PRODUCTS_FILTERED_MESSAGE from '@salesforce/messageChannel/ProdFilter__c';
- Lightning message Channel is not an object but uses the "__c" suffix after its name
Publish of required data should have below code in the same component as above
@wire(MessageContext) messageContext; - used to call MessageContext in Lightning Message Service API
// Published ProdFiltered message
publish(this.messageContext, PRODUCTS_FILTERED_MESSAGE, {
filters1: this.variable - local variable containing the data to be passed using LMC
Component Subscribing the data using Lightning Message Service should have the below code snippets in it's js file to receive the data correctly
import { publish, subscribe, MessageContext } from 'lightning/messageService';
import PRODUCTS_FILTERED_MESSAGE from '@salesforce/messageChannel/ProdFilter__c';
& then some below as well
localVal= {}; - local variable
productFilterSubscription=null;
@wire(MessageContext) messageContext;
connectedCallback() {
// Subscribe to ProductsFiltered message
this.productFilterSubscription = subscribe(
this.messageContext,
PRODUCTS_FILTERED_MESSAGE, - this is the name of Lightning Message Channel for use in the Code, it s good practice to keep this name consistant across publishing and subscribing components
(message) => this.handleFilterChange(message) - arrow function is used to pass the payload or data to the handleFilterChange function in the form of "message" coming from the publishing component. "message" is A serializable JSON object containing the message published to subscribers. A message can't contain functions or symbols.
);
}
handleFilterChange(message) {
this.localVal= { ...message.filters1 }; - filters1 field containing the data coming from lightning message channel which is being parsed using the spread operator
console.log('this.filters '+ this.localVal);
}
For more details refer here
Limitations of Lightning Message Service:-
Lightning message service supports only Lightning Experience in the below context:
Standard navigation
Console navigation
Salesforce mobile app for Aura and Lightning Web Components
but not for Visualforce pages
Lightning components used in Experience Builder sites.
Support for Experience Builder sites is beta.
Lightning Message Service doesn't work with
Salesforce Tabs + Visualforce sites
Visualforce pages in Experience Builder sites.
Lightning message channel won't work for Aura components
That uses the background utility item interface.
That use lightning message channel has to call it outside the init method once the component has completely rendered otherwise it won't work.
That don't use lightning:messageChannel tag as a direct child of aura:component
Commentaires