0

I have a similar problem I would like to navigate to a different LWC Component via Navigation Mixin and pass some data to this component

The first component is a modal and I would like the user to input some data which on click would take to a different LWC component and pass a property to it

Model Component .js file

import { LightningElement, track, wire } from 'lwc';
import Annual_Report_Link from '@salesforce/label/c.Annual_Report_Link';
//Importing for Navigation
import { NavigationMixin } from "lightning/navigation";
import { publish, MessageContext } from 'lightning/messageService';
import MESSAGECHANNEL from '@salesforce/messageChannel/smessageChannel__c';
export default class ModalPopup extends NavigationMixin(
    LightningElement
) {
    @wire(MessageContext)
    messageContext;
    inputValue;
    //Boolean tracked variable to indicate if modal is open or not default value is false as modal is closed when page is loaded 
    @track isModalOpen = true;

    openModal() {
        // to open modal set isModalOpen tarck value as true
        this.isModalOpen = true;
    }
    closeModal() {
        // to close modal set isModalOpen tarck value as false
        this.isModalOpen = false;
    }
    inputHandler(event) {
        this.inputValue = event.target.value;
        console.log('the input aleu is ', this.inputValue)
    }

    submitDetails(event) {

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

        await publish(this.messageContext, MESSAGECHANNEL, message);
        try {
            console.log('successfully published');

            await this[NavigationMixin.Navigate]({
                type: 'standard__webPage',
                attributes: {
                    url: '/businessfiling?rt=ar'
                },
                state: {}
            });


        } catch (err) {
            console.log('Error :' + err);
        }
    }


    goToAnnualReportFiling() {
        this.isModalOpen = false;
        window.location.href = Annual_Report_Link;

    }
}

****subscriber.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 Subscriber 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'
    }

}

However nothing passes to the handleMessage(message) method. Basically no lmsData. value passes to the subscriber component. Deeply appreciated, any one can guide me on how to make it work?

1 Answer 1

0

The component you're trying to message doesn't exist yet. That means there is no way you can use LMS this way. Use the state parameter in NavigationMixin.Navigate to pass parameters. If you're trying not to expose data over the URL, you can also use window.sessionStorage to store data temporarily between component loads.

1
  • Thank you very much!
    – Govind V
    Commented Mar 10, 2023 at 16:56

You must log in to answer this question.

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