Skip to content

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

Hello trailblazers!

We know that in aura framework, we have force:createRecord event to display the record create page for an object. It supports an attribute “defaultFieldValues” which is optional and, if provided, specifies values to use to prepopulate the create record form.

What about Lightning Web Component?

In the Lightning Web Component framework, we do not have force:createRecord event so how can we get the above-stated privilege. Here’s a solution to that – we will use the lightning navigation service to do so. Pass the field API Names and their values as a string into the pageReference.state.defaultFieldValues attribute on standard__objectPage page reference types. Using this, you can launch a record’s create page with prepopulated field values.

For instance, I am launching the new account standard create page with prepopulated field values of some fields – (Name, AccountNumber, AnnualRevenue, Phone).

View In Action

buttonToUrl.html

<template>
    <lightning-card title="Demo">
        <div class="slds-align_absolute-center" style="width:24rem">
            <a onclick={handleClick} class="slds-box slds-box_link slds-box_x-small slds-media">
              <div class="slds-media__figure slds-media__figure_fixed-width slds-align_absolute-center slds-m-left_xx-small">
                <span class="slds-icon_container slds-icon-utility-knowledge_base">
                  <lightning-icon icon-name="standard:account"></lightning-icon>
                </span>
              </div>
              <div class="slds-media__body slds-border_left slds-p-around_small">
                <h2 class="slds-truncate slds-text-heading_small" title="Share the knowledge">Create Account</h2>
                <p class="slds-m-top_small">Navigate to a Record’s Create Page with Default Field Values by navigation service in LWC</p>
              </div>
            </a>
          </div>
    </lightning-card>
</template>

buttonToUrl.js


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

export default class ButtonToUrl extends NavigationMixin(LightningElement) {

    handleClick(event){
        let temp = {
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'new'                
            },
            state : {
                nooverride: '1',
                defaultFieldValues:"Name=Living The Trailhead,AccountNumber=A1,AnnualRevenue=37000,Phone=7055617159"
            }
        };
        this[NavigationMixin.Navigate](temp);
    }
   
}

buttonToUrl.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>
Published inCoding Mania

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *