The Blog - Expert Thoughts & Opinions

Improving Page Performance & User Experience With Apex:ActionRegion

When developing Visualforce Pages/Components Salesforce does a great job of running validation on fields & notifying users of validation errors. Salesforce achieves this by running validation on all fields present on a page/component. However, sometimes this can lead to poor user experience & can also add unnecessary processing.  This is where <apex:actionRegion> can be used.

<apex:actionRegion> allows us to limit the fields the server validates when we make an AJAX request.  Limiting the number of fields the server validates can improve page performance & also increase the experience for the user.

Consider the below use case.  Our client requires a Visualforce page that allows users to edit a limited number of fields on an Opportunity object.  The client also wants to highlight to the user what the expected revenue will be upon save.  As a result, when the user changes the ‘Probability Percentage’ field we want to rerender the PageBlock to show the updated Expected Revenue amount (to further increase the performance once <apex:actionRegion> has been implemented only rerender expected-revenue).

Before the use of <apex:actionRegion>

Without the use of <apex:actionRegion> users must first validate all other fields on the page before the updated Expected Revenue can be shown;

The user enters empty values for Opportunity Name & Close Date;

The user updates by Probability Percentage field;

Note that due to the validation errors the Expected Revenue field was not updated.

After the use of <apex:actionRegion>

In this case, we are telling the server to only validate the Probability Percentage field.  

The user empties the values contained in Opportunity Name & Close Date;

The user proceeds to update the Probability Percentage field;

Note that the Expected Revenue field has been updated. It is also important to note that the Opportunity Name & Close Date fields have been repopulated. This is due to the rerendering of EditorOpportunityPageBlock. This would not be the case if the rerender attribute on <apex:actionRegion> was set to “expected-revenue”.

<apex:page standardController="Opportunity"> 
   <apex:form > 
      <apex:pageBlock title="Edit Opportunity" id="EditorOpportunityPageBlock" mode="edit"> 

         <apex:pageBlockButtons > 
           <apex:commandButton value="Save" action="{!save}"/> 
           <apex:commandButton value="Cancel" action="{!cancel}"/> 
         </apex:pageBlockButtons> 

         <apex:pageBlockSection columns="1"> 
            <apex:pageBlockSectionItem> 
               <apex:outputLabel value="Expected Revenue" for="expected-revenue"/> 
            <apex:outputText style="font-size:130%;" value="{0, Number, Currency}" id="expected-revenue"> 
               <apex:param value="{!opportunity.amount * opportunity.probability / 100}" /> 
            </apex:outputText> 
         </apex:pageBlockSectionItem> 
         <apex:inputField value="{!opportunity.name}"/> 
         <apex:pageBlockSectionItem> 
            <apex:outputLabel value="Probability Percentage" for="probability"/> 

            <apex:actionRegion> 
               <apex:inputField value="{!opportunity.probability}" id="probability"> 
               <apex:actionSupport event="onchange" rerender="EditorOpportunityPageBlock" status="status"/> 
               </apex:inputField> 
            </apex:actionRegion> 
         </apex:pageBlockSectionItem> 
         <apex:inputfield value="{!opportunity.closedate}"/> 
         </apex:pageBlockSection> 

      </apex:pageBlock> 
   </apex:form> 
</apex:page>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Today's post is by one of our Graduate Software Developers, Paraic Cooney.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

As always, thanks for reading, if you enjoyed this post please feel free to share it and tag us @Pexlify

If you’re interested in Salesforce Solutions, contact us today to set up a hassle-free consultation.