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.
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId"> <aura:attribute name="recordError" type="String" access="private"/> <force:recordData aura:id="recordHandler" recordId="{!v.recordId}" fields="Id" targetError="{!v.recordError}" recordUpdated="{!c.handleRecordUpdated}" /> <!-- Display Lightning Data Service errors, if any --> <aura:if isTrue="{!not(empty(v.recordError))}"> <div class="recordError"> <ui:message title="Error" severity="error" closable="true"> {!v.recordError} </ui:message> </div> </aura:if> <div class="slds-form-element"> <lightning:button label="Delete Record" onclick="{!c.handleDeleteRecord}" variant="brand" /> </div> </aura:component>
({ handleDeleteRecord: function(component, event, helper) { component.find("recordHandler").deleteRecord($A.getCallback(function(deleteResult) { // NOTE: If you want a specific behavior(an action or UI behavior) when this action is successful // then handle that in a callback (generic logic when record is changed should be handled in recordUpdated event handler) if (deleteResult.state === "SUCCESS" || deleteResult.state === "DRAFT") { // record is deleted console.log("Record is deleted."); } else if (deleteResult.state === "INCOMPLETE") { console.log("User is offline, device doesn't support drafts."); } else if (deleteResult.state === "ERROR") { console.log('Problem deleting record, error: ' + JSON.stringify(deleteResult.error)); } else { console.log('Unknown problem, state: ' + deleteResult.state + ', error: ' + JSON.stringify(deleteResult.error)); } })); }, /** * Control the component behavior here when record is changed (via any component) */ handleRecordUpdated: function(component, event, helper) { var eventParams = event.getParams(); if(eventParams.changeType === "CHANGED") { // record is changed } else if(eventParams.changeType === "LOADED") { // record is loaded in the cache } else if(eventParams.changeType === "REMOVED") { // record is deleted, show a toast UI message var resultsToast = $A.get("e.force:showToast"); resultsToast.setParams({ "title": "Deleted", "message": "The record was deleted." }); resultsToast.fire(); } else if(eventParams.changeType === "ERROR") { // there’s an error while loading, saving, or deleting the record } } })