3

I am not able to open another lightning component in a modal by simply referencing the component

<div class="slds-modal__content slds-p-around--medium">
    <div>
        <!--<ui:inputSelect class="single" aura:id="InputSelectSingle" change="{!c.selection}">
        </ui:inputSelect>-->
        <c:CandidatePatientComponent></c:CandidatePatientComponent>
     </div>
</div>

Please let me know how to achieve this.

//Code that I tried

<aura:component >
    <ui:button label="openmodal" press="{!c.openmodal}"  />
   <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox" class="slds-modal">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeModal}">

                    <span class="slds-assistive-text">Close</span>
                </button>
                <h2 id="header43" class="slds-text-heading--medium">Test Modal</h2>
            </div>
            <div class="slds-modal__content slds-p-around--medium">
                <div>
                    <c:LeadCreation/>
                </div>
            </div>
            <div class="slds-modal__footer">
            </div>
        </div>
    </div>
    <div class="slds-backdrop " aura:id="Modalbackdrop"></div>
</aura:component>

Controller code

({
    closeModal:function(component,event,helper){    
        var cmpTarget = component.find('Modalbox');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.removeClass(cmpBack,'slds-backdrop--open');
        $A.util.removeClass(cmpTarget, 'slds-fade-in-open'); 
    },
    openmodal: function(component,event,helper) {
        var cmpTarget = component.find('Modalbox');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.addClass(cmpTarget, 'slds-fade-in-open');
        $A.util.addClass(cmpBack, 'slds-backdrop--open'); 
    }

})

Component B code

<aura:component controller="LeadCreateController" 
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" 
                access="global" >


    <!-- Define Attribute-->
    <aura:attribute name="candidate" type="Lead" default="{'sobjectType': 'Lead',
                         'FirstName': '',
                         'LastName': '',
                         'Country': '',
                           'Company':''                               
                       }"/>
    <div class="container-fluid">
        <h3>Please Enter The Candidate Information</h3>
        <div class="form-group">
            <label>First Name</label>
            <ui:inputText class="form-control" value="{!v.candidate.FirstName}"/>
        </div>
        <div class="form-group">
            <label>Last Name</label>
            <ui:inputText class="form-control" value="{!v.candidate.LastName}"/>
        </div>
        <div class="form-group">
            <label>Country</label>
            <ui:inputText class="form-control" value="{!v.candidate.Country}"/>
        </div>
         <div class="form-group">
            <label>Company</label>
            <ui:inputText class="form-control" value="{!v.candidate.Company}"/>
        </div>


    </div>
    <div class="col-md-4 text-center">
        <ui:button class="btn btn-default" press="{!c.create}">Create</ui:button>
  </div>
</aura:component>
4

In upper <div> include slds-modal slds-fade-in-open try this... refer this link for more details

<div class="slds-modal slds-fade-in-open">
      <div class="slds-modal__container">
        <div class="slds-modal__content slds-p-around--medium">
           <div>
            <c:CandidatePatientComponent></c:CandidatePatientComponent>
           </div>
        </div>
      </div>
    </div>

EDIT

I share a example code this might help to you.By clicking on button show another component inside a modal

ComponentA:

<aura:component >
    <ui:button label="openmodal" press="{!c.openmodal}"  />
   <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox" class="slds-modal">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeModal}">
                    <c:svgIcon svgPath="/resource/slds/assets/icons/utility-sprite/svg/symbols.svg#close"  size="small"  />
                    <span class="slds-assistive-text">Close</span>
                </button>
                <h2 id="header43" class="slds-text-heading--medium">Test Modal</h2>
            </div>
            <div class="slds-modal__content slds-p-around--medium">
                <div>
                    <c:componentB />
                </div>
            </div>
            <div class="slds-modal__footer">
            </div>
        </div>
    </div>
    <div class="slds-backdrop " aura:id="Modalbackdrop"></div>
</aura:component>

InCOntroller:

({
    closeModal:function(component,event,helper){    
        var cmpTarget = component.find('Modalbox');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.removeClass(cmpBack,'slds-backdrop--open');
        $A.util.removeClass(cmpTarget, 'slds-fade-in-open'); 
    },
    openmodal: function(component,event,helper) {
        var cmpTarget = component.find('Modalbox');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.addClass(cmpTarget, 'slds-fade-in-open');
        $A.util.addClass(cmpBack, 'slds-backdrop--open'); 
    }

})
  • Still no luck....the above component is getting rendered on page load.I need <c:CandidatePatientComponent> to be opened in a modal – Debarun Sengupta Mar 9 '17 at 13:00
  • @DebarunSengupta which code? – vignesh Mar 9 '17 at 13:04
  • @DebarunSengupta I Edited the post . – vignesh Mar 9 '17 at 13:19
  • I tried with the above code but still on page load the component b is getting rendered.It should only be opened when the open modal button is pressed.Not sure where I am missing. – Debarun Sengupta Mar 9 '17 at 13:26
  • can you please edit the question what code you trying now this might help to resolve your issue.Did you tried with example code I provided above that code match your crieteria that when button click it will open a modal. – vignesh Mar 9 '17 at 13:29
