LWC NavigationMixin Not Working – Troubleshooting Guide

lightninglightning-web-componentsnavigationvisual-workflow

i am trying to create a custom footer for a flow. While trying to navigate to a list page of Survey object the Navigation is not working, Any help would mean a lot.

Thanks!!

<template>
    <div>
        <footer class="slds-modal__footer"  >
        <lightning-button class="slds-m-right_small"  label="Navigate to Survey" onclick={navigateToListView} >
        </lightning-button>
        <lightning-button class="slds-m-left_small"  label="Next" onclick={handleGoNext}>
        </lightning-button>
    </footer>
    </div>   
</template>


import { LightningElement, api } from 'lwc';
import { FlowNavigationNextEvent } from 'lightning/flowSupport';
import { NavigationMixin } from 'lightning/navigation';

export default class IDS_SendSuveryfooter extends LightningElement {



    handleGoNext() {
            console.log('next event fired')
                //     if (this.availableActions.find((action) => action === 'NEXT')) {
                // navigate to the next screen
            const navigateNextEvent = new FlowNavigationNextEvent();
            this.dispatchEvent(navigateNextEvent);
        }
        //}


    navigateToRecord() {
        console.log('navigate event fired')
            // Navigate to the Contact object's Recent list view.
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Survey',
                actionName: 'list'
            },
            state: {
                filterName: 'Recent'
            }
        });
    }
}

Best Answer

For NavigationMixin we need to follow this format in the .js:

 export default class IDS_SendSuveryfooter extends NavigationMixin(LightningElement) {
    ......
    }

Follow the documentation for more information: https://developer.salesforce.com/docs/component-library/bundle/lightning-navigation/documentation

Related Solutions

[SalesForce] backgroundContext not working for Edit NavigationMixin LWC

I have just resolved the same problem. In the state attribute, you should add navigationLocation: 'DETAIL'. The state attributes are nearly undocumented. I have found that i should put DETAIL value in navigationLocation by inspecting the URL generated after a click on the standard edit button of the view page.

Here is a complete example :

generateBackgroundUrlAndEdit(record_id) {
        this[NavigationMixin.GenerateUrl]({
            type: 'standard__recordPage',
            attributes: {
                recordId: record_id,
                objectApiName: "XYZ__c",
                actionName: 'view'
            },
        }).then(url => {
            this.navigateToEditPage(record_id, url);
        });
    }

    navigateToEditPage(record_id, back_url) {
        console.log('Return page URL = ' + back_url);
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: record_id,
                objectApiName: 'XYZ__c',
                actionName: 'edit'
            },
            state: {
                nooverride: 1,
                navigationLocation: 'DETAIL',
                //backgroundContext: '/lightning/r/XYZ__c/a2h9E000000sqvrQAA/view'
                backgroundContext: back_url
            }
        });
    }

Lightning Web Components – Fix sessionStorage/localStorage Not Working with NavigationMixin

I was facing the same issue. I need to open a refreshed tab whether I open it directly or through Navigation Mixin from another tab. I tried getting values from session storage in constructor, renderedCallback and connectedCallback but these functions does not called/run when we move back and forth between the tabs or when we use Navigation Mixin and didn't prefer to use window.open

So, I tried using CurrentPageReference and it resolved all of my problem.

Whether I am opening tab directly or by using Navigation Mixin, its getting correct session storage values.

You need to just import this:

import { CurrentPageReference } from 'lightning/navigation';

then write code like this:

@wire(CurrentPageReference)
    getStateParameters(currentPageReference) {
        if (currentPageReference) { 
            this.urlStateParameters = currentPageReference.state;
            if(Object.keys(this.urlStateParameters).length === 0) {
                if(sessionStorage.getItem('anyvalue')) {
                    this.yourvariable = sessionStorage.getItem('anyvalue');
                }
            }
        }
    }

Hope this solution will help you also.

Related Topic