Salesforce Navigation Service
The Salesforce Navigation service allows users to navigate different pages like record pages, list pages, etc. so many times we need to navigate the user with the help of a custom component and LWC provides the way to navigate the services using lighting services.
LWC navigation service uses the pagereference javascript object. This helps to understand the page attribute, page status, and the type.
Let’s understand currently what the type of pagereference salesforce supports. some are
- Object page
- Record edit
- Record view
- New Record
- Web page
- Lightning page
To use the lightning navigation LWC uses the lightning/navigation.
Steps to implement the lightning services in the LWC component
- Import the module
import { NavigationMixin } from ‘lightning/navigation’; - Extend the NavigationMixin to your base class.
export default class MyCustomElement extends NavigationMixin(LightningElement) {}
To understand every navigation method please look into the below code.
Note: Please use your org record id wherever needed. Existing code has a different org id which will not work in your org.
<template>
<div>Below button category explains all the navigation services.</div><br/>
<lightning-card title="Salesforce Driller Navigate To Record Example">
<lightning-button label="Salesforce Driller New Account" onclick={SalesforceDrillernavigateToNewAccount}></lightning-button>
<lightning-button label="Salesforce Driller View Account" onclick={SalesforceDrillernavigateToViewAccount}></lightning-button>
<lightning-button label="Salesforce Driller Edit Account" onclick={SalesforceDrillernavigateToAccountEdit}></lightning-button>
</lightning-card>
<lightning-card title="Salesforce Driller Navigate To Views">
<lightning-button label="Salesforce Driller Account Recent list View" onclick={SalesforceDrillernavigateToList}>
</lightning-button>
<lightning-button label="Salesforce Driller Account Related List" onclick={SalesforceDrillernavigateToRelatedList}>
</lightning-button>
</lightning-card>
<lightning-card title="Salesforce Driller Navigate To Standard Tab">
<lightning-button label="Salesforce Driller Navigate to Home" onclick={SalesforceDrillernavigateToHome}>
</lightning-button>
<lightning-button label="Salesforce Driller Navigate to Chatter Home" onclick={SalesforceDrillernavigateToChatter}>
</lightning-button>
<lightning-button label="Salesforce Driller Navigate to Files " class="slds-m-around_medium" onclick={SalesforceDrillernavigateToFilesHome}>
</lightning-button>
</lightning-card>
<lightning-card title="Salesforce Driller Navigate To Component">
<lightning-button label="Salesforce Driller Navigate to Hello " class="slds-m-around_medium" onclick={SalesforceDrillernavigateToHelloTab}>
</lightning-button>
</lightning-card>
</template>
Added the comment in every method for better clarification. on the method SalesforceDrillernavigateToHelloTab please add your created component name to navigate.
import {LightningElement,wire} from 'lwc';
import {NavigationMixin} from 'lightning/navigation';
export default class salesforcedriller extends NavigationMixin(LightningElement) {
//--------This will help to create a new Account
SalesforceDrillernavigateToNewAccount() {
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'Account',
actionName: 'new'
},
});
}
//---------This will help to view the account
SalesforceDrillernavigateToViewAccount() {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: '001K000001VpnbDIAR',
objectApiName: 'Account',
actionName: 'view'
},
});
}
//---------This will help to edit the account
SalesforceDrillernavigateToAccountEdit() {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: '001K000001VpnbDIAR',
objectApiName: 'Account',
actionName: 'edit'
},
});
}
//---------This will help to view the recent list account
SalesforceDrillernavigateToList() {
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'Account',
actionName: 'list'
},
state: {
filterName: 'Recent'
},
});
}
//---------This will help to view the related contact of your account
SalesforceDrillernavigateToRelatedList() {
this[NavigationMixin.Navigate]({
type: 'standard__recordRelationshipPage',
attributes: {
recordId: '001K000001VpnbDIAR',
objectApiName: 'Account',
relationshipApiName: 'Contacts',
actionName: 'view'
},
});
}
SalesforceDrillernavigateToHome() {
//---------This will help to view the home page
this[NavigationMixin.Navigate]({
// Pass in pageReference
type: 'standard__namedPage',
attributes: {
pageName: 'home'
},
});
}
SalesforceDrillernavigateToChatter() {
//---------This will help to view the chatter
this[NavigationMixin.Navigate]({
// Pass in pageReference
type: 'standard__namedPage',
attributes: {
pageName: 'chatter'
},
});
}
//---------This will help to navigate into the files
SalesforceDrillernavigateToFilesHome() {
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'ContentDocument',
actionName: 'home'
},
});
}
//---------This will help to view the the component
SalesforceDrillernavigateToHelloTab() {
this[NavigationMixin.Navigate]({
type: 'standard__navItemPage',
attributes: {
apiName: 'HelloWorld'
},
});
}
}
Output
