Use RefreshEvent in LWC to automatically refresh record pages

Salesforce has introduced a new API that promises to revolutionize the way you update and refresh your record pages: the RefreshEvent.

In this post, we'll delve into the sample code and see how it leverages the RefreshEvent API to dynamically refresh a Salesforce record page.

Use Case

To demonstrate the use case I have created a custom component called RefreshApiTriggerComponent. This component is designed to be added to your Salesforce Account record page and provides a real-world example of how to harness the capabilities of the RefreshEvent API.

This component has a form to quickly create a contact for the Account. By default when the contact is created the Contact related list of accounts is not reflected with the newly created contact.

We will leverage the RefreshEvent to refresh the account page so that the related list shows the latest contacts & their count.

The Code Behind "RefreshApiTriggerComponent"

The component has two examples. 

1. Manually trigger a refresh of the Account record page view by clicking the button.
2. Automatically refresh the Account record page upon Contact creation.

The initial step is straightforward: when the button is clicked, we initiate the RefreshView event as follows. Please note that we need to import the event first.

Fire RefreshEvent on click of a button

// import the refresh event
import { RefreshEvent } from "lightning/refresh";


export default class RefreshApiTriggerComponent extends LightningElement {

    // other implementation...

    // button click handler
    beginRefresh() {
        // fire the RefreshEvent
        this.dispatchEvent(new RefreshEvent());
    }

    // other implementation

}

Fire RefreshEvent automatically

HTML

Below is the complete code for the component. There is a small form to create a contact, when the contact is created successfully, the RefreshEvent is triggered automatically, which refreshes the account record page view along with the related lists.

<template>
    <lightning-card
        icon-name="action:refresh"
        variant="narrow"
    >
        <div slot="title">
            Refresh API Triggering Component
        </div>

        <div class="slds-var-p-horizontal_small">
            <!-- manually refresh the view by clicking the button -->
            <lightning-button
                variant="brand"
                label="Fire RefreshView()"
                onclick={beginRefresh}
            ></lightning-button>

            <!-- form to create a contact for the account -->
            <lightning-record-form
                fields={fields}
                record-id={contactId}
                object-api-name={objectApiName}
                mode="Edit"
                onsubmit={handleSubmit}
            ></lightning-record-form>
        </div>
    </lightning-card>
</template>

JS

/*
 * @description Demonstration of refreshEvent
 */
import { LightningElement, api } from "lwc";
import { RefreshEvent } from "lightning/refresh";
import { ShowToastEvent } from "lightning/platformShowToastEvent";

import FIRST_NAME from "@salesforce/schema/Contact.FirstName";
import LAST_NAME from "@salesforce/schema/Contact.LastName";
import EMAIL from "@salesforce/schema/Contact.Email";

import CONTACT from "@salesforce/schema/Contact";

export default class RefreshApiTriggerComponent extends LightningElement {
    // account Id
    @api recordId;

    // add basic fields to the contact form
    fields = [FIRST_NAME, LAST_NAME, EMAIL];

    isLoading;

    // button click handler
    beginRefresh() {
        // fire RefreshEvent
        this.dispatchEvent(new RefreshEvent());

        // show toast
        this.dispatchEvent(
            new ShowToastEvent({
                title: "Success",
                message: "RefreshView() Triggered",
                variant: "success"
            })
        );
    }

    // get contact api name
    get objectApiName() {
        return CONTACT.objectApiName;
    }

    // set the current account as parent of the new contact
    handleSubmit(event) {
        event.preventDefault();
        const fields = event.detail.fields;
        // update account id
        fields.AccountId = this.recordId;

        // submit form to save the contact
        this.template.querySelector("lightning-record-form").submit(fields);
    }

    // called when contact is successfully created.
    handleSuccess() {
        // reset the form
        this.template.querySelector("lightning-record-form").recordId = null;
        // fire event on successful insertion of contact
        this.beginRefresh();
    }
}

Demo Video

Thanks for visiting. Give the refreshEvent API a try and take your Salesforce development to the next level by providing real-time data updates and a seamless user experience.