Default Field Values using Lightning Web Components

With Spring 20 release Salesforce announces many new features and one of them is Prepopulate/Default Field Values using Lightning Web Components or URL hack in Lightning Experience. If you haven’t read the spring 20 release notes, you can take a quick look here.
So today we will check how we can use it to set Default Field values in LWC using the navigation service. For the demo purpose, I have created a basic component that will populate the default values in the Account record.

While we can do this using LWC, we can also populate default values using URL or formula fields.

/lightning/o/Account/new?defaultFieldValues=
    Name={!URLENCODE(Account.Name)},
    OwnerId={!Account.OwnerId},
    AccountNumber={!Account.AccountNumber},
    NumberOfEmployees=35000,
    CustomCheckbox__c={!IF(Account.SomeCheckbox__c, true, false)},
    RecordTypeId=012XXXXXXXXca&
    &backgroundContext=%2Flightning%2Fr%2FAccount%2F{!Account.Id}%2Fview

So we can populate recordType in Lightning Experience button as well. We can also set the background using backgroundContext. So that if user click on cancel it stays on the record detail page. But if we have a lookup relationship and we don’t have value in that then we will get an error. Then we can handle that using URLFOR and dynamic generating URL.

{!URLFOR('/lightning/o/Opportunity/new?defaultFieldValues=' + IF(ISBLANK(Contact.AccountId), ", ',AccountId='+Contact.AccountId) )} //use URLFOR to genrate dynamic URL and pass variable only when they have value

Note:  This change doesn’t apply to Lightning Out, Lightning communities, or the Salesforce mobile app. 

So this is how our final UI will look like. Once we click the button from the LWC controller we will pre-populate few fields. Previously to do similar things we need to create our custom component but now that is no longer needed.

So now we will check the code. We will import the NavigationMixin from 'lightning/navigation' to handle the navigation.

lwcPrepopulateValue.html

<template>
    <lightning-card>
        <h3 slot="title">
            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
            Prepopulate Value in Lightning Web Component
        </h3>
        <div slot="footer">

        </div>
        <lightning-button variant="brand" label="Create Record" title="Create Record" onclick={createRecord}
            class="slds-m-left_x-small"></lightning-button>
    </lightning-card>

</template>

lwcPrepopulateValue.js

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


export default class LwcPrepopulateValue  extends NavigationMixin(LightningElement) {

    createRecord() {
        // Navigate to the Account home page
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'new'                
            },
            state : {
                nooverride: '1',
                defaultFieldValues:"Name=Tushar Sharma,AccountNumber=55555,NumberOfEmployees=35000,Phone=9988776655,Site=https://newstechnologystuff.com/"
            }
        });
    }
}

So now here we have state parameter is available. We can add default values using defaultFieldValuesoption. So we can use this option to populate lookup fields, Record type and other fields using the comma separated format. We can set both standard and custom fields here. This will help us in the scenario where we need to prepopulate fields and to do that we create the custom components.
We have used lightning__Tab in Target to create a tab for this component.

lwcPrepopulateValue.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <targets>
        <target>lightning__Tab</target>
    </targets>
    <apiVersion>47.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

So now we can set Default Field Values using Navigation service in Lightning Web Components and prepopulate fields. Salesforce is adding more features and making Lightning Web Components more powerful with every release. So we should keep ourself updated in this area.

Like my Facebook page for more updates.

Did you like the post or do you have any questions/suggestions. Let me know in comments. Happy programming 🙂