LWC Navigation Service | Comprehensive Guide

/ apex, Salesforce / By

The lightning/navigation service is instrumental for navigation within Lightning Experience, Lightning Communities, and Salesforce Applications. Lightning Navigation Services through Web Components facilitate navigation to various destinations such as Record Pages, Web Pages, Objects, List Views, Custom Tabs, Related Lists, Files, and more.

Instead of relying on URLs, the Navigation Service utilizes a Page Reference, a JavaScript object offering insights into the Page Type, attributes, and state.

This Page Reference shields a component from potential alterations in URL formats. While the Page type (String) and attributes (Object) are mandatory parameters, the state (Object) remains optional. To utilize the navigation service in Lightning Web Components, start by importing it into the JavaScript file.

By adding two APIs to the component’s class:

  1. NavigateMixin.Navigate: This API facilitates navigation to a different page within an application.
  2. NavigateMixin.GenerateURL: This API retrieves a promise resolving to the resultant URL. The URL can be employed within the href attribute of an anchor. Additionally, it supports the usage of the Browser API – Window.open for launching a new window based on the URL (url).

Example of Navigation Service in Lightning Web Components 

DemoNavigationService.html 

<template> 
    <lightning-card title="Navigation Service"> 
        <div class="slds-p-left_medium"> 
            <lightning-button label="New Case" onclick={navigateToNewCasePage}></lightning-button> 
        </div> 
    </lightning-card> 
</template>

DemoNavigationService.js 

import { LightningElement } from 'lwc'; 
import { NavigationMixin } from 'lightning/navigation'; 
export default class SampleNavigationService extends NavigationMixin(LightningElement) { 
     navigateToNewCasePage() { 
       this[NavigationMixin.Navigate]({ 
            type: 'standard__objectPage', 
            attributes: { 
                objectApiName: 'Case', 
                actionName: 'new' 
            }, 
        }); 
    } 
}

How to Navigate to Case Home Page?

basicNavigation.html 

<template> 
    <lightning-card title="Case Home Page Navigation"> 
        <div class="slds-p-left_medium"> 
            <a href={refUrl} onclick={handleNavigationClick}>Case Home</a> 
        </div> 
    </lightning-card> 
</template>

basicNavigation.js 

import { LightningElement, wire } from 'lwc'; 
import { NavigationMixin } from 'lightning/navigation'; 
 export default class BasicNavigation extends NavigationMixin(LightningElement) { 
   refUrl; 
     connectedCallback() { 
        this.caseHomePageRef = { 
            type: 'standard__objectPage', 
            attributes: { 
                objectApiName: 'Case', 
                actionName: 'home'
            } 
        }; 
        this[NavigationMixin.GenerateUrl](this.caseHomePageRef) 
            .then(url => this.refUrl = url); 
    } 
    handleNavigationClick(evt) { 
        evt.preventDefault(); 
        evt.stopPropagation(); 
        this[NavigationMixin.Navigate](this.caseHomePageRef); 
    } 
}

How to Navigate to the Record Page?

navigateToViewCasePage() { 
        this[NavigationMixin.Navigate]({ 
            type: 'standard__recordPage', 
            attributes: { 
                recordId: this.recId, 
                objectApiName: 'Case', 
                actionName: 'view' 
            }, 
        }); 
    }

Related Posts