43

In Aura, we can do

    $A.get('e.force:refreshView').fire();

to cause standard components to update.

How can we do an equivalent in LWC because sfdx refuses to publish .js code with $A in it saying the usage is disallowed in LWC?

For now i tricked it with

eval("$A.get('e.force:refreshView').fire();");

but that is obviously less than ideal....

5
  • What is your use case, as when do you want to refresh the view, viz., editing or deleting a record? Are you using standard LDS or @wire decorators, or you are using custom apex methods?
    – Jayant Das
    Commented Feb 22, 2019 at 1:22
  • @JayantDas i have my component that creates related records of user's drag-n-drop actions; on the same page layout i have a related list (standard LWC component provided by SalesForce). I want related list to refresh when the user interacts with my component.
    – zaitsman
    Commented Feb 22, 2019 at 1:26
  • Standard LWC related list? Do you mean the standard related list component in LEX? While the approach you have may work, but an ideal way for this would be to wrap your LWC in an Aura Component, utilize events for communication and let the Aura Component refresh the view.
    – Jayant Das
    Commented Feb 22, 2019 at 1:33
  • 1
    @JayantDas yes i do mean the standard related list component in Lightning Experience. Having an Aura wrapper just to do refresh seems a bit backwards. I would've thought that the platform provided some interop functionality for actually talking to other components on the page :/
    – zaitsman
    Commented Feb 22, 2019 at 1:34
  • 2
    Wrapping it within Aura is kind of interop here. Unfortunately there’s no direct 1-1 replacement for quite a few Aura features at least at this point of time.
    – Jayant Das
    Commented Feb 22, 2019 at 1:37

6 Answers 6

21

I was able to find an answer on the Developer Docs forum for a work-around. I was surprised how challenging it was to find a solution in the Salesforce LWC docs, so I'm not sure if this is the recommended approach, but it's the best I've been able to find!

You will need to import the updateRecord method from the lightning/uiRecordApi. Then, you can call this updateRecord() function in your lwc javascript file whenever you want your detail record page (i.e. Account Detail Page) to refresh.

In the following example, I have a lwc that lives on my lightning detail page on the Account record (i.e. as a side-bar component). In the example, my lwc calls a handleClick method that imperatively calls an updateAccount() method in my Apex Controller Class. In the callback method, I update the Account Detail record using the updateRecord() function.

Import Statement:

import { updateRecord } from 'lightning/uiRecordApi';

Function:

updateRecord({ fields: { Id: this.recordId } });

Example:

import { LightningElement, api, track, wire } from 'lwc';
import { updateRecord } from 'lightning/uiRecordApi';
import updateAccount from '@salesforce/apex/ApexControllerClass.updateAccount;

export default class lightning-web-component-example extends LightningElement {

     @api recordId;

     handleClick(){

          // Call Apex Method imperatively to update Account record
          updateAccount({accountId: this.recordId})
               .then( result => {
          
                    if (result) {
                         // Refresh Account Detail Page
                         updateRecord({ fields: { Id: this.recordId }})
                    }

               })
     }
}
4
  • 14
    Note: this is performing an actual DML operation on the record, not just "updating" the local client. This will mark the record as "Last Modified By" the viewer, which may not be ideal.
    – sfdcfox
    Commented Dec 25, 2020 at 15:23
  • 3
    Received and error: Invalid recordInput when trying to follow this approach
    – Patlatus
    Commented Apr 22, 2021 at 9:18
  • People still seem to be coming to my question - this is the answer we used and it has worked well enough for the past few years.
    – zaitsman
    Commented Aug 24, 2022 at 1:05
  • @zaitsman your probably wanna have a look at latest Spring 23 functionality salesforce.stackexchange.com/a/396434/19118 Commented Nov 21, 2023 at 18:12
41

Starting in Winter '21, you'll be able to use getRecordNotifyChange() function to refresh your record page from a lightning web component.

getRecordNotifyChange is working almost the same way force:refreshView did, except it takes a list of recordId which makes it a little bit more flexible:

import { LightningElement, wire } from 'lwc';
import { getRecord, getRecordNotifyChange } from 'lightning/uiRecordApi';
import apexUpdateRecord from '@salesforce/apex/Controller.apexUpdateRecord';
     
export default class NotifyRecordChangeExample extends LightningElement {
  @api recordId;
     
  // Wire a record.
  @wire(getRecord, { recordId: '$recordId', fields: ... })
  record;
     
