Lightning Record Edit Form Simplified

August 9, 2021 Pankaj Agrahari

In the previous part, we learn about the Lightning Record Form and its usage to create a form to view records in edit mode. However, if you may require extra flexibility in creating your form in terms of customizing the form layout or custom rendering of record data then you can use a Lightning Record Edit Form instead.

Use the lightning:recordEditForm component to create Lightning Record Edit Form.

lightning:recordEditForm implements Lightning Data Service and doesn’t require additional Apex controllers to create or update record data. This component also takes care of field-level security and sharing for you, so users see only the data they have access to.

Create A Record Using lightning:recordEditForm

To enable record creation, pass in the object API name for the record to be created.

Specify the fields you want to include in the record create layout.

Include a lightning:button component with type=”submit”. When you press the Enter key or click the button, it validates the fields and submits the values.

lightning:recordEditForm handles field-level validation errors and Lightning Data Service errors automatically.

To display the error message automatically, include lightning:messages before or after the lightning:inputField components.

Please create an Aura Component with the name MyLightningRecordEditForm and save the following code into it:

<aura:component>
<aura:attribute name="objectApiName" type="String" default="Account" />
<aura:attribute name="message" type="String" default="Status.."/>

<lightning:messages />

<lightning:recordEditForm objectApiName="{!v.objectApiName}" onsuccess="{!c.handleSuccess}">
    <lightning:inputField fieldName="Name" />
    <lightning:inputField fieldName="AnnualRevenue" />
    <lightning:inputField fieldName="Industry" />
    <lightning:button variant="brand" type="submit" name="save" label="Save" />
</lightning:recordEditForm>

<hr/>
{!v.message}
<hr/>
</aura:component>

({
    handleSuccess : function(component, event, helper) {
    var record = event.getParam('response');
    component.set('v.message', 'record saved successfully. recordId > ' + record.id );
        
    }
})

Below is the preview of this component:

Edit A Record Using lightning:recordEditForm

To enable record editing, pass in the ID of the record and the corresponding object API name to be edited. Specify the fields you want to include in the record edit layout using lightning:inputField.

Include a lightning:button component with type=”submit”. When you press the Enter key or click the button, it validates the fields and submits the values.

Please save the following code into MyLightningRecordEditForm:

<aura:component>
<aura:attribute name="objectApiName" type="String" default="Account" />
<aura:attribute name="recordId" type="String" default="0012x00000OqGYjAAN"/>
<aura:attribute name="message" type="String" default="Status.."/>

<lightning:recordEditForm recordId="{!v.recordId}" objectApiName="{!v.objectApiName}" onsuccess="{!c.handleSuccess}">
    <lightning:messages />
    <lightning:inputField fieldName="Name" />
    <lightning:inputField fieldName="AnnualRevenue" />
    <lightning:inputField fieldName="Industry" />
    <lightning:button variant="brand" type="submit" name="save" label="Save" />
</lightning:recordEditForm>

<hr/>
{!v.message}
<hr/>
</aura:component>

({
    handleSuccess : function(component, event, helper) {
    var record = event.getParam('response');
    component.set('v.message', 'record updated successfully. recordId > ' + record.id );
        
    }
})

Below is the preview of this component: