You need to sign in to do that
Don't have an account?
Siva Sakthi
LWC Inline Edit Record Getting Error
Hi All,
I had a LWC component which simply update an child (contact) record using Inline Edit. I am getting this error : Uncaught (in promise) TypeError: Cannot read property 'message' of undefined at eval (lwc_utils.js:4). I am using this LWC component Account record detail page to display associate child (contact) records. Please any one guide me how to fix this issue.
Unable to edit this record using inline edit. Got this error
Thanks
Siva
I had a LWC component which simply update an child (contact) record using Inline Edit. I am getting this error : Uncaught (in promise) TypeError: Cannot read property 'message' of undefined at eval (lwc_utils.js:4). I am using this LWC component Account record detail page to display associate child (contact) records. Please any one guide me how to fix this issue.
Unable to edit this record using inline edit. Got this error
Apex Class: ContactController ----------------------------------------- public with sharing class ContactController { @AuraEnabled(Cacheable = true) public static List<Contact> getRecords(String recordId) { return [SELECT Name, Email,Phone,Maximum__c,Minimum__c FROM Contact WHERE AccountId =: recordId]; } @AuraEnabled public static void saveContacts(List<Contact> conList){ Insert conList; } }
Java Script: ---------------- import { LightningElement, track, wire, api } from 'lwc'; import { getRecord } from 'lightning/uiRecordApi'; import CONTACT_OBJECT from '@salesforce/schema/Contact'; import ID_FIELD from '@salesforce/schema/Contact.Id'; import FIRSTNAME_FIELD from '@salesforce/schema/Contact.FirstName'; import LASTNAME_FIELD from '@salesforce/schema/Contact.LastName'; import EMAIL_FIELD from '@salesforce/schema/Contact.Email'; import PHONE_FIELD from '@salesforce/schema/Contact.Phone'; import MAX_FIELD from '@salesforce/schema/Contact.Maximum__c'; import MIN_FIELD from '@salesforce/schema/Contact.Minimum__c'; import getRecords from '@salesforce/apex/ContactController.getRecords'; import saveContacts from '@salesforce/apex/ContactController.saveContacts'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; import { NavigationMixin } from 'lightning/navigation'; import { refreshApex } from '@salesforce/apex'; import { updateRecord } from 'lightning/uiRecordApi'; const columns = [ { label: 'Name', fieldName: 'Name' , type: 'Text', editable: true}, { label: 'Email', fieldName: 'Email', type: 'Email', editable: true }, { label: 'Phone', fieldName: 'Phone', type: 'Phone', editable: true }, { label: 'Maximum', fieldName: 'Maximum__c', type: 'number', editable: true }, { label: 'Minimum', fieldName: 'Minimum__c', type: 'number', editable: true }, ]; export default class DatatableBasic extends NavigationMixin(LightningElement) { @api recordId; @track data; @track contactList = []; @track draftValues = []; @track firstName = FIRSTNAME_FIELD; @track lastName = LASTNAME_FIELD; @track email = EMAIL_FIELD; @track phone = PHONE_FIELD; @track max = MAX_FIELD; @track min = MIN_FIELD; @track columns = columns; @track tableLoadingState = true; @track noRecordsFound = true; error; wiredDataResult; con = { FirstName : this.firstName, LastName : this.lastName, Email : this.email, Phone : this.phone, AccountId : this.recordId, Maximum__c : this.max, Minimum__c : this.min, key : '' } concCellChange(event){ console.log(event.detail); } handleSave(event) { const fields = {}; fields[ID_FIELD.fieldApiName] = event.detail.draftValues[0].Id; fields[FIRSTNAME_FIELD.fieldApiName] = event.detail.draftValues[0].FirstName; fields[LASTNAME_FIELD.fieldApiName] = event.detail.draftValues[0].LastName; fields[EMAIL_FIELD.fieldApiName] = event.detail.draftValues[0].Email; fields[PHONE_FIELD.fieldApiName] = event.detail.draftValues[0].Phone; fields[MAX_FIELD.fieldApiName] = event.detail.draftValues[0].Maximum__c; fields[MIN_FIELD.fieldApiName] = event.detail.draftValues[0].Minimum__c; const recordInput = {fields}; updateRecord(recordInput) .then(() => { this.dispatchEvent( new ShowToastEvent({ title: 'Success', message: 'Contact updated', variant: 'success' }) ); // Clear all draft values this.draftValues = []; // Display fresh data in the datatable return refreshApex(this.recordInput); }) .catch(error => { this.message = undefined; this.error = error; this.dispatchEvent( new ShowToastEvent({ title: 'Error creating record', message: error.body.message, variant: 'error' }) ); console.log("error", JSON.stringify(this.error)); }); } @wire(getRecords , { recordId: '$recordId' }) wiredRecordsMethod(result) { this.wiredDataResult = result; if (result.data) { this.data = result.data; this.error = undefined; if(this.data.length > 0){ this.noRecordsFound = false; } else{ this.noRecordsFound = true; } } else if (result.error) { this.error = result.error; this.data = undefined; } } }
HTML: --------- <template> <lightning-card title="Contacts" icon-name="standard:Contact" > <br/> <div style="width: auto;"> <template if:true={data}> <div class="slds-p-around_medium lgc-bg" style="height: 300px;"> <lightning-datatable key-field="id" data={data} columns={columns} show-row-number-column="true" hide-checkbox-column="true" oncellchange={concCellChange} onsave={handleSave} draft-values={draftValues} > </lightning-datatable> <template if:true= {noRecordsFound}> --No Contact Records Found-- </template> </div> </template> </div> </lightning-card> </template>
Thanks
Siva
Hi Siva,
Please Change key-field="id" to key-field="Id" (small i to capital I) in the lightning data table.
please select as a best answer if it is work for you.
Replace your Html file by this text.
Just a reminder for you that please select as the best answer if it is work for you.Thanks,
Annu Choudhary
All Answers
FirstName, LastName are not read by the query.
After updated the query also got the same error.
@AuraEnabled(Cacheable = true)
public static List<Contact> getRecords(String recordId) {
return [SELECT FirstName,LastName,Email,Phone,Maximum__c,Minimum__c FROM Contact WHERE AccountId =: recordId];
}
JS:
const columns = [
{ label: 'FirstName', fieldName: 'FirstName' , type: 'text', editable: true},
{ label: 'LastName', fieldName: 'LastName' , type: 'text', editable: true},
{ label: 'Email', fieldName: 'Email', type: 'Email', editable: true },
{ label: 'Phone', fieldName: 'Phone', type: 'Phone', editable: true },
{ label: 'Maximum', fieldName: 'Maximum__c', type: 'number', editable: true },
{ label: 'Minimum', fieldName: 'Minimum__c', type: 'number', editable: true },
];
con = {
FirstName : this.firstName,
LastName : this.lastName,
Email : this.email,
Phone : this.phone,
AccountId : this.recordId,
Maximum__c : this.max,
Minimum__c : this.min,
key : ''
}
Thanks
Siva
Hi Siva,
Please Change key-field="id" to key-field="Id" (small i to capital I) in the lightning data table.
please select as a best answer if it is work for you.
Replace your Html file by this text.
Just a reminder for you that please select as the best answer if it is work for you.Thanks,
Annu Choudhary
After update the key-field="Id" its working fine.
I am facing another issue after update the tableis not freshed. After adding the return refresh and Navigation as well. Please guide me where I made mistakes. Thanks
Siva
Which field you want to edit because of the name field in contact is not editable.
Thanks,
First Name, Last Name, other custom fields like Maximum__c & Minimum__c as well. After edit click on save immediatly get the success message. But from the table not refreshed the changed values. I have added the below codes into the handleSave(event) . But unable to refresh the datatable after changes made.
Please use {wiredDataResult.data} in place of {data} in markup and then try it should be work fine.
If it works for you please select as the best answer so that it can help others
Thanks,
After update the key-field="Id" its working fine.
After Update the data={wiredDataResult.data}. its working fine.
After updating the key-field="Id" it's working fine.