You need to sign in to do that
Don't have an account?

Can’t save record in edit inline custom table
Hi! I novice developer and try save record in edit inline custom table. Please tell me what's wrong
Code:
Html
<template>
<lightning-card title="Account" >
<table border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;" class="tblColPad">
<tr>
<th>Name</th>
<th>Rating</th>
<th>Dalete</th>
</tr>
<template for:each={getAccount.data} for:item="accountItem">
<tr key={accountItem.Id}>
<td>
<template if:false={editName}>
<span style="border-bottom: 1px dotted black"
>{accountItem.Name}
<lightning-button-icon
class="slds-float_right"
icon-name="utility:edit"
alternative-text="Update Name"
title="Update Name"
variant="bare"
size="medium"
onclick={handleNameEdit}
></lightning-button-icon>
</span>
</template>
<template if:true={editName}>
<lightning-input
name="accountItem.Id"
value={accountItem.Name}
label=""
onchange={handleNameChange}
></lightning-input>
<lightning-button-icon
class="slds-float_right"
icon-name="utility:save"
alternative-text="Update Name"
title="Update Name"
variant="bare"
size="large"
onclick={handleUpdateName}
></lightning-button-icon>
</template>
</td>
<td>{accountItem.Rating}</td>
<td><lightning-button label="Delete" size="small" variant="neutral"
onclick={handleDelete} value={accountItem.Id}
icon-name="utility:delete" icon-position="right"
class="deleteButton"></lightning-button></td>
</tr>
</template>
</table>
</lightning-card>
</template>
Js
import { LightningElement, track, wire } from 'lwc';
import getAccounts from '@salesforce/apex/ProjectFour.getAccounts';
import {deleteRecord} from 'lightning/uiRecordApi';
import {refreshApex} from '@salesforce/apex';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
export default class ProjectFourCustom extends LightningElement {
@wire (getAccounts) getAccount;
@track recordId;
@track account;
@track accountId;
@track accountName;
@track accountItem
@track error;
@track editName = false;
// connectedCallback() {
// getAccounts()
// .then((result) => {
// this.accountId = result.Id;
// this.accountName = result.Name;
// })
// .catch((error) => {
// this.error = error;
// });
// }
handleNameEdit(event) {
console.log('handleNameEdit', event);
this.editName = true;
}
handleNameChange(event) {
console.log('handleNameChange', event);
this.accountItem = event.target.value;
}
handleUpdateName(event) {
console.log('handleUpdateName', event);
const fields = {};
fields[ID_FIELD.fieldApiName] = this.accountId;
fields[NAME_FIELD.fieldApiName] = this.accountItem;
const recordInput = { fields };
updateRecord(recordInput)
.then(() => {
console.log('Done', event);
this.editName = false;
})
.catch((error) => {
console.log("Error updating date => " + error.body.message);
});
}
handleDelete(event){
this.recordId = event.target.value;
deleteRecord(this.recordId)
.then(() =>{
return refreshApex(this.getAccount);
})
.catch(error =>{
window.console.log('Unable to delete record due to ' + error.body.message);
});
}
}
Apex
public class ProjectFour {
@AuraEnabled(cacheable=true)
public static List<Account> getAccounts() {
List<Account> accounts = [SELECT Id, Name, Rating FROM Account Limit 3];
return accounts;
}
}
Code:
Html
<template>
<lightning-card title="Account" >
<table border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;" class="tblColPad">
<tr>
<th>Name</th>
<th>Rating</th>
<th>Dalete</th>
</tr>
<template for:each={getAccount.data} for:item="accountItem">
<tr key={accountItem.Id}>
<td>
<template if:false={editName}>
<span style="border-bottom: 1px dotted black"
>{accountItem.Name}
<lightning-button-icon
class="slds-float_right"
icon-name="utility:edit"
alternative-text="Update Name"
title="Update Name"
variant="bare"
size="medium"
onclick={handleNameEdit}
></lightning-button-icon>
</span>
</template>
<template if:true={editName}>
<lightning-input
name="accountItem.Id"
value={accountItem.Name}
label=""
onchange={handleNameChange}
></lightning-input>
<lightning-button-icon
class="slds-float_right"
icon-name="utility:save"
alternative-text="Update Name"
title="Update Name"
variant="bare"
size="large"
onclick={handleUpdateName}
></lightning-button-icon>
</template>
</td>
<td>{accountItem.Rating}</td>
<td><lightning-button label="Delete" size="small" variant="neutral"
onclick={handleDelete} value={accountItem.Id}
icon-name="utility:delete" icon-position="right"
class="deleteButton"></lightning-button></td>
</tr>
</template>
</table>
</lightning-card>
</template>
Js
import { LightningElement, track, wire } from 'lwc';
import getAccounts from '@salesforce/apex/ProjectFour.getAccounts';
import {deleteRecord} from 'lightning/uiRecordApi';
import {refreshApex} from '@salesforce/apex';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
export default class ProjectFourCustom extends LightningElement {
@wire (getAccounts) getAccount;
@track recordId;
@track account;
@track accountId;
@track accountName;
@track accountItem
@track error;
@track editName = false;
// connectedCallback() {
// getAccounts()
// .then((result) => {
// this.accountId = result.Id;
// this.accountName = result.Name;
// })
// .catch((error) => {
// this.error = error;
// });
// }
handleNameEdit(event) {
console.log('handleNameEdit', event);
this.editName = true;
}
handleNameChange(event) {
console.log('handleNameChange', event);
this.accountItem = event.target.value;
}
handleUpdateName(event) {
console.log('handleUpdateName', event);
const fields = {};
fields[ID_FIELD.fieldApiName] = this.accountId;
fields[NAME_FIELD.fieldApiName] = this.accountItem;
const recordInput = { fields };
updateRecord(recordInput)
.then(() => {
console.log('Done', event);
this.editName = false;
})
.catch((error) => {
console.log("Error updating date => " + error.body.message);
});
}
handleDelete(event){
this.recordId = event.target.value;
deleteRecord(this.recordId)
.then(() =>{
return refreshApex(this.getAccount);
})
.catch(error =>{
window.console.log('Unable to delete record due to ' + error.body.message);
});
}
}
Apex
public class ProjectFour {
@AuraEnabled(cacheable=true)
public static List<Account> getAccounts() {
List<Account> accounts = [SELECT Id, Name, Rating FROM Account Limit 3];
return accounts;
}
}
Can you please refer to below example where inline editing function is performed
https://www.infallibletechie.com/2020/10/lightning-datatable-inline-editing.html
Hope this is helpful!
Regards,
Ranjan