What is the purpose of actionFunction, actionSupport, actionPoller, actionRegion and Action Method in Visualforce Pages ?

We can create Visualforce pages invoking controller methods using an AJAX request. Sometimes we want to use AJAX in a Visualforce page so that only part of the page needs to be refreshed or perform some actions when a user clicks a button or link.

We can use below action tags which are supported by AJAX request:

<apex:actionFunction>

<apex:actionFunction /> must be called from a client side event or from a custom javascript function.

IMPORTANT!!!

Calling a Server side method: <apex:actionFunction /> behaves like any custom javascript funtion, which has the capability to communicate with Controller/Server methods (e.g. createAccount) using action attribute. Please note ‘action’ attribute is optional.

Refresh a VF Component: Unlike a custom javascipt function defined on Visualforce page, actionFunction can refresh a VF Componet on client side event (e.g. onchange) using reRender attribute.

<apex:actionFunction name=”actionFunc” action=”{!createAcccount}” reRender=”form”/>

For example we want to create a Account record and show alert message using java script:

Visualforce Code:

Option A – Calling from client side event “onClick”

<apex:page controller="ActionSampleController">
 
<apex:form id="form"> 
 Account Name: <apex:inputText value="{!accName}"/>
 <apex:actionFunction name="actionFunc" action="{!createAcccount}" reRender="form"/><br> 

 <apex:commandButton value="Create Account" onClick="actionFunc()" /><br> 
 
 </apex:form> 
</apex:page>

 

Option B – Calling from a custom javacript function “jsMethod”

<apex:page controller="ActionSampleController">
 
 function jsMethod(){
  actionFunc();
  alert('Account Created');
 }
   
<apex:form id="form"> 
Account Name: 
<apex:inputText value="{!accName}"/>
 <apex:actionFunction name="actionFunc" action="{!createAcccount}" reRender="form"/><br> 
<apex:commandButton value="Create Account" onclick="jsMethod()" /><br> 
 
 </apex:form> 
</apex:page>

 

Controller Code:

 Public class ActionSampleController {

  Public string accName{get;set;}
  
  //Using action Function
  Public void createAcccount(){
    Account acc = new Account ( Name = accName );
    insert acc;
  } 
}

In the above example we do not have an action server side method, instead we are calling jsMethod from command button onclick.

The jsMethod has an inner method actionFunc(); When this actionFunc() method is called,  apex:actionFunction is loaded and action=”{!createAcccount}” gets executed, which calls the server method createAcccount.

We can also pass parameters to the actionFunction using <apex:param /> tag.

In the example below. the value for server side variable accName can be supplied by the javascript, and it will be available in the controller method:

actionFunc('ABC Company');

<apex:actionFunction name="actionFunc" action="{!createAcccount}" reRender="form">
 <apex:param name="param1" value="{!accName}" />
</apex:actionFunction>

 

<apex:actionSupport>

<apex:actionSupport/> adds AJAX support to another visualforce component and then call the controller method.

For example we want to implement a  search functionality where we need instant results on each key press, the list of accounts with matching Name entered in the text box (on key up).

Visualforce Code:

<!--Action Support-->
 <apex:outputpanel id="panel1">

 Account Name: <apex:inputText value="{!accName}">
  <apex:actionSupport event="onkeyup" action="{!doQuery}" rerender="pgblock" />
 </apex:inputText>
 </apex:outputpanel> 
 
 <apex:pageBlock id="pgblock">
 <apex:pageBlockTable value="{!accList}" var="acc">
 <apex:column value="{!acc.Name}"/>
 </apex:pageBlockTable>
 </apex:pageBlock>
 Controller Code:
 Public class ActionSampleController {

 Public string accName{get;set;}
 Public List<Account> accList {get;set;}
  
 Public void doQuery(){
 accList = Database.Query('Select Id,Name From Account Where Name like \'%'+ accName + '%\'');
 }
}

In the above example, we are adding an ajax support to InputText which calls a function “doQuery()” on key up and return the results to the visualforce page.

<apex:actionPoller>
<apex:actionPoller /> acts as a timer in visualforce page. It is used to send an AJAX request to the server depending on the time interval (time interval has to be specified, minimum 5sec. if not specified it defaults to 60 seconds).
The controller method gets called with a frequency defined by the interval attribute.
For Example: We want to sync Account list (in every 6 seconds ) on a Visualforce page. If someone creates a new account record  it should automatically get displayed in the list on VF page.
Visualforce Code:
 <!--Action Poller -->
 <apex:pageBlock id="pgplck">
 
 <apex:actionPoller action="{!SyncAccounts}" reRender="pgplck" interval="5"/>
 
 <apex:pageBlockTable value="{!accList}" var="acc">
 <apex:column value="{!acc.Name}"/>
 </apex:pageBlockTable>
 
 </apex:pageBlock>
 Please note that the action method gets called first and then the reRender gets executed.
 Controller Code:
Public List<Account> accList {get;set;}
 
Public void SyncAccounts(){
   accList = [Select Id , Name From Account Order By CreatedDate DESC Limit 15 ];
 }
In the above example, we are displaying recent 15 accounts and the list will keep refreshing with help of actionPoller which is calling controller method “SyncAccounts()” every 5 seconds.
<apex:actionRegion>

<apex:actionRegion> tag is used for a particular field or component which we don’t want to refresh or send to server on postback call.

For Eg:  We want to save account record without filling required field Account Name. If we fill the VF page without a mandatory field (Account Name in below code) so before submitting Visual force page this field shows error line comments like “Error: You must enter a value” so we can resolve this issue by using action Region tag.

This action tag will be for particular field “Account Name” only as reference given below VF code for Action Region tag. When save button is clicked wi , the error won’t occur.

Visualforce Code:

<apex:page standardController="Account">
 
<apex:pageBlock id="pgplck">
 
<apex:actionRegion>
 <apex:inputfield value ="{!Account.Name}" required="true"/>
 <apex:inputfield value ="{!Account.Fax}"/>

</apex:actionRegion>

<apex:commandButton value="save" action="{!save}" rerender="pgplck">
 </apex:pageBlock>

</apex:page>

 Action Method
<apex:page controller=”AccountController” action=”{!LoadAccounts}”  />
We use action method to load the initial data or perform any DML operation before the Visualforce page is loaded. This method will be called before the page is rendered and allows you to optionally redirect the user to another page.
The order of execution is as below:
1) Constructor of the Controller executes
2) Action method gets executed.
3) Get;Set variables gets loaded.
Please refer to Order of Execution in a Visualforce Page:

Visualforce Code:

<apex:page controller="AccountController" action="{!LoadAccounts}"  >
 
<apex:pageBlock id="pgplck">
 
 <apex:pageBlockTable value="{!accList}" var="acc">
 <apex:column value="{!acc.Name}"/>
 </apex:pageBlockTable>
 
 </apex:pageBlock>

</apex:page>
 Controller Code:
Public class ActionSampleController {
 Public List<Account> accList {get;set;}

 Public PageReferance LoadAccounts(){
   accList = [Select Id , Name From Account Order By CreatedDate DESC Limit 15 ];
   return null;
 }
}
In the above  code action method  LoadAccounts will be executed when page loads, and refresh the accList on the Visulforce page.

Author:

Ajomon Joseph AJOMON JOSEPH
Senior Salesforce Architect
In Connect me on LinkedIn
twitter Follow me on Twitter @apexcoder
blogger Subscribe to my blog https://apexcoder.com
email Email me ajomon@apexcoder.com

One thought on “What is the purpose of actionFunction, actionSupport, actionPoller, actionRegion and Action Method in Visualforce Pages ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s