Refresh Standard Related List in LWC

by Rijwan Mohmmed
4 comments
refresh-standard-related-list-in-lwc-techdicer

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 :

refresh-standard-related-list-in-lwc

Reference :

  1. lightning/refresh
What’s your Reaction?
+1
12
+1
15
+1
0
+1
0
+1
12
+1
0

You may also like

4 comments

Yesid April 3, 2024 - 11:38 am

Hello, does it work the same for a Custom Object Related List? I done it but the Related List is not refresh.

Reply
Rijwan Mohmmed April 4, 2024 - 4:24 am

book a meeting https://topmate.io/rijwan_mohmmed, I will help you

Reply
Ravali April 4, 2024 - 2:39 pm

Hi Rijwan,

I have used screen quick action and updating related list when it is clicked. But with refresh event related list is not getting refreshed. I have used imperative apex to update the related data.

Reply
Madhu April 30, 2024 - 1:40 pm

Hi Rijwan does it work for attachment related list in case record like Whenever we click “Remove from Record” from row level actions for an attachment we need to refresh or update the list accordindly.

Reply

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.