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

  1. Import the module
    import { NavigationMixin } from ‘lightning/navigation’;
  2. 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>


lwc-component

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'
           },
       });
   }
}



lwc-component-js

Output

lwc-component-output

Subscribe Now