\n
\nSteps:<\/h3>\n<\/div>\n<\/div>\n
Steps:<\/h3>\n<\/div>\n<\/div>\n\n\nSteps to add the custom button and perform Mass Delete of selected record.<\/p>\n
Step 1: \u00a0 Create a lightning component and add following code.<\/p>\n
<aura:component implements=\"force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes\" access=\"global\" controller=\"accListClass\" >\r\n <aura:attribute name=\"account\" type=\"List\"><\/aura:attribute>\r\n <aura:handler name=\"init\" value=\"{!this}\" action=\"{!c.accountList}\"><\/aura:handler>\r\n <div class=\"slds-grid\">\r\n <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>\r\n <div class=\"slds-col slds-size_1-of-8 allBtn\"><lightning:button label=\"Delete Selected\"\r\n iconName=\"utility:delete\"\r\n iconPosition=\"left\"\r\n variant=\"destructive\"\r\n onclick=\"{!c.deleteSlctd}\">\r\n <\/lightning:button><\/div>\r\n <\/div>\r\n <table class=\"slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout\">\r\n <thead>\r\n \t<tr class=\"slds-text-heading--label\">\r\n <th scope=\"row\" style=\"width: 50px;\" class=\"slds-text-align--right\"><ui:inputCheckbox aura:id=\"cbox\" class=\"cBox\" change=\"{!c.selectAll}\"\/><\/th>\r\n <th scope=\"row\"><div class=\"slds-truncate\" title=\"ID\">ID<\/div><\/th>\r\n <th scope=\"row\"><div class=\"slds-truncate\" titile=\"NAME\">Name<\/div><\/th>\r\n <th scope=\"row\"><div class=\"slds-truncate\" title=\"INDUSTRY\">Industry<\/div><\/th>\r\n <th scope=\"row\"><div class=\"slds-truncate\" title=\"PHONE\">Phone<\/div><\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <aura:iteration items=\"{!v.account}\" var=\"a\">\r\n \t<tr>\r\n <td><ui:inputCheckbox aura:id=\"cboxRow\" text=\"{!a.Id}\" class=\"cBox\" change=\"{!c.changeSelectAll}\"\/><\/td>\r\n \t<th><div class=\"slds-truncate\">{!a.Id}<\/div><\/th>\r\n <td><div class=\"slds-truncate\">{!a.Name}<\/div><\/td>\r\n <td><div class=\"slds-truncate\">{!a.Industry}<\/div><\/td>\r\n <td><div class=\"slds-truncate\">{!a.Phone}<\/div><\/td>\r\n <\/tr>\r\n <\/aura:iteration>\r\n <\/tbody>\r\n <\/table>\r\n<\/aura:component>\r\n\r\n\r\n<\/pre>\nStep 2: Create the client side controller of above mentioned Component and add the following code.<\/p>\n
({\r\n accountList : function(component, event, helper) {\r\n helper.getAccountList(component);\r\n },\r\n selectAll: function(component,event, helper){\r\n var slctCheck = event.getSource().get(\"v.value\");\r\n var getCheckAllId = component.find(\"cboxRow\");\r\n \r\n if (slctCheck == true) {\r\n for (var i = 0; i < getCheckAllId.length; i++) {\r\n component.find(\"cboxRow\")[i].set(\"v.value\", true); \r\n }\r\n } else {\r\n for (var i = 0; i < getCheckAllId.length; i++) {\r\n component.find(\"cboxRow\")[i].set(\"v.value\", false);\r\n }\r\n }\r\n },\r\n changeSelectAll:function(component,event, helper){\r\n var slctCheckRow = event.getSource().get(\"v.value\");\r\n var getCheckAllId = component.find(\"cbox\");\r\n if(slctCheckRow == false) {\r\n component.find(\"cbox\").set(\"v.value\", false);\r\n }\r\n },\r\n deleteSlctd : function(component,event,helper) {\r\n var getCheckAllId = component.find(\"cboxRow\");\r\n var selctedRec = [];\r\n for (var i = 0; i < getCheckAllId.length; i++) {\r\n \r\n if(getCheckAllId[i].get(\"v.value\") == true )\r\n {\r\n selctedRec.push(getCheckAllId[i].get(\"v.text\")); \r\n }\r\n }\r\n helper.deleteSelected(component,event,selctedRec);\r\n }\r\n})<\/pre>\nStep 3: Now create the helper controller of above mentioned Component and add the following code.<\/p>\n
({\r\n getAccountList : function(component) {\r\n var action = component.get(\"c.getAccounts\");\r\n var self = this;\r\n action.setCallback(this, function(actionResult){\r\n component.set(\"v.account\",actionResult.getReturnValue());\r\n });\r\n $A.enqueueAction(action);\r\n },\r\n deleteSelected : function(component,event,selctedRec){\r\n var action = component.get(\"c.delSlctRec\");\r\n action.setParams({\r\n \"slctRec\": selctedRec\r\n });\r\n action.setCallback(this, function(response){\r\n var state = response.getState();\r\n if(state == \"SUCCESS\")\r\n {\r\n component.set(\"v.account\",response.getReturnValue());\r\n console.log(\"Successfully Deleted..\");\r\n }else if (state==\"ERROR\") {\r\n console.log(action.getError()[0].message);\r\n });\r\n $A.enqueueAction(action);<\/pre>\n }\r\n})<\/pre>\nStep 4: Last step create the apex class name accListClass and add the following code.<\/p>\n
public class accListClass{\r\n @AuraEnabled \r\n public List<Account> accList = new List<Account>();\r\n \r\n @AuraEnabled \r\n public List<Account> delRec = new List<Account>();\r\n \r\n @AuraEnabled \r\n public static List<Account> getAccounts(String query)\r\n {\r\n accListClass alc = new accListClass();\r\n \r\n alc.accList = Database.query('SELECT Id,Name,Phone,Industry from Account');\r\n \r\n return alc.accList;\r\n }\r\n \r\n @AuraEnabled \r\n public static List<Account> delSlctRec(List<String> slctRec)\r\n {\r\n accListClass alc = new accListClass();\r\n alc.delRec = [SELECT Id FROM Account WHERE Id IN: slctRec ];\r\n try{\r\n delete alc.delRec;\r\n } catch(Exception ex)\r\n {\r\n throw new AuraHandledException(ex.getMessage());\r\n }\r\n alc.accList = Database.query('SELECT Id,Name,Phone,Industry from Account');\r\n \r\n return alc.accList;\r\n \r\n }\r\n}<\/pre>\n<\/div>\n<\/div>\n<\/div>\n <\/p>\n
\n\n\nOutput<\/h3>\n<\/div>\n<\/div>\n\nSelect all the record. To implement the pagination in lightning component\u00a0Click Here<\/a><\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/Lightning-Experience-Salesforce-3.jpg\")
<\/a><\/p>\nClick on the button to delete records:<\/p>\n
![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/Lightning-Experience-Salesforce-4.jpg\")
<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\nSupport<\/h3>\n<\/div>\n<\/div>\n\nThat\u2019s all for implementation of mass delete in lightning component, still if you have any further query or seek assistance to make your salesforce classic apps compatible with lightning experience, feel free to add a ticket, we will be happy to help you .\u00a0https:\/\/webkul.uvdesk.com\/en\/customer\/create-ticket\/<\/a><\/p>\n<\/div>\n<\/div>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
\n
Steps to add the custom button and perform Mass Delete of selected record.<\/p>\n
Step 1: \u00a0 Create a lightning component and add following code.<\/p>\n
<aura:component implements=\"force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes\" access=\"global\" controller=\"accListClass\" >\r\n <aura:attribute name=\"account\" type=\"List\"><\/aura:attribute>\r\n <aura:handler name=\"init\" value=\"{!this}\" action=\"{!c.accountList}\"><\/aura:handler>\r\n <div class=\"slds-grid\">\r\n <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>\r\n <div class=\"slds-col slds-size_1-of-8 allBtn\"><lightning:button label=\"Delete Selected\"\r\n iconName=\"utility:delete\"\r\n iconPosition=\"left\"\r\n variant=\"destructive\"\r\n onclick=\"{!c.deleteSlctd}\">\r\n <\/lightning:button><\/div>\r\n <\/div>\r\n <table class=\"slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout\">\r\n <thead>\r\n \t<tr class=\"slds-text-heading--label\">\r\n <th scope=\"row\" style=\"width: 50px;\" class=\"slds-text-align--right\"><ui:inputCheckbox aura:id=\"cbox\" class=\"cBox\" change=\"{!c.selectAll}\"\/><\/th>\r\n <th scope=\"row\"><div class=\"slds-truncate\" title=\"ID\">ID<\/div><\/th>\r\n <th scope=\"row\"><div class=\"slds-truncate\" titile=\"NAME\">Name<\/div><\/th>\r\n <th scope=\"row\"><div class=\"slds-truncate\" title=\"INDUSTRY\">Industry<\/div><\/th>\r\n <th scope=\"row\"><div class=\"slds-truncate\" title=\"PHONE\">Phone<\/div><\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <aura:iteration items=\"{!v.account}\" var=\"a\">\r\n \t<tr>\r\n <td><ui:inputCheckbox aura:id=\"cboxRow\" text=\"{!a.Id}\" class=\"cBox\" change=\"{!c.changeSelectAll}\"\/><\/td>\r\n \t<th><div class=\"slds-truncate\">{!a.Id}<\/div><\/th>\r\n <td><div class=\"slds-truncate\">{!a.Name}<\/div><\/td>\r\n <td><div class=\"slds-truncate\">{!a.Industry}<\/div><\/td>\r\n <td><div class=\"slds-truncate\">{!a.Phone}<\/div><\/td>\r\n <\/tr>\r\n <\/aura:iteration>\r\n <\/tbody>\r\n <\/table>\r\n<\/aura:component>\r\n\r\n\r\n<\/pre>\nStep 2: Create the client side controller of above mentioned Component and add the following code.<\/p>\n
({\r\n accountList : function(component, event, helper) {\r\n helper.getAccountList(component);\r\n },\r\n selectAll: function(component,event, helper){\r\n var slctCheck = event.getSource().get(\"v.value\");\r\n var getCheckAllId = component.find(\"cboxRow\");\r\n \r\n if (slctCheck == true) {\r\n for (var i = 0; i < getCheckAllId.length; i++) {\r\n component.find(\"cboxRow\")[i].set(\"v.value\", true); \r\n }\r\n } else {\r\n for (var i = 0; i < getCheckAllId.length; i++) {\r\n component.find(\"cboxRow\")[i].set(\"v.value\", false);\r\n }\r\n }\r\n },\r\n changeSelectAll:function(component,event, helper){\r\n var slctCheckRow = event.getSource().get(\"v.value\");\r\n var getCheckAllId = component.find(\"cbox\");\r\n if(slctCheckRow == false) {\r\n component.find(\"cbox\").set(\"v.value\", false);\r\n }\r\n },\r\n deleteSlctd : function(component,event,helper) {\r\n var getCheckAllId = component.find(\"cboxRow\");\r\n var selctedRec = [];\r\n for (var i = 0; i < getCheckAllId.length; i++) {\r\n \r\n if(getCheckAllId[i].get(\"v.value\") == true )\r\n {\r\n selctedRec.push(getCheckAllId[i].get(\"v.text\")); \r\n }\r\n }\r\n helper.deleteSelected(component,event,selctedRec);\r\n }\r\n})<\/pre>\nStep 3: Now create the helper controller of above mentioned Component and add the following code.<\/p>\n
({\r\n getAccountList : function(component) {\r\n var action = component.get(\"c.getAccounts\");\r\n var self = this;\r\n action.setCallback(this, function(actionResult){\r\n component.set(\"v.account\",actionResult.getReturnValue());\r\n });\r\n $A.enqueueAction(action);\r\n },\r\n deleteSelected : function(component,event,selctedRec){\r\n var action = component.get(\"c.delSlctRec\");\r\n action.setParams({\r\n \"slctRec\": selctedRec\r\n });\r\n action.setCallback(this, function(response){\r\n var state = response.getState();\r\n if(state == \"SUCCESS\")\r\n {\r\n component.set(\"v.account\",response.getReturnValue());\r\n console.log(\"Successfully Deleted..\");\r\n }else if (state==\"ERROR\") {\r\n console.log(action.getError()[0].message);\r\n });\r\n $A.enqueueAction(action);<\/pre>\n }\r\n})<\/pre>\nStep 4: Last step create the apex class name accListClass and add the following code.<\/p>\n
public class accListClass{\r\n @AuraEnabled \r\n public List<Account> accList = new List<Account>();\r\n \r\n @AuraEnabled \r\n public List<Account> delRec = new List<Account>();\r\n \r\n @AuraEnabled \r\n public static List<Account> getAccounts(String query)\r\n {\r\n accListClass alc = new accListClass();\r\n \r\n alc.accList = Database.query('SELECT Id,Name,Phone,Industry from Account');\r\n \r\n return alc.accList;\r\n }\r\n \r\n @AuraEnabled \r\n public static List<Account> delSlctRec(List<String> slctRec)\r\n {\r\n accListClass alc = new accListClass();\r\n alc.delRec = [SELECT Id FROM Account WHERE Id IN: slctRec ];\r\n try{\r\n delete alc.delRec;\r\n } catch(Exception ex)\r\n {\r\n throw new AuraHandledException(ex.getMessage());\r\n }\r\n alc.accList = Database.query('SELECT Id,Name,Phone,Industry from Account');\r\n \r\n return alc.accList;\r\n \r\n }\r\n}<\/pre>\n<\/div>\n<\/div>\n<\/div>\n <\/p>\n
\n\n\nOutput<\/h3>\n<\/div>\n<\/div>\n\nSelect all the record. To implement the pagination in lightning component\u00a0Click Here<\/a><\/p>\n<\/a><\/p>\nClick on the button to delete records:<\/p>\n
<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\nSupport<\/h3>\n<\/div>\n<\/div>\n\nThat\u2019s all for implementation of mass delete in lightning component, still if you have any further query or seek assistance to make your salesforce classic apps compatible with lightning experience, feel free to add a ticket, we will be happy to help you .\u00a0https:\/\/webkul.uvdesk.com\/en\/customer\/create-ticket\/<\/a><\/p>\n<\/div>\n<\/div>\n <\/p>\n","protected":false},"excerpt":{"rendered":"