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 

Toggling between Components - Opening POP up on another

I have 2 Lightning components. one is the list of records with a "Detail" Button in each row. What I want is to click on Detail button and the Detail component popup(my second component) will open after showing the Spinner in the window. 

Can anybody please help?
Best Answer chosen by Debasish Paul 6
Carlos F HernandezCarlos F Hernandez
Ok, this is what you might want to try.
You have 2 components:
- Component1.cmp
- Component2.cmp

Component1.cmp:
  
<aura:atttribute name="recordId" type="String"/>
<aura:atttribute name="isVisble" type="Boolean"/>

<aura:iteration items="{!v.listRecords}" var="rec"> <!-- List of records-->
<!-- some structure-->
  <a href="" onclick="{!v.clickDetails)" id="{!rec.Id}>Details</a>
<!-- /some structure--> 
</aura:iteration>
<aura:if isTrue="{!v.isVisble}">
  <c:Component2 recordId="{!v.recordId}"/><!-- component with record details as modal-->
</aura:if>


Component1Controller.js

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


You will have to implement a close function for the modal and handle this event on Component1 so you can set isVisible to false.


I recommend you to take the Lightning Component Trailhead (https://developer.salesforce.com/trailhead/en/module/lightning_components), it will be so much easier to understand.

Good luck!

All Answers

Piyush Kumar 58Piyush Kumar 58
Hello Debasish ,
You can Use setTimeout method in which you can set the Toggle value after some time value make it false thus spiner is close and then open your second component.
setTimeout(function(){ alert("Hello"); }, 3000);

Thanks.
Carlos F HernandezCarlos F Hernandez

You won't be able to display a single lightning component on a popup window unless you create another lightning app or a Visualforce page to display your second component.
I strongly suggest not to do this.

My recomendation is to display this second component as a modal, so you can toggle visibility when someone clicks on Detail Button.
https://www.lightningdesignsystem.com/components/modals/


P.S.
In case you're going to use setTimeout function, you have to alwasy use $A.getCallback and ask if the component is valid because you will be executing this function outside the Framework Lifecycle. 
window.setTimeout(
    $A.getCallback(function() {
        if (cmp.isValid()) {
            //Do something
        }
    }), 3000
);

 
Debasish Paul 6Debasish Paul 6
Hi, Carlos
   How to declare the "cmp" variable? Is it that, that component needs to be included in the parent component or it may be available in the app? But If I include the component in the App that Component is also getting visible with the Base(Parent) component where from the POP Up Needs to be shown.
Please Help.

Thanks,
Debasish.
 
Debasish Paul 6Debasish Paul 6
My Code:
window.setTimeout(
     $A.getCallback(function() {
        var cmp = component.find('PopUpCmp.cmp');       
        if (cmp.isValid()) {
            cmp.set("v.visible", true);
        }
    }), 5000
);
But it is not recognizing "cmp" variable and saying it is 'undefined'.
Carlos F HernandezCarlos F Hernandez
Ok, this is what you might want to try.
You have 2 components:
- Component1.cmp
- Component2.cmp

Component1.cmp:
  
<aura:atttribute name="recordId" type="String"/>
<aura:atttribute name="isVisble" type="Boolean"/>

<aura:iteration items="{!v.listRecords}" var="rec"> <!-- List of records-->
<!-- some structure-->
  <a href="" onclick="{!v.clickDetails)" id="{!rec.Id}>Details</a>
<!-- /some structure--> 
</aura:iteration>
<aura:if isTrue="{!v.isVisble}">
  <c:Component2 recordId="{!v.recordId}"/><!-- component with record details as modal-->
</aura:if>


Component1Controller.js

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


You will have to implement a close function for the modal and handle this event on Component1 so you can set isVisible to false.


I recommend you to take the Lightning Component Trailhead (https://developer.salesforce.com/trailhead/en/module/lightning_components), it will be so much easier to understand.

Good luck!
This was selected as the best answer
Debasish Paul 6Debasish Paul 6
Thank You Carlos...That Helps. But I am now not able to Close the Detail Window. Component.destroy() is totally destrying the component so it is not opening again in the next row Detail button click. I also tried CSS like:
.THIS.toggle {
    display: none;
}...that's also didn't work.
And I am trying to write the Code on the "Close" button click on the Component 2 not in Component 1, where you suggested to make isVisible to false. Can you please put some light on it.
Thanks in advance....
Debasish.