5

edit: resolved see code.

I have a quick action which updates data on the detail page, after hitting said button the page needs a full refresh.

Scenario on the account page the user clicks the quick action which generates other records while updating the account page, then those updates on the account page need to be visible to the user.

The problem is when i use

window.location.reload(true);

It simply starts the quick action over....but it does also refresh the page so that's not.

this[NavigationMixin.Navigate]({
          type: 'standard__recordPage',
          attributes: {
              recordId: this.recordId,
              objectApiName: 'Account',
              actionName: 'view'
           },
      });

This doesn't work at all, sure it directs you to the page but it doesn't refresh the data.....it always pulls cache data.

Anyone have an idea on how to redirect out of the lwc quick action to the record page URL and then reload the page not fetching cached data but new data.

modified code with eval("$A.get('e.force:refreshView').fire();") ...still doesn't work, but the function does fire.

    @track newTicket;
    @track submitSuccess;
    @api 
    get recordId(){
        return this._recordId;
    }
    set recordId(value){
        this._recordId = value;
        if(this._recordId){
            this.submitDealsDesk();

        }
    }

    _recordId;
    isSubmitting = true;   
    
  
    
     submitDealsDesk(){
        createCase({ quoteId: this.recordId })
        .then(result => {
            this.newTicket = result;
            this.submitSuccess = true;
        })
        .catch(error => {
            this.error = error;
            this.submitSuccess = false;
        })
        .finally(() => {
            this.isSubmitting = false;
            this.callToast();
            this.refreshPage();
        });
    
        } 
    
    
     callToast(){
            if(this.submitSuccess == true){
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: "deals desk ticket submitted ",
                        message: "deals desk ticket submitted " + this.newTicket,
                        variant: "success"    
                    })
                );
            } else if(this.submitSuccess == false){
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: "error ",
                        message: "erorr during submission",
                        variant: "error"    
                    })
                ); 
            }
        }
    

    closeQuickAction() {
        this.dispatchEvent(new CloseActionScreenEvent());
    }  

    refreshPage(){
    setTimeout(()=>{
        eval("$A.get('e.force:refreshView').fire();"); 
        this.closeQuickAction();

}
,3000);}
       }
2
  • What's the exact scenario? Are you creating a case on the account through apex and want it to reflect on the related list on the account page after saving/closing the LWC QA? Is this a headless action? Sep 3, 2021 at 16:03
  • updated in the main post
    – ensir
    Sep 3, 2021 at 16:23

4 Answers 4

0

TO solve this problem first you need to close the quick action and refresh the current page

so first close the quick action component

import { CloseActionScreenEvent } from 'lightning/actions';

closeQuickAction() {
    this.dispatchEvent(new CloseActionScreenEvent());
}

after that use window.location.reload()

1
  • window.location.reload() should not be used as removes all user context and if you have multiple tab on the page its big "NO" Jan 11 at 18:25
7

If you're about to use this answer in a managed package, then don't. The solution I am about to post is not Security-Review friendly.

However, adding this in your JS should refresh the entire page the component is placed on.

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

The "trick" above was how this was done in Aura (without the eval) but somehow there is no equivalent in LWC.

PS: Also, as it is undocumented, it may stop working at any time but it seems to be working for now

4
  • So this doesn't work in LWC? Not that i mind rewriting my component in Aura.
    – ensir
    Sep 3, 2021 at 15:23
  • The eval statement makes it work in LWC. :) Sep 3, 2021 at 15:24
  • added it to my code and posted my code above. It just seems to hang there and not do anything.
    – ensir
    Sep 3, 2021 at 15:57
  • 1
    actually i had to use that and added a CloseActionScreenEvent to it and now it works perfectly
    – ensir
    Sep 3, 2021 at 16:05
6

Update: In Spring '23, there's a beta for a new lightning/refresh module that'd be relevant for this use-case now.

