Hey guys, today in this post we are going to learn about How to delete selected record on click button using deleteRecord of uiRecordApi in Lightning web component -LWC
Files we used in this post example:-
deleteContactLwc.html | Lightning Web Component HTML | Template HTML file for used to write HTML element for user interface.. |
deleteContactLwc.js | Lightning Web Component JavaScript | It is holding deleteButton function that is deleting the record from database. |
deleteContactLwc.js-meta.xml | XML Meta File | It is used for where this lightning web component you want to exposed. |
deleteContactLwc.css | Style CSS | It is used for alignment the table and button. |
lwcAppExampleApex.cls | Apex Controller | It is used for call apex @wire method in LWC Javascript file. |
- Don’t forget to check out:- Deleting multiple records dynamically with checkbox on delete button in LWC Click Here For More Information
Live Demo
Other related post that would you like to learn in Salesforce
Step 1:- Create Lightning Web Component : deleteContactLwc.html
SFDX:Lightning Web Component >> New >> deleteContactLwc.html
deleteContactLwc.html [Lightning Web Component HTML]
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 56 57 58 59 |
<template> <lightning-card title="Delete Contact Record in LWC" icon-name="custom:custom14"> <table border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;" class="tblColPad"> <tr> <th>First Name</th> <th>Last Name</th> <th>Email</th> <th> </th> </tr> <template for:each={getContact.data} for:item="conItem"> <tr key={conItem.Id}> <td>{conItem.FirstName}</td> <td>{conItem.LastName}</td> <td>{conItem.Email}</td> <td><lightning-button label="Delete" size="small" variant="neutral" onclick={handleContactDelete} value={conItem.Id} icon-name="utility:delete" icon-position="right" class="deleteButton"></lightning-button></td> </tr> </template> </table> <br/><br/> <!--Start RelatedTopics Section--> <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;"> <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p> <br/><br/> <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p> <div style="display:block; overflow:hidden;"> <div style="width: 50%; float:left; display:inline-block"> <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li> <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li> <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li> <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li> <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li> </ul> </div> <div style="width: 50%; float:left; display:inline-block"> <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li> <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li> <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li> <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li> <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li> </ul> </div> <div style="clear:both;"></div> <br/> <div class="youtubeIcon"> <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a> </div> </div> </div> <!--End RelatedTopics Section--> </lightning-card> </template> |
Step 2:- Create Lightning Web Component : deleteContactLwc.js
SFDX:Lightning Web Component >> New >> deleteContactLwc.js
deleteContactLwc.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 |
import { LightningElement, track, wire } from 'lwc'; import displayContactRecord from '@salesforce/apex/lwcAppExampleApex.displayContactRecord'; import {deleteRecord} from 'lightning/uiRecordApi'; import {refreshApex} from '@salesforce/apex'; import {ShowToastEvent} from 'lightning/platformShowToastEvent'; export default class DeleteContactLwc extends LightningElement { @wire (displayContactRecord) getContact; @track recordId; handleContactDelete(event){ this.recordId = event.target.value; //window.console.log('recordId# ' + this.recordId); deleteRecord(this.recordId) .then(() =>{ const toastEvent = new ShowToastEvent({ title:'Record Deleted', message:'Record deleted successfully', variant:'success', }) this.dispatchEvent(toastEvent); return refreshApex(this.getContact); }) .catch(error =>{ window.console.log('Unable to delete record due to ' + error.body.message); }); } } |
Step 3:- Create Lightning Web Component : deleteContactLwc.js-meta.xml
SFDX:Lightning Web Component >> New >> deleteContactLwc.js-meta.xml
deleteContactLwc.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> |
Step 4:- Create Lightning Web Component : deleteContactLwc.css
SFDX:Lightning Web Component >> New >> deleteContactLwc.css
deleteContactLwc.css [Style CSS]
1 2 |
table.tblColPad th{background:#ddd;} table.tblColPad th, table.tblColPad td {padding:5px !important;} |
Step 5:- 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 |
public with sharing class lwcAppExampleApex { @AuraEnabled(cacheable=true) public static List<Contact> displayContactRecord(){ List<Contact> conList = [Select Id, FirstName, LastName, Email From Contact limit 10]; return conList; } } |
Further post that would you like to learn in Salesforce
How do you delete a record in lightning component?
To delete a record using Lightning Data Service, call deleteRecord on the force:recordData component, and pass in a callback function to be invoked after the delete operation completes.
How do I delete a record in Servicenow?
If you want to delete one record at time then you use deleteRecord. it also depends where you want to execute, e.g. looping through a list of records that meet certain criteria and want to be tested further, you can put the gliderecord deleteRecord() within the while loop.
How do I delete multiple records of a custom object in Salesforce?
It is not possible to delete multiple records at once. Now the user can simply select all the required records and hit the “Delete Row” button to delete multiple records using a single click of the Delete button.
Related Topics | You May Also Like
- Your reaction of the article ▾
Thanks For Sharing The Amazing content. I Will also share with my friends. Great Content thanks a lot.
Nice Post
5 Internet Approval Site (Do Follow Backlinks)
nice tips
Very Nice Information
For More information
Awesom Info Keep It Up
information very good
Thanks for your generous sharing
Thank a lot for sharing this awesome info. I personally like the last point and follow me in my blog. I love to share on social media. keep it up!!!