Hello Trailblazers!

In Salesforce Lightning Web Components (LWC), the Navigation Service plays a crucial role in creating a seamless user experience by enabling easy, programmatic navigation between different pages, records, or external links.

In the previous Part 1 of this blog we saw the basics of the Navigation Services and how to navigate a user to the record page. If you would like to learn, please follow this link.

In this blog post, we’ll try to cover all the possible scenarios/examples for Navigation Services in Lightning Web Components.

So let’s get started…

Examples of Common Navigation Scenarios in Lightning Web Components

1. Navigate to the New Opportunity record creation page:

Please find below the code snippet that demonstrates how the Navigation Service can be used to navigate to the New Opportunity record creation page when the ‘Create New Opportunity’ button is clicked.

navigationTest.html

<template>
    <lightning-card title="Navigation Service Demo">
        <div class="slds-p-left_medium">
            <lightning-button label="Create New Opportunity" onclick={navigateToNewOppPage}></lightning-button>
        </div>
    </lightning-card>
</template>

navigationTest.js

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

navigationTest.xml

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

2. Navigate to the Opportunity Home Page

navigationTest.html

<template>
    <lightning-card title="Navigation Service Demo">
        <div class="slds-p-left_medium">
            <lightning-button label="Go to Opportunity Home Page" onclick={navigateToOpportunityHome}></lightning-button>
        </div>
    </lightning-card>
</template>

navigationTest.js

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

export default class NavigationTest extends NavigationMixin(LightningElement) {
 navigateToOpportunityHome() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Opportunity',
                actionName: 'home'
            }
        });
    }

}

3. Navigation to external URL

handleNavigateToExternalPage() {
    this[NavigationMixin.Navigate]({
        type: 'standard__webPage',
        attributes: {
            url: https://blogs.perficient.com/author/amasane/'
        }
    });
}

4. Navigating to a List View

To navigate to a list view, use the standard__objectPage type. You can also specify a filter in the filterName attribute.

handleNavigateToListView() {
    this[NavigationMixin.Navigate]({
        type: 'standard__objectPage',
        attributes: {
            objectApiName: 'Contact',
            actionName: 'list'
        },
        state: {
            filterName: 'Recent' // Optional filter for list views
        }
    });
}

5. Navigating to a Custom Tab

If you have a custom Lightning app page or a Visualforce tab, use the standard__navItemPage type.

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

6. Navigating to a Related List

If you want to take users to a related list for a particular record, use the standard__recordRelationshipPage type.

handleNavigateToRelatedList() {
    this[NavigationMixin.Navigate]({
        type: 'standard__recordRelationshipPage',
        attributes: {
            recordId: this.recordId,    (you can also put recordId manually)
            objectApiName: 'Account',
            relationshipApiName: 'Contacts',
            actionName: 'view'
        }
    });
}

Conclusion

Through the examples provided above, we’ve demonstrated how developers can effectively utilize Navigation Services within their Lightning Web Components to enhance navigation and user experience.

Happy Reading !!

The journey of learning never ends; every moment is a chance to grow.

Related Posts:

1. 1. Basic Navigation Services in LWC
   2. Navigate to different pages

You Can Also Read:

1.A Comprehensive Guide to Custom Report Type in Salesforce
2.Mastering Salesforce Queues: A Step-by-Step Guide – Part 2
3.How to Assign Records to Salesforce Queue: A Complete Guide
4. An Introduction to Salesforce CPQ
5. Revolutionizing Customer Engagement: The Salesforce Einstein Chatbot

Hello Trailblazers!

Lightning Web Components (LWC) has transformed how developers create modern and efficient applications within the Salesforce platform. One of the key functionalities that enhances user experience in LWC is the Navigation Service. This service allows developers to navigate between different components, pages, or external URLs with ease.

In this blog, we’ll explore the Navigation Service in detail, covering its key features, use cases, and examples to help you use it effectively in your Lightning Web Components.

In Part 1 and Part 2 of this Navigation Series, we’ve tried to cover all the scenarios possible by Navigation Service in LWC.

So, let’s get started…

What Is Navigation Service in LWC?

The Navigation Service in Lightning Web Components provides a way to navigate programmatically between pages in the Salesforce app. It allows developers to direct users to standard Salesforce Record pages, Objects, Custom Tabs, Related Lists, custom components, or external websites with minimal effort.

Key Use Cases for Navigation Service

Some of the most common use cases for Navigation Services include:

1. Navigating to a Record Page: Redirect users to a specific record in the app, such as an account, contact, or custom object.
2. Navigating to a List View: Guide users to a list view, showing filtered records based on custom criteria.
3. Navigating to a Custom Tab or Lightning Component: Direct users to custom pages or components in your app, including utility tabs.
4. Navigating to an External URL: Open an external website or resource when users click on a link or button.
5. Navigating in Communities: Redirect users within a Salesforce Community to different pages or community tabs.

How to Implement Navigation Service in LWC

Now that we’ve covered the basics, let’s dive into how to implement the Navigation Service in your LWC Components.

Step 1: Import the Required Modules

First, you need to import the NavigationMixin from the lightning/navigation service. This mixin provides the methods required for navigation.

import { NavigationMixin } from 'lightning/navigation';

Step 2: Extend the NavigationMixin

Next, extend the NavigationMixin in your component’s class. This allows your component to inherit the navigation functionality.

export default class MyComponent extends NavigationMixin(LightningElement) {
    // Component logic here
}    

Step 3: Define a Navigation Method

To navigate between pages, you’ll define a method in your component that uses the navigate() function from the NavigationMixin.

Example: Navigating to a Record Page

handleNavigateToRecord() {
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: this.recId,   (you can also paste particular record id here in some cases)
            objectApiName: 'Account',
            actionName: 'view'
        }
    });
}

In this example, the type is set to standard__recordPage, which specifies that you’re navigating to a record page. The attributes section defines the recordId, the object (Account), and the action (view or edit).

Step 4: Use the Navigation Method in the Template

Add a button or another interactive element in the component’s template/html side to trigger the navigation method when clicked.

<template>
    <lightning-card title="Navigation Service Demo">
        <div class="slds-p-left_medium">
            <lightning-button label="Go to Account" onclick={handleNavigateToRecord}></lightning-button>
        </div>
    </lightning-card>
</template>

Now, when the user clicks the button, they’ll be redirected to the specified account record.

In Part 2 of this blog post, we’ll see more scenarios in which Navigation Service can be used.

The Navigation Service in Lightning Web Components is a versatile tool that allows for efficient, programmatic navigation within the Salesforce platform. By understanding how to navigate between standard pages, custom components, and external URLs, you can greatly enhance the user experience in your LWC applications.

Happy Reading !!

The journey of learning never ends; every moment is a chance to grow.

Related Posts:

1. 1. Basic Navigation Services in LWC
   2. Navigate to different pages

You Can Also Read:

1.A Comprehensive Guide to Custom Report Type in Salesforce
2.Mastering Salesforce Queues: A Step-by-Step Guide – Part 2
3.How to Assign Records to Salesforce Queue: A Complete Guide
4. An Introduction to Salesforce CPQ
5. Revolutionizing Customer Engagement: The Salesforce Einstein Chatbot