Tuesday, 19 December 2023

L M S Passing Data Two UnRealted Component

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