Delete Record in LWC using deleteRecord of uiRecordApi

In this post, we will implement the functionality to delete records in LWC using deleteRecord of uiRecordApi module. Let’s hop into the implementation.

Implementation

In this implementation, we will display a list of Opportunities with the Delete button for each record. Once the Delete button is pressed, the respective Opportunity will be deleted from Salesforce.

First, create a Lightning Web Component to display the list of Opportunities. Make an Imperative call to Apex to get the list of Opportunities. Check this post to know how to call the Apex method from Lightning Web Component, as this post won’t explain it. You can also use the Wire Service to make a call to the Apex method. Both of these methods are explained in the linked post. So I recommend to check it. Use lightning-card to display each Opportunity with the Delete button at the footer of each card.

deleteRecord.html

<template>
    <lightning-layout>
        <div class="flex-container">
            <template for:each={lstOppotunities} for:item="opp">
                <lightning-layout-item size="4" padding="around-small" key={opp.Id}>
                    <lightning-card  title={opp.Name}>
                        <p class="slds-p-horizontal_small">Stage: {opp.StageName}</p>
                        <p class="slds-p-horizontal_small">Amount: 
                            <lightning-formatted-number value={opp.Amount} format-style="currency" currency-code="USD">
                            </lightning-formatted-number></p>
                        </p>
                        <p slot="footer">
                            <lightning-button label="Delete" variant="destructive" slot="actions"
                                value={opp.Id} onclick={deleteOpportunity}></lightning-button>
                        </p>
                    </lightning-card>
                </lightning-layout-item>
            </template>
        </div>
    </lightning-layout>
</template>

OpportunityController.apxc

public with sharing class OpportunityController {
    
    @AuraEnabled
    public static List<Opportunity> fetchOpportunities(){
        return [SELECT Id, Name, AccountId, TotalOpportunityQuantity, Amount, StageName FROM Opportunity LIMIT 9];
    }
}

Delete Record in LWC

To delete records in LWC, we first need to import fetchOpportunities method from Apex Controller using @salesforce/apex/ module in JS Controller. Then, include deleteRecord method from lightning/uiRecordApi module. In Constructor, call the Apex method to get the list of Opportunities to display on UI using lstOppotunities property.

deleteOpportunity() method will be called once the Delete button is pressed on any of the Opportunity. In this method, get the Id of Opportunity and call the deleteRecord()with Id of Opportunity as a parameter. deleteRecord() returns the Promise. If it is successful, show the Success Toast message. Check this post to know how to display Toast messages in Lightning Web Component. Once the record is deleted, we are also deleting a record from UI by removing the record from lstOppotunities. If we use the Wire Service to fetch the records, we can use refreshApex(this.wireProperty) to refresh the records in lstOppotunities. If the delete operation is not successful, handle it in the catch block.

Also Read:

• Update Record in LWC using updateRecord of uiRecordApi

deleteRecord.js

import { LightningElement, track } from 'lwc';
import getOpportunities from '@salesforce/apex/OpportunityController.fetchOpportunities';
import { deleteRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class DeleteRecord extends LightningElement {
    @track lstOppotunities = [];
    constructor(){
        super();
        // Imperative Apex call to get the list of Opportunities
        getOpportunities({}).then(response => {
            this.lstOppotunities = response;
        }).catch(error => {
            console.log('Error: ' +error.body.message);
        });
    }
    deleteOpportunity(event){
        let deleteId = event.target.value;
        deleteRecord(deleteId)
        .then(() => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Record deleted successfully',
                    variant: 'success'
                })
            );
            // To delete the record from UI
            for(let opp in this.lstOppotunities){
                if(this.lstOppotunities[opp].Id == deleteId){
                    this.lstOppotunities.splice(opp, 1);
                    break;
                }
            }
        })
        .catch(error => {
            console.log(error);
        });
    }
}

Also Read:

• Get Record in LWC using getRecord of uiRecordApi
• Create Record in LWC using createRecord of uiRecordApi

That is all. This is how we can delete records in LWC using deleteRecord of uiRecordApi module. If you don’t want to miss new Implementations, please Subscribe here.

If you want to check more implementations using Lightning Web Components, you can check it here.

Check official Salesforce documentation to know more about deleteRecord of uiRecordApi here.