ActionFunction component triggers an action whenever a user clicks on a custom link or a button inside a visualforce page.
In visualforce, actionFunction is used to call method inside a controllers as a JavaScript function. ActionFunction can be used anywhere inside a visualforce page to call action which include custom javascript code.
ActionFunction is a component that provides support to invoke controller action methods directly from JavaScript code using an AJAX request. ActionFunction component must be a child of <apex:form> component.
There is a difference between <apex:actionSupport> and <apex:actionFunction> component.<apex:actionSupport> only provides support for invoking controller action methods from other visualforce components whereas <apex:actionFunction> defines a new JavaScript function which can be called from a JavaScript block of code.
Table of Contents
ToggleExample of ActionFunction:
<apex:actionfunction name="squarefunction" action="{!timestwo}" reRender="result">
Let’s see ActionFunction component in action:
Step 1: Create a new Visualforce Page.
Step 2: Click on “Create page actionfunction”
Step 3: Create an Apex class.
public class actionFunction { public Integer value {get;set;} public actionfunction() { value=1; } public PageReference timesTwo() { value=value*2; addInfo("the result is "+value); return null; } private void addInfo(String msg) { ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.INFO.msg)); } }
Step 4: Visualforce page
<apex:page controller="actionfunction"> <apex:outputPanel id="result"> <apex:pageMessages /> <a onclick="squarefunction('{!value}'); return false ;">Run </a> </apex:outputPanel> <apex:form> <apex:actionFunction name="squarefunction" action="{!timesTwo}" reRender="result"> <apex:param name="arg1" value="" assignTo="{!value}" /> </apex:actionFunction> </apex:form> </apex:page>
To invoke an action by an actionfunction component, we have to invoke action in action attribute [for e.g. action=”{!timestwo}”] and JavaScript name is mentioned in the name attribute [action =”squarefunction”] . All these attributes must be the child of <apex:form> tag.
<apex:param> component is used to define arguments on the function. Param component must be used inside actionfunction component.
In this blog post, we have created a visualforce page using actionfunction component to multiply a number with two and reRender attribute is used to partially refresh the visualforce page.
Output from Actionfunction:
Click on the Save button to save the visualforce page.
Click on the run link. The first time you click the output will be 2, the second time you will click the result will be 2*2=4, the third time you click, the output will be 4*2=8.
Note: Checkout my course on visualforce to know learn about visualforce tags. This course covers everything you will need to become a Visualforce UI expert. You will learn about different tags, when to use them in real time and also how to use these tags.
Visualforce complete course for beginners