How to Refresh a Related List in Lightning Web Component Using RefreshView API

• The article explains how to use the RefreshView API to refresh a related list in LWC after creating a record via a quick action.
• The article provides code examples, screenshots, benefits, limitations, and FAQs of using the RefreshView API.

If you are a Salesforce developer, you might have encountered a situation where you need to refresh a related list in a Lightning Web Component (LWC) after creating a record via a quick action. For example, you might have a LWC that displays the contacts related to an account, and you want to refresh the list after creating a new contact using a quick action. How can you achieve this functionality without reloading the entire page or using custom events?

In this blog post, we will show you how to use the RefreshView API, which is a new feature introduced in Spring ’21 release, to refresh a related list in a LWC after creating a record via a quick action. We will also explain the benefits and limitations of this approach, and provide some code examples and screenshots to illustrate the process.

What is RefreshView API?

The RefreshView API is a module that allows you to refresh the view of a Lightning page without reloading the entire page. It replaces the force:refreshView event for Aura components, and provides the following features:

• The RefreshEvent event that a module can fire to signal a refresh.
• Methods that allow components to register to receive the dispatched refresh event and begin the refresh process.
• A way to control which components are refreshed by using the refreshable attribute.

The RefreshView API is useful for scenarios where you want to update the data displayed on a Lightning page after performing an action, such as creating, updating, or deleting a record. For example, you can use it to refresh a related list, a report chart, or an embedded dashboard.

How to Use RefreshView API to Refresh a Related List in LWC

To use the RefreshView API to refresh a related list in LWC, you need to follow these steps:

1. Import the lightning/refresh module in your LWC.
2. Fire the RefreshEvent event from your LWC after creating a record via a quick action.
3. Mark your related list component as refreshable by setting the refreshable attribute to true.
4. Optionally, use the registerListener and unregisterListener methods to register and unregister your component for receiving the refresh event.

Let’s see an example of how to implement these steps in code.

Code Example

Suppose we have an LWC named accountContacts that displays the contacts related to an account using the lightning/uiRelatedList component. We also have a quick action named createContact that allows us to create a new contact for an account using the lightning-record-form component. We want to refresh the accountContacts component after creating a new contact using the createContact quick action.

Here is the code for the accountContacts component:

<template>
  <lightning-card title="Account Contacts">
    <lightning-ui-related-list
      object-api-name="Account"
      record-id={recordId}
      relationship-api-name="Contacts"
      icon-name="standard:contact"
      title="Contacts"
      show-header
      show-row-level-actions
      show-action-menu
      show-new-button
      show-view-all-button
      refreshable
    ></lightning-ui-related-list>
  </lightning-card>
</template>

import { LightningElement, api } from "lwc";
import { registerListener, unregisterListener } from "lightning/refresh";

export default class AccountContacts extends LightningElement {
  @api recordId;

  connectedCallback() {
    // Register for receiving the refresh event
    registerListener("refresh", this.handleRefresh, this);
  }

  disconnectedCallback() {
    // Unregister from receiving the refresh event
    unregisterListener("refresh", this.handleRefresh, this);
  }

  handleRefresh() {
    // Refresh the related list component
    this.template.querySelector("lightning-ui-related-list").refresh();
  }
}

Here is the code for the createContact quick action:

<template>
  <lightning-card title="Create Contact">
    <lightning-record-form
      object-api-name="Contact"
      fields={fields}
      mode="edit"
      onsuccess={handleSuccess}
    ></lightning-record-form>
  </lightning-card>
</template>

import { LightningElement } from "lwc";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import { NavigationMixin } from "lightning/navigation";
import { fireEvent } from "lightning/refresh";

export default class CreateContact extends NavigationMixin(LightningElement) {
  fields = ["LastName", "Email", "Phone", "AccountId"];

  handleSuccess(event) {
    // Show success message
    const toastEvent = new ShowToastEvent({
      title: "Success",
      message: "Contact created",
      variant: "success",
    });
    this.dispatchEvent(toastEvent);

    // Fire the refresh event
    fireEvent("refresh");

    // Close the quick action
    thisNavigationMixin.Navigate;
  }
}

As you can see, we have imported the lightning/refresh module in both components, and used the fireEvent function to fire the refresh event from the createContact component after creating a new contact. We have also used the registerListener and unregisterListener functions to register and unregister the accountContacts component for receiving the refresh event. Finally, we have marked the lightning-ui-related-list component as refreshable by setting the refreshable attribute to true.

Benefits and Limitations of RefreshView API

The RefreshView API has some benefits and limitations that you should be aware of before using it.

Some of the benefits are:

• It provides a simple and declarative way to refresh the view of a Lightning page without reloading the entire page.
• It works with both standard and custom components that support the refreshable attribute.
• It reduces the need for custom events or Apex methods to refresh data on a Lightning page.

Some of the limitations are:

• It does not work with Aura components that use force:refreshView event. You need to migrate them to LWC or use custom events instead.
• It does not work with components that are not marked as refreshable. You need to set the refreshable attribute to true or use custom events instead.
• It does not guarantee that all components on a Lightning page will be refreshed at the same time. Some components might be refreshed faster or slower than others depending on their data source and performance.

Frequently Asked Questions (FAQs)

Question: What is the difference between force:refreshView and RefreshView API?

Answer: force:refreshView is an event that Aura components can fire or handle to refresh the view of a Lightning page. RefreshView API is a module that LWC can use to fire or handle a RefreshEvent event to refresh the view of a Lightning page. RefreshView API replaces force:refreshView for LWC and provides more features and flexibility.

Question: How can I check if a component supports the refreshable attribute?

Answer: You can check the documentation of the component or inspect its source code to see if it supports the refreshable attribute. For example, you can check the documentation of lightning/uiRelatedList or lightning/uiRecordApi components to see that they support the refreshable attribute.

Question: How can I debug or troubleshoot issues with RefreshView API?

Answer: You can use the browser’s developer tools or Lightning Inspector extension to inspect the events and components on a Lightning page. You can also use console.log or debugger statements in your code to debug your logic and data flow.

Summary

In this blog post, we have learned how to use the RefreshView API to refresh a related list in LWC after creating a record via a quick action. We have explained what is RefreshView API, how to use it, what are its benefits and limitations, and provided some code examples and screenshots to demonstrate its functionality. We hope you find this post helpful and informative, and feel free to share your feedback or questions in the comments section below.

Disclaimer: The information provided in this blog post is for educational purposes only and does not constitute professional advice. The author is not responsible for any errors, omissions, or damages arising from the use of this information. The reader is advised to consult a qualified Salesforce developer before implementing any solutions based on this information.