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:
Controller:
Apex:
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