4

The preferable approach is to have a component that renders modal window.

The code below renders modal window when the user clicks on the button and do not depend on CSS styling tricks.

A title is not required and you can define the control buttons in the Base component. It helps you, to have a component, the one you want to render in the modal window, logic-less.

Base Component

 <aura:component description="Example usage of custom modal window for  Lead record edit">
    <aura:attribute name="lead" type="Lead" />

    <aura:attribute name="showModalEditLead" type="Boolean" default="false" />
    <aura:attribute name="showModalB" type="Boolean" default="false" />

    <lightning:button label="Open Edit Lead Modal" onclick="{!c.handleModalEditLeadOpen}" />
    <lightning:button label="Open Modal B" onclick="{!c.handleOpenModalB}" />

    <c:CustomModalComponent title="Lead Edit" isActive="{!v.showModalEditLead}">
        <!-- Content of the modal window -->
        <c:CustomLeadEdit record="{!v.lead}" />

        <aura:set attribute="footer">
            <lightning:button variant="neutral" label="Cancel" onclick="{!c.handleModalEditLeadCancel}" />
            <lightning:button variant="brand" label="Save" onclick="{!c.handleModalEditLeadSave}" />
        </aura:set>
    </c:CustomModalComponent>

    <c:CustomModalComponent isActive="{!v.showModalB}">
        Welcome to Modal B!
    </c:CustomModalComponent>
</aura:component>

Base Controller

({  
     handleModalEditLeadOpen: function(component) {
         component.set('v.showModalEditLead', true);
     },

     handleModalEditLeadCancel: function(component) {
         component.set('v.showModalEditLead', false);
     },

     handleModalEditLeadSave: function(component, event, helper) {
         /* Handle the Lead here */
         component.set('v.showModalEditLead', false);
     },

     handleOpenModalB: function(component) {
         component.set('v.showModalB', true);
     }
})

CustomModal Component

<aura:component description="Component for rendering modal window" extensible="true">
    <aura:attribute name="isActive" type="Boolean" default="false" required="true" />
    <aura:attribute name="title" type="String" default="" required="false" />
    <aura:attribute name="footer" type="Aura.Component[]" required="false" />

    <div>
        <aura:renderIf isTrue="{!v.isActive}">
            <section role="dialog" tabindex="-1" aria-label="Meaningful description of the modal content" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <header class="{!'slds-modal__header' + (empty(v.title) ? ' slds-modal__header slds-modal__header_empty' : '')}">
                        <lightning:buttonIcon alternativeText="Close" onclick="{!c.handleCancel}" iconName="utility:close" variant="bare" size="large" class="slds-modal__close slds-button_icon-inverse" />

                        <aura:renderIf isTrue="{!not(empty(v.title))}">
                            <h2 class="slds-text-heading_medium slds-hyphenate">{!v.title}</h2>
                        </aura:renderIf>
                    </header>
                    <div class="slds-modal__content slds-p-around--large" id="modal-content-id-1">
                        {!v.body}
                    </div>
                    <footer class="slds-modal__footer">
                        {!v.footer}
                    </footer>
                </div>
            </section>
        </aura:renderIf>

        <div class="{!'slds-backdrop ' + ((v.isActive) ? 'slds-backdrop_open' : 'slds-backdrop_close')}"></div>
    </div>
</aura:component>

CustomModal Controller

({
    handleCancel: function(component) {
        component.set('v.isActive', false);
    }
})

CustomLeadEdit Component

<aura:component description="Form for editing Lead record">
    <aura:attribute name="record" type="Lead" required="true" />

    <lightning:layout horizontalAlign="center">
        <lightning:layoutItem size="12" flexibility="auto">
           <ui:inputText label="First Name" value="{!v.record.FirstName}" />
        </lightning:layoutItem>

        <lightning:layoutItem size="12" flexibility="auto">
            <ui:inputText label="Last Name" value="{!v.record.LastName}" />
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

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.