Dialog boxes in Lightning Components

Adding a dialog to an application is usually a fair chunk of time and energy.  The handling of information from the parent window to the dialog box takes a bit of work and often the parent and child are in different files.  However in a Salesforce lightning world dialog boxes are so easy to do.

The main point is the dialog box is built into the lightning component and simple a flag is set to decide if the dialog box is open or closed.  This also means the handling of data across the dialog box is very easy to do – it is part of the same control anyway.

This is the result we will build:

Start a new Lightning component and let’s build this up.

The component code for a dialog is:

<div class="dialog" style="height: 640px;">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
 <div class="slds-modal__container">
 <header class="slds-modal__header">
 <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
 <span class="slds-assistive-text">Close</span>
 </button>
 <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Title</h2>
 </header>
 <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
 <p>text goes here</p> 
 </div>
 <footer class="slds-modal__footer">
 <button class="slds-button slds-button_neutral" onclick="{!c.closeModel}">Close</button>
 </footer>
 </div>
 </section>
 <div class="slds-backdrop slds-backdrop_open"></div>
 </div>

It is the class ‘slds-modal’ that provides the power – see the SLDS design guideline. The slds-modal__container and slds-modal__header and slds-modal__content do all the heavy lifting for you and all you have to do is populate with content.

All that is needed is an attribute to determine if the dialog box is open/show or closed/not shown.

Add an attribute

<aura:attribute name="showModal" type="boolean" default="false"/>

now all is needed is to provide a button to open the modal:

<lightning:card title="Title" iconName="custom:custom24" footer="">
 <aura:set attribute="actions">
 <lightning:button onclick="{!c.openModal}" label="View Details"/>
 </aura:set>
 </lightning:card>

We have a very simple openModal

openModal: function(component, event, helper) {
component.set("v.showModal", true);
},

All this does is to set the showModal attribute as true (later when we close the dialog this will be set back to false).

Simply wrapping the dialog code above in an <aura:if

<aura:if isTrue="{!v.showModal}">
</aura:if>

Will allow the dialog to be opened. Now we add an onclick to the Close button:

<button class="slds-button slds-button_neutral" onclick="{!c.closeModal}">Close</button>

and an associated controller function

closeModal: function(component, event, helper) {
component.set("v.showModal", false);
},

In the end the code is a simple as follows:

<aura:component implements="flexipage:availableForRecordHome" access="global" >

 <aura:attribute name="showModal" type="boolean" default="false"/>

 <lightning:card title="Title" iconName="custom:custom24" footer="">
  <aura:set attribute="actions">
   <lightning:button onclick="{!c.openModal}" label="View Details"/>
  </aura:set>
 </lightning:card>

 <aura:if isTrue="{!v.showModal}">
  <div class="dialog" style="height: 640px;">
   <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
     <div class="slds-modal__container">
      <header class="slds-modal__header">
       <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
        <span class="slds-assistive-text">Close</span>
       </button>
       <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Title</h2>
      </header>
      <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
       <p>text goes here</p>
      </div>
      <footer class="slds-modal__footer">
       <button class="slds-button slds-button_neutral" onclick="{!c.closeModel}">Close</button>
      </footer>
     </div>
    </section>
   <div class="slds-backdrop slds-backdrop_open"></div>
  </div>
 </aura:if>

</aura:component>

Our controller

({
openModal: function(component, event, helper) {
component.set("v.showModal", true);
},

closeModal: function(component, event, helper) {
component.set("v.showModal", false);
},
})