Your own Modal Popup in Lightning Experience using lightning:overlayLibrary

                                  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 modal called loadingrecord.cmp.This Component consist 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.

Hope it helps You. You can comment for further modification.

Sanket kumar