0

I have a requirement where on a classic Salesforce Account page I have to show a custom button. On User click I have to show a popup where user does some interaction and from the popup itself when the user clicks on "Cancel" button, I have to close the popup and reload the Account record page. Our Salesforce org has users using both Salesforce Classic and Lightning, and I am planning to build a LWC so that I can use the same UI for both the experiences. Here is what so far I have done :

  1. Create a onClick JS button with following :

    {!REQUIRESCRIPT('/soap/ajax/26.0/connection.js')}
    {!REQUIRESCRIPT("/soap/ajax/15.0/apex.js")}
    {!REQUIRESCRIPT('/resource/WM_Resources/WM_StaticResources/jQueryForPopup/jquery-1.8.2.min.js')}
    {!REQUIRESCRIPT('/resource/WM_Resources/WM_StaticResources/jQueryForPopup/ui/jquery-ui-1.9.1.custom.min.js')}
    {!REQUIRESCRIPT('/resource/WM_Resources/WM_StaticResources/jQueryForPopup/postmessage/jquery.ba-postmessage.js')}
    {!REQUIRESCRIPT('/resource/WM_Resources/WM_StaticResources/jQueryForPopup/bbq/jquery.ba-bbq.min.js')}
    
    var j$ = jQuery.noConflict();
    
    var iframe_url = '{!URLFOR("/apex/MyVFPopupPage?")}?id={!Account.Id}';
    var j$modalDialog = j$('<div id="opppopup"></div>')
    .html('<iframe id="iframeContentId" src="' + iframe_url + '" frameborder="0"  height="100%" width="100%" marginheight="0" marginwidth="0" scrolling="no" />')
    .dialog({
    autoOpen: false,
    resizable: false,
    width: 550,
    height: 400,
    autoResize: true,
    modal: true,
    draggable: false
    });
    
    j$modalDialog.dialog('open');
    j$(".ui-dialog-titlebar").hide();
    
  2. In the VF page I am just creating the ltng component which in turn is loading my LWC component. My VF Page code :

    <apex:page showHeader="false" sidebar="false" standardController="Account">
        <apex:includeLightning /> 
    
        <div id="PopupLtng" />   
    
        <script>
            $Lightning.use("c:MyLtngApp", function() {
                $Lightning.createComponent("c:MyLtngCmp",
                { 
                    "recordId" : "{!$CurrentPage.parameters.id}"
                },
                "PopupLtng",
                function(cmp) {
                    console.log('LWC Componenet loaded in VF page');
                });
            });
        </script>
    
    </apex:page>
    
  3. My Lightning component code :

    <aura:component implements="flexipage:availableForAllPageTypes">
    
        <aura:attribute name="recordId" type="String" required="true"/>
        <c:MyLWC_Popup acctId="{!v.recordId}" />
    
    </aura:component>   
    
  4. My LWC code :

    <template>
    
        <div>
            <h1 style="text-align: center;font-size: large;">Sample Header in LWC </h1>
        </div>
    
        <div slot="footer">       
            <lightning-button label="Continue" variant="brand"></lightning-button>
            <lightning-button label="Cancel" title="Cancel" onclick={handleCancel} variant="neutral"></lightning-button>
    
       </div>
    
    </template>
    
  5. My LWC JS file code :

    import { LightningElement,wire,track,api } from 'lwc'; 
    import { NavigationMixin,CurrentPageReference } from 'lightning/navigation';
    
    export default class c:MyLWC_Popup extends NavigationMixin(LightningElement) {
    
        @api acctId;
    
        handleCancel (event){
            console.log('window '+window);
            // close out of current popup and refresh the standard Account record page.
         }
    
    }
    

I have tried using the NavigationMixin to redirect, but quite understandably it doesn't work in such scenario. I tried refreshing using below but it just redirecting the popup content which makes sense too.

    window.location.href="/"+this.acctId;  

I also tried to find the parent window using window.top.location or window.parent.location but that also return undefined which may be as expected because of the locker service in place for lightning which makes the normal Window object to a SecureWindow object. I followed below link to see if there is way I can still get the parent window but it didn't helped much : https://developer.salesforce.com/docs/component-library/tools/locker-service-viewer

Does anyone have tried to do this or any suggestion that could help. Or maybe the whole use case I am trying to do is not at all recommended/possible.

  • I ended up getting rid of the jquery popup and just went ahead with opening VF page in a new window, which actually worked for me as the "Cancel" button on the LWC component was able to close the VF page popup by window.close(). Only issue using this approach was that I was not able to force the user to remain in the popup and from user experience it was little odd to see another window opening up but given the limitation sadly they had to compromise on that. – NaveenRaw Jul 10 at 18:35

Your Answer

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

Browse other questions tagged or ask your own question.