Navigation Service in Lightning Web Components(lwc)

This post explains how to use navigation service in Lightning web components(lwc)

To navigate to many different page types, like records, list views, and objects in lightning web components we need to use lightning/navigation

Note:

• The lightning/navigation service is supported only in Lightning Experience, Lightning communities, and the Salesforce app. It isn’t supported in other containers, such as Lightning Components for Visualforce, or Lightning Out.

the navigation service uses a PageReference. PageReference is a JavaScript object that describes the page type, its attributes, and the state of the page.

Page type(String) and attributes(Object) are required parameters, state(Object) is optional parameter.

PageReference object must be defined with a specific type. The type generates a unique URL format and defines attributes that apply to all pages of that type.
Currently, Salesforce Supports below PageReference types

• Lightning Component
• Knowledge Article
• Named Page
• Navigation Item Page
• Object Page
• Record Page
• Record Relationship Page
• Web Page

Using Navigation Service in LWC

1.  In the component’s JavaScript class, import the lightning/navigation module.

import { NavigationMixin } from 'lightning/navigation';

2.  Apply the NavigationMixin function to your component’s base class.

export default class MyCustomElement extends NavigationMixin(LightningElement) {}

3. Create a plain JavaScript PageReference object that defines the page
4. To dispatch the navigation request, call the navigation service’s [NavigationMixin.Navigate](pageReference, [replace])

Note:
If you are navigating to Lightning Component from LWC, you need to implement the lightning:isUrlAddressable interface in your Lightning Component.

NavigationDemoComponent.cmp

<aura:component implements="lightning:isUrlAddressable" access="global" >
 <lightning:card title="This Component Called From LWC Navigation Service">
     <lightning:badge label="Welcome to Salesforce Code Crack"/>
    </lightning:card>
</aura:component>

Example:

navigationServiceLWCDemo.html

<template>
    <lightning-card title="Navigation Service in Lightning Web Components" icon-name="custom:custom14">
        <br/>
        <lightning-card title="Navigate to Record Pages">
            <lightning-button-group>
                <lightning-button label="New Record Page" onclick={navigateToNewRecordPage}></lightning-button>
                <lightning-button label="Edit Record Page" onclick={navigateToEditRecordPage}></lightning-button>
                <lightning-button label="View Record Page" onclick={navigateToViewRecordPage}></lightning-button>
            </lightning-button-group>
        </lightning-card><br/>

        <lightning-card title="Navigate to List Views">
                <lightning-button-group>
                    <lightning-button label="Account Recent View" onclick={navigateAccRecentView} ></lightning-button>
                    <lightning-button label="Related List View" onclick={navigateRelatedListView}></lightning-button>
                </lightning-button-group>
        </lightning-card><br/>

        <lightning-card title="Navigate to Object Page">
                <lightning-button-group>
                    <lightning-button label="Account Page" onclick={navigateAccObject}></lightning-button>
                    <lightning-button label="Contact" onclick={navigateConObject}></lightning-button>
                </lightning-button-group>
        </lightning-card><br/>

        <lightning-card title="Navigate to Lightning Component">
            <lightning-button label="Lightning Component" onclick={navigateToComponent}></lightning-button>
        </lightning-card><br/>

        <lightning-card title="Navigate to Web Pages">
                <lightning-button label="Web Page" onclick={navigateToWebPage}></lightning-button>
        </lightning-card><br/>

        <lightning-card title="Navigate to Standard Home Tabs">
                <lightning-button-group>
                    <lightning-button label="Home Page" onclick={navigateToHomePage}></lightning-button>
                    <lightning-button label="Chatter Home Page" onclick={navigateToChatterHome}></lightning-button>
                </lightning-button-group>
        </lightning-card>
    </lightning-card>
</template>

navigationServiceLWCDemo.js

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

export default class NavigationServiceLWCDemo extends NavigationMixin(LightningElement) {
    @api recordId;

    // Navigate to New Record Page
    navigateToNewRecordPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                "recordId": this.recordId,
                "objectApiName": "Account",
                "actionName": "new"
            },
        });
    }

    // Navigate to Edit Record Page
    navigateToEditRecordPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                "recordId": this.recordId,
                "objectApiName": "Account",
                "actionName": "edit"
            },
        });
    }

    // Navigate to view Record Page
    navigateToViewRecordPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                "recordId": this.recordId,
                "objectApiName": "Account",
                "actionName": "view"
            },
        });
    }

    // Navigation to Account Recent List view
    navigateAccRecentView() {
        this[NavigationMixin.Navigate]({
            "type": "standard__objectPage",
            "attributes": {
                "objectApiName": "Account",
                "actionName": "list"
            },
            "state": {
                "filterName": "Recent"
            }
        });
    }

    // Navigation to Related list 
    navigateRelatedListView() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordRelationshipPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: 'Account',
                relationshipApiName: 'Contacts',
                actionName: 'view'
            },
        });
    }

    // Navigation to Account object home page
    navigateAccObject() {
        this[NavigationMixin.Navigate]({
            "type": "standard__objectPage",
            "attributes": {
                "objectApiName": "Account",
                "actionName": "home"
            }
        });
    }

    // Navigation to contant object home page
    navigateConObject() {
        this[NavigationMixin.Navigate]({
            "type": "standard__objectPage",
            "attributes": {
                "objectApiName": "Contact",
                "actionName": "home"
            }
        });
    }

    // Navigation to lightning component
    navigateToComponent() {
        this[NavigationMixin.Navigate]({
            "type": "standard__component",
            "attributes": {
                "componentName": "c__NavigationDemoComponent"    
            }
        });
    }

    //  // Navigation to normal web page page
    navigateToWebPage() {
        this[NavigationMixin.Navigate]({
            "type": "standard__webPage",
            "attributes": {
                "url": "https://www.salesforcecodecrack.com/"
            }
        });
    }

     // Navigation to standard home page
    navigateToHomePage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__namedPage',
            attributes: {
                pageName: 'home'
            },
        });
    }

    // Navigation to chatter home page
    navigateToChatterHome() {
        this[NavigationMixin.Navigate]({
            type: 'standard__namedPage',
            attributes: {
                pageName: 'chatter'
            },
        });
    }
}/span>

navigationServiceLWCDemo.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="navigationServiceLWCDemo">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Result:

Resources:
Navigation Service document
PageReference types