  async handler() {
    // Update the record via Apex.
    await apexUpdateRecord(this.recordId);
    // Notify LDS that you've changed the record outside its mechanisms.
    getRecordNotifyChange([{recordId: this.recordId}]);
  }
}
12
  • 2
    getRecordNotifyChange is nice but it doesn't seem to work for new records. I'm adding new records via a LWC and can't get the related list count to update to reflect the new records added. End users are getting confused because it doesn't look like records have been added to the list.
    – Tim Wilson
    Commented May 18, 2021 at 14:21
  • 1
    I agree, Salesforce is aware of this limitation but I don't know what's the roadmap for it. Commented May 18, 2021 at 14:25
  • 2
    Unfortunately this does not refreshes the related list when we create a new child record from parent detail page via a LWC component. Probably this works only for current record.
    – Raul
    Commented Jul 22, 2021 at 9:47
  • 2
    This doesn't work for me
    – Patlatus
    Commented Dec 23, 2021 at 10:03
  • Looks like it doesn't work with all related list, can you list here which one doesn't work for you ? Commented Dec 23, 2021 at 10:07
24

Adding information from comments.

As of today, there's no 1-1 mapping of Aura vs. LWC events/interfaces. While the approach you have in there may work, but I will personally not recommend it to use that way.

As understood from your comments, you have a LWC on a Lighting page in LEX along with other standard components, viz., related list. And that upon updates on the LWC, you want the standard related list to be refreshed. My approach here would have been to wrap the LWC in an Aura Component, send an event to the Aura Component and then utilize force:refreshView on the Aura Component.

This may look like a boiler-plate approach, but because you can compose a LWC within an Aura Component and can communicate with events, this approach would be the safer route.

Your overall implementation could look as:

<aura:component>
    <-- this is the LWC -->
    <c:myLWCComponent onrecordChange="{!c.refreshView}" />
</aura:component>

And then in the LWC, you raise the event once you have the records updated:

this.dispatchEvent(new CustomEvent('recordChange'));

And then in your Aura JS Controller, you handle the event:

refreshView: function(component, event) {
    // refresh the view
    $A.get('e.force:refreshView').fire();
},
9
  • Standard SF components are made using LWC, they respond to refreshView event, SF might allow this in future release Commented Feb 22, 2019 at 14:30
  • @PranayJaiswal Hopefully yes. That would eliminate the need of this approach.
    – Jayant Das
    Commented Feb 22, 2019 at 15:08
  • This doesn't seem to work. The parent Aura component doesn't catch the event fired from the LWC. Do you only have to add the event's name preceded by on inside the tag used in the parent Aura component? Commented May 8, 2019 at 18:50
  • 2
    @RenatoOliveira Yes, you will need to prefix the event name with on to be able to handle that event. You can find more details on the documentation here.
    – Jayant Das
    Commented May 8, 2019 at 18:57
  • 1
    Yeah, I just noticed that, by habit, I set the name with an uppercase letter. No wonder it didn't work. My event, named closeCheckInModal, was written in the Aura component as onCloseCheckInModal (notice the first uppercase "C"?). Thank very much for this answer. 👍 Commented May 8, 2019 at 19:03
15

Spring 23 update. Refresh view event is now available for lwc. :)

import { RefreshEvent } from 'lightning/refresh';

export default class MyComponent extends LightningElement {
  // a button click or programmatically
  onRefresh() {
    this.dispatchEvent(new RefreshEvent());
  }
}

https://developer.salesforce.com/blogs/2023/01/lwc-enhancements-for-developers-learn-moar-spring-23

4
  • This should be the top answer now
    – willard
    Commented Nov 9, 2023 at 21:12
  • It's a beta feature though.
    – zaitsman
    Commented Nov 27, 2023 at 23:23
  • @zaitsman beta can be used in producation... so makes much of difference Commented Nov 29, 2023 at 15:07
  • If I fire this after a flow in a quick action, how can I listen and trigger my own logic in a custom lwc somewhere else on the page?
    – Michael
    Commented Dec 8, 2023 at 5:45
4

You can import and use refreshApex.

    import {refreshApex} from '@salesforce/apex';

    // If you want to refresh @wire property

    @wire(accountData) accts;

    methodAfterWhichYouWantToRefresh(){
//your code .....
    .............
    ........
       refreshApex(this.accts);
    } 

    // If you have Imperative Method

    handleLoad() {
            getContactList()
                .then(result => {
                    this.contacts = result;
                    this.error = undefined;
                })
                .catch(error => {
                    this.error = error;
                    this.contacts = undefined;
                });
        }

    methodAfterWhichYouWantToRefresh(){
       //your code .....
    .............
    ........

       refreshApex(this.handleLoad());
    }

above is just example not full code...

1
1

I used combination of Apex and Navigation

  • Update same record in apex method (just update DML, no field values changed)
  • When response is returned, navigate on record detail page
navigateToViewAccountPage() { 
   this[NavigationMixin.Navigate]({ 
   type: 'standard__recordPage', 
   attributes: { recordId: this.recordId, objectApiName: 'Account', actionName: 
   'view' }, 
   }); 
}
1
  • Doesn't this cause the whole page to reload?
    – zaitsman
    Commented Jan 7, 2022 at 4:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .