Navigation Service in Lightning Web Component (LWC) Salesforce

by Rijwan Mohmmed
0 comment
navigation-service-in-lightning-web-component-(lwc)-salesforce-techdicer

Hello, Friends today we will learn about Navigation Service in Lightning Web Component (LWC) Salesforce. First of all, we need to understand why we use the navigation service. With this service, we can navigate to any record page, tab, component, Pages and List, etc.

Lightning Experience, Lightning Communities, and Salesforce apps are the only ones that support lightning/navigation. Other containers, such as Lightning Components for Visualforce or Lightning Out, do not support it. These containers are accessible even when you’re in Lightning Experience or Salesforce. Pages, Records, and Lists can be navigated using the navigation services in LWC.

Also check: Call Apex Class From Lightning Flow

So first we will import the navigation service in LWC JS.

import { NavigationMixin } from 'lightning/navigation';

then extends in the class

export default class MyNavigation extends NavigationMixin(LightningElement) {}

Now we can use navigation service in LWC js. Let’s start with examples.

Navigate to the Edit Record From LWC :

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

Navigate to New Record From LWC :

// Navigate to New ContactPage
    navigateToNewContactPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Contact',
                actionName: 'new'
            },
        });
    }

Navigate to View Record From LWC :

// Navigate to View ContactPage
    navigateToViewContactPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: 'Contact',
                actionName: 'view'
            },
        });
    }

Navigate to the Edit Record From LWC :

// Navigate to Edit Contact Page
    navigateToEditContactPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: 'Contact',
                actionName: 'edit'
            },
        })

Navigate to Custom Tab From LWC :

// Navigation to Custom Tab
//in apiName you can put tab name of any CustomTab. Visualforce tabs, web tabs, Lightning Pages, and Lightning Component tabs

    navigateToTab() {
        this[NavigationMixin.Navigate]({
            type: 'standard__navItemPage',
            attributes: {
                apiName: 'CustomTabName'
            },
        });
    }

Navigate to List View LWC :

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

Navigate to Related List LWC :

// Navigation to Opportunity related list of account
    navigateToContactRelatedList() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordRelationshipPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: 'Account',
                relationshipApiName: 'Opportunities',
                actionName: 'view'
            },
        });
    }

Navigate to Home Page LWC :

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

Navigate to Object Home LWC :

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

Navigate to Chatter Home LWC :

//Navigate to chatter
    navToChatter() {
        this[NavigationMixin.Navigate]({
            type: 'standard__namedPage',
            attributes: {
                pageName: 'chatter'
            },
        });
    }

Navigate to Files Home LWC :

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

Navigate to Lightning Component LWC :

// Navigation to lightning component
    navToLightningComponent() {
        this[NavigationMixin.Navigate]({
            "type": "standard__component",
            "attributes": {
                //Here compname is name of lightning aura component
                //This aura component must implement lightning:isUrlAddressable
                "componentName": "c__compname"
            }
        });
    }

Navigate to Web Page LWC :

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

Navigate to Custom Tab LWC :

// Navigation to Custom Tab
    navigateToTab() {
        this[NavigationMixin.Navigate]({
            type: 'standard__navItemPage',
            attributes: {
                //Name of any CustomTab. Visualforce tabs, web tabs, Lightning Pages, and Lightning Component tabs
                apiName: 'CustomTabName'
            },
        });
    }

Navigate to Visualforce page LWC :

//Navigate to visualforce page
    navigateToVFPage() {
        this[NavigationMixin.GenerateUrl]({
            type: 'standard__webPage',
            attributes: {
                url: '/apex/AccountVFExample?id=' + this.recordId
            }
        }).then(generatedUrl => {
            window.open(generatedUrl);
        });
    }

Reference :

  1. Navigation in LWC

You may also like

Leave a Comment