Learn about Navigation Service in Lightning Web Components

Navigation Service in Lightning Web Components

by

Introduction

In this article we will learn about Navigation Service in Lightning Web components which is used to achieve navigation from Lightning Web Components to Objects, record pages, web pages, Salesforce apps etc. Navigation Service allows us to create methods in LWC controllers for various navigation scenarios.

Common Navigation Scenarios

The NavigationMixin supports navigation to:

  • New record for standard object.
  • Record page for standard object.
  • Standard object home.
  • External URL.
  • Salesforce apps.
  • Custom tabs.
  • Specific list for any object.
  • Related list of any object.
  • Files page.
  • Custom visualforce page.
  • Custom Aura component.

Using Navigation Service in LWC

To leverage the Navigation Service, your LWC must extend the NavigationMixin. Let’s go through the steps to create a component that uses this feature.

  1. Importing NavigationMixin: The NavigationMixin module must be imported from the lightning/navigation library. You’ll then apply it to your component using NavigationMixin(LightningElement).
  2. Defining Navigation Targets: The Navigation Service supports various PageReference types, such as:
    • standard__recordPage: Navigates to a record page.
    • standard__objectPage: Redirects to an object’s home page or list view.
    • standard__webPage: Opens an external URL.
  3. Triggering Navigation: Navigation is performed using the this[NavigationMixin.Navigate] method, where you pass the PageReference object.

Example Code

Below is the LWC Component HTML code. Here we have created various buttons to navigate to various parts in Salesforce. 

<template>
    <lightning-card title="Navigation Service">
        
        <div class="slds-p-left_medium">
            <lightning-button label="New Account" onclick={navigateToNewAccountPage}></lightning-button>
            <lightning-button class="slds-p-left_medium" label="Account Record" onclick={navigateToAccountRecordPage}></lightning-button>
            <lightning-button class="slds-p-left_medium" label="Account Home" onclick={navigateToAccountHomePage}></lightning-button>
            <lightning-button class="slds-p-left_medium" label="Youtube" onclick={navigateToExternalURL}></lightning-button>
            <lightning-button class="slds-p-left_medium" label="Sales App" onclick={navigateToSalesApp}></lightning-button>
            <lightning-button class="slds-p-left_medium" label="Custom Tab" onclick={navigateToCustomTab}></lightning-button>
            <lightning-button class="slds-p-left_medium" label="My Accounts List View" onclick={navigateToAccountListView}></lightning-button> 
        </div>
       
        <div class="slds-p-left_medium slds-p-top_medium">
            <lightning-button  label="Account Related Contact" onclick={navigateToContactRelatedList}></lightning-button>
            <lightning-button class="slds-p-left_medium" label="Files" onclick={navigateToFilesPage}></lightning-button>
            <lightning-button class="slds-p-left_medium" label="Visualforce Page" onclick={navigateToVFPage}></lightning-button>
            <lightning-button class="slds-p-left_medium" label="Aura Component" onclick={navigateToCustomAuraComponent}></lightning-button>
        </div>

    </lightning-card>
</template>

Here is the LWC Component JavaScript Code where we have written methods to perform navigation on click of buttons.

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class NavigationService extends NavigationMixin(LightningElement) {

//Navigate to New Account creation
navigateToNewAccountPage() {
    this[NavigationMixin.Navigate]({
        type: 'standard__objectPage',
        attributes: {
            objectApiName: 'Account',
            actionName: 'new'
        },
    });
}

//Navigate to specific record of Account object
navigateToAccountRecordPage(){
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: '0012w00001v7sYLAAY',
            objectApiName: 'Account',
            actionName: 'view'
        },
    });
}

//Navigate to Account Home Page
navigateToAccountHomePage(){
    this[NavigationMixin.Navigate]({
        type: 'standard__objectPage',
        attributes: {
            objectApiName: 'Account',
            actionName: 'home',
        },
    });
}

//Navigate to external URL
navigateToExternalURL(){
    this[NavigationMixin.Navigate]({
        type: 'standard__webPage',
        attributes: {
            url: 'https://www.youtube.com/channel/UC8UMRAfCAamIarUMk0XSBhw'
        }
    });
}

//Navigate to Sales App
navigateToSalesApp(){
    this[NavigationMixin.Navigate]({
        type: 'standard__app',
        attributes: {
            appTarget: 'standard__LightningSales',
        }
    });
}

//Navigate to custom tabs
navigateToCustomTab(){
    this[NavigationMixin.Navigate]({
        type:'standard__navItemPage',
        attributes:{
            apiName:'Record_Filter'
        }
    });
}

//Navigate to specific list view of account object.
navigateToAccountListView(){
    this[NavigationMixin.Navigate]({
        type:'standard__objectPage',
        attributes:{
            objectApiName:'Account',
            actionName:'list'
        },
        state:{
            filterName:'00B2w00000KzcfyEAB'
        },
    });
}

//Navigate to related contacts of Account record.
navigateToContactRelatedList(){
    this[NavigationMixin.Navigate]({
        type:'standard__recordRelationshipPage',
        attributes:{
            recordId:'0012w00001v7sYLAAY',
            objectApiName:'Account',
            relationshipApiName:'Contacts',
            actionName:'view'
        }
    });
}

//Navigate to Files page
navigateToFilesPage(){
    this[NavigationMixin.Navigate]({
        type:'standard__objectPage',
        attributes:{
            objectApiName:'ContentDocument',
            actionName:'home'
        }
    })
}

//Navigate to Visualforce page.
navigateToVFPage(){
    this[NavigationMixin.GenerateUrl]({
        type:'standard__webPage',
        attributes:{
            url:'/apex/HelloWorld'
        }
    }).then(generatedUrl=>{
        window.open(generatedUrl)
    })
}

//Navigate to Aura Component.
navigateToCustomAuraComponent(){
    this[NavigationMixin.Navigate]({
        type:'standard__component',
        attributes:{
            componentName:'c__Sample'
        }
    })
}
}

Conclusion

The Navigation Service in LWC is a vital tool for creating intuitive and user-friendly applications within Salesforce. By abstracting the complexities of URL-based navigation, it allows developers to focus on building functional and engaging user interfaces. Whether it’s navigating to a record detail page, object list view, or external web page, the Navigation Service ensures a consistent and seamless experience for users.

Related Posts:

Leave a Comment