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.
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.
Leave a Reply to sp1312Cancel reply