Lightning web component deleteRecord function
Let us discuss here how to use lightning/uiRecordApi modules. This module includes wire adapters to record data and get default values to create records. It also includes JavaScript APIs to create, delete, update, and refresh records. one of the most of important function is deleteRecord that will be used to delete a record in the database without using apex class.
Syntax
|
1 2 |
import { deleteRecord } from 'lightning/uiRecordApi'; deleteRecord(recordId: Record): Promise<void> |
-
recordId—(Required) The ID of the record to delete.
|
1 |
sfdx force:lightning:component:create --type lwc -n deleterecord -d force-app/main/default/lwc |
Use this markup in deleterecord.html
|
1 2 3 4 5 6 |
<template> <lightning-card title="Delete Record" icon-name="standard:record"> Record Id to Delete : - {recordId} <lightning-button name="delete" label="delete" onclick={deleteAccount} data-recordid={recordId}></lightning-button> </lightning-card> </template> |
Use this deleterecord.js code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
import { LightningElement, api } from 'lwc'; import { getRecord } from 'lightning/uiRecordApi'; import { deleteRecord } from 'lightning/uiRecordApi'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; export default class Deleterecord extends LightningElement { @api recordId; deleteAccount(event) { const recordId = event.target.dataset.recordid; console.log('delete account' + recordId); deleteRecord(recordId) .then(() => { this.dispatchEvent( new ShowToastEvent({ title: 'Success', message: 'Record Is Deleted', variant: 'success', }), ); }) .catch(error => { this.dispatchEvent( new ShowToastEvent({ title: 'Error While Deleting record', message: error.message, variant: 'error', }), ); }); } } |
Use this deleterecord.js-meta.xml file
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__RecordPage</target> </targets> </LightningComponentBundle> |
Push changes to scratch org.
Push changes to scratch using this command and add this component to record page using lighting app builder
|
1 |
sfdx force:source:push |
Add the Delete Record component to Salesforce record page using app builder and you can able to see the delete button as shown below.
Understand the code
Import deleteRecord function from lightning/uiRecordApi modules .
|
1 2 3 |
import { deleteRecord } from 'lightning/uiRecordApi'; |
invoke the deleteRecord function on the button click as shown below. This method will show the Toast message once the record is deleted or fail to delete.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const recordId = event.target.dataset.recordid; console.log('delete account' + recordId); deleteRecord(recordId) .then(() => { this.dispatchEvent( new ShowToastEvent({ title: 'Success', message: 'Record Is Deleted', variant: 'success', }), ); }) .catch(error => { this.dispatchEvent( new ShowToastEvent({ title: 'Error While Deleting record', message: error.message, variant: 'error', }), ); }); } |
