Navigate to a Record’s Create Page with Default Field Values (LWC)

 Hi,

We are going to learn how can navigate to a new record page with default values.

To launch a record’s create a page with prepopulated field values 

we have to use lightning/pageReferenceUtils and lightning/navigation together.

lightning/pageReferenceUtils:

This module provides the encodeDefaultFieldValues() and decodeDefaultFieldValues() functions, 

which encode default field values into a string and decode them.

We have to assign Assign an encoded string to the 

 "pageReference.state.defaultFieldValues" attribute in a "standard__objectPage" page reference.

 

 Eg: 

 Launch a Contact Record with Default Field Values Using a Standard Action 

 This example launches a record’s create page with pre-populated default values:

  This example HTML includes the link to create a contact.  

 <!-- navToNewRecordWithDefaults.html -->

<template>

        <lightning-button

            name="new-with-defaults"

            label="Go to New Contact with Defaults"

            class="slds-m-around_medium"

            onclick={navigateToNewContactWithDefaults}

        ></lightning-button>

</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.

 

 // navToNewRecordWithDefaults.js

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: 'Sreevardhan',

            LastName: 'M',

            LeadSource: 'Other'

        });

        console.log(defaultValues);

        this[NavigationMixin.Navigate]({

            type: 'standard__objectPage',

            attributes: {

                objectApiName: 'Contact',

                actionName: 'new'

            },

            state: {

                defaultFieldValues: defaultValues

            }

        });

    }

}

Let's take a lightning quick action on Account Page called "Create Contact Record".

Let's create a lightning web component called "defaultValuesComponent"

defaultValuesComponent.html:

<template>

    

</template>

defaultValuesComponent.js:

import { LightningElement } from 'lwc';

import { NavigationMixin } from 'lightning/navigation';

import { encodeDefaultFieldValues } from 'lightning/pageReferenceUtils';

export default class DefaultValuesComponent extends NavigationMixin(LightningElement) {

    connectedCallback(){

        this.navigateToNewContactWithDefaults();

    }

    navigateToNewContactWithDefaults() {

        const defaultValues = encodeDefaultFieldValues({

            FirstName: 'SreeVardhan',

            LastName: 'M',

            LeadSource: 'Other'

        });

        this[NavigationMixin.Navigate]({

            type: 'standard__objectPage',

            attributes: {

                objectApiName: 'Contact',

                actionName: 'new'

            },

            state: {

                defaultFieldValues: defaultValues

            }

        });

    }

}

defaultValuesComponent.js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>false</isExposed>    

</LightningComponentBundle>

Now let's wrap our Lightning web component  inside an Aura component called "defaultValuesComponentAura"

defaultValuesComponentAura.cmp:

<aura:component implements="force:lightningQuickAction" >

    <c:defaultValuesComponent/>

</aura:component>

Create Lighting action "Create Contact Record" on Account object with "defaultValuesComponentAura"

When user clicks on "Create Contact Record" it opens new Contact page with default values:

Note:

 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.

Reference:

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_navigate_default