0

Requirement:

I want to pass the data from One LWC to another LWC. Both LWC are not on the same page but added in Different Tab. So, when I pass the Data from LWC lmsNavComA, I should expect to see the data in another LWC lmsNavCompSuB.

Note: In Real, I want to Navigate from LWC to VF Page but I am facing same issue there so for POC purpose, I have added the code of 2 LWCs

Below is the code that I have tried & I am not able to see the data when I navigate to LWC lmsNavCompSuB from lmsNavComA.

LMS xml:

<?xml version="1.0" encoding="UTF-8" ?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>SampleMessageChannel</masterLabel>
    <isExposed>true</isExposed>
    <description>Message Channel to pass data</description>
    <lightningMessageFields>
        <fieldName>lmsData</fieldName>
        <description>This is the field to pass data</description>
    </lightningMessageFields>
</LightningMessageChannel>

lmsNavComA(Publishing Component):

HTML:

<template>
    <lightning-card title="LWC LMS Publish Component A">
        <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 label="Publish" onclick={publishMessage}></lightning-button>
        </div>
    </lightning-card>
</template>

JS:

import { LightningElement,wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import SAMPLEMC from "@salesforce/messageChannel/SampleMessageChannel__c"
import {MessageContext, publish} from 'lightning/messageService'
export default class LmsNavComA extends NavigationMixin(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);
        //After Publishing, I'm Navigating to another LWC Tab where I can not see the data
        this[NavigationMixin.Navigate]({
            type: 'standard__navItemPage',
            attributes: {
                apiName: 'SubScribeLWCCompB'
            },
        });
    }
}

lmsNavCompSuB(Subscribing Component):

HTML:

<template>
    <lightning-card title="LWC LMS Component NavB">
        <div class="slds-m-around_medium">
            Message Received <strong>{recievedMessage}</strong>
        </div>

    </lightning-card>
</template>

JS:

import { LightningElement,wire } from 'lwc';
import SAMPLEMC from "@salesforce/messageChannel/SampleMessageChannel__c"
import {subscribe, MessageContext, APPLICATION_SCOPE, unsubscribe} from 'lightning/messageService';
export default class LmsNavCompSuB extends LightningElement {
    recievedMessage
    subscription
    @wire(MessageContext)
    context

    connectedCallback(){
        this.subscribeMessage()
    }

    subscribeMessage(){
        console.log('subscribeMessage');
        //I get above Console Log but handleMessage is not executing
        subscribe(this.context, SAMPLEMC, (message)=>{this.handleMessage(message)}, {scope:APPLICATION_SCOPE})
    }

    handleMessage(message){
        console.log('handleMessage');
        this.recievedMessage = message.lmsData.value? message.lmsData.value :'NO Message published'
    }

}

Can someone please help me what I am doing wrong here? Does LMS or PubSub events not work during Navigation?

4
  • can you use promise or async await for publish(this.context, SAMPLEMC, message); to finish running and navigate in then()? As you are able to do navigation, it might be happening before the message has been published. May 21 at 14:42
  • @anxiousAvocado is there a link that I can refer. This is the first time I am using LMS so not sure how can I use Promise here. May 21 at 14:44
  • @anxiousAvocado As soon as I added Navigation promise.then(), it stopped navigating to another LWC. May 21 at 14:58
  • 1
    yeah, I am trying to write up a async-await code for you which basically means that navigationMixin will wait for Publish() to finish running. May 21 at 14:59
1

Try async await, my syntax might be wrong but here's what it would look like :

publishMessage(){
    const message={
        lmsData: this.inputValue
        
    }
    this.publishedMessage(message);
    
}

async publishedMessage(message){
    await  publish(this.context, SAMPLEMC, message);
    try{
        console.log('successfully published');
        await this[NavigationMixin.Navigate]({
            type: 'standard__navItemPage',
            attributes: {
                apiName: 'subscriberComp'
            },
        });
    }catch(err){
        console.log('Error :'+err);
    }
}

Basically we are waiting for publish to finish and because we are using async the function will automatically return a promise and execute navigation mixin if not, it will go to catch block.

I also wrote this fiddle if you want to play around with it,

7
  • I tried to add the similar code but getting an error message. Uncaught (in promise) RangeError: Maximum call stack size exceeded. Would it be possible for you to add the same code in your personal org in order to replicate the message? May 21 at 15:59
  • @DhananjayPatil yeah it might take me a while but let me check, if you can convert this into a chat, I am happy to help you ther. May 21 at 16:01
  • Could not see an option to turn it into the chat? Chat Option appear when we try to exceed the limit of messaging May 21 at 16:03
  • yeah only mods can do it, I searched. I ll try in my org and let you know. May 21 at 16:04
  • Sure. Meanwhile I also trying to resolve the same from my side. May 21 at 16:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.