To delete a record using Lightning Data Service, call deleteRecord on the force:recordData component, and pass in a callback function to be invoked after the delete operation completes. The form-based components, such as lightning:recordForm, don’t currently support deleting a record.
Delete operations with Lightning Data Service are straightforward. The force:recordData tag can include minimal details. If you don’t need any record data, set the fields attribute to just Id. If you know that the only operation is a delete, any mode can be used.
To perform the delete operation, call deleteRecord on the force:recordData component from the appropriate controller action handler. deleteRecord 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.
The following example illustrates the essentials of deleting a record using Lightning Data Service. This component adds a Delete Record button to a record page, which deletes the record being displayed. The record ID is supplied by the implicit recordId attribute added by the force:hasRecordId interface.
ldsDelete.cmp
1<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
2
3 <aura:attribute name="recordError" type="String" access="private"/>
4
5 <force:recordData aura:id="recordHandler"
6 recordId="{!v.recordId}"
7 fields="Id"
8 targetError="{!v.recordError}"
9 recordUpdated="{!c.handleRecordUpdated}" />
10
11 <!-- Display the delete record form -->
12 <div class="Delete Record">
13 <lightning:card iconName="action:delete" title="Delete Record">
14 <div class="slds-p-horizontal--small">
15 <lightning:button label="Delete Record" variant="destructive" onclick="{!c.handleDeleteRecord}"/>
16 </div>
17 </lightning:card>
18 </div>
19
20 <!-- Display Lightning Data Service errors, if any -->
21 <aura:if isTrue="{!not(empty(v.recordError))}">
22 <div class="recordError">
23 {!v.recordError}</div>
24 </aura:if>
25</aura:component>Notice that the force:recordData tag includes only the recordId and a nearly empty fields list—the absolute minimum required. If you want to display record values in the user interface, for example, as part of a confirmation message, define the force:recordData tag as you would for a load operation instead of this minimal delete example.
ldsDeleteController.js
1({
2 handleDeleteRecord: function(component, event, helper) {
3 component.find("recordHandler").deleteRecord($A.getCallback(function(deleteResult) {
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 (deleteResult.state === "SUCCESS" || deleteResult.state === "DRAFT") {
7 // record is deleted
8 console.log("Record is deleted.");
9 } else if (deleteResult.state === "INCOMPLETE") {
10 console.log("User is offline, device doesn't support drafts.");
11 } else if (deleteResult.state === "ERROR") {
12 console.log('Problem deleting record, error: ' + JSON.stringify(deleteResult.error));
13 } else {
14 console.log('Unknown problem, state: ' + deleteResult.state + ', error: ' + JSON.stringify(deleteResult.error));
15 }
16 }));
17 },
18
19 /**
20 * Control the component behavior here when record is changed (via any component)
21 */
22 handleRecordUpdated: function(component, event, helper) {
23 var eventParams = event.getParams();
24 if(eventParams.changeType === "CHANGED") {
25 // record is changed
26 } else if(eventParams.changeType === "LOADED") {
27 // record is loaded in the cache
28 } else if(eventParams.changeType === "REMOVED") {
29 // record is deleted, show a toast UI message
30 var resultsToast = $A.get("e.force:showToast");
31 resultsToast.setParams({
32 "title": "Deleted",
33 "message": "The record was deleted."
34 });
35 resultsToast.fire();
36
37 } else if(eventParams.changeType === "ERROR") {
38 // there’s an error while loading, saving, or deleting the record
39 }
40 }
41})When the record is deleted, navigate away from the record page. Otherwise, you see a “record not found” error when the component refreshes. Here the controller uses the objectApiName property in the SaveRecordResult provided to the callback function, and navigates to the object home page.
See Also
j