0

I am using a LWC which have lightning data table and edit button. This lightning datatable display contacts.

If the click the edit button it will open edit contact modal pop up which is standard.

When I save it I need to reload whole page. How to refresh the specific component.

editContact(event){
    
    const row = event.detail.row;
   
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: row.Id,
            objectApiName: 'Contact',
            actionName: 'edit'
        }
    });


}

I am using standard record edit page.

5
  • Sorry that couldn't. It is a custom way of saving. @rahulgawale
    – NBR
    Oct 20 '20 at 5:09
  • What do you mean by Custom way of saving? Oct 20 '20 at 5:26
  • I am not updating record via apex.
    – NBR
    Oct 20 '20 at 5:35
  • ohh do you want to refresh any of your custom component on the detail page? Oct 20 '20 at 5:36
  • 1
    Yes exactly. I have placed this lightning data table of contacts within account record page. So when i update a contact though record edit page, component is not updated with new record. However if I refresh the whole page I am getting updated record
    – NBR
    Oct 20 '20 at 5:39
1

As there is no straight forward method to refresh the component as we don't have handler. I figured this steps to solve this problem .

STEPS

  1. I added a aura component with force:refresh handler.
  2. Calling the lwc from aura
  3. Define refresh method in lwc which return refreshapex and call the refresh method from doinit in aura
  4. Drag and drop the newly created aura component instead of ur lwc.
0

There isn't a clean stable way to do this i believe. You'll navigate the user away to the standard Contact Edit page. When the edit is complete, there is no way really to notify the datatable that the data has been updated. Couple of alternatives that i can think of-

  1. Just provide a simple refresh button on the datatable to call apex and get the updated contact data.
  2. Use Lightning:recordEditForm in an Aura wrapper for your LWC. It has an event for onsuccess, which will allow you to write your custom logic for what to do after a successful update. https://developer.salesforce.com/docs/component-library/bundle/lightning:recordEditForm
  3. Use Change Data Capture and lightning-emp-api to detect data changes in real time. You can fire the CDC events from the update trigger in contact. This is a little over the top, but doable. https://developer.salesforce.com/docs/component-library/bundle/lightning-emp-api/documentation
0

There is trick to use the forcerefresh view in LWC Js code.

Put below code in save method at the end it will refresh the component.

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

0

I have also been in this situation and finally I am able to go past this situation without using Aura. We don't have any OOB LWC events that listen to standard show toast events/refresh events but I have used a platform event that will get fired on record update/create and we can subscribe to that event in our LWC component and refresh the lightning-datatable once the save is committed and successful. To know more on how to do this please refer to my blog How to Refresh Lightning Datatable after triggering standard events(new/edit) in LWC.

1
  • Hi Yogendra. So far, all three of your answers have including links to your blog with limited solutions here. While it's okay to link to your blog with full disclosure of your affiliation to support a solution you offer, please make sure your posts meet the completeness expectations in How to Answer. Be aware that the community may not tolerate posts that feel promotional. Thanks.
    – David Reed
    May 24 at 2:39
0

Try this.

window.open('url','_self');
document.location.reload(true);

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.