2
  • I have two components
  • Component A : Display's the list of Account, on click of account name it fires a event which passes Accountid to Component B.
  • Component B - It listens the event and Displays the Contact based on the AccountId attribute
  • I want to display Component B on the Modal
1

So try this. I guess your contacts table will be in somewhere. move all contact table code inside the lightning model tags

check this codes https://www.lightningdesignsystem.com/components/modals/

and when the page loads then set the model display to none.

when you click on any of the account, you may call a controller to get all the associated contacts. once all the contact records received. Just get the model div and change the style display none to block.

This way you show the model.. And

you can use

<div role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open">
 <!--set of your code--> 
  <!--table-->
</div>

here you can see slds-fade-in-open this css with display the model.

.slds-fade-in-close class will hide the model

0

Here is the detail blogpost showing how you can achieve this

The core is to use Application events to handle model open and close

The modal component will have something like below

<div class="slds">

 <div aria-hidden="true" role="dialog" class="slds-modal slds-modal--large slds-fade-in-hide" aura:id="modaldialog">
 </div>

 <!--Other markups-->

<div class="slds-backdrop slds-backdrop--hide" aura:id="backdrop">

</div>

</div>

The Js controller code for Hide and Show model will be as below

({
showOppmodal: function(component, event, helper) {
     //Toggle CSS styles for opening Modal
    helper.toggleClass(component,'backdrop','slds-backdrop--');
    helper.toggleClass(component,'modaldialog','slds-fade-in-');
    helper.getopportunitylst(component,event);
},

hideModal : function(component, event, helper) {
     //Toggle CSS styles for hiding Modal
    helper.toggleClassInverse(component,'backdrop','slds-backdrop--');
    helper.toggleClassInverse(component,'modaldialog','slds-fade-in-');
  }
})

The helper code is as below

({
toggleClass: function(component,componentId,className) {
    var modal = component.find(componentId);
    $A.util.removeClass(modal,className+'hide');
    $A.util.addClass(modal,className+'open');
},

toggleClassInverse: function(component,componentId,className) {
    var modal = component.find(componentId);
    $A.util.addClass(modal,className+'hide');
    $A.util.removeClass(modal,className+'open');
    }
 })

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.