reRender Parent VF page data when Child VF page in pop-up window is getting closed.

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

CONCLUSION 

By using <apex:actionFunction> and JavaScript function effectively, we are able to reRender the contact table with the newly created contact. 

If you have any questions you can reach out our Salesforce Consulting team here.

How to use apex:actionFunction in a Salesforce Visualforce Page?

SCENARIO

While working on one of the requirements for a banking sector project for a customer based in San Diego, California there was a requirement to update selected record in Visual Force Page.

 

Clicking on Update button, we need to pass the updated values from inputs of Visualforce page to apex class so that is that DML operations can be performed.

 

SOLUTION

To fulfil the requirement, we have used <apex:actionFuntion> tag of Visualforce page. By using this tag, we can call apex controller method from java script code using an AJAX request.  

To set field values directly from VF page, we have used <apex:param> with <apex:actionFunction> and added this keyword in the assignedTo attribute of <apex:param>. 

 

Below is a sample code for reference. Here we are updating Account Name using <apex:actionFunction>.

1. On click of Update button, JS function will get the updated value of Account Name and pass it to the param of actionFunction. 
2. The actionFunction first sets the value of the variable and then invokes the method of apex class to update the account record. 

ActionFunction.vfp 

<apex:page controller="actionFunctionExampleController" sidebar="false" showHeader="false">
    <div style="margin : 20px;">
        
        <apex:form id="accountForm">
            <apex:actionFunction action="{!updateAccount}" name="updateAccountAF" reRender="dataTable">
                <apex:param name="accountName" assignTo="{!this.account.Name}" value="" />
            </apex:actionFunction>
            
            <apex:outputpanel >
                <label>Name :</label>
                <apex:inputField id="accountName" value="{!account.Name}"/>
                <apex:commandButton value="Update" onclick="GetAccountName(); return false;" />
            </apex:outputpanel>
        </apex:form>
        
        <div style="margin:20px 0px;">
            <apex:dataTable value="{!account}" var="acc" id="dataTable" border="1" width="50%">
                <apex:column value="{!acc.Name}" headerValue="Name"/>
                <apex:column value="{!acc.Type}" headerValue="Type"/>
                <apex:column value="{!acc.AccountNumber}" headerValue="Account Number"/>            
                <apex:column value="{!acc.Industry}" headerValue="Industry"/>
            </apex:dataTable>
        </div>
    </div>
    
    <script type="text/javascript">
        function GetAccountName(){
            var accountName = document.getElementById("{!$Component.accountForm.accountName}").value;        
            updateAccountAF(accountName);
        }
    </script>
    
</apex:page>

ActionFunctionController.apxc 

public class actionFunctionExampleController {
    
    public Account account {get;set;}
        
    public actionFunctionExampleController(){
        Id accountId  = ApexPages.CurrentPage().getparameters().get('id');
        account = [select id, Name, AccountNumber, Type, Industry from Account where id =: accountId ];
    }
    
    public void updateAccount(){
        update account;
    }
}

NOTE: 

Also, we can get the values of <apex:param> by using the below code in apex class. For that, we don't need to write assignedTo attribute in VF page. 

Apexpages.currentPage().getParameters.get(‘paramName’);

FACTS TO CONSIDER:

• An <apex:actionFunction> component must be a child of an <apex:form> component.
• Since the caller and <apex:actionFunction> are bound based on parameter order, make sure the caller's argument list matches the order of <apex:param>. 
• For API version 23 or later, you cannot use <apex:actionFunction> inside an iteration component like, <apex:pageBlockTable>, <apex:repeat>, and so on. 

 

OUTPUT

If you have any questions you can reach out our Salesforce Consulting team here.