- Create apex class i.e. AuraController<\/strong><\/li>
- Create AuraEnabled method i.e. saveAccountList <\/strong>which take single parameter to hold account list. Refer below code snippet.<\/li><\/ul><\/li><\/ul>\n\n\n\n
public class AuraController \r\n{ \r\n @AuraEnabled\r\n public static void saveAccountList(List<Account> accList) \r\n\t{ \r\n Insert accList;\r\n }\r\n}<\/code><\/pre>\n\n\n\n- Step 2:<\/strong> Go to the Developer Console ->> File ->> New ->> Lightning Component: AuraComponent.cmp<\/strong>
- Declare attribute of type account array to store multiple account and name it as \u2018accountList\u2019.<\/li><\/ul><\/li><\/ul>\n\n\n\n
<aura:component controller=\"AuraController\" Implements=\"force:appHostable,flexipage:availableForRecordHome,force:hasRecordId\">\r\n <aura:attribute name=\"accountList\" type=\"Account[]\"\/>\r\n <lightning:card>\r\n <div class=\"slds-m-around--xx-large\">\r\n <div class=\"slds-float_right slds-p-bottom_small\">\r\n <h1 class=\"slds-page-header__title\">Add Row \r\n <lightning:buttonIcon iconName=\"utility:add\" size=\"large\" variant=\"bare\" alternativeText=\"Add\" onclick=\"{!c.addRow}\"\/>\r\n <\/h1>\r\n <\/div>\r\n <div class=\"container-fluid\"> \r\n <table class=\"slds-table slds-table_bordered slds-table_cell-buffer\"> \r\n <thead>\r\n <tr class=\"slds-text-title_caps\">\r\n <th scope=\"col\">\r\n <div class=\"slds-truncate\">Sr. No<\/div>\r\n <\/th>\r\n <th scope=\"col\">\r\n <div class=\"slds-truncate\" title=\"Account Name\">Account Name<\/div>\r\n <\/th>\r\n <th scope=\"col\">\r\n <div class=\"slds-truncate\" title=\"Phone\">Phone<\/div>\r\n <\/th>\r\n <th scope=\"col\">\r\n <div class=\"slds-truncate\" title=\"Fax\">Fax<\/div>\r\n <\/th> \r\n <th scope=\"col\">\r\n <div class=\"slds-truncate\" title=\"Website\">Website<\/div>\r\n <\/th> \r\n <th scope=\"col\">\r\n <div class=\"slds-truncate\" title=\"Action\">Action<\/div>\r\n <\/th>\r\n <\/tr>\r\n <\/thead> \r\n <tbody> \r\n <aura:iteration items=\"{!v.accountList}\" var=\"acc\" indexVar=\"index\">\r\n <tr>\r\n <td> \r\n {!index + 1}\r\n <\/td>\r\n <td>\r\n <lightning:input name=\"accName\" type=\"text\" maxlength=\"50\" value=\"{!acc.Name}\" \/>\r\n <\/td>\r\n <td>\r\n <lightning:input name=\"accPhone\" type=\"phone\" maxlength=\"10\" value=\"{!acc.Phone}\" \/>\r\n <\/td>\r\n <td>\r\n <lightning:input name=\"accFax\" type=\"text\" value=\"{!acc.Fax}\" \/>\r\n <\/td>\r\n <td>\r\n <lightning:input name=\"accWebsite\" type=\"text\" value=\"{!acc.Website}\" \/>\r\n <\/td>\r\n <td>\r\n <a onclick=\"{!c.removeRecord}\" data-record=\"{!index}\">\r\n <lightning:icon iconName=\"utility:delete\" size=\"small\" alternativeText=\"Delete\"\/>\r\n <span class=\"slds-assistive-text\">Delete<\/span>\r\n <\/a>\r\n <\/td> \r\n <\/tr>\r\n <\/aura:iteration>\r\n <\/tbody>\r\n <\/table>\r\n <div class=\"slds-align_absolute-center slds-p-top_small\">\r\n <lightning:button variant=\"brand\" label=\"Submit\" title=\"Brand action\" onclick=\"{!c.saveAccounts}\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/lightning:card>\r\n<\/aura:component><\/code><\/pre>\n\n\n\nLightning JS Controller: AuraComponentController.js<\/em><\/strong><\/h4>\n\n\n\n
See code comment<\/em><\/p>\n\n\n\n
({\r\n addRow: function(component, event, helper) {\r\n \/\/get the account List from component \r\n var accountList = component.get(\"v.accountList\");\r\n \/\/Add New Account Record\r\n accountList.push({\r\n 'sobjectType': 'Account',\r\n 'Name': '',\r\n 'Phone': '',\r\n 'Fax': '',\r\n 'Website ': '', \r\n \r\n });\r\n component.set(\"v.accountList\", accountList);\r\n },\r\n \r\n removeRecord: function(component, event, helper) {\r\n \/\/Get the account list\r\n var accountList = component.get(\"v.accountList\");\r\n \/\/Get the target object\r\n var selectedItem = event.currentTarget;\r\n \/\/Get the selected item index\r\n var index = selectedItem.dataset.record;\r\n \/\/Remove single record from account list\r\n accountList.splice(index, 1);\r\n \/\/Set modified account list\r\n component.set(\"v.accountList\", accountList);\r\n },\r\n \t\r\n saveAccounts: function(component, event, helper) { \r\n if (helper.validateAccountRecords(component, event)) {\r\n \/\/Call Apex method and pass account list as a parameters\r\n var action = component.get(\"c.saveAccountList\");\r\n action.setParams({\r\n \"accList\": component.get(\"v.accountList\")\r\n });\r\n action.setCallback(this, function(response) {\r\n \/\/get response status \r\n var state = response.getState();\r\n if (state === \"SUCCESS\") {\r\n \/\/set empty account list\r\n component.set(\"v.accountList\", []);\r\n alert('Accounts saved successfully');\r\n }\r\n }); \r\n $A.enqueueAction(action);\r\n }\r\n },\r\n})<\/code><\/pre>\n\n\n\nLightning JS Helper:<\/strong> AuraComponentHelper.js<\/strong><\/em><\/h4>\n\n\n\n
See code comment<\/em><\/p>\n\n\n\n
({\r\n validateAccountRecords: function(component, event) {\r\n \/\/Validate all account records\r\n var isValid = true;\r\n var accountList = component.get(\"v.accountList\");\r\n for (var i = 0; i < accountList.length; i++) {\r\n if (accountList[i].Name == '') {\r\n isValid = false;\r\n alert('Account Name cannot be blank on '+(i + 1)+' row number');\r\n }\r\n }\r\n return isValid;\r\n },\r\n})<\/code><\/pre>\n\n\n\nOutput:<\/em><\/strong><\/h4>\n\n\n\n
Create Account Record:<\/strong><\/p>\n\n\n\n
![\"Create](\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2021\/03\/1-CreateAccountRecord.png\")
<\/a><\/center>\nCreate Account Record<\/i><\/center><\/font>\n\n\n\n Created Account Records:<\/strong><\/p>\n\n\n\n
![\"Created](\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2021\/03\/2-CreatedAccountRecords.png\")
<\/a><\/center>\nCreated Records in Account Object<\/i><\/center><\/font>\n\n\n\n We hope you may find this Blog resourceful and helpful. If you still have concerns and need more help, please contact us at salesforce@greytrix.com<\/a><\/p>\n\n\n\n
About Us<\/b><\/br>\n
Greytrix<\/a> \u2013 a globally recognized and one of the oldest Sage Development Partner and a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners and Sage PSG across the globe. We offer Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that require apex code incorporation into the Salesforce platform.
Greytrix has some unique solutions for Cloud CRM such as Salesforce Sage integration<\/a> for Sage X3<\/a>, Sage 100<\/a> and Sage 300 (Sage Accpac)<\/a>. We also offer best-in-class Cloud CRM Salesforce customization and development services<\/a> along with services such as Salesforce Data Migration<\/a>, Integrated App development<\/a>, Custom App development and Technical Support business partners and end users. Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow. Greytrix GUMU™ integration for Sage ERP \u2013 Salesforce is a 5-star rated app listed on Salesforce AppExchange<\/a>.
The GUMU™ Cloud framework by Greytrix forms the backbone of cloud integrations that are managed in real-time for processing and execution of application programs at the click of a button.
For more information on our Salesforce products and services, contact us at salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n\n\n\nRelated Posts:<\/strong><\/p>\n\n\n\n
- Salesforce \u2013 How to get row index of lightning table rows<\/a><\/li>
- How to Activate and Add Salesforce Lightning component on Community experience<\/a><\/li>
- Adding Lightning Web Components as Custom Tabs in Salesforce<\/a><\/li>
- How to set cookies in HTTP Callout (APEX Salesforce)<\/a><\/li><\/ul>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog, we will discuss how to Add Delete Row Dynamically In Salesforce Lightning Component. We shall take an example of adding account records in Salesforce using Add Delete Row functionality. Similarly, we have created 1 sample lightning component using which user can create multiple records as per requirement by Adding or Deleting new\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[1119,1117,1118,99,206,1055,207,208,1116,367,651],"class_list":["post-6132","post","type-post","status-publish","format-standard","hentry","category-salesforce-srv","tag-add-delete-row-dynamically","tag-add-row-dynamically","tag-delete-row-dynamically","tag-dynamic-component","tag-lightning","tag-lightning-aura-component","tag-lightning-basics","tag-lightning-component","tag-lightning-dynamic-rows","tag-salesforce","tag-salesforce-lightning-component"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/comments?post=6132"}],"version-history":[{"count":1,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6132\/revisions"}],"predecessor-version":[{"id":6135,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6132\/revisions\/6135"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=6132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=6132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=6132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- How to Activate and Add Salesforce Lightning component on Community experience<\/a><\/li>
- Salesforce \u2013 How to get row index of lightning table rows<\/a><\/li>
- Declare attribute of type account array to store multiple account and name it as \u2018accountList\u2019.<\/li><\/ul><\/li><\/ul>\n\n\n\n
- Create AuraEnabled method i.e. saveAccountList <\/strong>which take single parameter to hold account list. Refer below code snippet.<\/li><\/ul><\/li><\/ul>\n\n\n\n