Blog Details

The introduction of the lightning/refresh module alongside the RefreshView API marks a significant advancement for both LWC and Aura frameworks. This duo facilitates a more refined control over the refresh scope, enabling pinpointed updates within specific segments of the component tree, thus eliminating the need for a full-scale component refresh.

Advantages include:

• It serves as a modern replacement for the outdated force:refreshView in Aura.
• It is compatible with both Aura and Lightning Web Components (LWC).
• It promotes flawless data synchronization and allows for tailored refresh operations.

To utilize the Refresh Event feature, which is crucial for syncing data from external sources within specific container views, one must import the lightning/refresh module.

This blog will guide you through the process of refreshing account names utilizing the Refresh View API in LWC. Stay tuned for more insights!

Implementing Account Name Updates in LWC with the RefreshView API

Step 1: Initiate an Apex Class dedicated to updating the Account Name. Step 2: Proceed with the deployment of this Apex Class.

public with sharing class AccountNameRefreshHandler {
    @AuraEnabled
    public static string updateAccountName(String Id, String Name){
        try {
            Account acc =[SELECT Id, Name from Account WHERE Id =: Id Limit 1];
            acc.Name = Name;
            update acc;
            return acc.Id;
            
        } catch (Exception ex) {
            throw new AuraHandledException(ex.getMessage());
        }
    }
}

Step 2: Deploy this apex class

Step 3: Construct an LWC Component that employs the RefreshView API for refreshing the Account Name without the need to refresh the entire record page.

<template>
    <lightning-card  title="RefreshView">
        <div class="sld-var-p-around-medium">
            <lightning-input type="text" name= "input1" label="Enter Account Name" value="AccountName" lwc:ref="accNameRef"></lightning-input>
            <lightning-button label="Refresh View" variant="brand" onclick={refreshViewHandler} class="slds-p-around_medium"></lightning-button>
        </div>
    </lightning-card>
</template>

import { LightningElement, api } from 'lwc';
import { RefreshEvent } from 'lightning/refresh';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import updateAccountName from '@salesforce/apex/AccountNameRefreshHandler.updateAccountName';

export default class RefreshAccountData extends LightningElement {
    @api recordId;

    async refreshViewHandler(){
        let acc = this.refs.accNameRef.value;
        console.log('Account Input Name == ',acc);
        await updateAccountName ({Id: this.recordId, Name: acc});
        this.showToast;
        this.dispatchEvent(new RefreshEvent());
        console.log('Event is dispatch');
    }

    showToast(){
        const toastEvent = new ShowToastEvent({
            title: "Success!",
            message: "Account Name has been updated successfully.",
            variant: "Success"
        });
        this.dispatchEvent(toastEvent);
        console.log('Show Toast method execute');
    }
}

<?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__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Step 4: Deploy the newly created LWC Component.

Step 5: Integrate the deployed LWC Component into the Account’s record page by selecting ‘Edit Page’ on the Account Record.

Step 6: Post integration, click the ‘Save’ button, then revisit the Account record page to confirm the functionality of the component.

Step 7: Observe the RefreshView component now present on the record page.

Step 8: Engage the ‘Refresh View’ button on the component to initiate the update process.

Step 9: Optionally, input a previous or new account name and activate the ‘Refresh View’ button to see the Account Name update in action, as illustrated in the accompanying images.

Step 10: Finally, review the account List view to ensure the updated Account Name is accurately displayed.

Congratulations on the successful integration of an LWC component that leverages the RefreshView API for updating account names.

In Summary: The Refresh View API is a powerful tool for developers, enabling the creation of web applications that are both dynamic and user-responsive by updating specific webpage sections as needed.

Do give this method a try and witness the RefreshView API’s capabilities firsthand.