Communication Through LMS in LWC

 


How Component will communicate through Lightning Message Service (LMS) in LWC

Define Message Channel Metadata in your org

  1. Make a folder under force-app/main/default with name “messageChannels”.
  2. Create an xml file “messageChannelName.messageChannel-meta.xml”
  3. Define lightning message field in .xml file, see code 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>

<!--A list of message payload fields for a given Lightning Message Channel.-->
<lightningMessageFields>
<fieldName>recordId</fieldName>
<description>This is the record Id that changed</description>
</lightningMessageFields>
<lightningMessageFields>
<fieldName>recordData</fieldName>
<description>The current data representing the record that changed</description>
</lightningMessageFields>

</LightningMessageChannel>

Import message service

import msgService from '@salesforce/messageChannel/messageChannelName__c';

Import message service features

import {publish,subscribe,unsubscribe,APPLICATION_SCOPE,MessageContext} from 'lightning/messageService';

Define the Scope of the Message Service

The Lightning message service lets you define the scope of where subscribing components receive messages in your application.

For Lightning web components, the scoping feature is available only when using @wire adapter
@wire(MessageContext)
messageContext

Publish Message Channel

To publish message, we have publish() method in Lightning message service’s.
publish() method accept 3 parameter :-

1. Message Context (Type Object)
2. Message Channel (Type Object)
3. Message Payload (The message payload is a JSON object)

messageContext :- The MessageContext object provides information about the Lightning web component that is using the Lightning message service. Get this object via the MessageContext wire adapter or via createMessageContext().

@wire(MessageContext)
messageContext

messageChannel :- The message channel object. To import a message channel, use the scoped module @salesforce/messageChannel. To create a message channel in an org, use the LightningMessageChannel metadata type.

message :- A serializable JSON object containing the message published to subscribers. A message can’t contain functions or symbols.

Subscribe Message Channel

To subscribe message channel, use subscribe() method

subscribe() method accept 4 parameters :-

1. Message Context (Type Object)
2. Message Channel (Type Object)
3. Listener (Type function)
4. Subscriber Options (Type Object)

messageContext :- The MessageContext object provides information about the Lightning web component that is using the Lightning message service. Get this object via the MessageContext wire adapter or via createMessageContext().

@wire(MessageContext)
messageContext

messageChannel :- The message channel object. To import a message channel, use the scoped module @salesforce/messageChannel. To create a message channel in an org, use the LightningMessageChannel metadata type.

listener :- A function that handles the message once it is published.

subscriberOptions :- (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.

Un-Subscribe Message Channel

To unsubscribe message channel, use unsubscribe() method

It accept 1 parameter

subscription :- The Subscription object returned by the subscribe() function.

Demonstration

Message Channel

LSM_Component_A

LMS_Component_B

Result



Follow me on linkedIn and Twitter for such more related post

Comments