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 can be used.

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  has been implemented only rerender expected-revenue).

Before the use of

Without the use of 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

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 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.