It’s been a long time coming, but Salesforce’s Lightning / Aura components are really starting to pay off. For those not aware, Salesforce Lightning is a pretty big paradigm shift for Salesforce. It has the potential to finally have Salesforce Programmers using more modern approaches to building applications.
The lightning record edit form is a really great new addition to Salesforce Lightning. The lighting record edit form is a wrapper component that accepts a recordId and can display fields and labels associated to that record.
For the most part, you should use the Lightning Record Edit Form when you want to really customize the look and feel of the form. If you don’t need or don’t want to customize the form, you should probably use the lightning-record-form. It requires a lot less code. 🙂
Why Use the Lightning Record Edit Form Component?
Using the Lightning data service it’s possible to create a form that can do some pretty complicated stuff without necessarily having to write any apex and without necessarily even needing to write any JavaScript.
One of the really cool parts of the component is that it’s taking care of field level security and sharing, so users only have access to the data they should have access to.
The lightning-record-edit-form and it’s various components can really support a lot of use cases. Any of the following should easily be accomplished:
- Creating new records with a specific layout
- Updating records with a specific layout
The component has a bunch of supported even handlers: onload, onsubmit, onsuccess, onerror and one method: submit which allow us to customize it.
In a lightning web component it’s declared like this:
<template>
<lightning-record-edit-form
record-id={recordId}
object-api-name="Contact"
onsuccess={handleSuccess}
onsubmit ={handleSubmit} >
<lightning-messages />
<lightning-input-field
field-name="AccountId" />
<lightning-input-field
field-name="FirstName" />
<lightning-input-field
field-name="LastName" />
<lightning-input-field
field-name="Email">
<lightning-button
class="slds-m-top_small"
variant="brand"
type="submit"
name="update"
label="Update" />
</lightning-record-edit-form>
</template>
In an Aura component, it’s declared like this:
<aura:component>
<lightning:recordViewForm
recordId={recordId}
objectApiName="Contact"
onsuccess={handleSuccess}
onsubmit ={handleSubmit} >
<lightning:notificationsLibrary />
<lightning:inputField
fieldName="AccountId" />
<lightning:inputField
fieldName="FirstName" />
<lightning:inputField
fieldName="LastName" />
<lightning:inputField
fieldName="Email">
<lightning:button
class="slds-m-top_small"
variant="brand"
type="submit"
name="update"
label="Update" />
</lightning:recordEditForm>
</aura:component>
Editing a Record With The Lighting Record Edit Form
To enable editing of a record, it’s really easy! All we need to do is pass a valid ID for a record and make sure that we specify the matching object API name. We then need to include the fields we want to potentially update as lighting:inputFields.
In a lightning web component, we would specify the fields like this:
<lightning-input-field
field-name="AccountId" />
<lightning-input-field
field-name="FirstName" />
<lightning-input-field
field-name="LastName" />
<lightning-input-field
field-name="Email">
Created a Record With the Lightning Record Edit Form
To create, a record with the component it’s pretty easy, you just specify the fields you want to include using lightning-input-field components and make sure that you don’t specify a record id. A record id will be specified when the record is created successfully.
Basically in an Aura component, it would look like this:
<aura:component>
<lightning:recordViewForm
recordId={recordId}
objectApiName="Contact"
onsuccess={handleSuccess}
onsubmit ={handleSubmit} >
<lightning:notificationsLibrary />
<lightning:inputField
fieldName="AccountId" />
<lightning:inputField
fieldName="FirstName" />
<lightning:inputField
fieldName="LastName" />
<lightning:inputField
fieldName="Email">
<lightning:button
class="slds-m-top_small"
variant="brand"
type="submit"
name="update"
label="Update" />
</lightning:recordEditForm>
</aura:component>
Overriding Default Behaviours
When we need to customize the behaviour of the lightning record edit form, the easiest way is for us to use the onload or onsubmit event handlers. We can do that really easily by simply providing a function that should be called from our controller.
In onsubmit, or almost any other event, we can prevent the default from happening by calling the event.preventDefault() method. To do this in Aura we would do something like this in our component
<lightning:recordViewForm
recordId="{!v.recordId}"
objectApiName="Contact"
onsuccess="{!v.handleSuccess}"
onsubmit="{!v.handleSubmit}">
In our controller, we would have methods like this:
({
// only saves the record in the database.
handleSubmit : function(component, event, helper) {
component.set('v.showSpinner', true)
helper.saveForm(component, event, helper, event.getParams('detail').fields)
},
handleSuccess : function(component, event, helper) {
component.set('v.showSpinner', false)
let toastEvent = $A.get('e.force:showToast')
toastEvent.setParams({
mode: 'sticky',
type: 'success',
title: 'Success!',
message: 'The application has been successfully saved.'
});
toastEvent.fire()
event.preventDefault()
}
})
There’s also some attributes that we can set on the form too, for example we can set the default record type by using “record-type-id” in a lightning web component or “recordTypeId” if we’re building an Aura component. RecordId, RecordTypeId, and ParentId can all be supplied so we don’t even need to set it anywhere in the JavaScript.
Wrapping it Up
The component library documentation on the lightning:recordEditForm is pretty extensive and should give you a really good overview.
The lighting:recordForm is really similar, but can also support inline editing and read only with a lot less work. If you want to customize though, it’s nearly impossible to do much customization with the recordForm.