Hello, Friends today we will learn about Navigation Service in Lightning Web Component (LWC) Salesforce. First of all, we need to understand why we use the navigation service. With this service, we can navigate to any record page, tab, component, Pages and List, etc.
Lightning Experience, Lightning Communities, and Salesforce apps are the only ones that support lightning/navigation. Other containers, such as Lightning Components for Visualforce or Lightning Out, do not support it. These containers are accessible even when you’re in Lightning Experience or Salesforce. Pages, Records, and Lists can be navigated using the navigation services in LWC.
Also check: Call Apex Class From Lightning Flow
So first we will import the navigation service in LWC JS.
import { NavigationMixin } from 'lightning/navigation';
then extends in the class
export default class MyNavigation extends NavigationMixin(LightningElement) {}
Now we can use navigation service in LWC js. Let’s start with examples.
Navigate to the Edit Record From LWC :
// Navigate to Edit Contact Page
navigateToEditContactPage() {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: this.recordId,
objectApiName: 'Contact',
actionName: 'edit'
},
});
}
Navigate to New Record From LWC :
// Navigate to New ContactPage
navigateToNewContactPage() {
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'Contact',
actionName: 'new'
},
});
}
Navigate to View Record From LWC :
// Navigate to View ContactPage
navigateToViewContactPage() {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: this.recordId,
objectApiName: 'Contact',
actionName: 'view'
},
});
}
Navigate to the Edit Record From LWC :
// Navigate to Edit Contact Page
navigateToEditContactPage() {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: this.recordId,
objectApiName: 'Contact',
actionName: 'edit'
},
})
Navigate to Custom Tab From LWC :
// Navigation to Custom Tab
//in apiName you can put tab name of any CustomTab. Visualforce tabs, web tabs, Lightning Pages, and Lightning Component tabs
navigateToTab() {
this[NavigationMixin.Navigate]({
type: 'standard__navItemPage',
attributes: {
apiName: 'CustomTabName'
},
});
}
Navigate to List View LWC :
// Navigation to Account List view
navigateToAccountListView() {
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'Account',
actionName: 'list'
},
state: {
filterName: 'Recent'
},
});
}
Navigate to Related List LWC :
// Navigation to Opportunity related list of account
navigateToContactRelatedList() {
this[NavigationMixin.Navigate]({
type: 'standard__recordRelationshipPage',
attributes: {
recordId: this.recordId,
objectApiName: 'Account',
relationshipApiName: 'Opportunities',
actionName: 'view'
},
});
}
Navigate to Home Page LWC :
//Navigate to home page
navToHomePage() {
this[NavigationMixin.Navigate]({
type: 'standard__namedPage',
attributes: {
pageName: 'home'
},
});
}
Navigate to Object Home LWC :
// Navigation to contact object home page
navToContactHome() {
this[NavigationMixin.Navigate]({
"type": "standard__objectPage",
"attributes": {
"objectApiName": "Contact",
"actionName": "home"
}
});
}
Navigate to Chatter Home LWC :
//Navigate to chatter
navToChatter() {
this[NavigationMixin.Navigate]({
type: 'standard__namedPage',
attributes: {
pageName: 'chatter'
},
});
}
Navigate to Files Home LWC :
//Navigate to Files home
navToFilesHome() {
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'ContentDocument',
actionName: 'home'
},
});
}
Navigate to Lightning Component LWC :
// Navigation to lightning component
navToLightningComponent() {
this[NavigationMixin.Navigate]({
"type": "standard__component",
"attributes": {
//Here compname is name of lightning aura component
//This aura component must implement lightning:isUrlAddressable
"componentName": "c__compname"
}
});
}
Navigate to Web Page LWC :
// Navigation to web page
navigateToWebPage() {
this[NavigationMixin.Navigate]({
"type": "standard__webPage",
"attributes": {
"url": "https://techdicer.com/"
}
});
}
Navigate to Custom Tab LWC :
// Navigation to Custom Tab
navigateToTab() {
this[NavigationMixin.Navigate]({
type: 'standard__navItemPage',
attributes: {
//Name of any CustomTab. Visualforce tabs, web tabs, Lightning Pages, and Lightning Component tabs
apiName: 'CustomTabName'
},
});
}
Navigate to Visualforce page LWC :
//Navigate to visualforce page
navigateToVFPage() {
this[NavigationMixin.GenerateUrl]({
type: 'standard__webPage',
attributes: {
url: '/apex/AccountVFExample?id=' + this.recordId
}
}).then(generatedUrl => {
window.open(generatedUrl);
});
}
Total views : 1113205