EP-07 | Delete Records without using Server Side Code in LWC | LWC Stack ☁️⚡️

Kapil May 30, 2021


LWC Stack is Lightning Web Component tutorial series by Salesforce MVP Kapil Batra. In this series you will find LWC tutorials from beginner to intermediate level.

So if you are working on it or planning to learn LWC then this video series is for you. Let's learn and grow together ! Please check complete code below from LWC Stack EP-07

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
    <lightning-card title="Delete Records without server-side script" icon-name="utility:user">
        <template if:true={accounts}>
            <div class="slds-var-m-around_medium">
                <template for:each={accounts} for:item="acc">
                    <lightning-layout key={acc.Id} class="slds-var-m-vertical_x-small">
                        <lightning-layout-item flexibility="grow" style="min-width:350px" >
                            {acc.Name}
                        </lightning-layout-item>
                        <lightning-layout-item flexibility="grow">
                            <lightning-button-icon icon-name="utility:delete" onclick={deleteAccount} data-recordid={acc.Id}>

                            </lightning-button-icon>
                        </lightning-layout-item>
                    </lightning-layout>
                </template>

            </div>
        </template>
    </lightning-card>
</template>
JavaScript
 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
import {LightningElement, wire } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import {refreshApex} from '@salesforce/apex';
import {deleteRecord} from 'lightning/uiRecordApi';
import getAccountList from '@salesforce/apex/AccountController.getAccList';

export default class DeleteAccounts extends LightningElement {
    accounts;
    error;
    wiredAccountsResult;

    @wire(getAccountList)
    wiredAccounts(result){
        this.wiredAccountsResult = result;
        if(result.data){
            this.accounts = result.data;
            this.error = undefined;

        } else if(result.error){
            this.error = result.error;
            this.accounts = undefined;
        }
    }

    deleteAccount(event){
        const recordId = event.target.dataset.recordid;
        deleteRecord(recordId)
        .then(()=>{
this.dispatchEvent(
    new ShowToastEvent({
        title : 'Success',
        message : 'Account Deleted',
        variant : 'success'
    })
);
        return refreshApex(this.wiredAccountsResult);
        })
        .catch((error)=>{
            this.dispatchEvent(
                new ShowToastEvent({
                    title : 'Error',
                    message : 'Error Deleting record',
                    variant : 'error'
                })
            );
        });
    }
}
APEX
1
2
3
4
5
6
public with sharing class AccountController{
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccList(){
        return [SELECT Id, Name, Phone FROM ACCOUNT ORDER BY CreatedDate desc Limit 10];
    }
}


Output


Checkout complete tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)
Tags:

Post a Comment

4 Comments

  1. UnknownDecember 3, 2021 at 5:35 AM

    Apex Class is missing here, Can you please add the code

    ReplyDelete
    Replies
    1. KapilDecember 3, 2021 at 6:58 PM

      Added it, please check before output !

      Delete
    2. UnknownDecember 6, 2021 at 7:43 AM

      Thanks Kapil! Lovely work. This series is my LWC recipes to follow :)

      Delete
    3. KapilDecember 7, 2021 at 10:35 AM

      Thanks for the feedback, I really appreciate it. Thanks for being an consistent viewer :)

      Delete