How to pass Value from Child Pop-Up Window to Parent Window in Salesforce

3 min readMar 14, 2022

A short and to the point Guide for how to pass value from child to parent window ..

Let’s Start , with the problem statement :- Suppose you have a component and on that component you have a button, whenever you hit that button a pop-up will come & do some business calculations there . You need to pass that calculated data from that pop-up to your parent window , How you can achieve it ….

OUTLINE :-

Issue with iframe in salesforce?
Window Object in JavaScript?
Passing data from child to parent ?

1. Issue with iframe in salesforce ?

According to our requirement if we need a pop-up and want to send data from parent to child ( child to parent as well ) the iframe will show you a blank page with some error in console like “Error ‘Load denied by X-Frame-Options”. so…

Here’s the workaround to iframes

If you’re encountering this problem, instead of using a web tab, a custom link can deliver the URL with the behavior set to:

Display in new window.
Display in existing window without sidebar or header.

In our case we want show a pop-up , so new window is best choice for us with pop-up size.

problem arise here → how we send data from our pop-up ( child ) window to our parent window because both are different and you will not see major workaround on this over the internet.

let’s dive into this issue and find the solution …

2. Window Object in JavaScript?

To understand the communication between window we need to understand Window object first , that will give you more clarity about data communication between two windows → Official Doc.

3. passing data from child to parent ?

In Child window we have vf page or you can have a lightning component as well that will perform business calculations in the controller and pass the value to the parent window.

<apex:page controller="controllerTest" showHeader="false" sidebar="false" >
    
    <h1>
        Hey! i'm a child window 
    </h1>    <apex:includeLightning />
    <div style="width:100%;height:100px;" id="LightningContainer" />
   
 <apex:form >        <script>
    // here we are performing basic addition on child window and passing to the parent   // you can perform api based calculation or any other as per your requirement // method will run whenever our vf page will loaded      window.onload = function()      
        {    
     
   // get the current origin 
     const Origin = window.location.href.split('/');
     let a =10;
     let b = 20;
     const Amount = a  + b;  
 // by using opener and parent property of window object we are able to pass the data to the parent window    window.opener.parent.postMessage({Amount:Amount}, Origin);

        };
        
        </script>
        
    </apex:form></apex:page>

Read About postMessage();

In Parent Window just add a event listener that will capture message event from child window and we are able to retrieve our data from event itself.

// this is an aura controller you can use lwc controller as wellvar vfHost = window.location.href.split('/');
        
window.addEventListener("message", $A.getCallback(function(event) {
            //console.log('addEventListener@@@@@@@@@@@@');
            if (event.origin !== vfHost) {
                // you can manage that which origin message your window object can listen by adding origin comparing 
                // Not the expected origin: Reject the message!
              
                return;
            }
           // retrieve data from event
            console.log(event.data.Amount);

That’s it, I hope you found the post useful !!, Please hit the clap button & give your valuable feedback.

🎉🎉 Thanks a lot for reading till end 🎉🎉

Feel free to reach out to me anytime .😊 Feedback and suggestions are Welcome .

Email: pradyumnsh007@gmail.com
LinkedIn: https://www.linkedin.com/in/pradyumn-sharma-59782a15a/
Github: https://github.com/sharmapradyumn