1

I have the following LWC javascript which submits a series of lightning record edit forms to create new related records. It is displayed on a standard lightning record form along with a related list component. I am trying to find a way to refresh the data in the related list after adding creating the related records without a hard reload (the approach I'm currently using in my code with window.top.location.reload()) which works but feels pretty clunky).

The other approach I've tried is using eval("$A.get('e.force:refreshView').fire();");. The problem I have here, I think, is that the javascript is refreshing the data before the records are sucessfully created, so the refreshview doesn't include the new related records.

Is there anyway to wait to call the refreshView command until after all the related records are created?

Javascript:

import { LightningElement, track, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class AddInventoryItems extends NavigationMixin(LightningElement) {

keyIndex = 0;
@api recordId;
@track itemList = [
    {
        id: 0
    }
];

addRow() {
    ++this.keyIndex;
    var newItem = [{ id: this.keyIndex }];
    this.itemList = this.itemList.concat(newItem);
}

removeRow(event) {
    if (this.itemList.length >= 2) {
        this.itemList = this.itemList.filter(function (element) {
            return parseInt(element.id) !== parseInt(event.target.accessKey);
        });
    }
}

handleSubmit() {
    var isVal = true;
    this.template.querySelectorAll('lightning-input-field').forEach(element => {
        isVal = isVal && element.reportValidity();
    });
    if (isVal) {
        this.template.querySelectorAll('lightning-record-edit-form').forEach(element => {
            element.submit();
        });
        window.top.location.reload();
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Success',
                message: 'Items successfully created',
                variant: 'success',
            }),
        );
        
    } else {
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Error creating record',
                message: 'Please enter all the required fields',
                variant: 'error',
            }),
        );
    }
   // eval("$A.get('e.force:refreshView').fire();");
    }
}

Html:

<template>
    <lightning-card>
        <h3 slot="title">
            <lightning-icon icon-name="standard:timesheet" alternative-text="Event" size="small"></lightning-icon>
            &nbsp; Add inventory items
        </h3>

        <div class = "slds-p-around_medium" >
            <template for:each={itemList} for:item="item" for:index="index">
                <lightning-record-edit-form key={item.id} object-api-name="inventory__c">
                    <lightning-messages> </lightning-messages>
                        <div class="slds-grid">
                            <div class="slds-size_4-of-12">
                                <div> 
                                    <lightning-input-field field-name="Item_Type__c" variant="label-stacked" required>
                                    </lightning-input-field>
                                </div>
                            </div>
                            <div class="slds-size_2-of-12">
                                <div>
                                    <lightning-input-field field-name="Received__c" variant="label-stacked" required>
                                    </lightning-input-field>
                                </div>
                            </div>
                                <div class = "slds-hide">
                                    <lightning-input-field field-name="donation__c" value={recordId} variant="label-stacked" required>
                                    </lightning-input-field>
                                </div>
                            <div class="slds-size_2-of-12">
                                <div>
                                    <div>
                                        <lightning-icon icon-name="utility:add" access-key={item.id} id={index}
                                            alternative-text="Add Row" size="small" title="Add Row" onclick={addRow}>
                                        </lightning-icon>
                                        &nbsp; &nbsp;
                                        <lightning-icon icon-name="utility:delete" access-key={item.id} id={index}
                                            alternative-text="Delete Row" size="small" title="Delete Row" onclick={removeRow}>
                                        </lightning-icon>
                                    </div>
                                </div>
                            </div>
                        </div>
               </lightning-record-edit-form>
            </template>
            <lightning-layout>
                <div class="slds-align_absolute-center slds-p-top_small" >
                    <lightning-button variant="success" onclick={handleSubmit} name="submit" label="Submit">
                    </lightning-button>
                </div>
            </lightning-layout>
        </div>
    </lightning-card>
    </template>

1 Answer 1

0

Use onsuccess event attribute of record edit form:

    <lightning-record-edit-form
        object-api-name={objectName}
        onsuccess={handleSuccess}>

JS code:
    
    count = 0;

    handleSuccess(event) {
        this.count++;
        if(this.count === this.itemList.length){
           window.top.location.reload();
        }
    }
2
  • Since we are looping through and submitting multiple lighting record edit forms, don't I need a way to get the last success (the last record is created) and refresh at that point?
    – Collen
    Jan 24, 2023 at 18:03
  • @Collen: Sorry I ignore that aspect. I have updated the Js code with a new property called 'count'. You increment it whenever the success event is fired for a record and then check it against the itemlist's length and then proceed to reload. Jan 25, 2023 at 16:05

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .