Delete selected record with confirmation message in Lightning Component

//Apex Controller:- accListClassDetails
public class accListClassDetails
{
@AuraEnabled
public static wrapperClassAccnt getAccounts()
{
List<Account> accList= [SELECT Id,Name,Phone,Industry from Account order by createdDate desc Limit 10];
wrapperClassAccnt accntobj=new wrapperClassAccnt();
accntobj.lstaccnt=accList;
return accntobj;
}

@AuraEnabled
public static string delSelectRecrds(List<string> lstselectId)
{
string msg='';
system.debug('<<<<<lstselectId>>>'+lstselectId);
List<Account> lstaccnt = [SELECT Id FROM Account WHERE Id IN: lstselectId ];
system.debug('<<<<<lstaccnt>>>'+lstaccnt);
try
{
if(lstaccnt.size()>0)
{
delete lstaccnt;
msg='success';
}
}
catch(Exception ex)
{
msg=ex.getMessage();
}
return msg;
}

// wrapper or Inner class with @AuraEnabled {get;set;} properties*
public class wrapperClassAccnt
{
@AuraEnabled
public List<Account> lstaccnt{get;set;}
}
}
<!-- Lightning Component accListClassDetailsComponent -->
<aura:component controller="accListClassDetails">
<aura:attribute name="counter" default="0" type="integer"/>
<aura:attribute name="accntTOTval" type="Integer" />
<aura:attribute name="accntDetails" type="object" />
<aura:handler name="init" value="{!this}" action="{!c.accountList}"></aura:handler>
<h1 ><b>Total Count:</b>{!v.counter}</h1>
<div class="slds-grid">

<div class="slds-col slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_8-of-12">
</div>

<div class="slds-col slds-size_1-of-8 allBtn">
<lightning:button label="Delete Selected"
iconName="utility:delete"
iconPosition="left"
variant="destructive"
onclick="{!c.deleteSlctd}">
</lightning:button>
</div>
</div>


<table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
<thead>
<tr class="slds-text-heading--label">
<th scope="row" style="width: 50px;" class="slds-text-align--right">
<ui:inputCheckbox aura:id="cbox" class="cBox" change="{!c.selectAll}"/></th>
<th scope="row"><div class="slds-truncate" title="ID">ID</div></th>
<th scope="row"><div class="slds-truncate" titile="NAME">Name</div></th>
<th scope="row"><div class="slds-truncate" title="INDUSTRY">Industry</div></th>
<th scope="row"><div class="slds-truncate" title="PHONE">Phone</div></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accntDetails.lstaccnt}" var="a">
<tr>
<td>
<ui:inputCheckbox aura:id="cboxRow" text="{!a.Id}" class="cBox" change="{!c.changeSelectAll}"/>
</td>
<th><div class="slds-truncate">{!a.Id}</div></th>
<td><div class="slds-truncate">{!a.Name}</div></td>
<td><div class="slds-truncate">{!a.Industry}</div></td>
<td><div class="slds-truncate">{!a.Phone}</div></td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:component>
// Controller.js
({

accountList : function(component, event, helper)
{
helper.getAccountList(component, event, helper);
},
selectAll: function(component,event, helper)
{
debugger;
var slctCheck = event.getSource().get("v.value");
var getCheckAllId = component.find("cboxRow");

if (slctCheck == true)
{
for (var i = 0; i < getCheckAllId.length; i++)
{
var chkval=component.find("cboxRow")[i].get("v.value");
if(chkval==false)
{
component.find("cboxRow")[i].set("v.value", true);
component.set('v.counter',component.get('v.counter')+1);
var TotcountVal=component.get('v.counter');
}
else
{
component.find("cboxRow")[i].set("v.value", true);
}

}
}
else
{
for (var i = 0; i < getCheckAllId.length; i++)
{
component.find("cboxRow")[i].set("v.value", false);
component.set('v.counter',component.get('v.counter')-1);
var TotcountVal=component.get('v.counter');
}
}
},
changeSelectAll:function(component,event, helper)
{
debugger;

var accntTOTval = component.get("v.accntTOTval"); //here get component Attributes Value.
var slctCheckRow = event.getSource().get("v.value");
//var getCheckAllId = component.find("cbox");

if(slctCheckRow == false)
{
component.find("cbox").set("v.value", false);
component.set('v.counter',component.get('v.counter')-1); //Here use Counter --
var TotcountVal=component.get('v.counter');
}
else if(slctCheckRow == true)
{
component.set('v.counter',component.get('v.counter')+1); //Here use Counter ++
var TotcountVal=component.get('v.counter');
}
if(TotcountVal==accntTOTval)
{
component.find("cbox").set("v.value", true);
}

},
deleteSlctd : function(component,event,helper)
{


var getCheckAllId = component.find("cboxRow");
var selctedRec = new Array(); // here, declare array variable.
for (var i = 0; i < getCheckAllId.length; i++)
{

if(getCheckAllId[i].get("v.value") == true )
{
selctedRec.push(getCheckAllId[i].get("v.text"));
}
}
if(selctedRec.length>0)
{
helper.deleteSelected(component,event,selctedRec);
}
else
{
alert('Select atleast one record!!!');
}

}


})
//Helper.JS

({
getAccountList : function(component, event, helper)
{
debugger;
var action = component.get("c.getAccounts");
action.setCallback(this, function(response)
{
debugger;
var state = response.getState();
if (state == "SUCCESS")
{
var accVal=response.getReturnValue();
var totval=accVal.lstaccnt.length;
component.set("v.accntTOTval", totval);
component.set("v.accntDetails", accVal);
}
});
$A.enqueueAction(action);
},
deleteSelected: function(component, event, selectedIDs)
{
debugger;
var cnfrmStatus=this.ConfirmDelete();
if(cnfrmStatus==false)
return;
var action = component.get("c.delSelectRecrds"); //here, call apex class method
action.setParams
({
"lstselectId": selectedIDs //Here,Pass Array of SelectedIds.
});
action.setCallback(this, function(response)
{
debugger;
var state = response.getState();
if(state == "SUCCESS")
{

var delVal=response.getReturnValue();
if(delVal=='success')
{
alert('Records has been Deleted Successfully!!!');
}
else
{
alert('Some Error!!!');
}
}
else if (state=="ERROR")
{
alert(action.getError()[0].message);
console.log(action.getError()[0].message);
}
window.location.reload(); //After Delete Refresh Component
});
$A.enqueueAction(action);

},
ConfirmDelete: function()
{
var cnfrmStatus = confirm("Are you sure you want to delete?");
if (cnfrmStatus)
return true;
else
return false;
}

})
//Lightning Application:-AccListDetailsApplication

<aura:application extends="force:slds" >
<c:accListClassDetailsComponent/>
</aura:application>

Leave a Reply