Lightning Web Component Navigation Service
Let’s discuss here how to use the Lightning web components NavigationMixin. To navigate in Lightning Experience, Lightning Communities, and the Salesforce app, use the navigation service,lightning/navigation Instead of a URL, the navigation service uses a PageReference, which describes the page. Using a PageReference insulates your component from future changes to URL formats. It also allows your component to be used in multiple applications, each of which can use different URL formats. A PageReference is a JavaScript object that describes the page type, its attributes, and the state of the page. To navigate to a PageRefererence, use the navigation service. To Use the NavigationMixin
1. Import the
lightning/navigation module.|
1 |
import { NavigationMixin } from 'lightning/navigation'; |
2. Apply the
NavigationMixin function to your component’s base class.|
1 |
export default class MyCustomElement extends NavigationMixin(LightningElement) {} |
3. Create a plain JavaScript
PageReference object that defines the page.4.Call the navigation service’s
[NavigationMixin.Navigate](pageReference, [replace]) function to dispatch the navigation request. Ifreplace is set to true, the pageReference replaces the existing entry in the browser history so the user doesn’t have to press the back button twice. The default value is false.|
1 2 3 4 5 6 7 8 |
navigateNext() { this[NavigationMixin.Navigate]({ type: 'standard__navItemPage', attributes: { apiName: this.tabName, }, }); } |
The NavigationMixin adds two APIs to your component’s class. Since these APIs are methods on the class, they must be invoked with the this reference.
[NavigationMixin.Navigate](pageReference, [replace])
A component callsthis[NavigationMixin.Navigate]to navigate to another page in the application.[NavigationMixin.GenerateUrl](pageReference)
A component callsthis[NavigationMixin.GenerateUrl]to get apromisethat resolves to the resulting URL. The component can use the URL in thehrefattribute of an anchor. It can also use the URL to open a new window using thewindow.open(url)browser API.
Navigate to Object Home
Use this code to navigate to the account home
|
1 2 3 4 5 6 7 8 9 10 |
navigateToObjectHome() { // Navigate to the account object home page. this[NavigationMixin.Navigate]({ type: 'standard__objectPage', attributes: { objectApiName: 'Account', actionName: 'home' } }); } |
Navigate to List View
Use this sample code to navigate to the list view
|
1 2 3 4 5 6 7 8 9 10 11 12 |
navigateToList() { this[NavigationMixin.Navigate]({ type: 'standard__objectPage', attributes: { objectApiName: 'Account', actionName: 'list' }, state: { filterName: 'Recent' }, }); } |
Navigate to New Record
Use this code to navigate to the new record model popup.
|
1 2 3 4 5 6 7 8 9 |
navigateToNewAccount() { this[NavigationMixin.Navigate]({ type: 'standard__objectPage', attributes: { objectApiName: 'Account', actionName: 'new' }, }); } |
Navigate to View Record
Use this code to navigate to the record view
|
1 2 3 4 5 6 7 8 9 10 |
navigateToViewAccount() { this[NavigationMixin.Navigate]({ type: 'standard__recordPage', attributes: { recordId: '001K000001VpnbDIAR', objectApiName: 'Account', actionName: 'view' }, }); } |
Navigate to the Edit Record
Use this code to navigate to the edit record model popup
|
1 2 3 4 5 6 7 8 9 10 |
navigateToAccountEdit() { this[NavigationMixin.Navigate]({ type: 'standard__recordPage', attributes: { recordId: '001K000001VpnbDIAR', objectApiName: 'Account', actionName: 'edit' }, }); } |
Navigate to Related List
Use this code to navigate to the related list
|
1 2 3 4 5 6 7 8 9 10 11 |
navigateToRelatedList() { this[NavigationMixin.Navigate]({ type: 'standard__recordRelationshipPage', attributes: { recordId: '001K000001VpnbDIAR', objectApiName: 'Account', relationshipApiName: 'Contacts', actionName: 'view' }, }); } |
Navigate to Tab
Use this code to navigate to the tab
|
1 2 3 4 5 6 7 8 9 |
navigateToTabPage() { // Navigate to a specific CustomTab. this[NavigationMixin.Navigate]({ type: 'standard__navItemPage', attributes: { apiName: 'Hello' } }); } |
Navigate to Files Home
Use this code navigates to files
|
1 2 3 4 5 6 7 8 9 |
navigateToFilesHome() { this[NavigationMixin.Navigate]({ type: 'standard__objectPage', attributes: { objectApiName: 'ContentDocument', actionName: 'home' }, }); } |
Navigate to chatter
Use this code to navigate to chatter
|
1 2 3 4 5 6 7 8 9 10 |
navigateToChatter() { // Use the built-in 'Navigate' method this[NavigationMixin.Navigate]({ // Pass in pageReference type: 'standard__namedPage', attributes: { pageName: 'chatter' }, }); } |
Here is the complete code. now create a lightning web component using the following sfdx command
|
1 |
sfdx force:lightning:component:create --type lwc -n navexamples -d force-app/main/default/lwc |
navexamples.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<template> <lightning-card title="Navigate To Record Example"> <lightning-button label=" New Account" onclick={navigateToNewAccount}></lightning-button> <lightning-button label="View Account" onclick={navigateToViewAccount}></lightning-button> <lightning-button label="Edit Account" onclick={navigateToAccountEdit}></lightning-button> </lightning-card> <lightning-card title="Navigate To Views"> <lightning-button label="Account Recent list View" onclick={navigateToList}></lightning-button> <lightning-button label="Account Related List" onclick={navigateToRelatedList}></lightning-button> </lightning-card> <lightning-card title="Navigate To Standard Tab"> <lightning-button label="Navigate to Home" onclick={navigateToHome}></lightning-button> <lightning-button label="Navigate to Chatter Home" onclick={navigateToChatter}></lightning-button> <lightning-button label="Navigate to Files " class="slds-m-around_medium" onclick={navigateToFilesHome}></lightning-button> </lightning-card> <lightning-card title="Navigate To Component"> <lightning-button label="Navigate to Hello " class="slds-m-around_medium" onclick={navigateToHelloTab}></lightning-button> </lightning-card> </template> |
navexamples.js code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
import { LightningElement, wire } from 'lwc'; import { NavigationMixin } from 'lightning/navigation'; export default class Navexamples extends NavigationMixin(LightningElement) { navigateToNewAccount() { this[NavigationMixin.Navigate]({ type: 'standard__objectPage', attributes: { objectApiName: 'Account', actionName: 'new' }, }); } navigateToViewAccount() { this[NavigationMixin.Navigate]({ type: 'standard__recordPage', attributes: { recordId: '001K000001VpnbDIAR', objectApiName: 'Account', actionName: 'view' }, }); } navigateToAccountEdit() { this[NavigationMixin.Navigate]({ type: 'standard__recordPage', attributes: { recordId: '001K000001VpnbDIAR', objectApiName: 'Account', actionName: 'edit' }, }); } navigateToList() { this[NavigationMixin.Navigate]({ type: 'standard__objectPage', attributes: { objectApiName: 'Account', actionName: 'list' }, state: { filterName: 'Recent' }, }); } navigateToRelatedList() { this[NavigationMixin.Navigate]({ type: 'standard__recordRelationshipPage', attributes: { recordId: '001K000001VpnbDIAR', objectApiName: 'Account', relationshipApiName: 'Contacts', actionName: 'view' }, }); } navigateToHome() { // Use the built-in 'Navigate' method this[NavigationMixin.Navigate]({ // Pass in pageReference type: 'standard__namedPage', attributes: { pageName: 'home' }, }); } navigateToChatter() { // Use the built-in 'Navigate' method this[NavigationMixin.Navigate]({ // Pass in pageReference type: 'standard__namedPage', attributes: { pageName: 'chatter' }, }); } navigateToFilesHome() { this[NavigationMixin.Navigate]({ type: 'standard__objectPage', attributes: { objectApiName: 'ContentDocument', actionName: 'home' }, }); } navigateToHelloTab() { this[NavigationMixin.Navigate]({ type: 'standard__navItemPage', attributes: { apiName: 'Hello' }, }); } } |
navexamples.js-meta.xml
|
1 2 3 4 5 6 7 8 9 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__RecordPage</target> </targets> </LightningComponentBundle> |
Push changes to scratch org and add it to the page layout for testing .
