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.

[Resolved:] Set default value to dependent picklist based on the value selected on controlling picklist in VF page

SCENARIO 

While working on one of the requirements for a health sector solutions customer based out Atlanta, Georgia there was a requirement to assign default value to particular dependent picklist field based on value selected on controlling picklist field in VF page.

 

CHALLENGE 

Although, We can achieve the requirement by making the field mandatory on page layout but  the client doesn't want that field to be required. So we have made custom JS to set default value to dependent picklist based on controlling picklist field value in the VF page.

RESOLUTION 

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

Below is a sample code for reference. Here, we get the value of controlling picklist field and calling apex class using <apex:actionFunction>. 

ActionFunctionVFPage.vfp

<apex:page controller="retrieveValue">
    <script>
    function changefield(regionValue){
        
        var r =document.getElementById(regionValue);
        
        if(regionValue == "India"){            
            rerendAction();
        }
    }
    </script>
    <apex:form >
        <apex:sectionHeader title="Account" subtitle="Region Picklist Value"/>
        <apex:actionFunction action="{!zoneValue}" name="rerendAction" rerender="zone"/>
        <apex:pageblock id="pageRender">
            
            <apex:pageblocksection >
                
                <apex:pageblocksectionitem >
                    
                    <apex:outputlabel value="Region"/>
                    
                    <apex:inputField value="{!acc.Region__c}" onchange="changefield(this.value)"/>
                </apex:pageblocksectionitem>
                
            </apex:pageblocksection>
            
            <apex:pageblocksection id="zonefield">
                
                <apex:pageblocksectionitem >
                    <apex:outputlabel value="Zone"/>
                    <apex:inputField value="{!acc.Zone__c}" id="zone"/>
                    
                </apex:pageblocksectionitem>
                
            </apex:pageblocksection>
        </apex:pageblock>
        
    </apex:form>
    
</apex:page>

ActionFunctionController.apxc

global class retrieveValue {
    public Account acc{get;set;}
    public retrieveValue(){
        acc=new Account();
    }
  
    public void zoneValue()
    {
         acc.Zone__c = 'West_Zone';
    }
    
}

In apex class, we are setting default values to dependent picklist and action function will reRender the dependent picklist field.

                           

Output

CONCLUSION 

By Using custom JS and <apex:actionFuntion> , we are able to set default value to dependent picklist field based on value selected on controlling picklist field in VF page. 

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