I am facing an issue with getting the latest data on a simple search and update form that i have made in LWC. All i am trying to do is to search a case, get the details and then update it. It works fine when i search for the first case.
Issue : Suppose i typed in case # 00001028 and press "Get case" it works, and without updating the reocord i think hey, that was not the right case # and then i edit the case # to 00001027 and then press "Get case" i get an error pop up saying cannot read property 'api Name' of undefined. However, once is press ok on the error, the case 00001027 is rendered on the lighting-record-form??? This is weird.. Please help.
Below is the code i am using
<template>
<lightning-card title='Case Search and Update'>
<div class="slds-p-around_medium lgc-bg">
<lightning-input type="text" label="Case #" placeholder='Search for a Case..' onchange={handleCaseNumChange}></lightning-input>
</div>
<template if:true={showGetCase}>
<div class="slds-p-left_medium">
<lightning-button variant="brand" label="Get Case" onclick={handleButtonClick} ></lightning-button>
</div>
</template>
<div class="slds-p-left_medium">
<template if:true={showForm}>
<lightning-record-form
record-id={recordId}
object-api-name={objectApiName}
fields={fields}
columns="2"
mode="view"
onsubmit={handleSubmit}
oncancel={handleCancel}
onsuccess={handleSuccess}
onerror={handleError}
onload={handleload}>
</lightning-record-form>
</template>
</div>
</lightning-card>
</template>
JS :
import { LightningElement,track,wire,api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import findId from '@salesforce/apex/fetchCaseNumber.fetchId'
import REASON_FIELD from '@salesforce/schema/Case.Reason';
import ContactEmail_FIELD from '@salesforce/schema/Case.ContactEmail';
import AccountId_FIELD from '@salesforce/schema/Case.AccountId';
import Type_FIELD from '@salesforce/schema/Case.Type';
import Description_FIELD from '@salesforce/schema/Case.Description';
import Subject_FIELD from '@salesforce/schema/Case.Subject';
import Comments_FIELD from '@salesforce/schema/Case.Comments';
import ParentId_FIELD from '@salesforce/schema/Case.ParentId';
import Product_FIELD from '@salesforce/schema/Case.Product__c';
import IsEscalated_FIELD from '@salesforce/schema/Case.IsEscalated';
import OwnerId_FIELD from '@salesforce/schema/Case.OwnerId';
import { refreshApex } from '@salesforce/apex';
export default class SearchAndUpdateCase extends LightningElement {
@track caseNumber;
@track csNum;
showForm = false;
showGetCase = true;
@track recordId;
objectApiName = 'Case';
wireddata;
@wire(findId,{caseNum : '$csNum'})
csId(result){
if(result.data){
this.wireddata = result;
//this.recordId = result.data;
}
else if(result.error){
console.log('>>>>Did not find record>>>>');
}
} ;
@track fields = [REASON_FIELD,ContactEmail_FIELD,AccountId_FIELD,Description_FIELD,Type_FIELD,Subject_FIELD,
Comments_FIELD,ParentId_FIELD,Product_FIELD,IsEscalated_FIELD,OwnerId_FIELD ];
handleCaseNumChange(event){
//console.log('>>Inside handle case change');
this.csNum = event.target.value;
//console.log('>>>The typed incident number is '+this.csNum);
//console.log('>>>Case Id is :'+JSON.stringify(this.csId));
}
handleButtonClick(event){
//refreshApex(this.wireddata);
//console.log( '>>>Button click data'+this.csId.data);
//if(this.csId){
if(this.wireddata.data){
if (this.showForm===false)
this.showForm = true;
//this.recordId = this.csId.data;
this.recordId = this.wireddata.data;
refreshApex(this.wireddata);
}
//this.showGetCase = false;
}
handleSubmit(event){
event.preventDefault(); // stop the form from submitting
console.log('>>>Event target>>'+event.target);
console.log('>>>Event detail>>'+event.detail);
console.log('>>>Event data>>'+event.data);
console.log('>>Inside Submit<<');
const fields = event.detail.fields;
//fields.Comments += 'My Custom Comment'; // modify a field
this.template.querySelector('lightning-record-form').submit(fields);
}
handleSuccess(event){
console.log('>>>Inside success<<<');
const evt = new ShowToastEvent({
title: "Case Updated",
message: "Record ID: " + event.detail.id,
variant: "success"
});
this.dispatchEvent(evt);
this.showForm = false;
//refreshApex(this.wireddata);
}
handleCancel(event){
console.log('>>Inside Cancel<<');
this.showForm = false;
}
handleError(event){
console.log('>>Inside error>>');
}
handleload(event){
console.log('>>>>Loaded<<<<');
//refreshApex(this.wireddata);
}
}
APEX:
public class fetchCaseNumber {
@AuraEnabled(cacheable=true)
public static string fetchId(string caseNum){
case cs = new case();
system.debug('>>Case Num is >> '+caseNum);
cs = [select Id from case where casenumber = :caseNum];
system.debug('>>Returning >> '+cs);
return (string)cs.Id;
}
}
.
