Add or Remove dynamic rows and create multiple accounts in lightning web component (LWC)

Today we are learning about how to Add or Remove dynamic rows and Create multiple accounts in lightning web component(LWC)

addRemoveCreateAccountMultiple.html [Lightning Web Component]

<template> <lightning-card> <h3 slot="title"> <lightning-icon icon-name="standard:account" size="small"></lightning-icon> Insert Multiple Account </h3> <table class="slds-table slds-table_bordered slds-table_cell-buffer"> <thead> <tr class="slds-text-title--caps"> <th>S.No</th> <th>Account Name</th> <th>Industry</th> <th>Phone</th> <th>Action</th> </tr> </thead> <tbody> <template for:each={accountRecList} for:item="account" for:index="index"> <tr key={keyIndex}> <td>{index}</td> <td><lightning-input type="text" name="accName" access-key={index} id={index} onchange={changeHandler} value={account.Name}></lightning-input></td> <td><lightning-input type="text" name="accIndustry" access-key={index} id={index} onchange={changeHandler} value={account.Industry}></lightning-input></td> <td><lightning-input type="Phone" name="accPhone" access-key={index} id={index} onchange={changeHandler} value={account.Phone}></lightning-input></td> <td><lightning-icon icon-name="action:delete" access-key={index} id={index} alternative-text="Click to Call" size="small" title="large size" onclick={removeRow} ></lightning-icon></td> </tr> </template> </tbody> </table> <br/> <div slot="footer"> <lightning-button class="slds-m-right--small" label="Add" onclick={addRow} variant="brand"></lightning-button> <lightning-button label="Save" onclick={saveMultipleAccounts} variant="brand"></lightning-button> </div> </lightning-card> </template>

addRemoveCreateAccountMultiple.js [JavaScript File]

import { LightningElement, track } from 'lwc'; import saveAccounts from '@salesforce/apex/accountCreationControllerLwc.createAccounts'; import {ShowToastEvent} from 'lightning/platformShowToastEvent'; export default class MultipleAccountInsertion extends LightningElement { @track keyIndex = 0; @track message; @track error; @track accountRecList = [ { Name:'', Industry:'', Phone:'' } ]; changeHandler(event){ //alert(event.target.id.split('-')); //console.log('Access Key2#: ' + event.target.accessKey); //console.log('id#: ' + event.target.id); //console.log('value#: ' + event.target.value); //console.log('handler# ' + event.target.value); if(event.target.name === 'accName'){ this.accountRecList[event.target.accessKey].Name = event.target.value; //console.log('accName#: ' + this.accountRecList[event.target.accessKey].Name); } else if(event.target.name === 'accIndustry'){ this.accountRecList[event.target.accessKey].Industry = event.target.value; //console.log('accIndustry#: ' + this.accountRecList[event.target.accessKey].Industry); } else if(event.target.name === 'accPhone'){ this.accountRecList[event.target.accessKey].Phone = event.target.value; //console.log('accPhone#: ' + this.accountRecList[event.target.accessKey].Phone); } } saveMultipleAccounts(){ console.log("AccountList# " + JSON.stringify(this.accountRecList)); saveAccounts({accountList : this.accountRecList}) .then(result =>{ this.message = result; this.error = undefined; console.log('message## ' + this.message); console.log('error## ' + this.error); this.accountRecList.forEach(function(item){ item.Name='', item.Industry='', item.Phone='' }); const toastEvent = new ShowToastEvent({ title:'Success!', message:'Accounts created', variant:'success' }); this.dispatchEvent(toastEvent); console.log(JSON.stringify(result)); console.log("result# " + this.message); }) .catch(error =>{ this.message = undefined; this.error = error; const toastEvent = new ShowToastEvent({ title:'Error creating records!', message:error.body.message, variant:'error' }); this.dispatchEvent(toastEvent); console.log("error# " + JSON.stringify(this.error)); }); } addRow(){ this.keyIndex + 1; this.accountRecList.push({ Name:'', Industry:'', Phone:'' }) } removeRow(event){ if(this.accountRecList.length >=1){ this.accountRecList.splice(event.target.accessKey,1); this.keyIndex - 1; } } }

addRemoveCreateAccountMultiple.js-meta.xml [MetaData File]

<?xml version="1.0" encoding="UTF-8"?> <lightningcomponentbundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiversion>45.0</apiVersion> <isexposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>

accountCreationControllerLwc.cls [Apex Controller File]

public with sharing class accountCreationControllerLwc { @AuraEnabled public static List<account> createAccounts(List<account> accountList){ insert accountList; return accountList; } }

To know more live demo in LWC, Use this link..