Salesforce Consulting Blog

OUTLINE

While working on one of the requirements for a Health sector solutions customer based out in Atlanta, Georgia, there was a requirement to reRender Parent Visualforce page data when another Child Visualforce page in Pop-up window is getting closed.

CHALLENGE

Our main challenge was to call the JavaScript function in the Parent VF page from the child VF page in a pop-up window.

APPROACH

Here the requirement was to open a VF page with the click of a button that creates a Contact record for a particular account, and after creating the contact record modify the contact table with the newly created contact.

To implement this requirement, we used custom JavaScript function and apex:actionFunction.

REFERENCE CODE

ContactList.vfp

<apex:page Controller="ContactListController" lightningStylesheets="true">
    <apex:slds />
    
    <apex:form >
        <apex:commandbutton value="Add Contact"
                 oncomplete="window.open('/apex/AddContact?id={!accountId}', '_blank', 
                            'left=500, top=100, height=500px, width=500px');" />
        <br/><br/><br/>
        <apex:pageBlock id="ContactBlock">
            <apex:pageBlockTable value="{!contactList}" var="cnt" id="ContactList">
                <apex:column value="{!cnt.Name}"/>
                <apex:column value="{!cnt.phone}"/>
                <apex:column value="{!cnt.Email}"/>
            </apex:pageBlockTable>
        </apex:pageBlock>
        <apex:actionfunction name="reRenderContactListAF" 
                             action="{!retrieveContacts}" 
                             reRender="ContactBlock,ContactList" />
        
        <script>
        
        function reRenderContactList(){
            reRenderContactListAF();
        }
        </script>
    </apex:form>
</apex:page>

In the above code, we used custom JavaScript and actionFunction to retrieve the newly created contact and reRender the components.

AddContact.vfp

<apex:page Controller="ContactListController" lightningStylesheets="true">
    <apex:slds />
    
    <apex:form >
    	<apex:pageBlock title="Contact Form">           
        
        <apex:pageBlockSection columns="2">
            
            <apex:inputField value="{!newContact.FirstName}"/>
            <apex:inputField value="{!newContact.LastName}"/>
            <apex:inputField value="{!newContact.Email}"/>
            <apex:inputField value="{!newContact.Phone}"/>
            
        </apex:pageBlockSection>                       
        
        <apex:pageBlockButtons location="bottom">
            
            <apex:commandButton action="{!saveContact}" value="Save"
                         onclick="this.value='Saving ...';this.disabled=true"
                         oncomplete="this.value='Save';this.disabled=false;winClose()" />

        </apex:pageBlockButtons>
        
    </apex:pageBlock>
    <script>
    	function winClose(){
            window.opener.reRenderContactList();
            window.close();
    	}
    </script>
    </apex:form>
</apex:page>

In the above code, winClose() function will be executed on click of Save button. And winClose() JavaScript function will call the reRenderContactList() JavaScript function of the opener VF page.

ContactListController.apxc

public class ContactListController {   
    
    public Contact newContact{get; set;} 
    public List<Contact> contactList{get; set;}
    public string accountId{get; set;}
    
    public ContactListController(){        
        accountId = ApexPages.CurrentPage().getParameters().get('id');                    
        newContact = new Contact(AccountId=accountId);
        retrieveContacts();
    }
    
    public void retrieveContacts(){
        contactList = [select Id, Name, Email, Phone 
                       from contact where AccountId=:accountId];
    }  
    
    public void saveContact(){ 
        upsert newContact;
    }
}

HOW IT WORKS

So basically, whenever the save button gets clicked on VF page in the pop-up, it calls the JavaScript function winClose() and this function calls the JavaScript function of the Parent VF page.
JavaScript function of Parent VF page calls the apex:actionFunction which calls the controller method on its action attribute.
After completion of controller method execution, apex:actionFunction rerenders some elements in the same component.

OUTPUT