Skip to main content

​
Overview

Record navigation enables you to navigate to view, edit, or create Salesforce records. This page covers the most common record navigation patterns found in the LWC Recipes repository.

​
Navigate to Record Page

Navigate to a record’s view or edit page using the standard__recordPage type.

​
View a Record

import { LightningElement, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import getSingleContact from '@salesforce/apex/ContactController.getSingleContact';

export default class NavToRecord extends NavigationMixin(LightningElement) {
    @wire(getSingleContact) contact;

    navigateToContact() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.contact.data.Id,
                objectApiName: 'Contact',
                actionName: 'view'
            }
        });
    }
}
Source: navToRecord.js:8

​
Edit a Record

navigateToEdit() {
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: this.contact.data.Id,
            objectApiName: 'Contact',
            actionName: 'edit'
        }
    });
}
Source: navToRecord.js:19
The actionName attribute supports three values:
  • view - View the record
  • edit - Edit the record
  • clone - Clone the record

​
Navigate to New Record Page

Create new records using the standard__objectPage type with actionName: 'new'.

​
Basic New Record

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

export default class NavToNewRecord extends NavigationMixin(LightningElement) {
    navigateToNewContact() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Contact',
                actionName: 'new'
            }
        });
    }
}
Source: navToNewRecord.js:5

​
New Record with Default Values

Pre-populate fields on a new record form using encodeDefaultFieldValues from lightning/pageReferenceUtils. 
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { encodeDefaultFieldValues } from 'lightning/pageReferenceUtils';

export default class NavToNewRecordWithDefaults extends NavigationMixin(
    LightningElement
) {
    navigateToNewContactWithDefaults() {
        const defaultValues = encodeDefaultFieldValues({
            FirstName: 'Morag',
            LastName: 'de Fault',
            LeadSource: 'Other'
        });

        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Contact',
                actionName: 'new'
            },
            state: {
                defaultFieldValues: defaultValues
            }
        });
    }
}
Source: navToNewRecordWithDefaults.js:8
Use encodeDefaultFieldValues() to properly encode field values before passing them in the state.defaultFieldValues property.

​
PageReference Attributes

​
type
string
required
Use standard__recordPage for existing records or standard__objectPage for new records
​
attributes.recordId
string
The 15 or 18 character record ID (required for standard__recordPage)
​
attributes.objectApiName
string
required
The API name of the object (e.g., ‘Contact’, ‘Account’, ‘CustomObject__c’)
​
attributes.actionName
string
required
The action to perform: ‘view’, ‘edit’, ‘clone’, or ‘new’
​
state.defaultFieldValues
string
Encoded default field values for new records (use encodeDefaultFieldValues())

​
Common Use Cases

View Record Details

Navigate users from a list or search result to the full record page

Quick Edit

Open the edit page directly from a custom component

Create Related Records

Launch new record forms with pre-populated relationship fields

Clone with Modifications

Clone a record and pre-populate fields with new values

Build docs developers (and LLMs) love

Get started for freeTalk to us