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

Last changes made by autosave not saved
Hi!
I have leadtable as in the image.

I need get leads to save them automatically. In principle, saving works. But the changes made to the last field are not saved. Doesn't matter Title or Phone. Please tell me what's wrong.
Code:
Html
<template>
<lightning-card title="Leads">
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="Name">Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Title">Title</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Phone">Phone</div>
</th>
</tr>
</thead>
<tbody>
<template for:each={leads} for:item="lead">
<tr class="slds-hint-parent" key={lead.Id}>
<td >
<div class="slds-truncate" title={lead.LeadName}>
<a href={lead.recordLink}>{lead.LeadName}</a>
</div>
</td>
<td >
<!-- Title -->
<lightning-input type="text" variant="label-hidden" name={lead.Id} label="Title" value={lead.Title} onblur={handleBlur}></lightning-input>
</td>
<td >
<!-- Phone -->
<lightning-input type="text" variant="label-hidden" name={lead.Id} label="Phone" value={lead.Phone} onblur={handleBlur}></lightning-input>
</td>
</tr>
</template>
</tbody>
</table>
</lightning-card>
</template>
Js
import { LightningElement, wire} from 'lwc';
import getLeads from '@salesforce/apex/ProjectThree.getLeads';
import { updateRecord } from 'lightning/uiRecordApi';
export default class LeadTable extends LightningElement {
leads;
leadDetails=[];
@wire(getLeads)
wiredLeads(value) {
this.leadDetails = value;
const {error, data} = value;
if (data) {
let leadData = JSON.parse(JSON.stringify(data));
leadData.forEach(record => {
record.recordLink = "/" + record.Id;
record.LeadName = record.Name;
});
this.leads = leadData;
} else if (error) {
this.error = error;
}
}
handleBlur(event){
let getValue = event.target.value;
let fieldLable = event.target.label;
let sId = event.target.name;
this.handleInputChange(event, sId, getValue, fieldLable);
}
handleInputChange(event, sId, getValue, fieldLable){
const fields = {};
fields['Id'] = sId;
fields[fieldLable] = getValue;
const recordInput = { fields };
updateRecord(recordInput)
.then(() => {
})
.catch(error => {
alert('error : ' + JSON.stringify(error));
});
}
}
Apex
public with sharing class ProjectThree {
@AuraEnabled(cacheable=true)
public static List<Lead> getLeads() {
List<Lead> leads = [
SELECT Id, Name, Title, Phone
FROM Lead
Limit 3
];
return leads;
}
}
I have leadtable as in the image.
I need get leads to save them automatically. In principle, saving works. But the changes made to the last field are not saved. Doesn't matter Title or Phone. Please tell me what's wrong.
Code:
Html
<template>
<lightning-card title="Leads">
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="Name">Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Title">Title</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Phone">Phone</div>
</th>
</tr>
</thead>
<tbody>
<template for:each={leads} for:item="lead">
<tr class="slds-hint-parent" key={lead.Id}>
<td >
<div class="slds-truncate" title={lead.LeadName}>
<a href={lead.recordLink}>{lead.LeadName}</a>
</div>
</td>
<td >
<!-- Title -->
<lightning-input type="text" variant="label-hidden" name={lead.Id} label="Title" value={lead.Title} onblur={handleBlur}></lightning-input>
</td>
<td >
<!-- Phone -->
<lightning-input type="text" variant="label-hidden" name={lead.Id} label="Phone" value={lead.Phone} onblur={handleBlur}></lightning-input>
</td>
</tr>
</template>
</tbody>
</table>
</lightning-card>
</template>
Js
import { LightningElement, wire} from 'lwc';
import getLeads from '@salesforce/apex/ProjectThree.getLeads';
import { updateRecord } from 'lightning/uiRecordApi';
export default class LeadTable extends LightningElement {
leads;
leadDetails=[];
@wire(getLeads)
wiredLeads(value) {
this.leadDetails = value;
const {error, data} = value;
if (data) {
let leadData = JSON.parse(JSON.stringify(data));
leadData.forEach(record => {
record.recordLink = "/" + record.Id;
record.LeadName = record.Name;
});
this.leads = leadData;
} else if (error) {
this.error = error;
}
}
handleBlur(event){
let getValue = event.target.value;
let fieldLable = event.target.label;
let sId = event.target.name;
this.handleInputChange(event, sId, getValue, fieldLable);
}
handleInputChange(event, sId, getValue, fieldLable){
const fields = {};
fields['Id'] = sId;
fields[fieldLable] = getValue;
const recordInput = { fields };
updateRecord(recordInput)
.then(() => {
})
.catch(error => {
alert('error : ' + JSON.stringify(error));
});
}
}
Apex
public with sharing class ProjectThree {
@AuraEnabled(cacheable=true)
public static List<Lead> getLeads() {
List<Lead> leads = [
SELECT Id, Name, Title, Phone
FROM Lead
Limit 3
];
return leads;
}
}
Now changes because of onblur are saved only if the user, after entering information in the field, makes the field inactive. But is it possible to do something differently so that the information is saved immediately after the entering ?