Salesforce | Navigation Service in LWC | All You Must Know

The lightning/navigation service is used to navigate in Lightning Expertise, Lightning Communities, and Salesforce Purposes. Lightning Navigation Providers Net Elements are used to navigate to Report Pages, Net Pages, Objects, Record Views, Customized Tabs, Associated Lists, Recordsdata, and so forth. 

As an alternative of a URL, Navigation Service employs a Web page Reference. It’s a JavaScript object that gives details about the Web page Sort, attributes, and state. 

The Web page Reference protects a part from future adjustments to URL codecs. Web page kind (String) and attributes (Object) are required parameters, whereas the state (Object) is non-compulsory. To make use of the navigation service in Lightning Net Elements, first, import it into the JavaScript file. 

Including two API to the part’s class: 

1. NavigateMixin.Navigate: It’s used to navigate one other completely different web page in an utility. 
2. NavigateMixin.GenerateURL: With a view to receive a promise that resolves to the ensuing URL. The URL can be utilized within the anchor’s href attribute. It will probably use the Browser API – Window. open to open a brand new window primarily based on the URL (url) . 

Instance of Navigation Service in Lightning Net Elements 

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>

Do not forget to take a look at: What is Salesforce Lightning Web Component and How to Use it?

DemoNavigationService.js 

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

How you can Navigate to Case Dwelling Web page?

basicNavigation.html 

<template> 
    <lightning-card title="Case Dwelling Web page Navigation"> 
        <div class="slds-p-left_medium"> 
            <a href={refUrl} onclick={handleNavigationClick}>Case Dwelling</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 = { 
            kind: 'standard__objectPage', 
            attributes: { 
                objectApiName: 'Case', 
                actionName: 'residence'
            } 
        }; 
        this[NavigationMixin.GenerateUrl](this.caseHomePageRef) 
            .then(url => this.refUrl = url); 
    } 
    handleNavigationClick(evt) { 
        evt.preventDefault(); 
        evt.stopPropagation(); 
        this[NavigationMixin.Navigate](this.caseHomePageRef); 
    } 
}

Take a look at one other superb weblog right here: How to Call the Apex Method Imperatively in Lightning Web Component?

How you can Navigate to the Report Web page?

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