Category: Lightning Experience

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!

 

20,424 total views, 1 views today

Problem Statement: In many projects, I got the requirement to call the Lightning Web Component from Quick Action, but the width of that Lightning Web Component is almost 80% of the screen. How can you accomplish this?

Solution: We all know how to invoke Lightning Web Component from Lightning Aura Component which can be associated with the Quick Action in Salesforce Lightning Experience. Now, if we will open any Quick Action settings, we can update the height of the standard quick action modal as per business requirement, but what we will do if we have to increase the width of the standard quick action modal. Here is the solution.

If we will try to use standard slds class such as “slds-modal_container“, we can increase the width of the standard quick action modal, but in this case, other modals such as Edit or any other quick action will be affected. So, we should not consider this approach.

First, we will try to hide the Standard Quick Action Modal and at the same time we will invoke the Lightning Web Component using lightning:overlayLibrary with attaching the standard cssClass as “slds-modal_large“.

We will describe this with an easy example. Let’s say, we want to show a greeting message from a Quick Action on the Lease Record Detail Page.

Step 1: We will create two components such as Aura Component and Lightning Web Component. First, we will create a Lightning Web Component named “greeting” in which will show the greeting message such as

greeting.html

<template>
    <lightning-card title="Welcome My Friends">
        <lightning-layout>
            <lightning-layout-item flexibility="auto" padding="around-small"> 
                
<div class="contentClass">                   
                    I hope you are doing well.
                </div>

            </lightning-layout-item>
        </lightning-layout>      
    </lightning-card>
</template>

we don’t need to write anything in js or xml file. Because we will call this component from the Aura Component which will be associated with the Quick Action in Salesforce Lightning.

Step 2: Create a Lightning Aura Component named “showMessage” which will be associated with the Quick Action.

showMessage.cmp

<aura:component implements="force:lightningQuickActionWithoutHeader"> 
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 
    <lightning:overlayLibrary aura:id="overlayLib"/>
</aura:component>

If you see, we have used standard lightning:overlayLibrary to open a modal when the user will click on Quick Action.

showMessageController.js

({
    doInit : function(component, event, helper) {        
        var modalBody;
        
        setTimeout(()=>{  
            // Priority -> 1 || Please check if it will not work, consider Priority 2.
                //$A.get("e.force:closeQuickAction").fire(); 
        
            //Priority -> 2
                var stdModal = document.getElementsByClassName("uiModal forceModal");    
                stdModal.forEach(function(a, b) {
                $A.util.addClass(a, "slds-hide");
                });        
        },10);  
    
        $A.createComponent("c:greeting", {},
        function(content, status) {
            if (status === "SUCCESS") {
                modalBody = content;
                component.find('overlayLib').showCustomModal({
                    header: "Greeting Message",
                    body: modalBody,
                    showCloseButton: true,
                    cssClass: "slds-modal_large",
                    closeCallback: function() {                       
                    }
                })
            }
        });  
    }                
})

Now, we will discuss about two operations such as setTimeOut() and $A.createComponent() used in doInit() method.

setTimeOut(): We are hiding the standard quick action modal by applyting “slds-hide” class to the standard quick action modal class in 10ms. However, please try this standard quick action closure function

$A.get("e.force:closeQuickAction").fire();

first, if it will not work then use the “slds-hide” class to the standard quick action modal class as the second approach.

$A.createComponent(): We are calling our “greeting” component using this function with lightning:overlayLibrary. We have set the cssClass as “slds-modal_large” to increase the width of the modal in where Lightning Web Component will be invoked.

Step 3: Now, we will attach this Lightning Aura Component to the Quick Action of Lead Object(for example).

Quick Action: Show Message

 

 

 

 

 

 

 

 

 

 

Place this Quick Action into the Lead Page Layout.

Result: Open the Lead record and click on “Show Message” quick action, you can see the greeting Lightning Web Component Modal window on the detail page as per the following image. Actually, when it’s opened, in backend standard quick action modal is disappeared.

 

Thanks for your time!!

43,566 total views, 12 views today