function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
sru1209 nsru1209 n 

refresh all related components in lwc on click of new button

Hi,

I need to refresh all related child components when i click new button.
So that data in all the tabs will be reset and set to blank.
Can someone pls help here!

How to write it in js file in handleclick(event)

Thanks!
Karen DuncanKaren Duncan
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.
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>

https://www.epayitonline.win/
mukesh guptamukesh gupta
Hi sru,

Please follow below example:-
  
<template>
    <lightning-button variant="brand" label="Refresh Component" title="Refresh Component" onclick={refreshComponent} class="slds-m-left_x-small"></lightning-button>
 
    <div>{contact.Title} {contact.Name}</div>
    <div>{contact.Phone}</div>
    <div>{contact.Email}</div>
    
</template>
  
import { LightningElement, api, track, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import { refreshApex } from '@salesforce/apex';
 
const CONTACT_FIELDS = [
    'Contact.Name',
    'Contact.Title',
    'Contact.Phone',
    'Contact.Email',
];
 
export default class MyComponent extends LightningElement {
 
    @api recordId;
 
    @wire(getRecord, { recordId: '$recordId', fields: [CONTACT_FIELDS] })
    wiredContactResults;
 
   
    refreshComponent(){
        refreshApex(this.wiredContactResults);
    }
 
}
if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh