Navigation Service in LWC

Hi Folks, In this blog we will try to understand how we can use the navigation service, Lightning/Navigation, to navigate to many different page types, such as record, list view, object and lightning component.

To use the navigation service, we should import the lightning/navigation module in the component’s JavaScript class. 

import { NavigationMixin } from 'lightning/navigation';

 Then, Apply the NavigationMixin function to your component’s base class

export default class MyCustomElement extends NavigationMixin(LightningElement){}

To dispatch the navigation request:-

call the navigation service’s [NavigationMixin.Navigate](pageReference,[replace]) function 

this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'home',
            },
        });

The below example shows that how we can navigate to many different page types, such as record, list view, object and lightning component.

navigation_in_lwc.html

<template>

<lightning-card title="Navigation Service in LWC" icon-name="standard:high_velocity_sales">

<div class="slds-m-around_medium">

<div class="slds-box">

<b>Record: Create,View,Edit</b>

<br>

<lightning-button label="New Contact" onclick={navigateNewContact}>

</lightning-button>

<lightning-button label="View Contact" onclick={navigateViewContact}>

</lightning-button>

<lightning-button label="Edit Contact" onclick={navigateEditContact}>

</lightning-button>

</div>

<div class="slds-box">

<b>Views: Contact Recent List View,Contact related list of account</b>

<br>

<lightning-button label="Contact List View-Recent " onclick={navigateRecentListView}>

</lightning-button>

<lightning-button label="Contact related list of Account" onclick={navigateRelatedLists}>

</lightning-button>

</div>

<div class="slds-box">

<b>Components: LWC, Aura, VF Page</b>

<br>

<lightning-button label="LWC " onclick={navigateToLWC}></lightning-button>

<lightning-button label="Aura" onclick={navigatetToAura}></lightning-button>

<lightning-button label="VF Page" onclick={navigateToVFPage}></lightning-button>

</div>

<div class="slds-box">

<b>Home Page: Account</b>

<br>

<lightning-button label="Account Home Page " onclick={navigateAccountHomePage}></lightning-button>

</div>

<div class="slds-box">

<b>Other: Lightning Page</b>

<br>

<lightning-button label="Lightning Page " onclick={navigateLightningPage}></lightning-button>

</div>

</div>

</lightning-card>

</template>

 

navigation_in_lwc.js

import { LightningElement } from 'lwc';

import {NavigationMixin} from 'lightning/navigation';

export default class Navigation_in_lwc extends NavigationMixin(LightningElement) {

condId='0035g00000fcHNJAA2';

acctId='0015g00000qk5zjAAA';

navigateNewContact(){

this[NavigationMixin.Navigate]({

type:'standard__objectPage',

attributes:{

objectApiName:'Contact',

actionName:'new'

}

})

}

navigateViewContact(){

this[NavigationMixin.Navigate]({

type:'standard__recordPage',

attributes:{

recordId:this.condId,

actionName:'view'

}

})

}

navigateEditContact(){

this[NavigationMixin.Navigate]({

type:'standard__recordPage',

attributes:{

recordId:this.condId,

actionName:'edit'

}

})

}

navigateRecentListView(){

this[NavigationMixin.Navigate]({

type:'standard__objectPage',

attributes:{

objectApiName:'Contact',

actionName:'list'

},

state: {

filterName: 'Recent'

}

})

}

navigateRelatedLists(){

this[NavigationMixin.Navigate]({

type:'standard__recordRelationshipPage',

attributes:{

recordId:this.acctId,

objectApiName:'Account',

relationshipApiName: 'Contacts',

actionName: 'view'

}

})

}

navigateToLWC(){

var compDefinition = {

componentDef: "c:mock_ui_parent",

}

// Base64 encode the compDefinition JS object

var encodedCompDef = btoa(JSON.stringify(compDefinition));

this[NavigationMixin.Navigate]({

type:'standard__webPage',

attributes:{

url: '/one/one.app#' + encodedCompDef

}

})

}

navigatetToAura(){

this[NavigationMixin.Navigate]({

type: "standard__component",

attributes: {

componentName: "c__auraComponent" //auraComponent is the name of the

component

},

//If you need to pass some data to the destination component, you have to

provide it to the key "state" as an object.

state: {

//c__Value: '100'

}

});

}

navigateToVFPage(){

this[NavigationMixin.GenerateUrl]({

type: 'standard__webPage',

attributes: {

url: '/apex/myVFPage'

}

}).then(generatedUrl => {

window.open(generatedUrl);

});

}

navigateAccountHomePage(){

this[NavigationMixin.Navigate]({

type:'standard__objectPage',

attributes:{

objectApiName:'Account',

actionName:'home'

}

})

}

navigateLightningPage(){

this[NavigationMixin.Navigate]({

type: 'standard__navItemPage',

attributes: {

apiName: 'LWC_Components'

},

});

}

}

 navigation_in_lwc.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

<apiVersion>55.0</apiVersion>

<isExposed>true</isExposed>

<targets>

<target>lightning__AppPage</target>

</targets>

</LightningComponentBundle>

Output:-

If you have any comments or queries about this, please feel free to mention them in the comments section below.