Navigation Service in LWC (Lightning Web Component)

by

In this post, we will implement Navigation Service in LWC to navigate to different page types. We need to use the lightning/navigation module to navigate to different pages like Record Pages, Web Pages, Lightning Components, List Views, and Objects.

The Navigation Service in Lightning Web Components uses a PageReference JavaScript object which describes the Page Type, Attributes, and the State of the page. We can provide the following Page Types in the PageReference:

  • Object (Home, List, New Record)
  • Record Page (View or Edit)
  • Record Relationship Page
  • Lightning Component
  • Navigation Item Page (Tabs)
  • App
  • Knowledge Article
  • Named Page (home, chatter, filePreview)
  • Web Page (External URL)

Implementation

To implement a Navigation Service in LWC, we will create a few buttons that will navigate to most of the Page Types mentioned above. First, we need to import NavigationMixin from the lightning/navigation module. The NavigationMixin adds two APIs to our component’s class:

  • Navigate : Navigate to another page.
  • GenerateUrl: Gets a Promise that resolves to the resulting URL. We can use this Url to navigate.

In this implementation, we are using Navigate API.

Create component navigationService and create few buttons using the lightning-button-group. Add onclick event for all the buttons to call the JS Controller methods.

navigationService.html

<template>
    <lightning-card title="Navigation Services">
        <div class="slds-p-left_medium">
            <br/>
            <lightning-button-group>
                <lightning-button label="Account Home" onclick={openAccountHome}></lightning-button>
                <lightning-button label="Account List" onclick={openAccountList}></lightning-button>
                <lightning-button label="Create New Account" onclick={createNewAccount}></lightning-button>
                <lightning-button label="Account Record" onclick={openAccountRecord}></lightning-button>
                <lightning-button label="Open Lightning Component" onclick={openLightningComponent}></lightning-button>
                <lightning-button label="Open Salesforce Blog" onclick={openSalesforceBlog}></lightning-button>
            </lightning-button-group>
        </div>
        <br/>
    </lightning-card>
</template>

In JS Controller, import NavigationMixin from lightning/navigation module. Extend the JS Controller class NavigationService with NavigationMixin and add LightningElement as a parameter. Add methods for all the respective buttons.

In each method, we need to call Navigate method of NavigationMixin and pass PageReference JavaScript object as a parameter. We can provide 3 properties for PageReference:

  • type : Type of the page like standard__objectPage, standard__component, standard__recordPage etc.
  • attributes: Like objectApiName, actionName which can be view, home, list, new based on the above type provided, recordId, componentName, etc. These attributes depend on the page type provided.
  • state: To pass extra parameters to the new page. Optional.

navigationService.js

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class NavigationService extends NavigationMixin(LightningElement) {
    openAccountHome(){
        this[NavigationMixin.Navigate]({
            type : 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'home'
            }
        });
    }

    openAccountList(){
        this[NavigationMixin.Navigate]({
            type : 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'list'
            }
        });
    }

    createNewAccount(){
        this[NavigationMixin.Navigate]({
            type : 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'new'
            }
        });
    }

    openAccountRecord(){
        this[NavigationMixin.Navigate]({
            type : 'standard__recordPage',
            attributes: {
                recordId: "0019D00000A1gMmQAJ",
                actionName: 'view'
            }
        });
    }

    openLightningComponent(){
        this[NavigationMixin.Navigate]({
            type: 'standard__component',
            attributes: {
                componentName: 'c__AuraCmp'
            }
        });
    }

    openSalesforceBlog(){
        this[NavigationMixin.Navigate]({
            type : 'standard__webPage',
            attributes: {
                url : 'https://niksdeveloper.com/category/salesforce/'
            }
        });
    }
}

Navigation Service in (LWC) Lightning Web Components

This is how our implementation looks like:

Navigation Service in LWC
Navigation Service in Lightning Web Components

This is how we can use Navigation Service in LWC. Check Salesforce official document here to learn more about Navigation Service in Lightning Web Components.

If you want to check more implementation using Lightning Web Components, you can check here.

Also Read:

If you don’t want to miss new posts, please Subscribe. Thanks !

Leave a Comment