Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

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