Skip to main content
Navigate to the new record page for any object. Optionally pre-populate fields with default values using encodeDefaultFieldValues.

​
Source

  • force-app/main/default/lwc/navToNewRecord/navToNewRecord.js
  • force-app/main/default/lwc/navToNewRecordWithDefaults/navToNewRecordWithDefaults.js

​
Basic Usage

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'
            }
        });
    }
}

​
With Default Field Values

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
            }
        });
    }
}
Extend your component with NavigationMixin to access navigation capabilities: 
export default class NavToNewRecord extends NavigationMixin(LightningElement) {
    // component code
}

​
PageReference

​
type
string
required
Set to standard__objectPage for object pages
​
attributes.objectApiName
string
required
The API name of the object (e.g., ‘Contact’, ‘Account’, ‘CustomObject__c’)
​
attributes.actionName
string
required
Set to new to display the new record creation page
​
state.defaultFieldValues
string
Encoded default field values. Use encodeDefaultFieldValues() from lightning/pageReferenceUtils to encode an object of field name-value pairs

​
Default Field Values

Use encodeDefaultFieldValues to pre-populate form fields: 
import { encodeDefaultFieldValues } from 'lightning/pageReferenceUtils';

const defaultValues = encodeDefaultFieldValues({
    FirstName: 'John',
    LastName: 'Doe',
    Email: '[email protected]',
    LeadSource: 'Web'
});

​
Key Features

  • Navigate to new record creation forms
  • Pre-populate fields with default values
  • Supports all standard and custom objects
  • Type-safe navigation with PageReference

Build docs developers (and LLMs) love

Get started for freeTalk to us