Add Row funnctionality in LWC Salesforce - Salesforce Globe For You
ApexClass:
public class AddRowController {
@AuraEnabled
public static List<AccountWrapper> fetchAccounts() {
List<AccountWrapper> lstAccountWrapper = new List<AccountWrapper>();
for(Account objAccount:[Select id,name,Industry from Account limit 2]) {
AccountWrapper objAccountWrap = new AccountWrapper();
objAccountWrap.AccountId = objAccount.Id;
objAccountWrap.AccountName = objAccount.Name;
objAccountWrap.Industry = objAccount.Industry;
objAccountWrap.Del = false;
lstAccountWrapper.add(objAccountWrap);
}
return lstAccountWrapper;
}
@AuraEnabled
public static List<AccountWrapper> saveAccounts(List<AccountWrapper> lstAccountWrap) {
List<AccountWrapper> lstAccountWrapper = new List<AccountWrapper>();
List<Account> lstAccount = new List<Account>();
List<Account> lstAccountToDel = new List<Account>();
for(AccountWrapper objAccountWrap :lstAccountWrap) {
Account objAccount = new Account();
if(objAccountWrap.Del && objAccountWrap.AccountId != null) {
objAccount.Id = objAccountWrap.AccountId;
lstAccountToDel.add(objAccount);
} else {
objAccount.Id = objAccountWrap.AccountId;
objAccount.Name = objAccountWrap.AccountName;
objAccount.Industry = objAccountWrap.Industry;
lstAccount.add(objAccount);
}
}
if(!lstAccountToDel.isEMPTY()) {
Delete lstAccountToDel;
}
List<Database.upsertResult> result = Database.upsert(lstAccount,false);
for(Account objAccount:[Select id,name,Industry from Account where id in:lstAccount]) {
AccountWrapper objAccountWrap = new AccountWrapper();
objAccountWrap.AccountId = objAccount.Id;
objAccountWrap.AccountName = objAccount.Name;
objAccountWrap.Industry = objAccount.Industry;
objAccountWrap.Del = false;
lstAccountWrapper.add(objAccountWrap);
}
return lstAccountWrapper;
}
public with sharing class AccountWrapper {
@AuraEnabled public String AccountName {set;get;}
@AuraEnabled public String AccountId {set;get;}
@AuraEnabled public String Industry {set;get;}
@AuraEnabled public boolean Del {set;get;}
}
}
addRowLWC.html
<template>
<lightning-card title="Add Row Functionality">
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr >
<th class="slds-is-resizable" scope="col">
<div>
Account Name
</div>
</th>
<th class="slds-is-resizable" scope="col">
<div>
Industry
</div>
</th>
<th >
<lightning-button-icon icon-name="utility:info" alternative-text="Info" class="slds-m-left_xx-small" title="Info" variant="bare"></lightning-button-icon>
</th>
</tr>
</thead>
<tbody>
<template if:true={lstAccount}>
<template for:each={lstAccount} for:item="objAccount" for:index="index">
<tr key={objAccount.AccountId} if:false={objAccount.Del}>
<th>
<lightning-input type="text" class="slds-truncate" data-id={index} title={objAccount.AccountName} value={objAccount.AccountName} variant="label-hidden" onchange={nameChange}></lightning-input>
</th>
<th>
<template if:true={industryPicklist.data}>
<lightning-combobox name="Industry" value={objAccount.Industry}
data-id={index} options={industryPicklist.data.values} onchange={industryChange} variant="label-hidden">
</lightning-combobox>
</template>
</th>
<th >
<lightning-button-icon data-id={index} icon-name="utility:delete" alternative-text="Delete" class="test slds-m-left_xx-small" title="Delete" variant="bare" onclick={deleteRow}></lightning-button-icon>
</th>
</tr>
</template>
</template>
</tbody>
</table>
<div>
<lightning-button variant="brand" label="Add Row" title="Add Row" onclick={addRow} class="slds-m-left_x-small"></lightning-button>
<lightning-button variant="brand" label="Save Accounts" title="Save Accounts" onclick={saveAccountData} class="slds-m-left_x-small"></lightning-button>
</div>
</lightning-card>
</template>
addRowLWC.html.js
import { api,track,wire,LightningElement } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
import fetchAccounts from '@salesforce/apex/AddRowController.fetchAccounts';
import saveAccounts from '@salesforce/apex/AddRowController.saveAccounts';
export default class AddRowLWC extends LightningElement {
@api recordId;
@track lstAccount = [];
@wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT }) accountMetaData;
@wire(getPicklistValues,{
recordTypeId: '$accountMetaData.data.defaultRecordTypeId',
fieldApiName: INDUSTRY_FIELD
}
) industryPicklist;
connectedCallback() {
fetchAccounts()
.then(result => {
if(result){
this.lstAccount = result;
}
})
.catch(error => {
this.loader = false;
this.error = error;
});
}
addRow(event){
let newRecord ={AccountId:null,AccountName:null,Del:false};
this.lstAccount.push(newRecord);
}
deleteRow(event) {
var selectedRow = event.currentTarget;
var key = selectedRow.dataset.id;
this.lstAccount[key].Del = true;
}
saveAccountData(event){
saveAccounts({lstAccountWrap:this.lstAccount})
.then(result => {
if(result){
this.lstAccount = result;
}
})
.catch(error => {
this.loader = false;
this.error = error;
});
}
nameChange(event){
var selectedRow = event.currentTarget;
var key = selectedRow.dataset.id;
this.lstAccount[key].AccountName = event.detail.value;
}
industryChange(event) {
var selectedRow = event.currentTarget;
var key = selectedRow.dataset.id;
this.lstAccount[key].Industry = event.detail.value;
}
}
addRowLWC.html.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>51.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Output:
