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.

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

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 )

Google+ photo

You are commenting using your Google+ 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