Use deleteRecord in LWC Salesforce

Hello folks, today we will discuss How to use deleteRecord in LWC Salesforce. We use this UI Api to delete a record. Provide the record Id and delete the record. Here we will create a button and by click this button call the deleteRecord method for delete record.

Also, check this: Use getRecord in LWC Salesforce

Key Highlights :

1. import deleteRecord.
2. No use of Apex for delete record.

Syntax :

import { deleteRecord } from 'lightning/uiRecordApi';
deleteRecord(recordId: string): Promise<void>

Code :

deleteRecordLWC.HTML:

<template>
	<lightning-card title="Use deleteRecord in LWC Salesforce/ LDS delete Record" icon-name="standard:record">
		<div class="slds-m-around_medium">
			<lightning-button variant="destructive" label="Delete" icon-name="utility:delete" icon-position="right"
				onclick={handleDelete}>
			</lightning-button>
		</div>
	</lightning-card>
</template>

deleteRecordLWC.JS:

import { LightningElement, api, track } from 'lwc';
import { deleteRecord } from "lightning/uiRecordApi";
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class DeleteRecordLWC extends LightningElement {
    // provides recordId
    @track conId = '0036F00002T1b7RQAR';
    @track error;

    handleDelete(event) {
        deleteRecord(this.conId)
            .then(() => {
                this.showToast('Success!!', 'Record deleted successfully!!', 'success', 'dismissable');
            })
            .catch(error => {
                console.log(error);
                this.showToast('Error!!', error.body.message, 'error', 'dismissable');
            });
    }

    showToast(title, message, variant, mode) {
        const evt = new ShowToastEvent({
            title: title,
            message: message,
            variant: variant,
            mode: mode
        });
        this.dispatchEvent(evt);
    }
}

deleteRecordLWC.JS-meta.xml:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>55.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
	</targets>
</LightningComponentBundle>

Output :

Reference :

1. deleteRecord