0

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

3
+50

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.

| improve this answer | |
  • Can you please help me with the code that gets account id and show account details on the popup when Account detail page is opened. I'm new to lightning and I'm finding it difficult to get the right process to get this done – Skumar Feb 19 at 6:15
  • 1
    Please check my updated answer. – Saroj Bera Feb 19 at 6:24
  • Thanks a ton Saroj :) Now when the pop up is opened, I can see the edit form. I just need the values to be displayed instead of entering the new values. Can you please suggest on how to do so – Skumar Feb 19 at 6:35
  • 2
    If you want to show the values only you can use lightning:recordViewForm instead of lightning:recordEditForm. Please follow the Salesforce documentation for lightning:recordViewForm – Saroj Bera Feb 19 at 8:00
  • @Skumar If this answer has solved your question you can accept the answer. That will help others who are looking at it to find a solution. – Saroj Bera Feb 19 at 9:13

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.