Creating pre-populated records with lightning:recordEditForm

A typical use case when creating records is to populate some fields in advance, and then let the user fill in the rest of required fields. Let’s say that we want to create account records, having a pre-populated description, like this:

Captura de pantalla 2018-03-19 a las 22.59.16.png

If you want to do this in a Lightning Component while using lightning:recordEditForm, you could do it the next way:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <lightning:card title="Add account">
        <div class="slds-p-around_medium">
            <lightning:recordEditForm objectApiName="Account" aura:id="createAccountForm" onsubmit="{!c.handleSubmit}">
                <lightning:messages/>
                <lightning:inputField fieldName="Name"/>
                <lightning:inputField fieldName="Phone"/>
                <div class="slds-p-vertical_x-small">
                     <dt class="slds-item_label slds-text-color_weak slds-truncate">Description</dt>
                     <dd class="slds-item_detail slds-truncate">This is a default description</dd>
                </div>
                <lightning:inputField fieldName="Website"/>
                <lightning:button type="submit" name="Submit" label="submit" class="slds-m-top_medium"/>
            </lightning:recordEditForm>
        </div>
    </lightning:card>
</aura:component>

As you can see, I am using some SLDS styles to show a static text for Description field. You could use an attribute instead and set it from the controller with the value you want to pre-populate.

This is the controller:

({
    handleSubmit : function(component, event, helper) {
        event.preventDefault(); // Prevent default submit
        var fields = event.getParam("fields");
        fields["Description"] = 'This is a default description'; // Prepopulate Description field
        component.find('createAccountForm').submit(fields); // Submit form
    }
})

What we are doing is to intercept the event, and set a value for the Description field, which by default was not included in the Javascript object.

Thanks to Stephen Woods for the support.

9 thoughts on “Creating pre-populated records with lightning:recordEditForm

Add yours

  1. Hi – I was wondering how this is implemented for creating records, say accounts. I’ve added a custom component based on lightning:recordEditForm but if I add it to the lightning page builder, it’s only available when editing an account record. Creating an account from the account menu dropdown ‘new’ button still shows the original modal form.

    Thanks

    Like

    1. You need to override the “New” button for the object (in the object setup menu –> buttons, links & actions –> New button). This functionality only works for Aura components as of today – what you can do to workaround this is to embed your LWC within an Aura wrapper component. I haven’t tried it but it should work. Hope that makes sense.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: