force:recordEdit Example

In this blog, I am going to explain how to use force:recordEdit component to implement the custom edit for any object. A force:recordEdit component represents the record edit UI for the specified recordId.This component display fields in the order they appear on the corresponding page layout and record detail page. This example displays the record edit UI and a button and when button pressed saves the record.

<force:recordEdit aura:id="edit" recordId="a02D0000006V8Ni"/>
<lightning:button label="Save" onclick="{!}"/>

The Example which I am using is here is simply get the record id by using force:hasRecordId interface with overriding the Edit Button on the contact.

Here is the sample code.

<aura:component implements="force:lightningQuickAction,force:hasRecordId,lightning:actionOverride">
    Record save status: {!v.saveState}
    <aura:attribute name="saveState" type="String" default="UNSAVED" />
    <aura:handler name="onSaveSuccess" event="force:recordSaveSuccess" action="{!c.handleSaveSuccess}"/>
    <force:recordEdit aura:id="edit" recordId="{!v.recordId}"/>
    <lightning:button label="Save" onclick="{!}"/>    
    save : function(component, event, helper) {
    handleSaveSuccess : function(component, event) {
        component.set("v.saveState", "SAVED");
        var toastEvent = $A.get("e.force:showToast");
            "title": "Success!",
            "message": "The record has been updated successfully."

Code Highlights 

  • force:recordSaveSuccess event is used with onSaveSuccess after the record is successfully updated. Fired when record saving was successful.
  • e.recordSave is used to fire the save event of force:recordEdit

Go to the contact and override the edit button as shown below

Once you click on Edit record you can see now its override force:recordEdit component. 

After the successful update of the record, it will show the toast message as shown below.