Your own Modal Popup in Lightning Experience using lightning:overlayLibrary

Now the days are gone when you use slds to create your own custom modal. In the Salesforce Winter’18 release, 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. A modal must be acknowledged before a user regains control over the app again. A modal 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.
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:- We will 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.
20180826_215426.gif
Hope it helps You. You can comment for further modification.
Sanket Kumar
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s