+ Start a Discussion
Siva SakthiSiva 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
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

 
Best Answer chosen by Siva Sakthi
Annu ChoudharyAnnu Choudhary

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.
 

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>

Just a reminder for you that please select as the best answer if it is work for you.
Thanks,
Annu Choudhary

All Answers

Alain CabonAlain Cabon

FirstName, LastName are not read by the query.
 
return [SELECT Name, FirstName, LastName, Email,Phone,Maximum__c,Minimum__c FROM Contact WHERE AccountId =: recordId];
Siva SakthiSiva Sakthi
Hi Alain,
      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 : ''
}
Error


Thanks
Siva
Annu ChoudharyAnnu Choudhary

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.
 

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>

Just a reminder for you that please select as the best answer if it is work for you.
Thanks,
Annu Choudhary
This was selected as the best answer
Siva SakthiSiva Sakthi
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. 
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);
        return refreshApex(this.wiredDataResult);
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: 'Account',
                actionName: 'view'
            }
        });
    })
    .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));
    });
}
Thanks
Siva
Annu ChoudharyAnnu Choudhary
Hi Siva,
Which field you want to edit because of the name field in contact is not editable.
Thanks,
Siva SakthiSiva Sakthi
Hi Annu Choudhary, 
    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.
        return refreshApex(this.recordInput); 
        return refreshApex(this.wiredDataResult); 
        this[NavigationMixin.Navigate]({
 
            type: 'standard__recordPage', 
            attributes: { 
                recordId: this.recordId, 
                objectApiName: 'Account', 
                actionName: 'view' 
            }
 
        });



    
Annu ChoudharyAnnu Choudhary
Hi Siva,
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 
<template>
    <lightning-card title="Contacts" icon-name="standard:Contact" > <br/>
        <div style="width: auto;">
            <template if:true={wiredDataResult.data}>   
            <div class="slds-p-around_medium lgc-bg" style="height: 300px;">
                <lightning-datatable
                        <b>key-field="Id"  </b>
                        data={wiredDataResult.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 SakthiSiva Sakthi
Thanks Annu Choudhary,

          After update the key-field="Id" its working fine.
         After Update the data={wiredDataResult.data}. its working fine.