24

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 Feb 22 '19 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 Feb 22 '19 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 Feb 22 '19 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 Feb 22 '19 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 Feb 22 '19 at 1:37
14

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})
               .this( result => {
          
                    if (result) {
                         // Refresh Account Detail Page
                         updateRecord({fields: this.recordId})
                    }

               })
     }
}
2
  • 3
    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 Dec 25 '20 at 15:23
  • Received and error: Invalid recordInput when trying to follow this approach – Patlatus Apr 22 at 9:18
19

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();
},
8
  • Standard SF components are made using LWC, they respond to refreshView event, SF might allow this in future release – Pranay Jaiswal Feb 22 '19 at 14:30
  • @PranayJaiswal Hopefully yes. That would eliminate the need of this approach. – Jayant Das Feb 22 '19 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? – Renato Oliveira May 8 '19 at 18:50
  • 1
    @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 May 8 '19 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. 👍 – Renato Oliveira May 8 '19 at 19:03
16

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}]);
  }
}
3
  • 1
    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 May 18 at 14:21
  • 1
    I agree, Salesforce is aware of this limitation but I don't know what's the roadmap for it. – Fabien Taillon May 18 at 14:25
  • 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 Jul 22 at 9:47
2

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...

0

What I am finding is that re-rendering will occur if a change is made to any @api or @track decorated properties within the component. So I believe the approved approach would be to communicate some event to the parent that tells it that a refresh is likely needed, and for the parent to then set some new value in one or more @api properties on the component tag within the parent's markup, which in turn should be referencing one of its own @track properties.

After all, you usually need to refresh if some substantive change has occurred in overall state, and the semantics of this change should be expressible in terms of events propagating up and properties being passed down.

Sorry if this is not clear, I am just learning LWC myself.

1
  • 2
    Hi Alan, welcome to SFSE! I believe the poster is asking about a different issue - requesting that standard components on the same page update, not parent or child custom components. – David Reed Jul 22 '19 at 18:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.