The lightning/refresh module and RefreshView API bring a highly anticipated feature to LWC and Aura, allowing for efficient management of refresh scope and targeted updates to specific component hierarchies without needing a complete component reload.
The key benefits are-
- It replaces the legacy force:refreshView in Aura
- Supports both Aura and Lightning Web Components
- Enables seamless data synchronization and custom refreshes
However, Importing the lightning/refresh module is necessary to leverage the Refresh Event function for externally sourced data synchronization within designated container views.
In this blog, we will demonstrate how to refresh account names using Refresh View API in LWC. Read on!
Refreshing Account Name using RefreshView API with LWC
Step 1: Create Apex Class to handle the update of the Account Name.
Step 2: Deploy this apex class
Step 3: Now Create Lwc Component which uses RefreshView API to refresh Account Name without refreshing the complete record page.
HTML FILE
JS FILE
XML-Meta FILE
Step 4: Deploy this Lwc component.
Step 5: Now Put the deployed Lwc component in the record page of the Account by clicking Edit Page on Account Record.
Step 6: After putting the custom Lwc component on the page click on Save Button and then go back to the Account record page to check its working.
Step 7: Here you can see on the record page we have our component RefreshView.
Step 8: Click on Refresh View Button on RefreshView component.
Here in the below images, you can see on click of the Refresh View Button the account name is changed in Account as well as the related record with the name in the Input box of the component.
Account Record with the changed name:
Related Contact with changed account name:
Step 9: You can also enter the old account name or any other name in the input box & click on the Refresh View button then again the name of the Account will refresh as seen below images.
Account Record changed with the old name:
Related Contact with changed account name to old name:
Note: You can update any Account name with your preference by entering the name in the input field.
Step 10: Now you can check the account List view to verify that the account name you have changed is reflected properly.
Congratulations on successfully implementing an LWC component that utilizes the RefreshView API to refresh the account name.
Conclusion :
The Refresh View API empowers developers to create responsive and dynamic web applications by selectively updating specific sections of a webpage.
Be sure to try out this solution and experience the benefits of the RefreshView API in action.
In the meantime, stay tuned for our next Salesforce development solution!
