Navigate to Record Page in Salesforce Lightning Web Component

In Salesforce, we can create records using Lightning Web Components for custom and standard objects. After creating a record, to view it, we have to navigate to the object tab and then select the created record from the object list view.

To avoid moving from one tab to another just to view the record page, we can use the NavigationMixin feature in the Lightning web component. It would be easy for the user if the record page opened just after creating the record.

In this Salesforce tutorial, we will learn how to navigate to the record page in Salesforce Lightning web component using the NavigationMixin feature.

What is NavigationMixin in Salesforce Lightning Web Components?

In Salesforce, the NavigationMixin feature allows navigation between different Lightning pages (record page, app page, and home page), records, and components within the Lightning pages. The NavigationMixin feature uses two APIs for navigation:

• Navigate
• GenerateURL.

Navigate

The Navigate() function helps us navigate to different pages in Salesforce. We need to provide a PageReference object that defines on which page the user will be navigated (like a record page, object page, or custom page). It also includes information like the recordId or objectApiName, depending on the page we are navigating on.

Syntax:

(this[NavigationMixin.Navigate]) 

GenerateURL

The GenerateURL() function in Salesforce creates a URL for a page and returns it as a promise. This allows us to handle the URL asynchronously, ensuring that the page is only accessed once the URL is fully generated.

The resulting URL can be used in the href attribute of an <a> tag to navigate to the page or passed to window.open() to open the page in a new window or tab.

Syntax:

this[NavigationMixin.GenerateURL]

In the example below, we will see the use case of both navigation methods in the Lightning Web Component.

Navigate to the Record Page in LWC using NaivgationMixin.Navigate()

In this example, we will create a Lightning web component, which we can use to create an account record. Using NaivgationMixin.Navigate function, the user will be navigated to the created account record detail page.

Follow the steps below to create a Lightning web component with the navigation feature.

1. Create a Lightning Web Component, redirectToRecordPage, and enter the code below in the JS file. This code defines the logic for creating an account and navigating to the account’s record page.

Here, we have imported the navigation feature using the import { NavigationMixin } from ‘lightning/navigation’.

To navigate to the record detail page, we have defined a method navigateToRecord(), in which we have used the NavigationMixin. In this, we have type as “standard_recordPage“, so that it navigates to the standard account record page.

The actionName set as ‘view‘ will open the record page in view mode.

import { LightningElement, track } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
import accObj from '@salesforce/schema/Account';
import nameFld from '@salesforce/schema/Account.Name';

export default class RedirectToRecordPage extends NavigationMixin(LightningElement) {
    @track accountName;
    @track accountId;

    handleNameChange(event) {
        if (event.target.name == 'accountName') {
            this.accountName = event.target.value;
        }
    }

    navigateToRecord() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.accountId,
                actionName: 'view'
            }
        });
    }

    saveAction() {
        const fields = {};
        fields[nameFld.fieldApiName] = this.accountName;
        const accRecordIn