How do I refresh Parent Window from Popup Window in Service Cloud Console

Question

On my Case Detail page, I have a requirement of showing a Visualforce Page in a popup window when a custom button is clicked.

After the user clicks the button and a opens, the user can enter details. And after hitting save or closing the window, I want to refresh the Case Detail page.

How can I achieve this? In cloud console view?

Answer 1

You can do this if you have a handle on the JavaScript code that executes in the opening window. For example, you can instruct the parent window to refresh when it is refocussed. Then when you hit Save (and close) the child window, that will cause the parent window to refocus, and run your refresh. Eg:

Bind this onfocus handler on the parent window to make the popup modal and refresh the page:

/**
 * When user closes the popup window, we reload this page. Any
 * changes made in the popup will be reflected for the user to see.
 * The parent window is refocussed by closing the popup window.
 */
window.onfocus = function() {
    if (!window.mypopup.closed) {
        window.mypopup.close();
        window.location.reload();
    }
};

Open your child popup window using this mechanism: (eg you can put this in Custom Button code)

/**
 * Opens a named popup window. We
 * refresh the page when it's closed.
 */
window.mypopup = window.open(
    '/apex/PopupPage',
    'mypopup',
    'width=640&height=480'
);

You might need to experiment to see if this works from inside Custom Button code, or needs its own Visualforce Page. But you won't have any cross domain issues as the popup doesn't communicate :-)

Answer 2

Because of the service cloud console context it is a best practice to open external pages in the console too, for example in a new sub tab. So you will get no problem concerning cross domain error and hold all important data on the same page, that is, in a console. From the visualforce page you can then control the refresh/close process using a service cloud console integration Toolkit (after saving function close the current tab and refresh an opener case tab).

The first step is to open a visualforce page (your current popup) in a sub tab. For that you need to modify your custom button on the Case object that will do this job.

Step 1: Custom button on the Case - Execute Javascript

Put the following javascript code on the custom button:

// Connecting to the Toolkit
{!REQUIRESCRIPT("/support/console/30.0/integration.js")}

// While opening a new tab witha visualforce page we need to provide
// a full page URL like https://c.na9.visual.force.com/apex/YourPagename
var sfdcUrlName = window.location.protocol + '//' + window.location.host;

// In this variable we will save a parent tab ID
// It is needed for the subTab opener function.
// A new sub tab will be opened within this parent tab.
var myParentTabId = '';

// Here evaluating a parent tab ID
var readParentId = function(result){
    myParentTabId = result.id;
};
sforce.console.getEnclosingPrimaryTabId(readParentId);

// Now open our visualforce page in a new subtab
// We pass a subtab ID as a URL parameter that could be read
// on the visualforce page
var openSubtab = function(result){            
    sforce.console.openSubtab(myParentTabId, sfdcUrlName + '/apex/YourVisualforcePageName?tid=' + result.id, true, 'My popup title', null);    
};
sforce.console.getEnclosingTabId(openSubtab);

Step 2: Visualforce Page

Now we will create a simple visualforce page:

<apex:page showHeader="false" sidebar="false">

    <!-- Service cloud console integration toolkit script -->
    <apex:includeScript value="/support/console/30.0/integration.js"/>

    <script type="text/javascript">

        // This function will close the current tab with this page
        // and after that refresh the opener case tab
        function closeCurrentTab() {
            sforce.console.getEnclosingTabId(closeThisTabAndRefreshParent);
        }

        var closeThisTabAndRefreshParent = function closeThisTabAndRefreshParent(result) {

            // Refreshing a subtab by ID.
            // An opener tab id was passed as a URL param.
            sforce.console.refreshSubtabById('{!$CurrentPage.parameters.tid}', true);

            // Closing current tab
            sforce.console.closeTab(result.id);
        };

    </script>

    <apex:form>
        Some form elements are here...

        <!-- This button executes some apex funxtion -->
             that is not presented in my code and then 
             executes a javascript function that will close
             current tab and refresh an opener tab -->

        <apex:commandButton value="Save and close" 
                            oncomplete="closeCurrentTab(); return false;"/>
    </apex:form>    

</apex:page>