Dynamically Instantiate and destroy Lightning Components – Modal dialog component

Learn how to create advance lightning component (Modal dialog) and dynamically instantiate and destroy it

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.

Related posts

10 thoughts on “Dynamically Instantiate and destroy Lightning Components – Modal dialog component”

  1. 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. 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.

  2. 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!

  3. 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

  4. 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.

Leave a Reply

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