[SalesForce] use Modal window with lightning:recordForm

Okay, I am using lightning:recordForm to create a standard contact form in which I am redirecting on cancel and on success using lightning:navigation but since the layout in recordForm is not that good and since there is no such layout like standard. Now, I am thinking to use modal window but I guess I cannot use lightning:recordForm . Am I wrong ?
Can someone please correct me ?

<aura:component >
    <aura:attribute name="accountId" type="String" />
    <aura:attribute name="recordId"  type="String" />   
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <lightning:overlayLibrary aura:id="popuplib"/>
    <aura:attribute name="url" type="String"/>
    <lightning:navigation aura:id="navService"/>
    <aura:attribute name="pageReference" type="Object"/>
    <aura:attribute name="fields" type="String[]" default="['Account__c']" />
    <lightning:notificationsLibrary aura:id="notifLib"/>

     <lightning:recordForm 
         objectApiName="Lead"
         recordTypeId = 'xxxxxxxxxxx'
         recordId="{!v.recordId}"
         fields="{!v.fields}"
         layoutType="Full"
         mode="edit"
         onsuccess="{!c.handleSuccess}"
         oncancel="{!c.onCancel}"/> 
</aura:component>

Best Answer

You can use the lightning:overlayLibrary to create the modal and dynamically call your custom component.

Examples taken directly from the documentation and will work if your aura component is called modalContent:

MyComponent.cmp

<aura:component>
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <lightning:button name="modal" label="Show Modal" onclick="{!c.handleShowModal}"/>
</aura:component>

MyComponentController.js

({
    handleShowModal: function(component, evt, helper) {
        var modalBody;
        $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!');
                       }
                   })
               }                               
           });
    }
})
Related Topic