Using Lightning Navigation Service In LWC
lightning-navigation service is going to assist you to navigate to different pages from your lightning component.
Let’s see them in action by creating a component(LWC) named as navigationServiceExample and adding the following code to it.
<template>
<lightning-card title="Navigation Service Example">
<div class="slds-var-m-around_medium">
<lightning-button label="navigate to record page" onclick={navigateToRecordPage}></lightning-button>
</div>
<div class="slds-var-m-around_medium">
<lightning-button label="navigate to record page in new window" onclick={navigateToRecordPageInNewWindow}></lightning-button>
</div>
<div class="slds-var-m-around_medium">
<lightning-button label="navigate to web page" onclick={navigateToWebPage}></lightning-button>
</div>
</lightning-card>
</template>import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class NavigationServiceExample extends NavigationMixin(LightningElement) {
//@Desc: Navigate to the Account's record detail page
navigateToRecordPage() {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: '0012x00000eaVlUAAU', // @note: Ideally this should be set dynamically here instead of a direct reference to a record Id.
actionName: 'view',
},
});
}
//@Desc: Navigate to the Account's record detail page in new window
navigateToRecordPageInNewWindow() {
this[NavigationMixin.GenerateUrl]({
type: 'standard__recordPage',
attributes: {
recordId: '0012x00000eaVlUAAU', // @note: Ideally this should be set dynamically here instead of a direct reference to a record Id.
actionName: 'view',
},
}).then((url) => {
window.open(url);
});
}
//@Desc: Navigate to a external web page
navigateToWebPage() {
this[NavigationMixin.Navigate]({
type: 'standard__webPage',
attributes: {
url: 'https://google.com'
}
})
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>50.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>Let’s understand the navigation service which is invoked in the navigationServiceExample.js file:
Firstly component’s base class extends NavigationMixin(LightningElement):
import { NavigationMixin } from 'lightning/navigation';
export default class NavigationServiceExample extends NavigationMixin(LightningElement) {}Secondly, we invoke the [NavigationMixin.Navigate](pageReference, [replace]) to navigate to another page from the lightning component.
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: '0012x00000eaVlUAAU', // @note: Ideally this should be set dynamically here instead of a direct reference to a record Id.
actionName: 'view',
},
});Thirdly, In order to let you redirect to another page in a separate window we have utilized NavigationMixin.GenerateUrl(pageReference) to get a promise that resolves to the resulting URL.
this[NavigationMixin.GenerateUrl]({
type: 'standard__recordPage',
attributes: {
recordId: '0012x00000eaVlUAAU',
actionName: 'view',
},
}).then((url) => {
window.open(url);
});Please add this lightning component to the home page and check the behaviour of our navigation component.
You will get an output like in below screenshot:
Here is the reference for all the supported page reference types from the official docs.
Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂
