0

Ive developed a component that lists Contacts related to an Account. Each Contact listed has an action button that opens a modal window to edit fields on the Contact. If I change the value in one of the fields on the form and save, the data thats received by the Apex controller is unchanged. How do I pass the changed form data to the Apex controller? I think this is related to my apex method that is annotated with @AuraEnable(cacheable=true), but Im having trouble finding a workaround. Thoughts?

<template>

    <!-- Lightning Data Table -->
    <lightning-card title="People"> 
        <lightning-datatable data={people} 
                             columns={columns} 
                             key-field="accountid"
                             hide-checkbox-column="true"
                             onrowaction={handleRowAction}></lightning-datatable> 
    </lightning-card> 

    <!-- Edit Record Modal Window --> 
    <template if:true={bShowModal}>
        <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 slds-modal_large">
           <div class="slds-modal__container">
              <!-- modal header start -->
              <header class="slds-modal__header">
                 <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                    <lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small" ></lightning-icon>
                 </button>
                 <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">{record.firstname} {record.lastname}</h2>
              </header>
              <!-- modal body start -->
              <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">

                <div class="c-container">
                    <h3 class="slds-section-title--divider">Personal Information</h3>
                    <lightning-layout multiple-rows="true">
                        <lightning-layout-item  size="12" small-device-size="12" medium-device-size="4" large-device-size="4">
                            <div class="custom-pad"><lightning-input name="fname" type="text" label="First" value={record.firstname} onchange={handleSavePerson}></lightning-input></div>
                        </lightning-layout-item>
                        <lightning-layout-item size="12" small-device-size="12" medium-device-size="4" large-device-size="4">
                            <div class="custom-pad"><lightning-input type="text" label="Middle" value={record.middlename}></lightning-input></div>
                        </lightning-layout-item>
                        <lightning-layout-item size="12" small-device-size="12" medium-device-size="4" large-device-size="4">
                                <div class="custom-pad"><lightning-input type="text" label="Last" value={record.lastname}></lightning-input></div>
                        </lightning-layout-item>

                    </lightning-layout>

                </div>

              </div>
              <!-- modal footer start-->
              <footer class="slds-modal__footer">
                   <lightning-button variant="brand"
                    label="Close"
                    title="Close"
                    onclick={closeModal}
                    ></lightning-button>
              </footer>
           </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
     </template>

</template>
import { LightningElement, wire, track, api} from 'lwc';

import getpeople from '@salesforce/apex/Onboarding.getpeople';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import savePersonData from '@salesforce/apex/Onboarding.savePersonInfo';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class OnboardingPeople extends LightningElement {

    @api recordId;
    @api people = [];
    @api cards = [];
    @track record = {};
    @track rowOffset = 0;
    @track error;
    @track bShowModal = false;
    @track value;

    @track columns = [
        {
            label: 'Action',
            type: 'button-icon',
            initialWidth: 75,
            typeAttributes: {
                iconName: 'action:edit',
                title: 'Edit',
                variant: 'border-filled',
                alternativeText: 'Action'
            }
        },
        {
            label: 'First Name',
            fieldName: 'nameUrl',
            type: 'url',
            typeAttributes: {label: { fieldName: 'firstname' }, 
            target: '_blank'},
            sortable: false
        },
        {
            label: 'Last Name',
            fieldName: 'lastname',
            type: 'text',
            sortable: false
        },
        {
            label: 'Roles',
            fieldName: 'roles',
            type: 'text',
            sortable: false
        }

    ];


    @wire(getpeople,{recordId:'$recordId'}) 
    wiredPeople({error, data}){
        if(data){

            this.people = data;
            this.error = undefined;
        } else if (error) {

            this.people = undefined;
            this.error = error;
        }
    }

    handleSavePerson(e){
        //update json object with changed input value
        this.record[e.currentTarget] = e.target.value;
        console.log('this.record----'+JSON.stringify(this.record));
        savePersonData({jsonObject: JSON.stringify(this.record)}).then(res =>{ 
                console.log(res); 
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Changes Saved',
                        variant: 'success'
                    })
                );
        }).catch(err => console.log(err));

    }

    handleChange(event) {
         this.value = event.detail.value;
    }

    // Row Action event to show the details of the record
    handleRowAction(event) {
        const row = event.detail.row;
        this.record = row;
        this.bShowModal = true; // display modal window
    }

    // to close modal window set 'bShowModal' tarck value as false
    closeModal() {
        this.bShowModal = false;
    }

}
public with sharing class Onboarding {

    @AuraEnabled(cacheable=true)
    public static List<OnboardingPeopleResult> getpeople(String recordId) {

        // String roleliststring = '';
        List<String> rolelist = new List<String>();

        List<OnboardingPeopleResult> oprList = new List<OnboardingPeopleResult>(); 

        OnboardingPeopleResult oprobj = new OnboardingPeopleResult();

        for(AccountContactRelation acr : [select Id, AccountId, ContactId, Roles, Contact.Firstname, 
            Contact.Lastname, Contact.AccountId, Contact.Middlename
            from AccountContactRelation 
            where AccountId =: recordId]){

            oprobj = new OnboardingPeopleResult();

            oprobj.accountid = acr.Contact.AccountId;
            oprobj.firstname = acr.Contact.Firstname;
            oprobj.lastname = acr.Contact.Lastname;
            oprobj.middlename = acr.Contact.Middlename;

            oprList.add(oprobj);

        }

        return oprList;
    }

    @AuraEnabled
    public static string savePersonInfo(String jsonObject){

        OnboardingPeopleResult opr = (OnboardingPeopleResult) JSON.deserialize(jsonObject, OnboardingPeopleResult.class);
        system.debug('jsonObject-->'+ opr.firstname);

        String tmpStatus = 'Save Successful';
        return tmpStatus;
    }

}
  • After the update, you are not firing any evet or fetching the updated data. to get the recent data you need to refresh {people} from savePersonData you need to do something to update this.people = with updated data. – Avijit Chakraborty Nov 11 '19 at 17:27
0

see the documentation here

In some cases, you know that the cache is stale. If the cache is stale, the component needs fresh data. To query the server for updated data and refresh the cache, call refreshApex(). For information, scroll down to the Refresh the Cache section.

import { refreshApex } from '@salesforce/apex';
refreshApex(wiredProperty)

Hope this will work. If you need more information please comment here

| improve this answer | |
  • Thank you for the quick response. The changes in the form data are what I want to push to apex though. If I understand correctly if the data is refreshed it will overwrite the user's changes? – user891859 Nov 11 '19 at 17:48
  • You need to save and then refresh your data. please clarify your requirement – Avijit Chakraborty Nov 11 '19 at 18:18
  • That is correct. Im trying to solve the issue with the cached data passing to Apex when the form is saved, it does not include updates the user makes to the form data. Im trying to figure out how to pass the changes to Apex. – user891859 Nov 11 '19 at 18:31
  • Ive updated the original post to ask the specific question. Thanks again. – user891859 Nov 11 '19 at 18:34

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.