action function in salesforce

Article 1** Article 2** Article 3** Article 4** Article 5** Article 6** Article 7** Article 8** Article 9 ** Article 10

Its easy to call a controller method for most of the attributes using action="{!Yourmethode_Name}", but what if you were to call the controller method from java script?

One way to do this is by using Action Function. Expertise will definitely be able to use this in complex scenarios. This post is for those who haven't had hands on action function before and want to know how to use it.


Lets take a scenario and work on it:


You have a checkbox and you are calling javascript function on click of this checkbox. And now once you are in js you wish to modify some variable or do something in your controller class. 

Say you want to put some value for a variable in controller and then display it on your page. this will require calling your class method from js.


Lets understand this by example:

 -- Visualforce page--

<apex:page standardcontroller="Account" extensions="MyController" tabStyle="Account">
    <apex:form >
       <apex:actionFunction name="actionFunName" action="{!ActionFunMethode}" reRender="outputtxtId"/>
       <apex:pageBlock > 
            <apex:outputLabel for="inptCheckBox" value="Check this box to call Controller method from js using ActionFunction" style="color:green;"></apex:outputLabel> 
            <apex:inputcheckbox onclick="javaScrpt()" id="inptCheckBox"/>
       </apex:pageBlock> 
      
      <apex:outputText value="{!MyString_From_Methode}" id="outputtxtId"></apex:outputText> 
    </apex:form> 
    
    <script>
      function javaScrpt(){
       actionFunName(); 
      }
    </script>
     
</apex:page>

 --Controller--

Public class MyController {
Public string MyString_From_Methode{get;set;}

    public MyController(ApexPages.StandardController controller) {

    }

    public string ActionFunMethode(){
     MyString_From_Methode = 'Method called from js using Action function';
     return null;
    }
}
Lets debug this for understanding:

 <apex:actionFunction name="actionFunName" action="{!ActionFunMethode}" reRender="outputtxtId"/> 

In the above statement "actionFunName" is the name given to this action function statement and you should use this name while calling AF in js as you can see in js function below:

function javaScrpt(){
     actionFunName(); //Line 2
}


Line 2 call our action function statement it does not call controller method from here, your controller method will be called from AF statement using attribute action="{!ActionFunMethode}"
ActionFunMethode is the method in your controller class.

Public string ActionFunMethode(){
     MyString_From_Methode = 'Method called from js using Action function';
     return null;
}

This method puts a value for a variable "MyString_From_Methode" which is then displayed in vf page. 

Action function reRenders the outputtext attribute in vf page which displays this variable (that is page is refreshed and now the new value set in method is displayed).
 
Article 1** Article 2** Article 3** Article 4** Article 5** Article 6** Article 7** Article 8** Article 9 ** Article 10

Click For : Salesforce Interview Question And Answers

16 comments:

  1. Awesome explanation..Thank you..but i have one question..if we disable check box the output text will be remove..how can we achieve this??

    ReplyDelete
  2. Yoganand, Excellent Superb Explanation yar , I would really appreciate the way u r put it each line. Kudos to u dude. :)

    ReplyDelete
  3. Can you please explain what is the difference between javascript remoting and action function with scenario.. ??

    ReplyDelete
  4. very nice explanation man

    ReplyDelete
  5. Thanks For explanation

    ReplyDelete
  6. nice to see this example...to understand the functionality of action function

    ReplyDelete
  7. Awsome example!!
    I tried it

    ReplyDelete
  8. Very nice explanation. Exactly same kind of explanation looking for.

    ReplyDelete