Visualforce Action Function Example.

Hi, 
In this post i am giving an example of simple usage of <apex:actionFunction> tag in visualforce page to call a apex method from Java script.

Controller Class:

public class ActionFunctionCLS {

  public Account actObj{get;set;}

   PageReference prf= null;

    public ActionFunctionCLS(){

      actObj = new Account();

    }

 

   

    public pagereference Saverec(){

   if(actobj.Name !=''){

    insert actobj;

   

   }

   else{

     ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.ERROR,'Error: Please Enter Name.');

     ApexPages.addMessage(myMsg);

   

   }

   if(actobj.id !=null){

  

      // Send the user to the detail page for the new account.

      prf = new PageReference('/'+actobj.id);

      prf.setRedirect(true);

   

   }

   return prf;

    }

}

Visualforce Page:

<apex:page controller="ActionFunctionCLS" id="pg" >

  <script>

   function recSave(){

    var accountType = document.getElementById('pg:fm:pb:pbs:actType').value;

    alert('accountType -->'+accountType);

    if(accountType != 'Prospect'){

     alert('You Should Select Prospect to Save the Record');

     return false;

    }

    else{

     saveAccount(); //this is the function name which calls our action function from java Script.

     return true;

    }

   }

 

  </script> 

 <apex:form id="fm">

  <apex:actionfunction name="saveAccount" action="{!Saverec}" />

   <apex:pageBlock id="pb">

     <apex:pagemessages ></apex:pagemessages>

     <apex:pageblockButtons >

      <apex:commandButton value="Save" onclick="recSave();return false;"/>    

     </apex:pageblockButtons>

    

     <apex:pageblockSection id="pbs">

       <apex:inputField value="{!actobj.Name}" id="actName"/>

       <apex:inputField value="{!actobj.type}" id="actType"/>

     </apex:pageblockSection>

   </apex:pageBlock>

 </apex:form>

</apex:page>

              

Once you select Account Type as "Prospect" Javascript method will call the <apex:actionfunction name="saveAccount" action="{!Saverec}" /> and controller method is going to execute.

What is Action Function in Salesforce?

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

Example :

Visualforce Page:

<apex:page standardcontroller="Account" extensions="ActionFunctionController" 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 class:

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

  public ActionFunctionController(ApexPages.StandardController controller) {

    }

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

}



Output:

How to Pass Parameters in Action Function 

We can pass parameters to controller method that is being called using action function. For this we can use attribute "param" in visualforce.

Following is an example to demonstrate the parameter passing using param in action function. Clicking the checkbox calls the controller method using action function, first name and last name are passed to the controller using param attribute

Visualforce Page:

<apex:page controller="passparam">

 <apex:form>

  <apex:pageblock id="pgblck">

   First name : <apex:inputtext id="fn" value="{!firstname}">

   Last Name :<apex:inputtext id="ln" value="{!lastname}">

 Click this to See full name :  <apex:inputcheckbox onclick="calculate('{!$Component.fn}','{!$Component.ln}')">

Full Name:    <apex:outputtext value="{!fullname}"></apex:outputtext>

  </apex:inputcheckbox></apex:inputtext></apex:inputtext></apex:pageblock>

<apex:actionfunction action="{!calpercentage}" name="calAF" rerender="pgblck">

<apex:param assignto="{!firstname}" name="param1" value="">

<apex:param assignto="{!lastname}" name="param" value="">

</apex:param></apex:param></apex:actionfunction>

 </apex:form>

 <script>

  function calculate(frst,lst){

  var Fname = document.getElementById(frst).value;

 var Lname = document.getElementById(lst).value;

   var res = confirm('Do you want to calculate?');

   if(res == true)

      calAF(Fname,Lname );

  }

 </script>

</apex:page>







Controller :




Public class passparam{

Public string firstname{get;set;}

Public string lastname{get;set;}

Public string fullname{get;set;}

 Public void calpercentage(){

  fullname = firstname +' '+lastname;

 }

}










Output :