How to Navigate to Another LWC Page in LWC

Brendan Hesse

Tech

Lightning Web Components (LWC) is a modern web component framework developed by Salesforce for building applications on the Salesforce Lightning Platform. Navigating between different pages or components within an application is often necessary to build interactive user interfaces. In this article, we will explore how to navigate to another LWC page in Salesforce using the NavigationMixin module.

Prerequisites:

Before you can start implementing navigation to another Lightning Web Component (LWC) page in Salesforce, you need to ensure you have the following prerequisites in place:

A. Salesforce Developer Account:

To create and test LWC components, you will need a Salesforce developer account. If you don’t already have one, sign up for a free developer account on the Salesforce website. This account will provide you access to the Salesforce platform and tools necessary for LWC development.

B. Salesforce CLI Installation:

The Salesforce CLI (Command Line Interface) is a powerful tool allowing you to interact with the platform from your command prompt or terminal. It provides commands for creating, deploying, and managing your Salesforce resources, including LWC components.

To install the Salesforce CLI, follow these steps:

  • Open a command prompt or terminal.
  • Visit the Salesforce CLI installation page on the Salesforce Developer website.
  • Follow the instructions for your specific operating system to download and install the Salesforce CLI.
  • Once the installation is complete, open a new command prompt or terminal window to ensure the CLI is recognized.

To verify that the Salesforce CLI is installed correctly, you can run the following command:

sfdx --version

This command should display the version of the Salesforce CLI installed on your system. If the command is not recognized, ensure you have added the Salesforce CLI to your system’s PATH environment variable.

With a Salesforce developer account and the Salesforce CLI installed you will have the foundation to create, deploy, and manage LWC components and navigate between different LWC pages in your Salesforce application.

Step 1: Create a New LWC Component

Let’s create a new LWC component that will serve as our target page. Open a command prompt or terminal and navigate to your Salesforce project directory. Use the following command to create a new LWC component:

force:lightning:component:create --type lwc --componentname targetPage

This command will create a new targetPage folder with the necessary files for your LWC component.

Step 2: Implement the Navigation

Open the targetPage component folder and edit the targetPage.js file. Replace the code with the following:

import { LightningElement, wire } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';

export default class TargetPage extends LightningElement {
    @wire(CurrentPageReference) pageRef;
    
    connectedCallback() {
        const pageReference = {
            type: 'standard__component',
            attributes: {
                componentName: 'c__targetPage'
            },
            state: {}
        };
        this[NavigationMixin.Navigate](pageReference);
    }
}

Explanation:

  • We import the CurrentPageReference and NavigationMixin modules from the lightning/navigation package.
  • The CurrentPageReference wire service allows us to get the current page reference, which will be used to navigate to the target page.
  • In the connectedCallback lifecycle hook, we create a pageReference object representing the target page. In this example, we use the standard__component type and set the componentName attribute to ‘c__targetPage’, which matches the name of our target page component.
  • Finally, we use the NavigationMixin.Navigate the method to navigate to the target page with the specified page reference.

Step 3: Implement the Source Page

Now, let’s create the source page that will initiate the navigation to the target page. Open the folder of your existing LWC component that will serve as the source page. For example, if your source component is named sourceComponent, navigate to its folder and edit the sourceComponent.html file. Add a button or link that will trigger the navigation. Here’s an example:

<code<template>
<lightning-button label="Navigate" onclick={navigateToTargetPage}></lightning-button>
</template>

Next, open the sourceComponent.js file and add the following code:

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

export default class SourceComponent extends NavigationMixin(LightningElement) {
    navigateToTargetPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__component',
            attributes: {
                componentName: 'c__targetPage'
            },
            state: {}
        });
    }
}

Explanation:

  • We import the NavigationMixin module and extend it with the LightningElement base class to use navigation features within our source component.
  • The navigateToTargetPage method is invoked when the button is clicked. It creates a pageReference object similar to the target page component.
  • Finally, we use the NavigationMixin.Navigate method to navigate to the target page, passing the pageReference object as an argument.

Step 4: Deploy and Test

To test the navigation, deploy the source and target components to your Salesforce org. You can use the following command in your project directory:

sfdx force:source:deploy -p path/to/sourceComponent -p path/to/targetPage

After successful deployment, add the source component to a Lightning page or app and verify that clicking the “Navigate” button redirects you to the target page.

FAQs

How do I navigate to an external URL in LWC?

To navigate to an external URL in LWC, you can use the NavigationMixin module’s NavigationMixin.GenerateUrl method. Import the NavigationMixin module, and then call the NavigationMixin.GenerateUrl method with the appropriate URL parameters to generate the URL. You can then use the generated URL to navigate to the external page.

How do I open an LWC component in a new tab?

To open an LWC component in a new tab, use the NavigationMixin module’s NavigationMixin.GenerateUrl method to generate the URL of the LWC component. Then, use JavaScript window.open the method with the generated URL opens the component in a new tab.

Conclusion

In conclusion, to navigate to another Lightning Web Component (LWC) page in Salesforce, you need a Salesforce developer account for LWC development, and the Salesforce CLI installed on your system. These prerequisites enable you to create and deploy LWC components and leverage the CLI for managing your Salesforce resources. With these in place, you can implement navigation functionality and enhance the user experience in your Salesforce applications.

Previous

Is A WildCard SSL Appropriate For Me?

Next

Easy to Use Transforming PDF Documents with Streamline Interface