{"id":5364,"date":"2016-02-24T21:28:34","date_gmt":"2016-02-24T21:28:34","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=5364"},"modified":"2017-08-15T19:26:31","modified_gmt":"2017-08-15T19:26:31","slug":"dynamically-instantiate-and-destroy-lightning-components-modal-dialog-component","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/dynamically-instantiate-and-destroy-lightning-components-modal-dialog-component\/","title":{"rendered":"Dynamically Instantiate and destroy Lightning Components &#8211; Modal dialog component"},"content":{"rendered":"<p style=\"text-align: justify;\">This blog post focuses on how we can create\u00a0<strong>Modal Dialog component in Lightning\u00a0<\/strong>and dynamically instantiate and destroy it on button click event as shown in below image.<\/p>\n<figure id=\"attachment_5365\" aria-describedby=\"caption-attachment-5365\" style=\"width: 556px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/02\/Ligtning-Modal-Window.gif?ssl=1\" rel=\"attachment wp-att-5365\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-5365\" src=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/02\/Ligtning-Modal-Window.gif?resize=556%2C772&#038;ssl=1\" alt=\"Salesforce Ligtning Modal Window\" width=\"556\" height=\"772\" \/><\/a><figcaption id=\"caption-attachment-5365\" class=\"wp-caption-text\">Salesforce Ligtning Modal Window<\/figcaption><\/figure>\n<p><!--more--><\/p>\n<p>Lets start with Lightning component for\u00a0<strong>Modal Dialog.<\/strong><\/p>\n<p><script src=\"https:\/\/gist.github.com\/JitendraZaa\/5e9d508b87fec0a98e70c5174d2e03fd.js\"><\/script><\/p>\n<p style=\"text-align: justify;\">We have used\u00a0<strong>svgIcon<\/strong> component to show close icon on modal dialog. You can find source code of this component from my <a href=\"https:\/\/github.com\/JitendraZaa\/LightningExamples\/tree\/master\/svgIcon\">GitHub account.<\/a>\u00a0This component has below four attributes for\u00a0title and labels on button. One point to notice that on click event of close and confirm button, I have used\u00a0<strong>{!v.methodName}\u00a0<\/strong>instead of\u00a0<strong>{!c.methodName}.\u00a0<\/strong>Wanted to show alternative way to invoke method in controller using attribute of type\u00a0<strong>Aura.Action<\/strong>. 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.<\/p>\n<p style=\"text-align: justify;\">We can hide background of modal dialog using CSS\u00a0style attribute, but I preferred <strong>aria-hidden<\/strong> attribute of HTML5 on div component.\u00a0Key in this component is <a href=\"https:\/\/www.google.com\/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=1&amp;cad=rja&amp;uact=8&amp;ved=0ahUKEwig7srcp5HLAhUJxmMKHYW-BoMQFgggMAA&amp;url=https%3A%2F%2Fdeveloper.salesforce.com%2Flightning%2Fdesign-system&amp;usg=AFQjCNECRaowKq5SsYA0WRZm6ZjAQ6G4uw&amp;sig2=Nj2qHX3KpBD6d3HhBWwr_g\">Salesforce lightning design system (SLDS)<\/a> uploaded as static resource, which will be imported in later part of this tutorial. SLDS supports\u00a0<a href=\"https:\/\/www.lightningdesignsystem.com\/components\/modals\/\">utility CSS\u00a0classes for modal window<\/a>.<\/p>\n<h3>Destroy Lightning Component<\/h3>\n<p style=\"text-align: justify;\">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.\u00a0<strong>component.destroy()\u00a0<\/strong>is used to remove component from document dom.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/JitendraZaa\/c2e537f271e98c525ae21dfd7e924142.js\"><\/script><\/p>\n<p style=\"text-align: justify;\">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.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/JitendraZaa\/aa28dc34706973042c216d95f69cd557.js\"><\/script><\/p>\n<p style=\"text-align: justify;\">we have used\u00a0<strong>ltng:require<\/strong> to import Salesforce lightning design system uploaded as static resource in Salesforce. In order to dynamically create lightning component, we need to use\u00a0<strong>aura:dependency\u00a0<\/strong>informing lightning application that we may create component dynamically. div tag with\u00a0<strong>aura:id\u00a0<\/strong><em>modalDialogPlaceholder\u00a0<\/em>is used to place dynamically generated component.<\/p>\n<p style=\"text-align: justify;\">we need a small CSS class to fix button label as white color, as shown below.<\/p>\n<p><span style=\"text-decoration: underline;\">ModalDialogDemo.css<\/span><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.THIS .uiButton--default .label {\r\n    white-space: nowrap;\r\n    color: #ffffff;\r\n}\r\n<\/pre>\n<h3>Dynamically instantiate Lightning component<\/h3>\n<p>Below controller instantiates modalDialog component on click event of button.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/JitendraZaa\/73eac8760c387835de481cf142f8bc8f.js\"><\/script><\/p>\n<p>we have used\u00a0<strong>$A.createComponent\u00a0<\/strong>to instantiate dynamically.<\/p>\n<p>You can find complete source code of this blog post on my <a href=\"https:\/\/github.com\/JitendraZaa\/LightningExamples\">GitHub<\/a> account.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create advance lightning component (Modal dialog) and dynamically instantiate and destroy it<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[311],"class_list":["post-5364","post","type-post","status-publish","format-standard","hentry","category-salesforce","tag-lightning-component"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":4646,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/compliation-of-resources-to-learn-lightning-components-in-salesforce\/","url_meta":{"origin":5364,"position":0},"title":"Compilation of resources to learn Lightning Components in Salesforce","author":"Jitendra","date":"July 8, 2015","format":false,"excerpt":"An attempt to gather all resources to learn Salesforce lightning component in one blog post","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4287,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/learning-lightning-component-trailhead-way\/","url_meta":{"origin":5364,"position":1},"title":"Learning Lightning Component &#8211; Trailhead way","author":"Jitendra","date":"March 19, 2015","format":false,"excerpt":"In Previous article, I\u00a0have introduced what is Trailhead and why employer should start using it to train Salesforce developers and Admins. At the time of writing this article, there are already 16 modules to be learned from it. Recently Salesforce has added some more awesome tutorial\u00a0and \u00a0In this article, I\u2026","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Learn Lightning Component Trailhead way","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/03\/Learn-Lightning-Trailhead-way-1024x576.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/03\/Learn-Lightning-Trailhead-way-1024x576.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/03\/Learn-Lightning-Trailhead-way-1024x576.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":5737,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/use-lightning-component-in-visualforce-page\/","url_meta":{"origin":5364,"position":2},"title":"Use Lightning Component in Visualforce Page","author":"Jitendra","date":"September 22, 2016","format":false,"excerpt":"How to use Lightning Out to surface Lightning Component on Visualforce Pages","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Use Lightning Components in Visualforce Pages","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Use-Lightning-Components-in-Visualforce-Pages.jpg?fit=862%2C501&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Use-Lightning-Components-in-Visualforce-Pages.jpg?fit=862%2C501&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Use-Lightning-Components-in-Visualforce-Pages.jpg?fit=862%2C501&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Use-Lightning-Components-in-Visualforce-Pages.jpg?fit=862%2C501&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":6142,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/show-lightning-component-on-public-website-without-authentication\/","url_meta":{"origin":5364,"position":3},"title":"Show Lightning component on public website without authentication","author":"Jitendra","date":"June 5, 2017","format":false,"excerpt":"How to show Lightning component on public sites without need of user authentication","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6048,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/15-ways-to-improve-performance-of-lightning-components-in-salesforce\/","url_meta":{"origin":5364,"position":4},"title":"15 ways to improve performance of Lightning Components in Salesforce","author":"Jitendra","date":"May 12, 2018","format":false,"excerpt":"Improve Lightning Component performance using simple 15 rules like Storable Actions, avoiding server trips, Lightning Data Service, Unidirectional data binding, creating component APIs etc","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"15 ways to improve Performance of Lightning Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-12-at-1.31.43-PM.png?fit=1200%2C307&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-12-at-1.31.43-PM.png?fit=1200%2C307&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-12-at-1.31.43-PM.png?fit=1200%2C307&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-12-at-1.31.43-PM.png?fit=1200%2C307&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-12-at-1.31.43-PM.png?fit=1200%2C307&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6598,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/read-query-parameter-in-lightning-component\/","url_meta":{"origin":5364,"position":5},"title":"Read Query Parameter in Lightning Component","author":"Jitendra","date":"September 3, 2018","format":false,"excerpt":"Launch Lightning Component using formula field and also read query parameter in Salesforce Lightning Component","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Launch-Lightning-Component-using-formula-.png?fit=733%2C311&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Launch-Lightning-Component-using-formula-.png?fit=733%2C311&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Launch-Lightning-Component-using-formula-.png?fit=733%2C311&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Launch-Lightning-Component-using-formula-.png?fit=733%2C311&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=5364"}],"version-history":[{"count":7,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5364\/revisions"}],"predecessor-version":[{"id":6202,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5364\/revisions\/6202"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=5364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=5364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=5364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}