0

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 -->
                        &nbsp;&nbsp;&nbsp;&nbsp;

                        <!-- 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,

0

I was able to resolve this issue by using Apex Refresh

import { refreshApex } from '@salesforce/apex';

I updated my initial @wire Function to the following:

    // Variables for Data Refresh
    contacts;
    error;
    wiredContactsResult;

    @wire(getContactList, {accountId: '$recordId'})
    contactsResult(result) {
        console.log('result:');
        console.log(result);
        console.log(result.data);

        this.wiredContactsResult = result;
        if(result.data){
            console.log('data');
            console.log(result.data);
            this.contacts = result.data;
        } else if (result.error) {
            console.log('error');
            console.log(error);
        }
    }

And then added the following when I wanted to refresh the data or where applicable:

                console.log('Returning updated Contact List');
                return refreshApex(this.wiredContactsResult);`

For more extensive explanation please see the following Documentation:

1
  • If this approach resolved your question, can you mark it as accepted so it no longer shows up as an open question? – Adrian Larson Mar 5 at 13:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.