0

I have an accordion component that retrieves deal terms records. Each deal term has a payment schedule. My LWC pulls all the deal terms plus related payment schedules and displays on a page like this: enter image description here

The data for data table is coming from related records. My apex SOQL query looks like this:

    public with sharing class MLSE_DealTermsEditor {

    public String currentRecordId {get;set;}
     
    public MLSE_DealTermsEditor(ApexPages.StandardController controller) {
            currentRecordId  = ApexPages.CurrentPage().getparameters().get('id');            
    }
    
    @AuraEnabled (cacheable=true)
    public static List<Deal_Term__c> RetriveDealTerms(Id contract){        
      return [SELECT Id, Name, (SELECT ID, Name, Amount_Pending__c, Amount_Received__c, Payment_Due_Date__c, Payment_Received_Date__c FROM Payment_Schedules__r) FROM Deal_Term__c WHERE Contract__c =: contract];
    }   

    @AuraEnabled
    public static string UpdatePaymentSchedules(Object data) {
        List<Payment_Schedule__c> paymentSchedulesUpdate = (List<Payment_Schedule__c>) JSON.deserialize(
            JSON.serialize(data),
            List<Payment_Schedule__c>.class
        );
        try {
            update paymentSchedulesUpdate;
            return 'Success: payment schedules updated successfully';
        }
        catch (Exception e) {
            return 'The following exception has occurred: ' + e.getMessage();
        }
    }
}

My lightning component looks like this:

<template>        
    <div class="c-container">   
        <lightning-card  title="Payment Schedule Editor"></lightning-card>        
        <lightning-accordion allow-multiple-sections-open={multiple}>
            <div class="slds-m-around_small">
            <template if:true={deal_terms}>
                <template for:each={deal_terms} for:item="dt">
                    <lightning-accordion-section name={dt.Name} label={dt.Name} key={dt.Id}>
                        <div class="slds-box slds-theme--shade">
                            <div style="height: 450px;">
                                <lightning-datatable
                                    key-field="Id"                
                                    data={dt.Payment_Schedules__r}                  
                                    columns={columns}    
                                    onsave={handleSave}
                                    draft-values={draftValues}                                   
                                >
                                </lightning-datatable>                                     
                            </div>
                        </div>    
                        <template if:true={dt.error}>
                            <!-- handle Apex error -->
                        </template>   
                    </lightning-accordion-section>
                </template>
            </template>            
        </div>
        </lightning-accordion>         
    </div>    
</template>

And JS file:

import { LightningElement, wire, api, track } from 'lwc';
import { getRecordNotifyChange } from 'lightning/uiRecordApi';
import { refreshApex } from '@salesforce/apex';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import getDealTermDetails from '@salesforce/apex/MLSE_DealTermsEditor.RetriveDealTerms';
import updateSchedules from '@salesforce/apex/MLSE_DealTermsEditor.UpdatePaymentSchedules';

export default class Mlse_dealterms_editor extends LightningElement {

    draftValues = [];
    @track wiredResults;
    @track multiple = true;
    @track deal_terms;    
    @track error;
    @track toastVisible;      
    @api recordId;    
    @track columns = [ 
         { label: 'Invoice #', fieldName: 'Name', type: 'text' },         
         { label: 'Invoice Date', fieldName: 'Payment_Due_Date__c', type: 'date-local', editable: true  },
         { label: 'Payment Received Date', fieldName: 'Payment_Received_Date__c', type: 'date-local', editable: true  },      
         { label: 'Amount Pending', fieldName: 'Amount_Pending__c', type: 'currency', editable: true },
         { label: 'Amount Received', fieldName: 'Amount_Received__c', type: 'currency', editable: true  }   
      ];

    @wire(getDealTermDetails, { contract: '$recordId' })
    wiredDealTerms(results) {        
        this.wiredResults = results;
            if (results.data) {
                this.deal_terms = results.data;
                this.error = undefined;                
            } else if (results.error) {
                this.records = undefined;
                this.error = 'Unknown error';
            }           
    }  

    async handleSave(event) {        
        const updatedFields = event.detail.draftValues;                
        // Prepare the record IDs for getRecordNotifyChange()
        const notifyChangeIds = updatedFields.map(row => { return { "recordId": row.Id } });
       // console.log('notifyChangeIds' + JSON.stringify(notifyChangeIds));
        await updateSchedules({data: updatedFields})        
        .then(result => {
       //     console.log(JSON.stringify("Apex update result: "+ result));      
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Records updated',
                    variant: 'success'
                })
            );
    
        // Refresh LDS cache and wires
        getRecordNotifyChange(notifyChangeIds);
        //call refresh to do refreshapex        
        this.refresh();                        
       })            
       .catch(error => {
           console.log(error);
        this.error = error;
        });

    }  

    refresh() {         
        refreshApex(this.wiredResults)
            .then(() => {
                this.draftValues = [];                
               // console.log('refresh apex complete');
            }).catch();
        }
}

I can edit the data in the tables but it's not saving it when i push the save button. What can i do to let can inline edit and save the data?

UPDATE: I added code to save the data (handleSave). However, when i push the SAVE button, i can't get it to disappear and refresh. Here is a screenshot: enter image description here

When i check if it got saved, it did. But it won't remove the SAVE screen after saving.

FINAL UPDATE: I updated the code so that it now works! The only thing missing is the spinner.

2
  • i added eval("$A.get('e.force:refreshView').fire();"); but still nothing – SavvyGoat Jan 19 at 15:36
  • so i updated my code to just use wire but still same issue .. when i hit save it don't disappear. – SavvyGoat Jan 19 at 19:57
0

You are missing the onsave event handler both in your js controller and lightning-datatable and the draftValues parameter.

<lightning-datatable
     key-field="Id"                
     data={dt.Payment_Schedules__r}                  
     columns={columns}
     onsave={handleSave} <--- this here                                      
     draft-values={draftValues} <--- and this >

and implementing the correspondent handleSave method in your js controller.

Here is a well documented example on how your component would look like.

3
  • Thanks, i added the code but upon saving the screen doesn't refresh. It saves the data, but i cannot make the data in the table refresh. – SavvyGoat Jan 19 at 0:27
  • Additionally to the screenshot of the issue, could you update the code blocks to your latest version? – Ideasforce Jan 19 at 1:17
  • ok i updated the code .. – SavvyGoat Jan 19 at 1:30
0

I figured out my own answer. Basically, i created a new function called refresh() and put my async refreshapex call there and it works. One other thing, in order for the thing to work you cant just refresh the data, you have to refresh the entire response as indicated in this post. I've updated my code above for reference.

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.