0

I am trying to display below lightning form in modal popup using overlay library. Please let me know how to do. I have overrided below form with Contact New button.

<aura:component implements="force:appHostable,lightning:actionOverride" access="global" >
<aura:attribute name="recordId" type="String">
<lightning:overlayLibrary aura:id="popuplib"/>
<div class="slds-p-bottom_large slds-p-left_large" style="width:500px">
    <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>
</div>  

Client side controller:

({
    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();
    }  
})
2

Update:-I have updated my whole answer and implemented the @Lightning problem in my org

Some key points:-

  • Header – The title of the modal
  • Body – Main content of the Modal

This component will call your component in modal box:-

overlaylibrary.cmp

<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}" />

Controller:- Here, i am creating the content Of the modal

({
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: "My Modal",
                                    body: modalBody,
                                    showCloseButton: true,
                                    cssClass: "my-modal,my-custom-class,my-other-class",
                                    closeCallback: function() {

                                    }
                                });
                            }
                        }
                       );


    }
})

Now, this is your component where have created the form. This component is called in modal as content of the modal.

loadingrecord.cmp

<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>

Controller:-

({
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();
    }  
})

Now see, what i have done. Override your component with the first Component where you have define lightning:overlayLibrary.

enter image description here

Hope it helps you.

  • That's not working. Can you add same overlay library component to the form ? – Lightning Aug 25 '18 at 14:24
  • @Lightning I have updated my answer and implemented the same which you want. Have a try and inform me. – sanket kumar Aug 26 '18 at 2:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.