1

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, 2021 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.
    – SFDCDJ
    May 21, 2021 at 14:44
  • @anxiousAvocado As soon as I added Navigation promise.then(), it stopped navigating to another LWC.
    – SFDCDJ
    May 21, 2021 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, 2021 at 14:59

1 Answer 1

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,

8
  • 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?
    – SFDCDJ
    May 21, 2021 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, 2021 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
    – SFDCDJ
    May 21, 2021 at 16:03
  • yeah only mods can do it, I searched. I ll try in my org and let you know. May 21, 2021 at 16:04
  • Sure. Meanwhile I also trying to resolve the same from my side.
    – SFDCDJ
    May 21, 2021 at 16:05

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .