Saving a Record

To save a record using Lightning Data Service, call saveRecord on the force:recordData component, and pass in a callback function to be invoked after the save operation completes.

The Lightning Data Service save operation is used in two cases.

To save changes to an existing record
To create and save a new record

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

To load a record that might be updated, set the force:recordData tag’s mode attribute to “EDIT”. Other than explicitly setting the mode, loading a record for editing is the same as loading it for any other purpose.

Since Lightning Data Service records are shared across multiple components, loading records load the component with a copy of the record instead of a direct reference. If a component loads a record in VIEW mode, Lightning Data Service will automatically overwrite that copy with a newer copy of the record when the record is changed. If a record is loaded in EDIT mode, the record is not updated when the record is changed. This prevents unsaved changes from appearing in components that reference the record while the record is being edited, and prevents any edits in progress from being overwritten. Notifications are still sent in both modes.

Note

Call saveRecord to Save Record Changes

To perform the save operation, call saveRecord on the force:recordData component from the appropriate controller action handler. saveRecord 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.

Saving a Record

The following example illustrates the essentials of saving a record using Lightning Data Service. It’s intended for use on a record page. The record ID is supplied by the implicit recordId attribute added by the force:hasRecordId interface.

ldsSave.cmp

1<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
2
3    <aura:attribute name="record" type="Object"/>
4    <aura:attribute name="simpleRecord" type="Object"/>
5    <aura:attribute name="recordError" type="String"/>
6
7    <force:recordData aura:id="recordHandler"
8      recordId="{!v.recordId}"
9      layoutType="FULL"
10      targetRecord="{!v.record}"
11      targetFields="{!v.simpleRecord}"
12      targetError="{!v.recordError}"
13      mode="EDIT"
14      recordUpdated="{!c.handleRecordUpdated}"
15      />
16
17    <!-- Display a lightning card with details about the record -->
18    <div class="Record Details"> 
19        <lightning:card iconName="standard:account" title="{!v.simpleRecord.Name}" >
20            <div class="slds-p-horizontal--small">
21                <p class="slds-text-heading--small">
22                    <lightning:formattedText title="Billing State" value="{!v.simpleRecord.BillingState}" /></p>
23                <p class="slds-text-heading--small">
24                    <lightning:formattedText title="Billing City" value="{!v.simpleRecord.BillingCity}" /></p>
25            </div>
26        </lightning:card>
27    </div>
28
29    <!-- Display an editing form -->
30    <div class="Record Details">
31        <lightning:card iconName="action:edit" title="Edit Account">
32            <div class="slds-p-horizontal--small">
33               <lightning:input label="Account Name" value="{!v.simpleRecord.Name}"/>
34               <br/>
35               <lightning:button label="Save Account" variant="brand" onclick="{!c.handleSaveRecord}" />
36            </div>
37        </lightning:card>
38    </div>
39    
40    <!-- Display Lightning Data Service errors, if any -->
41    <aura:if isTrue="{!not(empty(v.recordError))}">
42        <div class="recordError">
43            {!v.recordError}</div>
44    </aura:if>
45</aura:component>

If you’re using this component with an object that has a first and last name, such as contacts, create a separate lightning:input component for {!v.simpleRecord.FirstName} and {!v.simpleRecord.LastName}.

Note

This component loads a record using force:recordData set to EDIT mode, and provides a form for editing record values. (In this simple example, just the record name field.)

ldsSaveController.js

1({
2    handleSaveRecord: function(component, event, helper) {
3        component.find("recordHandler").saveRecord($A.getCallback(function(saveResult) {
4            // NOTE: If you want a specific behavior(an action or UI behavior) when this action is successful 
5            // then handle that in a callback (generic logic when record is changed should be handled in recordUpdated event handler)
6            if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
7                // handle component related logic in event handler
8            } else if (saveResult.state === "INCOMPLETE") {
9                console.log("User is offline, device doesn't support drafts.");
10            } else if (saveResult.state === "ERROR") {
11                console.log('Problem saving record, error: ' + JSON.stringify(saveResult.error));
12            } else {
13                console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
14            }
15        }));
16    },
17
18    /**
19     * Control the component behavior here when record is changed (via any component)
20     */
21    handleRecordUpdated: function(component, event, helper) {
22        var eventParams = event.getParams();
23        if(eventParams.changeType === "CHANGED") {
24            // get the fields that changed for this record
25            var changedFields = eventParams.changedFields;
26            console.log('Fields that are changed: ' + JSON.stringify(changedFields));
27            // record is changed, so refresh the component (or other component logic)
28            var resultsToast = $A.get("e.force:showToast");
29            resultsToast.setParams({
30                "title": "Saved",
31                "message": "The record was updated."
32            });
33            resultsToast.fire();
34
35        } else if(eventParams.changeType === "LOADED") {
36            // record is loaded in the cache
37        } else if(eventParams.changeType === "REMOVED") {
38            // record is deleted and removed from the cache
39        } else if(eventParams.changeType === "ERROR") {
40            // there’s an error while loading, saving or deleting the record
41        }
42    }
43})

The handleSaveRecord action here is a minimal version. There’s no form validation or real error handling. Whatever is entered in the form is attempted to be saved to the record.

Lightning Components Developer Guide

Saving a Record

Load a Record in EDIT Mode

Call saveRecord to Save Record Changes

Saving a Record

See Also