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
Debasish Paul 6Debasish Paul 6 

How to Close The Popup Lightning Component called from Another Component?

I have 2 components: Component 1 and Component 2. From Component 1 on the click of a button(located in the row of a List of Custom Object), calling another Modal popup component Component 2. Sample Code is as Below:
(Salesforce Developers): New reply to your question. - tanwi08@gmail.com - Gmail

Component1Controller.js

clickDetails function
clickDetails : function(cmp,helper,event){ cmp.set("v.recordId", event.target.id); cmp.set("v.isVisble, true); }

But I am not finding the way how to play with the isVisible attribute in the "Close" button of the Component 2 to Close the Component.
Can anybosy provide any direction on that?
 
Carlos F HernandezCarlos F Hernandez
Hi again Debasish!
I'm assuming you have this question followed by this thread: https://developer.salesforce.com/forums/ForumsMain?id=906F0000000DEWL

To close the modal you have to set v.isVisible to false, Lightning Framework will render the component after changing this value so it won't show the modal.

If the mechanism to close is inside Component2 and the attribute isVisible is inside Component1, you have to use an event to comunicate the action from Component2 to change any value com Component1.

You can achive this using a Component Event.

ModalCloseEvt.evt 
<aura:event type="COMPONENT" >
</aura:event>
You have to register this event inside your Component2.cmp where is going to be fired: 
<aura:registerEvent name="ModalCloseEvent" type="c:ModalCloseEvt"/>

Try to create a button or an "X" icon to close the modal and define the "onclick" event with a controller function:
Example: 
  
<a href="" onclick="{!c.onClose}">X</a>
  
onClose: function(cmp){
 var modalCloseEvt = cmp.getEvent("ModalCloseEvent");
 modalCloseEvt.fire();
}

You have to handle the event inside Component1.cmp where the attribute is going to be setted:
<aura:handler name="ModalCloseEvent" event="c:ModalCloseEvt" action="{!c.closeAction}"/>
  
closeAction: function(cmp){
  cmp.set("v.isVisible", false);
}

Hope this works!
Debasish Paul 6Debasish Paul 6
Hi Carlos,
   It is not working. I think if v.visible  is True then we are writing the code for make visible the Component 2 as:
<aura:if isTrue="{!v.isVisble}">
          <c:PopUpCmp FDBug="{!v.FDBug}"/><!-- component with record details as modal-->
    </aura:if>

But here in this case we are not instructing the app to close the PopUpCmp(2nd Component) in case when v.visible is false. We are setting the variable value to False but not taking any action on that. Can you please put some light?

Thanks,
Debasish.
Debasish Paul 6Debasish Paul 6
Nothing is happening when I am clicking on the Close button. No error is also coming.
Debasish Paul 6Debasish Paul 6
Hi Carlos,
   Can you please help?