Navigation in LWC

Introduction

Navigating between pages in Salesforce is a common requirement. LWC provides the NavigationMixin module to handle navigation within Salesforce, allowing components to navigate to records, list views, web pages, and more.

Importing NavigationMixin

To use navigation in LWC, import NavigationMixin from lightning/navigation:

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

Navigating to a Record Page

To navigate to a specific record’s view, edit, or related lists page, use NavigationMixin.Navigate.

Example: Navigate to a Record Detail Page

JavaScript (navigateToRecord.js)

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

export default class NavigateToRecord extends NavigationMixin(LightningElement) {
    handleNavigate() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: '001XXXXXXXXXXXXXXX', // Replace with dynamic ID
                actionName: 'view'
            }
        });
    }
}

HTML (navigateToRecord.html)

<template>
    <lightning-button label="Go to Record" onclick={handleNavigate}></lightning-button>
</template>

Explanation:

recordId is the Salesforce record ID (must be dynamically set).
actionName can be view, edit, or related.

Navigating to a List View

To navigate to a specific object’s list view, use standard__objectPage.

Example: Navigate to Account List View

JavaScript (navigateToListView.js)

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

export default class NavigateToListView extends NavigationMixin(LightningElement) {
    handleNavigate() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'list'
            },
            state: {
                filterName: 'Recent' // Use a custom list view API name if needed
            }
        });
    }
}

HTML (navigateToListView.html)

<template>
    <lightning-button label="Go to Account List" onclick={handleNavigate}></lightning-button>
</template>

Explanation:

objectApiName defines the object (e.g., Account, Contact).
actionName must be list.
filterName allows navigation to a specific list view (e.g., Recent).

Navigating to an External URL

To navigate to an external web page, use standard__webPage.

Example: Navigate to Google

JavaScript (navigateToWebPage.js)

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

export default class NavigateToWebPage extends NavigationMixin(LightningElement) {
    handleNavigate() {
        this[NavigationMixin.Navigate]({
            type: 'standard__webPage',
            attributes: {
                url: 'https://www.google.com'
            }
        });
    }
}

HTML (navigateToWebPage.html)

<template>
    <lightning-button label="Go to Google" onclick={handleNavigate}></lightning-button>
</template>

Explanation:

type: 'standard__webPage' ensures navigation to external URLs.
The url attribute defines the target web page.

Navigating to a Custom App Page

To navigate to a Lightning App Page, use standard__navItemPage.

Example: Navigate to a Custom App Tab

JavaScript (navigateToAppPage.js)

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

export default class NavigateToAppPage extends NavigationMixin(LightningElement) {
    handleNavigate() {
        this[NavigationMixin.Navigate]({
            type: 'standard__navItemPage',
            attributes: {
                apiName: 'My_Custom_Tab' // Replace with the API name of your tab
            }
        });
    }
}

HTML (navigateToAppPage.html)

<template>
    <lightning-button label="Go to App Page" onclick={handleNavigate}></lightning-button>
</template>

Explanation:

apiName is the API name of the Lightning tab.
Use this for custom Lightning App Pages or utility tabs.

Conclusion

Use NavigationMixin.Navigate to navigate within Salesforce.
Navigate to records, list views, external URLs, and custom pages easily.
Always ensure proper security and permission handling.

In the next post, we will explore LWC Styling & SLDS in LWC.

Stay tuned! 🚀