Whether user-driven or app-invoked, the ability to synchronize data without reloading an entire page is a key user experience requirement. The new lightning/refresh module and RefreshView API provide a standard way to refresh component data in LWC and Aura. Previously, LWC lacked a data refresh API, and Aura only supported the legacy force:refreshView, which doesn’t meet the requirements of modern web development.

RefreshView API can refresh data for Salesforce platform containers as well as custom components.


If you're only interested in seeing the latest updates to the details of the record you're on, then I'd suggest using the updateRecord wire adapter to perform the update which will handle this for you without having to resort to using eval().

It's not clear what you're updating on the account from any code you shared, but you simply do the update within your LWC through the above adapter vs. using apex. When you fire the CloseActionScreenEvent, the record you updated will be reflected for you.

Below is a simple example of updating the account Name within a LWC QA.

import { updateRecord } from 'lightning/uiRecordApi';
import ACCOUNT_NAME from '@salesforce/schema/Account.Name';
import ID_FIELD from '@salesforce/schema/Account.Id';

...
    methodToHandleRecordUpdate(){
        const fields = {};
        fields[ACCOUNT_NAME.fieldApiName] = 'lwc test';
        fields[ID_FIELD.fieldApiName] = this.recordId;
        const recordInput = { fields };

        updateRecord(recordInput)
            .then(() => {
                this.dispatchEvent(new CloseActionScreenEvent());
            })
            .catch(error => {
                //handle error
            });
    }

If, for whatever reason, you must use apex to update your record - then you can utilize another wire adapter getRecordNotifyChange(). In the handler of your apex, just pass your current record Id to this adapter

import { getRecordNotifyChange } from 'lightning/uiRecordApi';
...

getRecordNotifyChange([{recordId: this.recordId}]);

Again, the above only meets your need if you just care about the record data you're on being updated. The rest of the page (related lists) won't refresh or be updated.

1
  • this shall be the selected answer, instead of using window.location.reload() Jan 27, 2023 at 13:42
0

If any one looking for an answer lightning refresh is the answer which is no longer beta and available for you. If you want to more about caching see here

The problem is more when Calling a Method Imperatively await notifyRecordUpdateAvailable([{recordId: this.recordId}]); is the key here you can move it to any async method and call it to refresh your cache

import { LightningElement, wire } from 'lwc';
import { getRecord, notifyRecordUpdateAvailable } from 'lightning/uiRecordApi';
import apexUpdateRecord from '@salesforce/apex/Controller.apexUpdateRecord';

export default class Example extends LightningElement {
    @api recordId;

    // Wire a record
    @wire(getRecord, { recordId: '$recordId', fields: ... })
    record;

    async handler() {
      // Do something before the record is updated
      showSpinner();

      // Update the record via Apex
      await apexUpdateRecord(this.recordId);

      // Notify LDS that you've changed the record outside its mechanisms
      // Await the Promise object returned by notifyRecordUpdateAvailable()
      await notifyRecordUpdateAvailable([{recordId: this.recordId}]);
      hideSpinner();
    }
}

To refresh Apex data provisioned via an Apex @wire, call refreshApex(). The function provisions the data using the configuration bound to the @wire and updates the cache.

// Example of refreshing data for a wired property
// after you update data via imperative Apex.

import { refreshApex } from '@salesforce/apex';
import { notifyRecordUpdateAvailable } from 'lightning/uiRecordApi';
import getOpptyOverAmount from '@salesforce/apex/OpptyController.getOpptyOverAmount;

@wire(getOpptyOverAmount, { amount: '$amount' })
opptiesOverAmount;

// Update the record in Apex, such as via a button click
// Refresh Apex data that the wire service provisioned
handler() {
  updateRecordApexMethod()
  .then(() => {
      refreshApex(this.opptiesOverAmount);
      notifyRecordUpdateAvailable(recordIds); // Refresh the Lightning Data Service cache
  });
}

You must log in to answer this question.

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