Refresh Standard Related List in LWC

Hello friends, today we are going to explore how to Refresh Standard Related List in LWC. When working with related lists in Salesforce, it is crucial to have accurate and up-to-date information.

However, in the past, refreshing a related list to reflect changes made on the related records could be cumbersome. Users often had to manually refresh the entire page or navigate away and come back to see the updated information. This process was time-consuming and could disrupt the workflow.

Also, check this: LWC Coding Best Practices

Key Highlights :

1. This feature allows developers to create Lightning Web Components that can refresh related lists.
2. Real-time updates: The Refresh Standard Related List feature enables instant updates to related lists as changes occur in the related records.
3. Enhanced user experience: The seamless and real-time updates provided by Refresh Standard Related List contribute to a better user experience.
4. use import { RefreshEvent } from ‘lightning/refresh’; for refresh.

Code :

refreshRelatedList.HTML:

<template>
    <lightning-card title="Refresh Standard Related List in LWC" icon-name="standard:record">
        <template if:true={showLoading}>
            <lightning-spinner alternative-text="Loading" size="medium" class="spinnerClass"></lightning-spinner>
        </template>
        <div class="slds-m-around_medium">
            <lightning-input label="LastName" value='' data-field="LastName" class="slds-m-bottom_x-small" required>
            </lightning-input>
            <lightning-input label="Email" value='' data-field="Email" class="slds-m-bottom_x-small">
            </lightning-input>
            <lightning-button label="Create Contact" variant="brand" onclick={handleCreate}>
            </lightning-button>
        </div>
    </lightning-card>
</template>

refreshRelatedList.js:

import { LightningElement, track, api } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { RefreshEvent } from 'lightning/refresh';

export default class RefreshRelatedList extends LightningElement {
    @track showLoading = false;
    @api recordId;

    handleCreate() {
        const allValid = [...this.template.querySelectorAll('lightning-input')]
            .reduce((validSoFar, inputFields) => {
                inputFields.reportValidity();
                return validSoFar && inputFields.checkValidity();
            }, true);

        if (allValid) {
            this.showLoading = true;
            // Create the recordInput object
            var fields = { 'LastName': this.template.querySelector("[data-field='LastName']").value, 'Email': this.template.querySelector("[data-field='Email']").value, 'AccountId':this.recordId };

            const recordInput = { 'apiName': 'Contact', fields };
            console.log(recordInput);

            createRecord(recordInput)
                .then(() => {
                    this.showToast('Success!!', 'Contact created successfully!!', 'success', 'dismissable');
                    // Display fresh data in the form
                    this.showLoading = false;
                    this.handleRefresh();
                })
                .catch(error => {
                    this.showLoading = false;
                    console.log(error);
                    this.showToast('Error!!', error.body.message, 'error', 'dismissable');
                });
        }
        else {
            // The form is not valid
            this.showToast('Error!!', 'Check your input and try again.', 'error', 'dismissable');
        }

    }

    handleRefresh() {
        // refresh the standard related list
        this.dispatchEvent(new RefreshEvent());
    }

    showToast(title, message, variant, mode) {
        const evt = new ShowToastEvent({
            title: title,
            message: message,
            variant: variant,
            mode: mode
        });
        this.dispatchEvent(evt);
    }
}

refreshRelatedList.js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Output :

Reference :

1. lightning/refresh