[SalesForce] Modal Pop up on standard Lightning record detail page

I have a requirement that when a standard account record is opened, a pop up should be displayed with few fields of account like phone, name, type with ok button. When ok button is clicked, the pop up should be closed and record detail page should be displayed.

Is there any way to do it. I went through lot of answers but I found custom applications displaying pop up rather than on standard detail page. Being new to lightning development, I could not able to figure it out on how to do so.

Can anyone please help me with the requirement.

Thank you in advance

SK

Best Answer

It is not possible in standard configuration. As per your requirement you have to override the standard View functionality.

I am explaining a workaround where you will achieve close to the requirement. What you have to do, create a Lightning Component place it in the Account detail page and show the Modal Popup in the init method using lightning:overlayLibrary. This will open the Modal popup as soon as a standard account record is opened.

You may have to refresh the detail page from the Save action of the modal by using e.force:refreshView. You can get more detail from one of my previous answer.

Your code will look like this.

ModalAccountComponent

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="strRecId" type="String" />
    <lightning:overlayLibrary aura:id="overlayLibDemo"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
</aura:component>

ModalAccountComponentController

({
    doInit: function(component) {
        var strAccId = component.get("v.recordId");
        console.log('Account Id ====>'+strAccId);
        $A.createComponent("c:AccountEditComponent", 
                           {strRecordId : strAccId},
                           function(result, status) {
                               if (status === "SUCCESS") {
                                   component.find('overlayLibDemo').showCustomModal({
                                       header: "Account Edit Form",
                                       body: result, 
                                       showCloseButton: true,
                                       cssClass: "mymodal", 
                                   })
                               }                               
                           });
    }
})

AccountEditComponent

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="strRecordId" type="String" />
    <lightning:overlayLibrary aura:id="overlayLibDemo1"/>
    <lightning:notificationsLibrary aura:id="notifLib"/>
    <div class="slds-theme_default">
        <lightning:recordEditForm aura:id="editform"
                                  onsubmit="{!c.handleSubmit}"
                                  onsuccess="{!c.handleSuccess}"
                                  recordId="{!v.strRecordId}"
                                  objectApiName="Account">
            <lightning:messages />

            <lightning:inputField fieldName="Name" aura:id="accName" />
            <lightning:inputField fieldName="Industry" />
            <lightning:inputField fieldName="Phone" />          
            <lightning:inputField fieldName="Type" />
            <div class="slds-m-top_medium">
                <lightning:button variant="brand" type="submit" name="save" label="Save" />
            </div>
        </lightning:recordEditForm>
    </div>
</aura:component>

AccountEditComponentController

({
    handleSubmit : function(component, event, helper) {
        component.find('editform').submit();
    },

    handleSuccess : function(component, event, helper) {
        var strAccName = component.find("accName").get("v.value");
        component.find('notifLib').showToast({
            "variant": "success",
            "title": strAccName,
            "message": "Account Updated Successfully!!"
        });
        component.find("overlayLibDemo1").notifyClose();
    },
})

I have taken the code for AccountEditComponent from this blog post by Salesforce Code Crack.

Related Topic