Step :- 1) Create A New Folder Add the MessageChannel
Step :- 2) Create lightningMessageChannel add Fields
<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
<masterLabel>messageChannels</masterLabel>
<isExposed>true</isExposed>
<description>Message Channel to pass data</description>
<lightningMessageFields>
<fieldName>lmsData</fieldName>
<description>This is field to pass data</description>
</lightningMessageFields>
</LightningMessageChannel>
Step :- 3) update the manifest/package.xml file adding the lightningmessagechannel
<types>
<members>*</members>
<name>LightningMessageChannel</name>
</types>
version above 46 version
<version>58.0</version>
lightning Web Component Create lmscompanent A(LWS) HTML
<template>
<lightning-card title="LWC LMS Component One" >
<div class="slds-m-around_medium">
<lightning-input type="text" label="Enter message to publish"
onkeyup={inputHandler}>
</lightning-input>
</div>
<div class="slds-m-around_medium">
<lightning-button variant="base" label="publish" onclick={publishMessage} >
</lightning-button>
</div>
</lightning-card>
</template>
lightning Web Component Create lmscompanent A(LWS) JS
import { LightningElement,wire } from 'lwc';
import SAMPLEMC from '@salesforce/messageChannel/messageChannels__c';
import {MessageContext, publish} from 'lightning/messageService'
export default class LmsComponentA extends LightningElement {
inputValue
@wire(MessageContext)
context
inputHandler(event){
this.inputValue = event.target.value
}
publishMessage(){
const message={
lmsData:{
value:this.inputValue
}
}
//publish(messageContext, messageChannel, message)
publish(this.context, SAMPLEMC, message)
}
}
lightning Web Component Create lmscompanent X(LWS) HTML
<template>
<lightning-card title="LWC LMS Component X">
<div class="slds-m-around_medium">
<lightning-button label="unsubscribe"
onclick={unsubscribeMessage}></lightning-button>
</div>
<div class="slds-m-around_medium">
Message Recieved <strong>{recievedMessage}</strong>
</div>
</lightning-card>
</template>
lightning Web Component Create lmscompanent X(LWS) JS
import { LightningElement,wire } from 'lwc';
import SAMPLEMC from '@salesforce/messageChannel/messageChannels__c';
import {subscribe, MessageContext, APPLICATION_SCOPE, unsubscribe}
from 'lightning/messageService';
export default class LmsComponentX extends LightningElement {
recievedMessage
subscription
@wire(MessageContext)
context
connectedCallback(){
this.subscribeMessage()
}
subscribeMessage(){
//subscribe(messageContext, messageChannel, listener, subscriberOptions)
this.subscription= subscribe(this.context, SAMPLEMC,
(message)=>{this.handleMessage(message)}, {scope:APPLICATION_SCOPE})
}
handleMessage(message){
this.recievedMessage = message.lmsData.value?
message.lmsData.value :'NO Message published'
}
unsubscribeMessage(){
unsubscribe(this.subscription)
this.subscription = null
}
}
No comments:
Post a Comment