Hey guys, today in this post we are going to learn about Deleting multiple records dynamically functionality with checkbox on delete button in lightning web component Salesforce — LWC.
Files we used in this post example
lwdDeleteMultipleRecord.html | Lightning Web Component HTML | Template HTML file for used to write HTML element for user interface. |
lwdDeleteMultipleRecord.js | Lightning Web Component JavaScript | It is holding onclick functionality for delete the selected record using checkbox |
lwdDeleteMultipleRecord.js-meta.xml | XML Meta File | It is used for where this lightning web component you want to exposed. |
lwcAppExampleApex.cls | Apex Controller | It is used for Fetching Contact records through @wire Decorators and delete the record from database. |
Live Demo
Other related post that would you like to learn in LWC
Step 1:- Create Apex Controller : lwcAppExampleApex.cls
SFDX:Create Apex Class >> New >> lwcAppExampleApex.cls
lwcAppExampleApex.cls [Apex Class]
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 |
public with sharing class lwcAppExampleApex { //delete multiple contact record in LWC @AuraEnabled(cacheable=true) public static List<Contact> fetchContactRecord(){ List<Contact> conList = [Select Id, FirstName, LastName, Email, Phone From Contact Order By createdDate desc Limit 10 ]; return conList; } @AuraEnabled public static List<Contact> deleteMultipleContactRecord(List<String> conObj){ List<Contact> conObjItem = new List<Contact>(); List<Contact> conObjList = [Select Id, Name From Contact Where Id IN:conObj]; for(Contact con:conObjList){ conObjItem.add(con); } if(conObjItem.size()>0){ try{ delete conObjItem; } catch (Exception exp) { throw new AuraHandledException(exp.getMessage()); } } return fetchContactRecord(); } } |
Step 2:- Create Lightning Web Component : lwdDeleteMultipleRecord.html
SFDX:Lightning Web Component >> New >> lwdDeleteMultipleRecord.html
lwdDeleteMultipleRecord.html [Lightning Web Component HTML]
1 2 3 4 5 6 7 8 9 10 11 |
<template> <lightning-card title="Deleting Multiple Contact Records Using Checkbox in LWC" icon-name="custom:custom14"> <lightning-datatable data={wireContact.data} columns={columns} key-field="Id" onrowselection={getSelectedIdAction} > </lightning-datatable> <div slot="footer"> <lightning-button title="Delete" label="Delete Selected Row" size="small" variant="brand" icon-name="utility:delete" icon-position="right" onclick={deleteContactRowAction}></lightning-button> </div> </lightning-card> </template> |
Step 3:- Create Lightning Web Component : lwdDeleteMultipleRecord.js
SFDX:Lightning Web Component >> New >> lwdDeleteMultipleRecord.js
lwdDeleteMultipleRecord.js [LWC JavaScript File]
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 43 44 45 46 47 48 49 50 51 52 53 54 55 |
import { LightningElement, wire,api, track } from 'lwc'; import fetchContactRecord from '@salesforce/apex/lwcAppExampleApex.fetchContactRecord'; import deleteMultipleContactRecord from '@salesforce/apex/lwcAppExampleApex.deleteMultipleContactRecord'; import { refreshApex } from '@salesforce/apex'; import {ShowToastEvent} from 'lightning/platformShowToastEvent'; export default class LwdDeleteMultipleRecord extends LightningElement { @api columns =[ { label: 'First Name', fieldName: 'FirstName', type:'text'}, { label: 'Last Name', fieldName: 'LastName',type:'text' }, { label: 'Email', fieldName: 'Email', type:'Email'} ]; @wire (fetchContactRecord) wireContact; @api selectedContactIdList=[]; @track errorMsg; getSelectedIdAction(event){ const selectedContactRows = event.detail.selectedRows; window.console.log('selectedContactRows# ' + JSON.stringify(selectedContactRows)); this.selectedContactRows=[]; for (let i = 0; i<selectedContactRows.length; i++){ this.selectedContactIdList.push(selectedContactRows[i].Id); } // window.console.log('selectedContactRows1 ' + this.selectedContactRows + selectedContactRows.length ); } deleteContactRowAction(){ deleteMultipleContactRecord({conObj:this.selectedContactIdList}) .then(()=>{ this.template.querySelector('lightning-datatable').selectedContactRows=[]; const toastEvent = new ShowToastEvent({ title:'Success!', message:'Record deleted successfully', variant:'success' }); this.dispatchEvent(toastEvent); return refreshApex(this.wireContact); }) .catch(error =>{ this.errorMsg =error; window.console.log('unable to delete the record due to ' + JSON.stringify(this.errorMsg)); }); } } |
Step 4:- Create Lightning Web Component : lwdDeleteMultipleRecord.js-meta.xml
SFDX:Lightning Web Component >> New >> lwdDeleteMultipleRecord.js-meta.xml
lwdDeleteMultipleRecord.js-meta.xml [LWC Meta Data XML]
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle> |
Further post that would you like to learn in LWC