Modal Popup in Salesforce Lightning? Yes, Salesforce has provided us with a component called lightning:overlayLibrary, which we can use to easily create Modals. This Component enables us to displays messages via modals and popovers. This component requires API version 41.0 and later.
A modal blocks everything else on the page until it’s dismissed and acknowledged before a user regains control over the app again. It is triggered by user interaction, which can be a click of a button or link. The modal header, body, and footer are customizable. Pressing the Escape key or clicking the close button closes the modal.
Here we will create a Custom component which can override a standard new button on the Contact object and open a form to create a record using Lightning Data Services.
Steps to Modal Popup
Step 1:- We will create a component called overlaylibrary.cmp which consist of lightning:overlayLibrary tag and an aura:handler which will create the modal. You can Call components which you want to show in this modal.
<aura:component implements="force:appHostable,
flexipage:availableForAllPageTypes,
flexipage:availableForRecordHome,
force:hasRecordId,lightning:actionOverride,
forceCommunity:availableForAllPageTypes,
force:lightningQuickAction" access="global" >
<lightning:overlayLibrary aura:id="overlayLib"/>
<aura:handler name='init' action="{!c.init}" value="{!this}" />
</aura:component>Step 2:- Now, we will write client-side controller. This client-side controller displays the modal. To create and display a modal, pass in the modal attributes using component.find(‘overlayLib’).showCustomModal(), where overlayLib matches the aura:id on the lightning:overlayLibrary instance:-
({
init : function(component, event, helper) {
var modalBody;
var modalFooter;
$A.createComponents([
[“c:loadingrecord”,{}]
],
function(components, status){
if (status === “SUCCESS”) {
modalBody = components[0];
component.find(‘overlayLib’).showCustomModal({
header: “Paginaniton In Lightning”,
body: modalBody,
footer: modalFooter,
showCloseButton: true,
cssClass: “my-modal,my-custom-class,my-other-class”,
closeCallback: function() {
}
});
}
});
}
})You can pass in your own footer via the footer attribute. This example creates a custom body and footer using $A.createComponents().
Step 3:- Create another component which is being called in a modal called loadingrecord.cmp. This Component consists of form for creating quick contact record using lightning:recordEditForm.
<aura:component implements=”flexipage:availableForRecordHome,force:hasRecordId,
force:lightningQuickAction”
access=”global” >
<aura:attribute name=”recordId” type=”String”/>
<lightning:recordEditForm objectApiName=”Contact” onsuccess=”{!c.handleSuccess}”>
<lightning:messages />
<lightning:inputField fieldName=”FirstName” />
<lightning:inputField fieldName=”LastName” />
<lightning:inputField fieldName=”Birthdate” />
<lightning:inputField fieldName=”Phone” />
<lightning:button aura:id=”submit” type=”submit” label=”Save record” class=”slds-m-top_medium” />
</lightning:recordEditForm>
</aura:component>Step 4:- Now we will controller of loadingrecord.cmp.This will navigate to the newly created record detail page using force:navigateToSObject.
({
handleSuccess : function(component, event, helper) {
var contactRec = event.getParams().response;
var navEvt = $A.get(“e.force:navigateToSObject”);
navEvt.setParams({
“recordId”: contactRec.id,
“slideDevName”: “related”
});
navEvt.fire();
}
})Step 5:- Override the new button of the Contact object with overlaylibrary.cmp and have a look at what we have done.
One comment