I have a LWC that calls an APEX class to query Contacts related to an account and display them. The LWC allows the user to update displayed fields. I am able to successfully call the APEX, display the records, and update the records. I am having trouble updating the displayed values when they change.
Here is the HTML:
<template>
<!-- Card -->
<lightning-card title="Contact Information" value={recordId} icon-name="standard:contact">
<!-- Actions -->
<div slot="actions">
<lightning-button-icon icon-name="utility:add" variant="bare" alternative-text="New Contact" size="Medium"
onclick={addContact}>
</lightning-button-icon>
</div>
<template if:true={contacts.data}>
<ul class="slds-has-dividers_around-space" style="margin-right: 5px; margin-left: 5px;">
<template for:each={contacts.data} for:item="contact">
<li class="slds-item" key={contact.Id}>
<!-- Contact Card -->
<lightning-card title={contact.Name} icon-name="standard:client">
<!-- Contact Card Actions -->
<div slot="actions">
<lightning-button-icon icon-name="utility:edit_form" variant="bare"
alternative-text="Update" onclick={openmodal} value={contact.Id}
data-id={contact.Id} target="_blank">
</lightning-button-icon>
</div>
<!-- Display Fields -->
<div class="slds-region_narrow">
<dl class="slds-dl_horizontal">
<!-- Title -->
<dt class="slds-dl_horizontal__label slds-text-title">Title:</dt>
<dd class="slds-dl_horizontal__detail">
{contact.Title}
</dd>
<!-- Email -->
<dt class="slds-dl_horizontal__label slds-text-title">Email:</dt>
<dd class="slds-dl_horizontal__detail">
{contact.Email}
</dd>
<!-- Mobile Phone -->
<dt class="slds-dl_horizontal__label slds-text-title">Mobile Phone:</dt>
<dd class="slds-dl_horizontal__detail">
<lightning-click-to-dial value={contact.MobilePhone} record-id={contact.Id}>
{contact.MobilePhone}
</lightning-click-to-dial>
</dd>
</dl>
</div>
</lightning-card>
</li>
</template>
</ul>
</template>
</lightning-card>
<!-- Modal Edit 'Contact' -->
<template if:true={openmodel}>
<div class="demo-only" style="height: 640px;">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<!-- TITLE -->
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">
{fullName}
</h2>
</header>
<!-- BODY -->
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<!-- CREATE CONTACT -->
<lightning-card>
<lightning-record-edit-form record-id={recordEditId} object-api-name="Contact">
<!-- Lightning Messages Display -->
<lightning-messages></lightning-messages>
<!-- Contact Edit Form -->
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-2">
<!-- Title -->
<lightning-input-field data-field="Title" field-name="Title">
</lightning-input-field>
<!-- Email -->
<lightning-input-field data-field="Email" field-name="Email">
</lightning-input-field>
<!-- Mobile Phone -->
<lightning-input-field data-field="MobilePhone" field-name="MobilePhone">
</lightning-input-field>
</div>
</div>
</lightning-record-edit-form>
</lightning-card>
</div>
<!-- FOOTER -->
<footer class="slds-modal__footer">
<!-- Cancel Button -->
<lightning-button label="Cancel" variant="neutral" onclick={closeModal}></lightning-button>
<!-- Spacing -->
<!-- Update/Save Button -->
<lightning-button label="Update" variant="brand" type="submit" onclick={saveForm}>
</lightning-button>
</footer>
</div>
</section>
<!-- Create Shading for Modal -->
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
</template>
</template>
The user clicks an edit button associated to the contact which opens a modal and allows the user to update and save the record.
Here is the JS:
import {LightningElement,wire,api,track} from 'lwc';
import getContactList from '@salesforce/apex/getAccountContacts.getContactList';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import {NavigationMixin} from 'lightning/navigation';
import {updateRecord} from 'lightning/uiRecordApi';
import ID_FIELD from '@salesforce/schema/Contact.Id';
import TITLE_FIELD from '@salesforce/schema/Contact.Title';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email';
import MOBILE_FIELD from '@salesforce/schema/Contact.MobilePhone';
export default class AccountContactInformation extends NavigationMixin(LightningElement) {
@api recordId; // Grab the Record Id
@api objectApiName; // Grab the Objects API Name
@track openmodel = false; // Default Modal to Closed
@track recordEditId;
@wire(getContactList, {
accountId: '$recordId'
})
contacts
// Open Modal
openmodal(event) {
console.log(this.objectApiName);
this.openmodel = true;
this.recordEditId = event.target.value;
console.log(this.recordEditId);
}
// Close Modal
closeModal() {
this.openmodel = false
}
saveForm() {
const allValid = [...this.template.querySelectorAll('lightning-input')]
.reduce((validSoFar, inputFields) => {
inputFields.reportValidity();
return validSoFar && inputFields.checkValidity();
}, true);
const fields = {};
fields[ID_FIELD.fieldApiName] = this.recordEditId;
fields[TITLE_FIELD.fieldApiName] = this.template.querySelector("[data-field='Title']").value;
fields[EMAIL_FIELD.fieldApiName] = this.template.querySelector("[data-field='Email']").value;
fields[MOBILE_FIELD.fieldApiName] = this.template.querySelector("[data-field='MobilePhone']").value;
const recordInput = {
fields
};
if (allValid) {
updateRecord(recordInput)
.then(() => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Contact updated',
variant: 'success'
})
);
})
.catch(error => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Error Updating record',
message: error.body.message,
variant: 'error'
})
);
});
this.closeModal();
}
else {
// The form is not valid
this.dispatchEvent(
new ShowToastEvent({
title: 'Something is wrong',
message: 'Check your input and try again.',
variant: 'error'
})
);
}
}
}
I tried calling the APEX again to update the fields and it does look like it the values are updating.
Any assistance would be greatly appreciated.
Thanks,
