Use RefreshEvent in LWC to automatically refresh record pages

Telegram logo Join our Telegram Channel

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 RefreshEvent in LWC to automatically refresh record pages

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


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.

        <div slot="title">
            Refresh API Triggering Component

        <div class="slds-var-p-horizontal_small">
            <!-- manually refresh the view by clicking the button -->
                label="Fire RefreshView()"

            <!-- form to create a contact for the account -->


 * @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];


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

        // show toast
            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) {
        const fields = event.detail.fields;
        // update account id
        fields.AccountId = this.recordId;

        // submit form to save the contact

    // 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

Demo Video

Demo of RefreshView event

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.

No comments :
Post a Comment

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, email us at