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.

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

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

1edit : function(component, event, helper) {
2    var editRecordEvent = $A.get("e.force:editRecord");
3    editRecordEvent.setParams({
4        "recordId": component.get("v.recordId")
5    });
6    editRecordEvent.fire();
7}

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.

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.

Note

Lightning Aura Components Developer Guide

Displaying the Create and Edit Record Modals