Quantcast
Monday , September 24 2018
Home / Salesforce Lightning Tutorials / How to create a Modal box in Lightning Component?

How to create a Modal box in Lightning Component?

How to create a Modal box in Lightning Component?

MODAL Box

In this post we are going to create a on demand Modal box or Pop Over, using the standard library provided by salesforce.

Modal boxes are used to display messages which requires user’s attention and is therefore displayed in foreground interrupting user’s workflow and seeking attention.

For the Modal we use a single tag provided to us by salesforce i.e. <lightning:overlayLibrary aura:id=”overlayLib”/> , we need to make sure that we use this tag only in lightning experience, lightning Communities and salesforce app only.

This single tag is used wherever we want to display the Message or popover view. There are some more custom components required for this tag to work properly which we are going to create as shown below.

What the content of this Modal box contains, for this we create a lightning component with name modalContent and will have two attributes for now i.e. a icon and the content to display. For this example, I have written static text, as shown below.

<aura:component implements=”force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction” access=”global” >

<lightning:icon size=”medium” iconName=”action:approval” alternativeText=”Approved” />

Your application has been approved.

</aura:component>

Now in the main component we call this modalComponent and the parent component will display the modal content. Below is the code of the parent component.

<aura:component implements=”force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction” access=”global” >

<lightning:overlayLibrary aura:id=”overlayLib”/>

<lightning:button name=”modal” label=”Show Modal” onclick=”{!c.handleShowModal}”/>

</aura:component>

You see here we do not directly place the modalContent in the component but we create the modalContent on click of the button in the controller of the Parent component as shown below.

({

handleShowModal: function(component, evt, helper) {

var modalBody;

debugger;

$A.createComponent(“c:modalContent”, {},

function(content, status) {

if (status === “SUCCESS”) {

modalBody = content;

component.find(‘overlayLib’).showCustomModal({

header: “Application Confirmation”,

body: modalBody,

showCloseButton: true,

cssClass: “mymodal”,

closeCallback: function() {

alert(‘You closed the alert!’);

}

})

 

}

 

});

}

})

 

Now we can put this component anywhere in the lightning experience and it will work immediately without writing the SLDS for the Modal box.

Let’s discuss the methods provided by the salesforce in this example, first we used the method $A.createComponents(), this method is used to create the lightning component on the go i.e. dynamically. Then in this method we call our custom component modalContent as ‘c:modalContent’. Next in the callback function we find our tag using the aura:id and method component.find(). After this we call method showCustomModal() which is a callback method and this method take couple of attributes such as header, body, showclosebutton, cssClass and closeCallback. This is how it looks as shown below.

MODAL Box

Open Modal Button

MODAL Box

Modal Box

MODAL Box

Alert after closing Modal Box

As soon as we click on the lightning button, handleshowModal method is called from the client-side controller. And this how you use the lightning:overlayLibrary for Modal box.

Happy Coding.

Also, Have a look at the below resources:

  1. Best Salesforce Interview Questions book with Apex and Visualforce concept explained

Also, Have a look at the below learning resources:

  1. SOQL (Salesforce Object Query Language)

  2. Apex Trigger Best Practices and the Trigger Framework

  3. Salesforce Interview Question and Answers Part 2

  4. Salesforce Interview Questions on Test Class

  5. Salesforce-lightning-interview-questions-2018

     6. Salesforce Interview Questions Batch Clas

 

 

 

 

 

 

 

About Sumit Datta

Sumit Datta
I am a 3x Certified Salesforce developer with overall 5 years of IT experience and 3 years of Implementation experience in Salesforce. I am here to share my knowledge and help Beginners in Salesforce to understand the concepts of Apex, Visualforce, Salesforce Lightning and Salesforce Configuration.

Check Also

How to use Custom setting in Salesforce?

How to use Custom setting in Salesforce? In this post we are going to discuss …

HTTP callout to fetch query result from Salesforce

HTTP callout to fetch query result from Salesforce

HTTP callout to fetch query result from Salesforce   To make a HTTP Callout we …

HTTP callout to Delete a record in Salesforce

HTTP callout to Delete a record in Salesforce

HTTP callout to Delete a record in Salesforce   To make a HTTP Callout we …

HTTP callout to Update a record in Salesforce

HTTP callout to Update a record in Salesforce   To make a HTTP Callout we …

One comment

  1. Nice and fully info article.

    Thank You.

Leave a Reply

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