Usage of force:recordEdit

Editing the record on lightning experience easy with the force:recordEdit component which represents the record edit UI for the specified recordId. force:recordEdit component displays fields in the order they appear on the corresponding page layout and record details page.  Below is the simple way to use the force:recordEdit which display the edit page and saves button will save the data.

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

This client-side controller fires the recordSave event, which saves the record.

save : function(component, event, helper) {
    component.find("edit").get("e.recordSave").fire();
}

Here is the simple component that we will use to edit the contact record

component 

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickActionWithoutheader" access="global" >
    <force:recordEdit aura:id="edit" recordId="{!v.recordId}" onSaveSuccess="{!c.handleSaveSuccess}" />
    <div class="slds-align_absolute-center">
        <lightning:button class="slds-button slds-button--neutral" onclick="{!c.close}">Cancel</lightning:button>
        <lightning:button class="slds-button slds-button--neutral slds-button--brand" onclick="{!c.save}">Save</lightning:button>
    </div>
</aura:component>

controller.js

({
    save : function(component, event, helper) {
        component.find("edit").get("e.recordSave").fire();
    } ,
    handleSaveSuccess : function(component, event) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Success!",
            "message": "The record has been updated successfully."
        });
        toastEvent.fire();
        $A.get('e.force:refreshView').fire(); 
        $A.get('e.force:closeQuickAction').fire(); 
        
    },
    close : function(component, event, helper) {
        $A.get('e.force:closeQuickAction').fire(); 
        
    } ,
    
})

 

Code walkthrough 

  • Create a force:recordEdit component with aura:id and recordId and used controller handler for onSaveSuccess to show the save notification.
<force:recordEdit aura:id="edit" recordId="{!v.recordId}" onSaveSuccess="{!c.handleSaveSuccess}" />
  • The below controller handler will invoke on the save button click. The force:recordSave event will be fire on saving
        component.find("edit").get("e.recordSave").fire();
  • handleSaveSuccess handler will be invoked after the record is saved and shows the toast notification to the user
    var toastEvent = $A.get("e.force:showToast");
            toastEvent.setParams({
                "title": "Success!",
                "message": "The record has been updated successfully."
            });
            toastEvent.fire();
            $A.get('e.force:refreshView').fire(); 
            $A.get('e.force:closeQuickAction').fire();

     

Create a quick action as shown below and add this action to page layout.

After you click the Edit Contact you can see the model open in edit mode