You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Re-render Visualforce page forms using apexRegion


By: Venkata

ApexRegion is a Visualforce page tag that is used to increase the visualforce page forms performance.  It rerenders only the necessary section of the page that allow us to make the form work without any issues.  The server processes only the action region area to avoid the required field issues.  The most common issue when work with form with rerendering is sections may not render properly when the section is processed.  Let’s take a form to look deep into the issues with the solution.

A form with 3 required fields First Name, Last Name and Phone.  Two dynamic fields will render based on picklist selection.  The form screenshot is as follows,

Visualforce Page Forms

And its code is as follows,

<apex:inputField value="{!actionRegionObjIns.FirstName__c}"/> 

               <apex:inputField value="{!actionRegionObjIns.LastName__c}"/> 

               <apex:inputField value="{!actionRegionObjIns.Areyouworking__c}"> 

                   <apex:actionSupport event="onchange" reRender="emailSection" status="refreshStatus"> 

                       <apex:actionStatus id="refreshStatus"> 

                       <apex:facet name="start" > 

                           <apex:image url="/img/support/servicedesk/barloading.gif" />                    

                           </apex:facet> 

                           <apex:facet name="stop" > 

                           </apex:facet> 

                       </apex:actionStatus> 

                   </apex:actionSupport> 

               </apex:inputField> 

           </apex:pageBlockSection> 

           <apex:pageBlockSection columns="1" id="emailSection"> 

               <apex:inputField value="{!actionRegionObjIns.OrganizationEmail__c}" rendered="{!actionRegionObjIns.Areyouworking__c == 'Yes'}"/> 

               <apex:inputField value="{!actionRegionObjIns.PersonalEmail__c}" rendered="{!actionRegionObjIns.Areyouworking__c == 'No'}"/> 

           </apex:pageBlockSection> 

           <apex:inputField value="{!actionRegionObjIns.Phone__c}" /> 

The Organization email address field will be rendered if the picklist value is selected as Yes, and personal email address field will be rendered if the picklist value is selected as No.

If the required field is not filled, then the rendering will not work. The above form will not show any email fields if the required fields are not filled.

In the form below, the organization email is not rendered when the picklist value is selected as Yes, because the required field phone is not filled, and there are no error messages to indicate it.

Visualforce Page Forms

To make the rendering work properly, the picklist section alone should be processed and not the entire field section.  To make it happen, apex:actionRegion helps make the necessary section getting processed while re-rendering.

Now, the picklist field is surrounded by <apex:actionRegion> and the code is as follows:

<apex:actionRegion> 

<apex:inputField value="{!actionRegionObjIns.Areyouworking__c}"> 

                   <apex:actionSupport event="onchange" reRender="emailSection" status="refreshStatus"> 

                       <apex:actionStatus id="refreshStatus"> 

                       <apex:facet name="start" > 

                           <apex:image url="/img/support/servicedesk/barloading.gif" />                    

                           </apex:facet> 

                           <apex:facet name="stop" > 

                           </apex:facet> 

                       </apex:actionStatus> 

                   </apex:actionSupport> 

               </apex:inputField> 

</apex:region>

Now the issue is solved, and the re-rendering works well without any issues.  Organization email is rendered in the page when the picklist value is selected as Yes.

Image

Personal Email is rendered in the page when the picklist value is selected as No.

Visualforce Page Forms

Conclusion: 

Apex:actionRegion helps improve page performance and errors that are not even showed on the pages, as explained above.

Reference Linkhttps://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_actionRegion.htm