Refresh Standard Components in LWC Salesforce

by Rijwan Mohmmed
17 comments
refresh-standard-components-in-lwc-salesforce-techdicer

Hello friends, today we are going to discuss How to Refresh Standard Components in LWC Salesforce. To refresh a view, run eval("$A.get('e.force:refreshView').fire());, which reloads data for standard components. This way we will refresh the full page with related records refresh. Many users have got problems that how we can refresh the record page by the Lightning Web component. Salesforce also introduce one more method which updates related records but it is not very nice as this force:refreshView.

Also check this: How to install Salesforce Data Loader

Key Highlights :

  1. Refresh standard component
  2. Works same like Aura Component

Code :

Here we will create a Lightning Web Component(LWC) in which we will delete the contact record. And then after we will refresh the full record page. We also create Apex class to delete the contact record and return the success notification in LWC.

RefreshStandardComponentCtrl.cls:

public class RefreshStandardComponentCtrl {
    @AuraEnabled
    public static string deleteContact(String recordId){
        Contact con = [SELECT Id FROM Contact WHERE AccountId =:recordId LIMIT 1];
        delete con;
        return 'Record Delete successfully!!';
    }
}

RefreshStandardComponent.HTML:

<template>
      <!-- loader -->
    <div if:true={isLoading}>
        <lightning-spinner
            alternative-text="Loading..." variant="brand" class="slds-is-fixed">
        </lightning-spinner>
    </div>
    <!-- /loader -->
    <!--------header----->
    <div class="slds-tabs_card">
		<div class="slds-page-header">
			<div class="slds-page-header__row">
				<div class="slds-page-header__col-title">
					<div class="slds-media">
						<div class="slds-media__figure">
							<span class="slds-icon_container slds-icon-standard-opportunity">
								 <lightning-icon icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
                            </span>
						</div>
						<div class="slds-media__body">
							<div class="slds-page-header__name">
								<div class="slds-page-header__name-title">
									<h1>
										<span>Refresh Standard Components in LWC Salesforce</span>
										<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
									</h1>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div> <br/>
    <!--/header -->


    <!-- Delete contact and refresh page -->
    <lightning-card title="Refresh Standard Component" icon-name="custom:custom17">
        <div class="slds-m-around_medium">
            <lightning-button label="Delete Contact" onclick={handleClick} variant="brand"></lightning-button>
        </div>
    </lightning-card>
    <!-- /Delete contact and refresh page -->
</template>

RefreshStandardComponent.JS:

import { LightningElement, api, track } from 'lwc';
import deleteContact from '@salesforce/apex/RefreshStandardComponentCtrl.deleteContact';
import { ShowToastEvent } from 'lightning/platformShowToastEvent'

export default class RefreshStandardComponent extends LightningElement {
    @api recordId;
    @track isLoading = false;

    handleClick() {
        this.handleIsLoading(true);
        deleteContact({ recordId: this.recordId }).then(result => {
            this.showToast('Success', result, 'Success', 'dismissable');
            this.updateRecordView();
        }).catch(error => {
            this.showToast('Error updating or refreshing records', error.body.message, 'Error', 'dismissable');
        }).finally(()=>{
            this.handleIsLoading(false);
        });
    }

    showToast(title, message, variant, mode) {
        const event = new ShowToastEvent({
            title: title,
            message: message,
            variant: variant,
            mode: mode
        });
        this.dispatchEvent(event);
    }

    //show/hide spinner
    handleIsLoading(isLoading) {
        this.isLoading = isLoading;
    }

    updateRecordView() {
       setTimeout(() => {
            eval("$A.get('e.force:refreshView').fire();");
       }, 1000); 
    }
}

Output :

refresh-standard-components-in-lwc-salesforce-example-techdicer
refresh-standard-components-in-lwc-salesforce-example-techdicer

Reference :

  1. Salesforce

You may also like

17 comments

Monique June 7, 2022 - 3:09 pm

Thank you very much! I was looking for a way to do this in a modal lwc and it just worked only with your example.
Thank you very much!

Reply
Jeanne June 24, 2022 - 8:42 am

Hi ! Thank you so much ! I was looking for something like that !
Do you know a way to refresh only some data without refreshing all the page ? because I have a component that displays some fields when I scan the bar code of a record, and I want to show the updated data of this record. But When I refresh the view, the whole page refresh and then I have to scan the bar code again….
The goal is to get the updated data without having to scan the record twice.

Reply
Rijwan Mohmmed June 25, 2022 - 6:45 am

you can use Lightning Message Service (LMS) for that.

Reply
Chris July 14, 2022 - 10:58 am

why have you added a delay of 1000ms?

Reply
Rijwan Mohmmed July 15, 2022 - 5:20 pm

Hi Chris, you can remove the delay

Reply
Shivam Barya August 29, 2022 - 1:15 pm

Hey Rijwan,
How can we refresh the custom component whenever we delete or update any record in custom component

Reply
Rijwan Mohmmed August 30, 2022 - 9:48 am

Apex refresh , if you are using wire method for fetch records. If not then just call the method which fetching data from server

Reply
luke November 27, 2022 - 3:31 am

Hey Rijwan,
I’m getting the ‘Error updating or refreshing records’ error when I click the Delete Contact button. I copy pasted your code so it’s not a syntax problem. Any idea what could be causing it?

Reply
Rijwan Mohmmed November 27, 2022 - 3:17 pm

Can you please share your code

Reply
Luke November 27, 2022 - 6:51 pm


Refresh Standard Components in LWC Salesforce
TechDicer

Reply
Luke November 27, 2022 - 6:49 pm

public class RefreshStandardComponentCtrl {
@AuraEnabled
public static string deleteContact(String recordId){
Contact con = [SELECT Id FROM Contact WHERE AccountId =:recordId LIMIT 1];
delete con;
return ‘Record Delete successfully!!’;
}
}


Refresh Standard Components in LWC Salesforce
TechDicer

import { LightningElement, api, track } from ‘lwc’;
import deleteContact from ‘@salesforce/apex/RefreshStandardComponentCtrl.deleteContact’;
import { ShowToastEvent } from ‘lightning/platformShowToastEvent’

export default class RefreshStandardComponent extends LightningElement {
@api recordId;
@track isLoading = false;

handleClick() {
this.handleIsLoading(true);
deleteContact({ recordId: this.recordId }).then(result => {
this.showToast(‘Success’, result, ‘Success’, ‘dismissable’);
this.updateRecordView();
}).catch(error => {
this.showToast(‘Error updating or refreshing records’, error.body.message, ‘Error’, ‘dismissable’);
}).finally(()=>{
this.handleIsLoading(false);
});
}

showToast(title, message, variant, mode) {
const event = new ShowToastEvent({
title: title,
message: message,
variant: variant,
mode: mode
});
this.dispatchEvent(event);
}

//show/hide spinner
handleIsLoading(isLoading) {
this.isLoading = isLoading;
}

updateRecordView() {
setTimeout(() => {
eval(“$A.get(‘e.force:refreshView’).fire();”);
}, 1000);
}
}

Reply
Vinh Chau December 13, 2022 - 3:19 am

Hello,

What if I have custom create record component, When I click the create button it creates the record.
I want the child component to only display the result field of the created record, when the created record moves to a different status ie Completed?
What would I need to use?

Thank you.

Reply
Rijwan Mohmmed December 13, 2022 - 4:17 am

you can use parent-child event in this case

Reply
Vinh Chau December 13, 2022 - 9:48 pm

Helko Rijwan,

Thanks for the reply. I am really new to this LWC stuff, when you say parent-child event what do you mean?

Do you have an example on your site?
Thanks for the content.

Reply
Test January 25, 2023 - 1:19 pm

Hi Rijwan, I am trying to use same in my LWC component. but I am getting these error like ” Uncaught TypeError: Cannot read properties of undefined (reading ‘fire’) “

Reply
Rijwan Mohmmed January 25, 2023 - 1:44 pm

Can you please share you JS code

Reply

Leave a Comment