Displaying the Create and Edit Record Modals

You can take advantage of built-in events to display modals that let you create or edit records via an Aura component.

The force:createRecord and force:editRecord events display a create record page and edit record page in a modal based on the default custom layout type for that object.

The following example contains a button that calls a client-side controller to display the edit record page. Add this example component to a record page to inherit the record ID via the force:hasRecordId interface.

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" >
    <aura:attribute name="recordId" type="String" />
    <lightning:button label="Edit Record" onclick="{!c.edit}"/>
</aura:component>

The client-side controller fires the force:editRecord event, which displays the edit record page for a given record ID.

edit : function(component, event, helper) {
    var editRecordEvent = $A.get("e.force:editRecord");
    editRecordEvent.setParams({
        "recordId": component.get("v.recordId")
    });
    editRecordEvent.fire();
}

Firing this event on a record page is similar to clicking the default Edit button on a record page’s header. Records updated using the force:editRecord event are persisted automatically.

note: If you don’t need the edit record page to display in a modal or if you need to specify a subset of fields, consider using Lightning Data Service via lightning:recordForm or lightning:recordEditForm instead.