Dynamically Instantiate and destroy Lightning Components – Modal dialog component

This blog post focuses on how we can create Modal Dialog component in Lightning and dynamically instantiate and destroy it on button click event as shown in below image.

Salesforce Ligtning Modal Window
Salesforce Ligtning Modal Window

Lets start with Lightning component for Modal Dialog.

We have used svgIcon component to show close icon on modal dialog. You can find source code of this component from my GitHub account. This component has below four attributes for title and labels on button. One point to notice that on click event of close and confirm button, I have used {!v.methodName} instead of {!c.methodName}. Wanted to show alternative way to invoke method in controller using attribute of type Aura.Action. Two attributes has been declared to execute action in close and confirm button. In our case, we are calling same method of controller but you can have different.

We can hide background of modal dialog using CSS style attribute, but I preferred aria-hidden attribute of HTML5 on div component. Key in this component is Salesforce lightning design system (SLDS) uploaded as static resource, which will be imported in later part of this tutorial. SLDS supports utility CSS classes for modal window.

Destroy Lightning Component

We can destroy lightning component so that it can free up memory used by browser and therefore keep application fast. Below controller handles click event of modal dialog and destroy it. component.destroy() is used to remove component from document dom.

Now, we need a container to dynamically instantiate modal dialog component. Below Lightning application contains two input field to set title and body of modal dialog and handles click event to dynamically instantiate it.

we have used ltng:require to import Salesforce lightning design system uploaded as static resource in Salesforce. In order to dynamically create lightning component, we need to use aura:dependency informing lightning application that we may create component dynamically. div tag with aura:id modalDialogPlaceholder is used to place dynamically generated component.

we need a small CSS class to fix button label as white color, as shown below.

ModalDialogDemo.css

.THIS .uiButton--default .label {
    white-space: nowrap;
    color: #ffffff;
}

Dynamically instantiate Lightning component

Below controller instantiates modalDialog component on click event of button.

we have used $A.createComponent to instantiate dynamically.

You can find complete source code of this blog post on my GitHub account.


Posted

in

by

Comments

12 responses to “Dynamically Instantiate and destroy Lightning Components – Modal dialog component”

  1. Modal Yodel Avatar
    Modal Yodel

    Can this technique be used with Community Builder? How to set aura:dependency for a Community Builder page?

    1. Jitendra Zaa Avatar

      You can use this technique on any custom written Lightning components. So, if you have written custom component for community then I don’t see any problem.

  2. Sagar Patel Avatar
    Sagar Patel

    Is there any way to add onclick function dynamical? or say What is the replacement for apex:actionfunction in lightning ?

    For example,

    abc.cmp

    Call init handler …

    abc.js

    init()

    other code …

    abchelper.js

    get data from SFDC server

    for(response obj: lstResponse){

    $(‘id=myTask’).html( ‘ test test’);

    // In above line i want to call may component function

    }

    If i compare my scenario with visual force page then it would work like as apex:Actionfunction ….

    1. Jitendra Zaa Avatar

      I don’t see any problem adding onclick function dynamically. You can do lots of stuff from javascript and also invoke server side controller. If you can provide non-working code then I may be able to help you out here.

  3. Jason Beatty Avatar
    Jason Beatty

    How can you pass in a function to handle the onclicks? I want to add a “Save” button to the modal and pass in a function to the modalDialog to run when Save is clicked. Any help will be appreciated!

    Thanks!

  4. RC Avatar
    RC

    Where did this blog post go?

  5. Mayan Avatar
    Mayan

    Hi Jitendra,
    I have developed a Modal in Visualforce page using SLDS. Now Whenever I click outside the Modal area, it doesn’t go away or we can say it doesn’t hide. It should be close or hide by clicking outside the box(Modal). Cross(X) Button and Close button both are working fine. Issue is coming outside area of box only.

    Please do help or reply your email ID so that I can send you my code with ScreenShots.
    Thanks

  6. sp1312 Avatar
    sp1312

    Hi Jitendra,
    I have been following your blog from long time and its very useful.
    I have one lightning page where I have filter row similar to what we have in Workflow rules where you can add condition like field “Name” operator(=,!=, etc) and based on the selected field the value field should render. Suppose if the field which I choose for filter is picklist type then value field should appear as picklist(picklist values I will fetch I just need the component type).
    I would be very thankful if you can help me little bit. Let me know if you need any clarification or help from my side.

  7. Ramana Reddy Avatar
    Ramana Reddy

    Hii Jitendra ,

    is it possible Sobject lisview record deatils open in modal dailog ?

  8. readrajatmahajan Avatar

    Hi Jitendra, wanted to know how would you pass attributes from child component to parent component?

  9. Sai Karthik Avatar

    When trying to destroy, my parent component is also getting destroyed. Not sure where I am going wrong.

Leave a Reply to Mayan Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.