+ Start a Discussion
Renu anamalla 17Renu anamalla 17 

when do we go for action function tell me 2 scenarios

when do we go for action function tell me 2 scenarios
atul patil 7atul patil 7
Hello Renu, 
This is one article on action function i hope you like this
-ActionFunction is used to execute a method in your Apex Class from within your Visualforce Page asynchronously via AJAX requests.
- What does asynchronous AJAX requests mean ? 
 This means that Visualforce Pages(otherwise HTML pages when rendered at the Client Side via the Browser) can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. So when we execute an Apex Method via the ActionFunction, the page is not disturbed and the request to the servers(Apex Code compiles and runs on the Salesforce servers while the Visualforce pages which are nothing but HTML pages are rendered by browser at the Client Side) are sent and received in the background. The other way of doing such AJAX requesst to Apex Methods include the Visualforce Remoting. The only difference between the same is that when using the Visualforce Remoting you will have to write some extra lines of JavaScript which is not needed in case of the ActionFunction.

Now, a very simple and a common example of ActionFunction is mimicking the Field Dependency feature on Visualforce Pages. Say for example you had two Picklists – Select the Object and Select the Field. When a user selects an Object, the next Picklist automatically gets populated with the Fields that belong to the object.

Well, I will not be using this one since that might get a bit complicated with couple of Describe calls but let us consider an another one. For example say you had two Picklists like this- Select the Alphabet(from which you can select from choices like –A, B, C and D) and then a Select the Fruit(from which you can select the fruit of your choice). So when a User selects A, all the Fruits starting with A gets populated in the 2nd picklist and when the User selects B, all the Fruits starting with B gets populated and so on.

So our Apex Class would be this:

public class Controller{
    public List<SelectOption> Alphabets {get; set;}
    public List<SelectOption> Fruits {get; set;}
    public String SelectedAlphabet {get; set;}
    /*A Constructor which will build the intial list of Alphabets*/
    public Controller(){
        Alphabets = new List<SelectOption>();
        Fruits    = new List<SelectOption>();
         /*This is to add the NONE option for our Picklists*/
        SelectOption option = new SelectOption('--None--', '--None--');
        option = new SelectOption('A', 'A');
        option = new SelectOption('B', 'B');
    /*This Method that will actually build the Fruits list for us. The ActionFunction will be calling this function as and when a User changes an Alphabet from the 1st List.*/
    public void createFruitList(){
        /*Always clear the List when begin so that previous values will be removed.*/
        Fruits.add(new SelectOption('--None--', 'None'));
        if(SelectedAlphabet == 'A'){
            Fruits.add(new SelectOption('Apple','Apple'));
            Fruits.add(new SelectOption('Apricot','Apricot'));
        else if(SelectedAlphabet == 'B'){
            Fruits.add(new SelectOption('Banana','Banana'));
            Fruits.add(new SelectOption('Blackberry','Blackberry'));

Now the Visualforce Markup-
<apex:page controller="Controller">
        <apex:actionFunction action="{!createFruitList}" name="generateFruits" reRender="selFruits" />
        Select the Alphabet:
        <apex:selectList id="selAlphabets" value="{!SelectedAlphabet}" size="1" onchange="generateFruits()">
            <apex:selectOptions value="{!Alphabets}">
        Select the Fruit:
        <apex:selectList id="selFruits" size="1">
            <apex:selectOptions value="{!Fruits}">

Now let me explain the Visualforce. The Apex SelectList together with Apex SelectOptions are used for Picklists on Visualforce Pages. The value attribute in the Apex SelectList will carry or hold the currently selected value in the Picklist while the value attribute in the Apex Select Options will carry or hold the various Options(A, B or Apple, Banana etc). The size="1" makes sure that it is rendered as a Picklist and not a Multi-Select Picklist.

Now let us do a Post Mortem on our little ActionFunction-

<apex:actionFunction action="{!createFruitList}" name="generateFruits" reRender="selFruits" />

The action is obviously the Server Side Apex Method that has to be executed. In our case it is the createFruitList. The name tag is nothing but a name by which we can refer this actionFunction from other places(in JavaScript) on the Visualforce page. The reRender will be assigned with the Id of that tag on the Visualforce page that has to be refreshed when the function has been finished executing. In our case, it will be nothing but, our second picklist. This is because, the createFruitList will generate the new list of fruits based on the selection from the 1st picklist and the new list will be displayed only when we refresh that small portion since you can notice that the 2nd picklist's Apex SelectOptions takes the {! Fruits } variable in our Apex Class as the source of data. And this is AJAX - we send a request to the Server and refreshed a small portion of the page without disturbing anything else on the page.

Now when do we call this ActionFunction ? Yes, it's obvious-when 1st picklist options are changed. And hence we set the onchange parameter in the first picklist as

<apex:selectList id="selAlphabets" value="{!SelectedAlphabet}" size="1" onchange="generateFruits()">

You can notice that we have called the Apex ActionFunction by its name - generateFruits. Well, that's the end of the story! The moral of the story - 'ActionFunctions are really awesome!'

You can copy the Source Code to your Dev org and experiment with it.

atul patil
salesforce developer
Mustafa JhabuawalaMustafa Jhabuawala

In short - 

If on click of a button - you want to perform some operations on client side first and once it is done you want to call an apex method in that case you can go with action function.

Behind the scenes action function defines a new JavaScript function which can then be called from within a block of JavaScript code.

So its simple if you directly want to call an apex method then you can use command button or action support and if you want to perform some operation before that then use action function.