To launch a record’s create page with prepopulated field values, use lightning/pageReferenceUtils and lightning/navigation together.
The lightning/pageReferenceUtils module provides the encodeDefaultFieldValues() and decodeDefaultFieldValues() functions, which encode default field values into a string and decode them. Assign an encoded string to the pageReference.state.defaultFieldValues attribute in a standard__objectPage page reference.
With standard actions, the default field values pass through the URL to the object as a string, and the redirect and replace is handled for you. With override actions, you are responsible for decoding the string of default field values from the URL.
In the lwc-recipes sample repo, see the navToNewRecordWithDefaults component.
Tip
If you’re launching a flow from a Quick Action in a Salesforce Console app, and the flow contains a custom LWC that navigates to a record create page with default values, those default values are sometimes not saved.
Note
This example launches a record’s create page with prepopulated default values.
This example HTML includes the link to create a contact.
1<!-- navToNewRecordWithDefaults.html -->
2<template>
3 <lightning-button
4 name="new-with-defaults"
5 label="Go to New Contact with Defaults"
6 class="slds-m-around_medium"
7 onclick={navigateToNewContactWithDefaults}>
8 </lightning-button>
9</template>To encode the default field values into a string, pass them to encodeDefaultFieldValues(). Assign the encoded string to the state.defaultFieldValues property in the page reference.
1// navToNewRecordWithDefaults.js
2import { LightningElement } from "lwc";
3import { NavigationMixin } from "lightning/navigation";
4import { encodeDefaultFieldValues } from "lightning/pageReferenceUtils";
5
6export default class NavToNewRecordWithDefaults extends NavigationMixin(LightningElement) {
7 navigateToNewContactWithDefaults() {
8 const defaultValues = encodeDefaultFieldValues({
9 FirstName: "Morag",
10 LastName: "de Fault",
11 LeadSource: "Other",
12 });
13
14 console.log(defaultValues);
15
16 this[NavigationMixin.Navigate]({
17 type: "standard__objectPage",
18 attributes: {
19 objectApiName: "Contact",
20 actionName: "new",
21 },
22 state: {
23 defaultFieldValues: defaultValues,
24 },
25 });
26 }
27}To dynamically create or modify your default values before passing them to the Navigate function, specify the values in connectedCallback().
Here’s how you can update the previous example to send several dynamic fields and values.
1//navToNewRecordWithDynamicValues.js
2import { LightningElement } from "lwc";
3import { NavigationMixin } from "lightning/navigation";
4import { encodeDefaultFieldValues } from "lightning/pageReferenceUtils";
5
6export default class NavToNewRecordWithDynamicValues extends NavigationMixin(LightningElement) {
7 // An object that stores default values for the sObject
8 obj = {
9 FirstName: "Morag",
10 LastName: "de Fault",
11 };
12
13 companyName = "Demo";
14 newFieldName = "Company";
15
16 connectedCallback() {
17 // Dynamically adding a static field name and value
18 this.obj.LeadSource = "Other";
19 this.obj.LastName = "Some other name";
20
21 // Dynamically adding a dynamic field name and value
22 this.obj[this.newFieldName] = this.companyName;
23 }
24
25 navigateToNewContactWithDefaults() {
26 const defaultValues = encodeDefaultFieldValues(this.obj);
27 }
28}To override standard action behavior with a custom solution, wrap your module inside an Aura component.
1// auraOverrideWrapper.cmp
2<aura:component implements="lightning:actionOverride">
3 <c:lwcNewAccountOverride></c:lwcNewAccountOverride>
4</aura:component>The lwcNewAccountOverride component includes a form for a new account record page that displays default field values.
1<!-- lwcNewAccountOverride.html -->
2<template>
3 <lightning-record-edit-form object-api-name="Account" onsuccess={handleAccountCreated}>
4 <lightning-input-field field-name="Name" value={dfv_AccountName}> </lightning-input-field>
5 <lightning-input-field field-name="NumberOfEmployees" value={dfv_NumberOfEmployees}>
6 </lightning-input-field>
7 <lightning-input-field field-name="OwnerId" value={dfv_OwnerId}> </lightning-input-field>
8 <lightning-input-field field-name="CustomCheckbox__c" value={dfv_CustomCheckbox}>
9 </lightning-input-field>
10
11 <lightning-button class="slds-m-top_small" type="submit" label="Create"> </lightning-button>
12 </lightning-record-edit-form>
13</template>With override actions, you are responsible for decoding the string of default field values from the URL.
This example uses CurrentPageReference to read the default field values from state and get the encoded string. It then passes the string to decodeDefaultFieldValues() to decode it and handle the account creation.
This example is similar to prepopulating field values using lightning-record-edit-form, except that here the defaultFieldValues are dynamically generated when navigating to the form.
To perform an override with currentPageReference.state.defaultFieldValues, encode the string with encodeDefaultFieldValues() in the same component, such as from connectedCallback(). See the previous sections for examples on encoding the string.
1// lwcNewAccountOverride.js
2import { LightningElement, wire } from "lwc";
3import { CurrentPageReference } from "lightning/navigation";
4import { decodeDefaultFieldValues } from "lightning/pageReferenceUtils";
5
6export default class LwcNewAccountOverride extends LightningElement {
7 @wire(CurrentPageReference)
8 setCurrentPageReference(currentPageReference) {
9 // defaultFieldValues must correspond to an encoded string
10 if (currentPageReference.state.defaultFieldValues) {
11 const dfvObject = decodeDefaultFieldValues(currentPageReference.state.defaultFieldValues);
12 this.dfv_AccountName = dfvObject.Name;
13 this.dfv_NumberOfEmployees = dfvObject.NumberOfEmployees;
14 // Handling required for boolean because we don't support boolean field types
15 this.dfv_CustomCheckbox = dfvObject.CustomCheckbox__c === "true";
16 this.dfv_OwnerId = dfvObject.OwnerId;
17 }
18 }
19
20 dfv_AccountName = "";
21 dfv_NumberOfEmployees = "";
22 dfv_OwnerId = "";
23 dfv_CustomCheckbox = false;
24
25 // Run code when account is created
26 handleAccountCreated() {}
27}All encoded default field values are passed to the record create page as strings. For example, 35000 is passed into the page as a string instead of a number, and the Boolean values true and false are passed as strings.
Important
To use this code, from Setup, enter Object Manager. On the Account object, create a checkbox field with the API name CustomCheckbox__c. Then select Buttons, Links, and Actions and edit the New action. For Lightning Experience Override, select Lightning component and select the c:auraOverrideWrapper component.
See Also
j