How to refresh Lightning Data Table after triggering standard event(new/edit)?

How to refresh Lightning Data Table after triggering standard event(new/edit)? 

In general way, if we will try to create a new record by NavigationMixin Create event from Lightning Data Table, it will be redirected to the detail page of newly created record, but if business wants to update the Lightning Data Table without navigating to the detail page of newly create record what will we do?

In the same way, if we will try to update the record by NavigationMixin Edit event from Lightning Data Table, the columns will not be refreshed until refreshing the entire page. In this situation how will we mitigate this problem?

I think, using the following solution all the said problems will be resolved and it will help many LWC developers to make the customer happy.

Let’s discuss about this solution:

Following steps need to be performed for this solution:

1. Create Platform Event
2. Create Trigger and TriggerHandler to publish the Platform Events
3. Create Apex Class to get the records from Server
4. Create LWC with Lightning Data Table with empAPI

Here, we will show the account records in Lightning Data Table and try to edit any account record and create a new account record from this table.

1. Create Platform Event: Now, we will create Platform Event named “Refresh Record Event” as per the following image and create two text fields with length of 18 such as “Record Id” and “User Id”.

2. Create Trigger and TriggerHandler to publish the Platform Events: Here, at first we will create a TriggerHandler named “AccountTriggerHandler” in this way:

In this class, we are publishing Platform Event records at the time of insert and update operations on Account records. We have added Record Id and Current User Id on each platform event records.

Next, we will create a Trigger on Account object such as

3. Create Apex Class to get the records from Server: Now, we will create an Apex Class named “DataTableActionsController” for our LWC to get the Account records.

Here for demo purpose, we have limited only two account records which will be returned to the next Lightning Web Component (LWC).

4. Create LWC with Lightning Data Table with empAPI: Now, finally we will create the LWC named “dataTableActions” with empAPI event:

dataTableActions.js-meta.xml

dataTableActions.js

We have taken following actions in this js file.

• We have imported Apex Class Method (“getAccounts“) to get the account records.
• NavigationMixin is being used to take the standard create and edit operation.
• We have imported current user id to check the current logged in user.
• Then we have imported the empAPI with some useful methods such as subscribe, unsubscribe, onError.
• First, we have defined the channel name as  “/event/Refresh_Record_Event__e” and subscribed the channel in connectedCallback() method.
• Next, we have defined the messageEvent() method to notify any change on the record.
• Lastly, we have unsubscribed the channel during the termination of the component.
• Remaining codes, we have written for showing the records with specific columns for the Lightning Data Table.
• Please noted that, when we have used NavigationMixin Create event in createAccount() method, we have put “state” with “navigationLocation” parameter as “RELATED_LIST” to stop the navigation to the detail page of newly created account record.

dataTableActions.html

In this html, we have defined the Lightning Data Table with row actions to show the records with specific actions such as “Edit”.

So, we have solved the problem to refresh the data table without entire page refreshing when we will use standard create/ edit event from NavigationMixin library.

Thank you!

16,829 total views, 1 views today