Default Field Values using Lightning Web Components

With Spring 20 release Salesforce announce many new feature and one of them is Prepopulate/Default Field Values using Lightning Web Components. If you haven’t read the spring 20 release notes, you can take a quick look here.
Today we will check how we can use this to set Default Field values in LWC using the navigation service. For demo purpose I have created a basic components which will populate the default values in Account record.

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

Now this is how our final UI will look like

Prepopulate/ Default Field Values Using Navigation Service in Lightning Web Components

So now we will cover the code.

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 here we now have state parameter is available. We can add default values using defaultFieldValues option. We can set both standard and custom fields here. This will help us in secenrio where we need to prepopulate fields and to do that we create the custom components.
We have used lightning__Tab in Target to create 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.

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

Advertisements

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.