0

I have an LWC component which has a list of records displayed onload from a wire method. I have an Add button below the list to create new values from a modal save. Now, When I click the add button, I can see the new record getting created in the backend but I could not see the added value in the UI

HTML:

<template>
    <div>{riskcausedetailrecord}</div>
    <template if:true={causerecs}>                        
        <template for:each={causerecs} for:item="cause">                        
            <p key={cause.Id}>
                cause.Name
            </p>
        </template>
    </template>
    <div class="cpcm-container cpcm-button">
        <lightning-button-icon class="cpcm-button-icon" icon-name="utility:add" variant="bare-inverse"
            alternative-text="Add Cause" size="small" onclick={handleCreateCause}>
        </lightning-button-icon>
    </div>
    <template if:true={error}>
        {error}>
    </template> 
    
    <!-- add cause modal -->
    <template if:true={isCreateCauseModal}>
        <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <!-- header -->
                <header class="slds-modal__header">
                    <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={handleCauseModalClose}>
                            <lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small"> </lightning-icon>
                            <span class="slds-assistive-text">Close</span>
                        </button>
                    <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Create New Cause
                    </h2>
                </header>

                <!-- body -->
                <lightning-record-edit-form object-api-name="GRA_Risk_Event_Leg__c" onsubmit={createNewRec}>
                    <div class="slds-modal__content slds-p-around_x-large">
                        <div class="slds-col">
                            <lightning-input-field field-name="Description_Long__c"></lightning-input-field>

                        </div>
                    </div>

                    <!-- footer -->
                    <footer class="slds-modal__footer">
                        <lightning-button class="slds-m-right_small" variant="neutral" name="cancel"
                            label='Cancel' title='Cancel' onclick={handleCauseModalClose}></lightning-button>
                        <lightning-button variant="brand" name="" label='Save' title='Save' type="submit">
                        </lightning-button>
                    </footer>
                </lightning-record-edit-form>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>

JS:

import { LightningElement,api, track, wire } from 'lwc';
import { refreshApex } from '@salesforce/apex';

export default class causeandprevention_lwc extends LightningElement {

    @api riskcausedetailrecord;
    @track causerecs;
    @track error;
    @track isCreateCauseModal = false;

    connectedCallback(){
        console.log('riskcausedetailrecord:::'+this.riskcausedetailrecord);
    }

    @wire(getCauseRecords, {reId: '$riskcausedetailrecord'})
    causeRecords({data, error}){
        if(data){
            this.causerecs = data;
            console.log('causerecs:::'+JSON.stringify(this.causerecs));
            this.error = undefined;
        }
        else if (error) {
            this.error = error;
            this.causerecs = undefined;
        }
    }
    
    handleCreateCause() {
        this.isCreateCauseModal = true;
        //this.cntrid = this.containeridselected;
    }
    handleCauseModalClose() {
        this.isCreateCauseModal = false;
    }
    createNewRec(event) {
        var descval = event.detail.fields;
        descval.GRA_Risk_Event__c = this.riskcausedetailrecord;
        var riskeventleg1 = JSON.stringify(descval);
  
        var type1 = 'Cause';

        saveNewCauseOrConsequenceCard({ riskEventLeg: riskeventleg1, type: type1 }) 
            .then(result => {
               
                this.isCreateCauseModal = false;
                console.log('result for cause creation' + JSON.stringify(result));
                return refreshApex(this.causerecs);
                
            });

            
    }

}

I used refreshApex in the save method to refresh the wired property but this is still not refreshing the list.

Expected: I would like to show the updated list on clicking save in the modal. Any way to refresh the list in UI on clicking save.

I have 4 records here and added the fifth but the fifth record is getting displayed only on manual refresh.

enter image description here

4
  • You must pass the whole object returned by the wire adapter to refreshApex, not just the data property. Please see this: Refresh Apex in LWC not working
    – RubenDG
    Commented Apr 8, 2023 at 12:41
  • This did wok :-), Thanks @RubenDG for you help on this.
    – sfdcDev
    Commented Apr 8, 2023 at 15:06
  • One question though, @RubenDG, will the refreshApex work only for wired methods, can we use for custom methods aswell?
    – sfdcDev
    Commented Apr 8, 2023 at 15:11
  • refreshApex needs the value provisioned by a wire adapter, using data returned by an apex method called imperatively won't work. In this case you have to call that method again.
    – RubenDG
    Commented Apr 8, 2023 at 20:24

0

Browse other questions tagged .