I have LWC component with 10 Account Records with checkbox and submit button. My Question is Whenever I select multiple Account Records and modifies Account field values and click on submit button then it should send the latest data to apex and updates in database & then it should display updated Account Record values in LWC Component.
When I select Multiple account records I am able to capture all the Account record details but I am not sure how to capture modified Account field values when checkbox is selected and after clicking on submit button how to send the latest data to apex to update in Salesforce?
I just started learning LWC. Looking for valuable suggestion/help on this. Thanks!
JS Code:
import { LightningElement, wire } from 'lwc'.
import getAccList from '@salesforce/apex/AccountWrapperClass.getAccounts';
import updateSelectedContacts from '@salesforce/apex/AccountWrapperClass.updateSelectedContacts';
export default class WrapperTable extends LightningElement {
selectedAccounts = [];
accList;
@wire(getAccList)
wiredRecord({ error, data }) {
if (error) {
let message = "Unknown error";
if (Array.isArray(error.body)) {
message = error.body.map((e) => e.message).join(", ");
} else if (typeof error.body.message === "string") {
message = error.body.message;
}
} else if (data) {
this.accList = JSON.parse(data);
}
}
handleAllChange(event) {
for (var i = 0; i < this.accList.length; i++) {
this.accList[i].isSelected = event.target.checked;
}
}
handleCheckChange(event) {
this.accList[event.target.value].isSelected = event.target.checked;
}
getSelectedAccounts(event) {enter image description here
console.log(recordId, fieldName, fieldValue);
for (var i = 0; i < this.accList.length; i++) {
if (this.accList[i].isSelected) {
this.selectedAccounts.push(this.accList[i]);
}
}
console.log("###Selected Accounts" + this.selectedAccounts.length);
console.log("###Stringify : " + JSON.stringify(this.selectedAccounts));
}
}
Html code:
<template>
<table class="slds-table slds-table_cell-buffer slds-table_col-bordered" border="1" width="100%">
<thead>
<tr class="slds-line-height_reset">
<td>
<lightning-input type="checkbox" onchange={handleAllChange}></lightning-input>
</td>
<td style="font-weight:bold">Account Name</td>
<td style="font-weight:bold">Phone</td>
</tr>
</thead>
<template for:each={accList} for:item="acc">
<tr key={acc.id} class="slds-hint-parent">
<td>
<lightning-input type="checkbox" checked={acc.isSelected} onchange={handleCheckChange}
value={acc.index}>
</lightning-input>
</td>
<td>
<lightning-input type="text" value={acc.AccountName}>
></lightning-input>
</td>
<td>
<lightning-input type="tel" value={acc.Phone} onchange={duplicate}></lightning-input>
</td>
</tr>
</template>
</table>
<br />
<lightning-button label="Get Selected Accounts" onclick={getSelectedAccounts} variant="brand"></lightning-button>
</template>
Wrapper Class:
public with sharing class AccountWrapperClass {
@AuraEnabled(cacheable=true)
public static String getAccounts(){
Integer rowIndex = 0;
List<accountWrap> accWrapList = new List<accountWrap>();
try {
List<Account> accList = [SELECT Id, Name, Phone FROM Account limit 10];
for(Account a : accList){
accWrapList.add(new accountWrap(a.Id,a.Name,a.Phone,rowIndex));
rowIndex++;
}
return JSON.serialize(accWrapList);
} catch (Exception e) {
throw new AuraHandledException(e.getMessage());
}
}
public class accountWrap{
public String Id;
public String AccountName;
public String Phone;
public Boolean isSelected;
public Integer index;
public accountWrap(String Id, String AccountName, String Phone, Integer index){
this.Id = Id;
this.AccountName = AccountName;
this.Phone = Phone;
this.isSelected = false;
this.index = index;
}
}
}