1

I have an existing LWC, we have a community page that holds it and one other LWC (which is part of a managed package we cannot control or edit). The managed component sends and receives data for payments, this causes a trigger to fire that updates our payment record which is displayed in our component.

The payment record displayed in our component has it's status field updated by the trigger. When that happens we want the page to reload and display a thank you message. I read the official LWC documentation many, many times and tried every variation of @api, @track, @wire and everything else they mention to get my page to refresh when the trigger updates the record status. Below is the latest code where I try using a get method, but I have tried many other approaches and nothing works.

I obviously don't understand the use of @wire and the getrecord method? I thought any update to the record would be "sent" to the component, do I need some extra code to "listen" for the change? I am totally stuck and would appreciate any help. Again the code below is only the latest try:

import {getRecord} from 'lightning/uiRecordApi';
import getSalesOrderLines from '@salesforce/apex/PaymentController.getSalesOrderLines';
import getInvoiceLines from '@salesforce/apex/PaymentController.getInvoiceLines';
import {processLines, processErrors} from './PaymenDetailUtils';
import SALES_ORDER_ID_FIELD from '@salesforce/schema/Payment__c.SalesOrder__c';
import INVOICE_ID_FIELD from '@salesforce/schema/Payment__c.Invoice__c';
import STATUS_FIELD from '@salesforce/schema/Payment__c.Status__c';
const FIELDS = [SALES_ORDER_ID_FIELD, INVOICE_ID_FIELD, STATUS_FIELD];
const COLUMNS = [
    {label: 'Description',
        fieldName: 'itemName',
        type: 'text',
        wrapText: true,},
    {label: 'Begin Date',
        fieldName: 'beginDate',
        type: 'date-local',
        hideDefaultActions: true,
        typeAttributes:{
            year: 'numeric',
            month: 'short',
            day: '2-digit'}},
    {label: 'End Date',
        fieldName: 'endDate',
        type: 'date-local',
        hideDefaultActions: true,
        typeAttributes:{
            year: 'numeric',
            month: 'short',
            day: '2-digit'
        }},
    {label: 'Amount',
        fieldName: 'total',
        type: 'text',
        hideDefaultActions: true,
    }
];

export default class RecordComponent extends LightningElement {
    showThankyou;
    @api recordId;
    @track payment;
    salesOrderId;
    invoiceId;
    lines;
    columns = COLUMNS;

    //Get the payment record so we can identify the sales order for which details are needed.
    @wire(getRecord, {recordId: '$recordId', fields: FIELDS })
    loadPayment({ error, data }) {
        if (error) {
            processErrors(error);
        } else if (data) {
            this.payment = data;
            console.log(this.payment.fields.Status__c.value);
            if(this.amf.fields.Status__c.value === 'Paid'){
                this.showThankyou = true;
            }
            if (this.payment.fields.SalesOrder__c.value !== null) {
                this.salesOrderId = this.amf.fields.SalesOrder__c.value;
            }
            else if (this.payment.fields.Invoice__c.value !== null) {
                this.invoiceId = this.amf.fields.Invoice__c.value;
            }
        }
    }

    get showThankYou(){
        if(this.payment.fields.Status__c.value === 'Paid'){
            return true;
        }else{
            return false;
        }

    }
    //Use the sales order id to fetch details for the lines being paid.
    @wire(getSalesOrderLines, {salesOrderId: '$salesOrderId'})
    loadOrderLines({error, data}) {
        if (error) {
            processErrors(error);
        } else if (data) {
            this.lines = processAMFLines(data);
        }
    }

    //Use the invoice id to fetch details for the lines being paid.
    @wire(getInvoiceLines, {invoiceId: '$invoiceId'})
    loadInvoiceLines({error, data}) {
        if (error) {
            processErrors(error);
        } else if (data) {
            this.lines = processLines(data);
        }
    }

}



<template>
    <div class="PaymentDetail" title="Details">
        <h2>Payment Details</h2>
        <div class="amfPaymentDetail__table">
            <template if:true={lines}>
                <lightning-datatable
                    key-field="id"
                    data={lines}
                    columns={columns}
                    hide-checkbox-column=true>
                </lightning-datatable>
            </template>
            <template if:true={showThankyou}>
                <p>Thanks Pal!</p>
            </template>
        </div>
    </div>
</template>
2
  • 1
    getRecord is a LDS wire method which automatically updates the record values if the data is stale. I have implemented something similar and the code you have should work. Can you see if the 'amf' field in 'if(this.amf.fields.Status__c.value === 'Paid'){ this.showThankyou = true; }' is the culprit?
    – Naga
    Aug 27 '20 at 22:58
  • Thanks Naga, I have used both console.log and displaying the field on the page, it is indeed being set correctly. If I refresh the page everything works fine, but for some reason the updated state is not triggering a change in the page. Nor does it show up in the console unless I refresh the page.
    – ScottH7a9
    Aug 27 '20 at 23:23

Your Answer

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

Browse other questions tagged or ask your own question.