Apex Code Development You need to sign in to do that
Don't have an account?
Varun MK Lightning Table Record Display
Hello, I have a requirement where if I press the delete button, the record should be hidden from the table. It should not be deleted from the Database as such.
COMPONENT:-
<aura:component controller='ProvideAccounts'>
<aura:handler name="init" value="{!this}" action="{!c.onLoad}"/>
<aura:attribute name="accounts" type="Account"/>
<H1>ACCOUNT LIST</H1>
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
<thead>
<tr class="slds-line-height_reset">
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate">Account Name</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Account Name">Account Number</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Close Date">Account Balance</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Stage">Account isActive ?</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Amount">Account Status</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Contact">Operations</div>
</th>
</tr>
</thead>
<!--
<center>
<table>
<tr>
<th><b>Account Name</b></th>
<th><b>Account Number</b></th>
<th><b>Account Balance</b></th>
<th><b>Account isActive ?</b></th>
<th><b>Account Status</b></th>
<th><b>Operations</b></th>
</tr><br/>
-->
<aura:iteration items="{!v.accounts}" var='a'>
<tr>
<td>{!a.Name} - {!a.Id} </td>
<td>{!a.AccountNumber}</td>
<td>{!a.Account_Balance__c}</td>
<td>{!a.Active__c}</td>
<td>{!a.Status__c}</td>
<button class="button" onclick="{!c.delAcc}" id="{!a.Id}" style="vertical-align:middle" type="button"><span>Delete </span></button>
</tr>
</aura:iteration>
</table>
<!-- </center> -->
</aura:component>
----------------
SERVER SIDE CONTORLLER :-
delAcc:function(component, event, helper){
alert('Are yu Sure about this ? If Yes Press "OK"')
console.log('INSIDE clientSideController DEL OP JS');
helper.deleteAcc(component,event);
}
----------------------
HELPER :-
deleteAcc : function(component,event) {
debugger;
var action = component.get("c.delAccount");
//console.log(cmp.getLocalId());
//console.log('Current Target Id :'+event.target.abc);
action.setParams({ accId:event.target.id });
action.setCallback(this,function(response){
component.set("v.accounts",response.getReturnValue());
})
$A.enqueueAction(action);
}
-------------------------
APEX CONTROLLER :-
public static List<Account> delAccount(Id accId){
try{
System.debug('INSIDE DelAccount method ServerSideController APEX');
Account dAcc = [SELECT Id
FROM Account
WHERE id=:accId];
System.debug('After query ServerSideController APEX');
DELETE dAcc;
System.debug('After DELETE OP ServerSideController APEX');
return [SELECT Name,AccountNumber,Account_Balance__c,Active__c,Status__c
FROM Account
LIMIT:5];
}
catch(QueryException e){
System.debug('Query Exception has occured :'+e.getMessage());
return null;
}
}
----------------------------
Greetings to you!
Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.
Component:
<aura:component controller="RemoveRowC" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <!--Init handler which is call doInit js function on component Load--> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <!--Aura Attribute for store Account Object List as Array--> <aura:attribute name="accountList" type="Account[]"/> <!--Table Part--> <table class="slds-table slds-table_bordered slds-table_cell-buffer"> <thead> <tr class="slds-text-title_caps"> <th scope="col"> <div class="slds-truncate">S.No</div> </th> <th scope="col"> <div class="slds-truncate" title="First Name">Name</div> </th> <th scope="col"> <div class="slds-truncate" title="Phone">Phone</div> </th> <th scope="col"> <div class="slds-truncate" title="Remove">Remove</div> </th> </tr> </thead> <tbody> <aura:iteration items="{!v.accountList}" var="AccountInstance" indexVar="rowIndex"> <tr class="slds-text-title_caps"> <td> {!rowIndex + 1} </td> <td> <div class="slds-truncate" title="{!AccountInstance.Name}">{!AccountInstance.Name}</div> </td> <td> <div class="slds-truncate" title="{!AccountInstance.Phone}">{!AccountInstance.Phone}</div> </td> <td> <a onclick="{!c.removeDeletedRow}" data-value="{!rowIndex}"> <lightning:icon variant="error" iconName="utility:delete" class="slds-icon slds-icon_small" size="small" alternativeText="icon"/> <span class="slds-assistive-text">Delete Icon</span> </a> </td> </tr> </aura:iteration> </tbody> </table> </aura:component>Controller:
({ // function call on component Load doInit: function(component, event, helper) { var action = component.get("c.getAccount"); // set call back action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { component.set("v.accountList", response.getReturnValue()); } }); // enqueue the server side action $A.enqueueAction(action); }, // function for delete the row removeDeletedRow: function(component, event, helper) { // get the selected row Index for delete, from Lightning Event Attribute var ctarget = event.currentTarget; var index = ctarget.dataset.value; // get the all List (accountList attribute) and remove the Object Element Using splice method var AllRowsList = component.get("v.accountList"); AllRowsList.splice(index, 1); // set the accountList after remove selected row element component.set("v.accountList", AllRowsList); }, })Apex:
public class RemoveRowC { @AuraEnabled public static List<Account> getAccount(){ List<Account> acc = [SELECT Id, Name, Phone FROM Account LIMIT 5]; return acc; } }I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Thanks and Regards,
Khan Anas