Action Region in Visualforce

ActionRegion tag is used in Visualforce page that decides and separates which components should be processed by the force.com server when an AJAX request is generated. 
The Components which are placed inside the actionRegion tag are the only components that are processed by the server at the time of request thereby increasing the performance of the page.

actionregion is not used widely by the developers as there are not much use cases for it, but it is one of the most important tag in visualforce which helps in increasing page performance. So we should try to make maximum use of actionregion in visualforce page.

<apex:actionRegion> component only defines which components the server processes during a request—it doesn’t define what areas of the page are re-rendered when the request completes, therefore, we still need to use reRender attribute on action component to decide area which should be rerendered AJAX request completes.

Enough talk!! right? So let’s start implementing it.

I am going to explain the <apex:actionRegion> with the help of two examples. The first example will not use the actionRegion tag whereas the second example will use the actionRegion to process the request. In both the example we will try to show a phone field when we will set Account Source as “Phone
Inquiry”.


Example 1 Without <apex:actionRegion>

Visualforce Page:

<apex:page controller="withoutActionregionController" tabStyle="Account">
    <apex:form id="myform">
        <apex:pageBlock id="pageId">
            <apex:pageBlockSection title="If you will select Account Source as 'Phone Inquiry' then phone textbox will appear" columns="1" id="out" collapsible="false">
                
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="{!$ObjectType.Account.fields.AccountSource.label}" for="AccountSource"/>
                    
                    <apex:inputField value="{!acc.AccountSource}" id="AccountSource" >
                        <apex:actionSupport action="{!AccountSourceChanged}" reRender="pageId" event="onchange"/>
                    </apex:inputField>
                </apex:pageBlockSectionItem>
                
                <apex:inputField value="{!acc.Phone}" rendered="{!showPhone}"/>
            </apex:pageBlockSection>  
            
            <apex:pageBlockSection title="Account Details" columns="2" collapsible="false">
                <apex:inputField value="{!acc.name}"/>
                <apex:inputField value="{!acc.Rating}"/>
                <apex:inputField value="{!acc.AccountNumber}" required="true"/>  
                
            </apex:pageBlockSection>  
        </apex:pageBlock>
    </apex:form>
</apex:page>

Apex Code:

public class withoutActionregionController {
    public Account acc{get;set;}
    public Boolean showPhone{get;set;}
     
    public withoutActionregionController(){
        acc = new Account();
        showPhone = false;
    }
     
    public PageReference AccountSourceChanged(){
        if(acc.AccountSource == 'Phone Inquiry'){
            showPhone = true;
        }
        else{
            showPhone = false;
        }
        return null;
    }
}

Output:

In example 1 above, we are trying to show phone textbox when we are selecting Account source as ‘Phone Inquiry’ and then we are getting an error as Account name and Account Number are required. So validation fails.

Example 2 With <apex:actionRegion>

Visualforce Page:

<apex:page controller="withActionregionController" tabStyle="Account">
    <apex:form id="myform">
        <apex:pageBlock id="pageId">
            <apex:pageBlockSection title="If you will select Account Source as 'Phone Inquiry' then phone textbox will appear" columns="1" id="out" collapsible="false">
                
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="{!$ObjectType.Account.fields.AccountSource.label}" for="AccountSource"/>
                    <apex:actionRegion>
                        <apex:inputField value="{!acc.AccountSource}" id="AccountSource" >
                            <apex:actionSupport action="{!AccountSourceChanged}" reRender="pageId" event="onchange"/>
                        </apex:inputField>
                    </apex:actionRegion>
                </apex:pageBlockSectionItem>
                
                <apex:inputField value="{!acc.Phone}" rendered="{!showPhone}"/>
            </apex:pageBlockSection>  
            
            <apex:pageBlockSection title="Account Details" columns="2" collapsible="false">
                <apex:inputField value="{!acc.name}"/>
                <apex:inputField value="{!acc.Rating}"/>
                <apex:inputField value="{!acc.AccountNumber}" required="true"/>  
                
            </apex:pageBlockSection>  
        </apex:pageBlock>
    </apex:form>
</apex:page>

Apex Code:

public class withActionregionController {
    public Account acc{get;set;}
    public Boolean showPhone{get;set;}
     
    public withoutActionregionController(){
        acc = new Account();
        showPhone = false;
    }
     
    public PageReference AccountSourceChanged(){
        if(acc.AccountSource == 'Phone Inquiry'){
            showPhone = true;
        }
        else{
            showPhone = false;
        }
        return null;
    }
}

Output:

Now in second example we will be using the same code,but with the actionRegion tag. In this example no validation error will be occured because only the code inside the actionRegion tag has been submitted to the server when we changed the Account Source and as a result it will work as expected.

Leave a Reply

Your email address will not be published. Required fields are marked *