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 :
- Refresh standard component
- 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 :
Total views : 241956
17 comments
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!
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.
you can use Lightning Message Service (LMS) for that.
why have you added a delay of 1000ms?
Hi Chris, you can remove the delay
Hey Rijwan,
How can we refresh the custom component whenever we delete or update any record in custom component
Apex refresh , if you are using wire method for fetch records. If not then just call the method which fetching data from server
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?
Can you please share your code
Refresh Standard Components in LWC Salesforce
TechDicer
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);
}
}
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.
you can use parent-child event in this case
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.
https://techdicer.com/call-child-method-from-parent-component-in-lightning-web-component-lwc-salesforce/
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’) “
Can you please share you JS code