Introduction
In the Lightning Web Component (LWC) framework, the Navigation Service plays a crucial role in seamlessly transitioning between different Salesforce pages. With its powerful functionality and intuitive design, the Navigation Service simplifies the development process and enhances the user experience. In this article, we will explore the various features and code examples of the Navigation Service in LWC, empowering you to leverage its capabilities in your own projects.
Please find below the code snippet that provides an insight on how Navigation Service is used to navigate to New Case record creation on click of ‘New Case’ button:
sampleNavigationService.html
<template>
<lightning-card title="Navigation Service">
<div class="slds-p-left_medium">
<lightning-button label="New Case" onclick={navigateToNewCasePage}></lightning-button>
</div>
</lightning-card>
</template>sampleNavigationService.js
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class SampleNavigationService extends NavigationMixin(LightningElement) {
navigateToNewCasePage() {
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'Case',
actionName: 'new'
},
});
}
}
Navigation to record page
navigateToViewCasePage() {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: this.recId,
objectApiName: 'Case',
actionName: 'view'
},
});
}
Navigation to custom application
navigateToMyCustomApplication() {
this[NavigationMixin.Navigate]({
type: 'standard__app',
attributes: {
appTarget: 'c__MyCustomApplication',
}
});
}
Navigation to external URL
navigateToApexHoursPage() {
this[NavigationMixin.Navigate]({
type: 'standard__webPage',
attributes: {
url: 'https://www.apexhours.com/'
}
});
}
Navigation to custom tab
navigateToCustomTab() {
this[NavigationMixin.Navigate]({
type: 'standard__navItemPage',
attributes: {
apiName: 'CustomTabName'
},
});
}
Navigation to List View
navigateToCaseListView() {
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'Case',
actionName: 'list'
},
state: {
filterName: 'Recent'
},
});
}
Navigation to Related List
navigateToContactRelatedList() {
this[NavigationMixin.Navigate]({
type: 'standard__recordRelationshipPage',
attributes: {
recordId: this.recordId,
objectApiName: 'Account',
relationshipApiName: 'Contacts',
actionName: 'view'
},
});
}
Navigation to Files
navToFilesPage() {
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'ContentDocument',
actionName: 'home'
},
});
}
Navigation to Tab
navigateToCustomTab() {
this[NavigationMixin.Navigate]({
type: 'standard__navItemPage',
attributes: {
apiName: 'CustomTabName'
},
});
}
Navigation to Visualforce Page
navigateToVisualForcePage() {
this[NavigationMixin.GenerateUrl]({
type: 'standard__webPage',
attributes: {
url: '/apex/CaseVFExample?id=' + this.recordId
}
}).then(generatedUrl => {
window.open(generatedUrl);
});
}
Navigation To Custom Aura Component
openCustomLightningComponent(){
this[NavigationMixin.Navigate]({
type: 'standard__component',
attributes: {
componentName: 'c__AuraComponentName'
}
});
}
