0

We have a simple lightning component that operates similar to Related Records popup, the difference being the records that popup aren't directly related to the parent. The record object is a Case.

A parent component shows a link and when it is navigated in it popups up a child component which shows related custom records.

This all works fine. Open a Case record, hover over link and it pop ups a component. However if you then open a new Case record and hover over a link (separate record) it shows the pop up at top of screen.

We are using the lightning:overlayLibrary to perform the popup logic. I assume it doesn't like being referenced more than once? Tried a destroy method but didn't make any difference.

Below contains some code to replicate it. There's a parent component link that when mouse hovers over creates a child component which is displays the related records (this has been changed to generic text for purpose of simplicity). When the mouse leaves the child componet it fires and event to parent to close popup.

Is there a better way to do this?

Parent component that displays the link:

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable,force:hasRecordId">
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="isVisible" type="boolean" />
    <aura:attribute name="popup" type="object" />    
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <lightning:overlayLibrary aura:id="overlayLib" />
   <div class="mypopover" onmouseover="{!c.handleShowPopover}" >Hover over me for popup!</div>       
</aura:component>

Parent controller :

({
    init : function(component, event, helper) {
        console.log("VA Button Init 1.0");
        component.set("v.isVisible", false);                        
    }
    ,
    handleShowPopover : function(component, event, helper) {

        var recordId = component.get("v.recordId");
        var isVisible = component.get("v.isVisible");

        console.log("Click Record Id" + recordId);
        console.log("IsVisible" + isVisible);        
        //create child component
        if(!isVisible)
        {

        $A.createComponent("c:VPopupTest", { recordId, myComponentEvent: component.getReference("c.handleMyComponentEvent")},
                           function(content, status) {
                               if (status === "SUCCESS") 
                                {
                                   component.set("v.isVisible", true);                        

                                    component.find('overlayLib').showCustomPopover({
                                            body: content,
                                            referenceSelector: ".mypopover",
                                            cssClass: "popoverclass,cPopoverOpener,slds-popover_full-width"
                                        }).then(function (overlay) {
                                            component.set("v.popup", overlay);  
            
                                            setTimeout(function(){ 
                                                //close the popover after 20 seconds
                                                overlay.close(); 
                                                component.set("v.isVisible", false);                        
                                            }, 20000);
                                        });        
                               }                               
                           });            
        }
    },
    //event handler - gets called from child to close the popup
    handleMyComponentEvent : function(component, event, helper) {
        var value = event.getParam("param");
        console.log("Firing close popup event" );
       var overlay = component.get("v.popup"); 
        
        component.find('overlayLib').notifyClose();
        overlay.close(); 
        component.set("v.isVisible", false);
        
    }
    })

Event fired: MyCustomEvent.evt

<aura:event type="COMPONENT">
    <aura:attribute name="param" type="String"/>
</aura:event>

Child component VPopupTest which displays record - modified with generic text:

<aura:component  implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:registerEvent name="myComponentEvent" type="c:MyCustomEvent"/>
<aura:attribute name="recordId" type="Id" />
<aura:handler name="init" value="{!this}" action="{!c.init}" />
 <div onmouseleave="{!c.handleMouseOut}" >
<br>Quick brown fox jumps over the lazy dog</br>
<br>Quick brown fox jumps over the lazy dog</br>
<br>Quick brown fox jumps over the lazy dog</br>
<br>Quick brown fox jumps over the lazy dog</br>
<br>Quick brown fox jumps over the lazy dog</br>
<br>Quick brown fox jumps over the lazy dog</br>
<br>Quick brown fox jumps over the lazy dog</br>
<br>Quick brown fox jumps over the lazy dog</br>
<br>Quick brown fox jumps over the lazy dog</br>
<br>Quick brown fox jumps over the lazy dog</br>    
</div>        
</aura:component>

Controller for VPopupTest component:

({
    init : function(component, event, helper) {

    
    },
    handleMouseOut: function(component, event, helper) {
        var myEvent = component.getEvent("myComponentEvent");
        myEvent.setParams({"param": "ClosePopup"});
        myEvent.fire();
        
       console.log("Mouse OutChild" );
    } ,
    fireMyComponentEvent : function(component, event, helper) {
        console.log("Firing event from child..." );
        var myEvent = component.getEvent("myComponentEvent");
        myEvent.setParams({"param": "ClosePopup"});
        myEvent.fire();
    }    
})
0

The id for the div's selector class has to be unique for each instance used on a page. So added a pselector attribute which is set to random number during initialisation and assigned as div class:

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable,force:hasRecordId">
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="isVisible" type="boolean" />
    <aura:attribute name="popup" type="object" />
    <aura:attribute name="pselector" type="string" />                
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <lightning:overlayLibrary aura:id="overlayLib" />
   <div class="{!v.pselector}" onmouseover="{!c.handleShowPopover}" >Hover over me for popup!</div>       
</aura:component>

({
    init : function(component, event, helper) {
        console.log("VA Button Init 1.0");
        component.set("v.pselector", "p" + Math.random().toString(36).substring(2, 15) );    
        component.set("v.isVisible", false);                        
    }
    ,
    handleShowPopover : function(component, event, helper) {

        var recordId = component.get("v.recordId");
        var isVisible = component.get("v.isVisible");

        console.log("Click Record Id" + recordId);
        console.log("IsVisible" + isVisible);        
        //create child component
        if(!isVisible)
        {

        $A.createComponent("c:VPopupTest", { recordId, myComponentEvent: component.getReference("c.handleMyComponentEvent")},
                           function(content, status) {
                               if (status === "SUCCESS") 
                                {
                                   component.set("v.isVisible", true);                        

                                    component.find('overlayLib').showCustomPopover({
                                            body: content,
                                            referenceSelector: "." +  component.get("v.pselector"),
                                            cssClass: "popoverclass,cPopoverOpener,slds-popover_full-width"
                                        }).then(function (overlay) {
                                            component.set("v.popup", overlay);  
            
                                            setTimeout(function(){ 
                                                //close the popover after 20 seconds
                                                overlay.close(); 
                                                component.set("v.isVisible", false);                        
                                            }, 20000);
                                        });        
                               }                               
                           });            
        }
    },
    //event handler - gets called from child to close the popup
    handleMyComponentEvent : function(component, event, helper) {
        var value = event.getParam("param");
        console.log("Firing close popup event" );
       var overlay = component.get("v.popup"); 
        
        component.find('overlayLib').notifyClose();
        overlay.close(); 
        component.set("v.isVisible", false);
        
    }
    })

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.