RefreshviewApi in LWC

ByPastek Editor Blogs

 In Lightning web components, in most cases, we might have used the refreshApex feature to refresh the component data. But in some scenarios, we might want to refresh the standard Salesforce components, such as recordDetail and relatedList.

         Using new Lightning RefreshView API, you will be able to refresh your Standard Components View from your Custom Lightning Web Component.

The RefreshView API and lightning/refresh module provide a standard way to refresh component data in LWC and Aura.

  • Create a lightning web component and import the refresh API feature.
import { RefreshEvent } from 'lightning/refresh';
  • In this example, we are using the record form to create a new record. After creating a record, the standard related list component would reflect the changes.

refreshViewApi.html

<template>
      <lightning-card>
         <lightning-record-edit-form object-api-name="Contact"   
                                 onsuccess={refreshComponent}>
               <lightning-input-field  field-name="FirstName">
         </lightning-input-field>
               <lightning-input-field field-name="LastName">
               </lightning-input-field>
               <lightning-input-field field-name="AccountId">
               </lightning-input-field>
               <lightning-input-field field-name="Email">
               </lightning-input-field>
               <div style="margin-left:35%;width:fit-content">
                           <lightning-button label="Cancel" type="reset"           
                    variant="destructive"></lightning-button>&nbsp;
                           <lightning-button label="save" type="submit"   
                           variant="brand"></lightning-button>
                </div>
                </lightning-record-edit-form>
          </lightning-card>
  </template>

refreshViewApi.js


import { LightningElement } from ‘lwc’;

import { RefreshEvent } from ‘lightning/refresh’;

import {ShowToastEvent} from ‘lightning/platformShowToastEvent’;

export default class RefreshViewApi extends LightningElement {

               refreshComponent(){

                this.dispatchEvent(

                    new ShowToastEvent({

                                title:’success’,

                                message:’Record Created Successfully!’,

                                variant:’success’

                    })

                )

                this.dispatchEvent(new RefreshEvent());

               }

}

Output:

Before creating the record,

After creating the record,

The refreshView API will refresh the component. so that we don’t need to refresh the page manually.