Editing a Record

Edit a Record using lightning:recordForm

To edit a record using lightning:recordForm, provide the record ID and object API name. When you provide a record ID, view mode is the default mode of this component, which displays fields with edit icons. If you click an edit icon, all fields in the form become editable.

This example creates a form that lets users update fields on an account record when an edit icon is clicked. It displays the fields from the compact layout in two columns. Add this example component to an account record page. The component inherits the record ID via the force:hasRecordId interface.

1<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId">
2    <lightning:recordForm 
3        recordId = "{!v.recordId}"
4        objectApiName="Account"
5        layoutType="Compact"
6        columns="2" />
7</aura:component>

When the record is saved successfully, all components that contain the updated field values are refreshed automatically.

Add mode="edit" to transform the form to one that displays input fields for editing. The form displays a Save button that updates the record, and a Cancel button that reverts changes.

1<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId">
2    <lightning:recordForm
3        recordId = "{!v.recordId}"
4        objectApiName="Account"
5        layoutType="Compact"
6        mode="edit" />
7</aura:component>

Customize Error Handling in lightning:recordForm

To customize the behavior when a record is saved successfully, use the onsuccess event handler. Errors are automatically handled and displayed. To customize them, use the onerror event handler.

1<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId">
2
3    <!-- Displays a toast notification -->
4    <lightning:notificationsLibrary aura:id="notifLib" />
5    <lightning:recordForm
6        recordId = "{!v.recordId}"
7        objectApiName="Account"
8        layoutType="Compact"
9        mode="edit" 
10        onsuccess="{!c.handleSuccess}"
11        onerror="{!c.handleError}"/>
12</aura:component>

A toast notification is displayed when a record is saved successfully or when an error is encountered during save.

1({
2    handleSuccess: function (cmp, event, helper) {
3        cmp.find('notifLib').showToast({
4            "title": "Record updated!",
5            "message": "The record "+ event.getParam("id") + " has been updated successfully.",
6            "variant": "success"
7        });
8    },
9
10    handleError: function (cmp, event, helper) {
11        cmp.find('notifLib').showToast({
12            "title": "Something has gone wrong!",
13            "message": event.getParam("message"),
14            "variant": "error"
15        });
16    }
17})

Edit a Record with a Custom Layout Using lightning:recordEditForm

To provide a custom layout for your form fields, use the lightning:recordEditForm component.

Pass in the fields to lightning:inputField, which displays an input control based on the record field type.

This example displays a form with two fields using a custom layout. Add this example component to an account record page.

1<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId">
2    <lightning:recordEditForm 
3        recordId="{!v.recordId}"
4        objectApiName="Account">
5        <lightning:messages />
6            <div class="slds-grid">
7                <div class="slds-col slds-size_1-of-2">
8                    <lightning:inputField fieldName="Name"/>
9                </div>
10                <div class="slds-col slds-size_1-of-2">
11                    <lightning:inputField fieldName="Industry"/>
12                </div>
13            </div>
14        <lightning:button class="slds-m-top_small" type="submit" label="Create new" />
15    </lightning:recordEditForm>
16</aura:component>

When a server error is encountered, lightning:recordEditForm displays an error message above the form fields using the lightning:messages component. Alternatively, provide your own error handling using the onerror event handler.

Another feature that lightning:recordEditForm provides that’s not available with lightning:recordForm is displaying the form with custom field values, as shown in the next section.

Prepopulate Field Values

To provide a custom field value when the form displays, use the value attribute on lightning:inputField. If you're providing a record ID, the value returned by the record on load does not override this custom value.

Alternatively, set the field value using this syntax.

1cmp.find("nameField").set("v.value", "My New Account Name");

If you require more customization when creating a record than what lightning:recordForm and lightning:recordEditForm allow, consider using force:recordData.

Edit a Record via a Custom User Interface Using force:recordData

To save changes to an existing record, load the record in EDIT mode and call saveRecord on the force:recordData component.

To save a new record, and thus create it, create the record from a record template, as described in Creating a Record. Then call saveRecord on the force:recordData component.

Load a Record in EDIT Mode

Call saveRecord to Save Record Changes

To perform the save operation, call saveRecord on the force:recordData component from the appropriate controller action handler. The saveRecord method takes one argument—a callback function to be invoked when the operation completes. This callback function receives a SaveRecordResult as its only parameter. SaveRecordResult includes a state attribute that indicates success or error, and other details you can use to handle the result of the operation.