Hello readers, In this tutorial, we are going to learn what is Action Function in Visualforce Page in Salesforce. Calling apex class method from the visualforce page and passing parameter from visualforce page to apex class method is most common and required functionality.

What is Action Function in Visualforce Page?

Calling apex class method from the visualforce page and passing parameter from visualforce page to apex class method is most common and required functionality.<apex:actionFunction> can be used for the same purpose. An actionfunction is visualforce component used to invoke apex controller action methods directly from javascript code using AJAX request.

Declaring Action function component in Visualforce page:<apex:form>

<apex:form>

<apex:actionFunction name="sayHello" action="{!yourmethodname}" rerender="out" status="myStatus">
</apex:actionfunction>
</apex:form>

Where,

An action attribute will call the method declared in the apex class.
status: The ID of the target component that will display the status of ajax request.
rerender The ID of one or more components that are redrawn when the result of the action method returns to the client.

Note <apex:actionFunction> must be the child component of <apex:form>

To pass the parameter from visualforce to apex using apex:

<apex:form>
<apex:actionFunction name="sayHello" action="{!yourmethodname}" rerender="out" status="myStatus">
<apex:param assignto="{!param1}" name="FirstParameter" value=""/>
<apex:param assignto="{!param2}" name="SecondParameter" value=""/>
</apex:actionfunction>
</apex:form>

where,

assignTo will assign the parameter to the variable name specified in Apex code

Example of Action Function in the visualforce page:

Open Developer Console and create an Apex class called ActionFunctionController. Write the following code.

ActionFunctionController

public with sharing class ActionFunctionController {
public string FirstName{get;set;}
public string LastName{get;set;}
public string GreetingMessage{get;set;}
public void GreetingUser()
{
GreetingMessage=’Greeting from Salesforce: ‘+FirstName+’ ‘+LastName;
}
}

Create a Visualforce Page called ActionFunctionExample. Write the following code.

<apex:page controller=”ActionFunctionController”>
<style type=”text/css”>
.pointer
{
cursor:pointer;
border:1px solid #ccc;
padding:5px;
}
</style>
<apex:form id=”frmActionFunction”>
<apex:outputPanel id=”resultPanel”>
<apex:actionStatus startText=”processing…” stopText=”” id=”actionstatus” />
<br />
<b><apex:outputLabel value=”{!GreetingMessage}” /></b>
</apex:outputPanel>
<br />
<b>
First Name:
</b>
<apex:inputText id=”txtFirstName” />
<br />
<br />
<br />
<b>
Last Name:
</b>
<apex:inputText id=”txtLastName” />
<br />
<br />
<br />
<input type=”button” class=”pointer” onclick=”callActionMethod()” value=”Click Me !!!” />

<apex:actionFunction name=”GreetUser” action=”{!GreetingUser}” reRender=”resultPanel” status=”actionstatus”>
<apex:param name=”param1″ assignTo=”{!FirstName}” value=”” />
<apex:param name=”param2″ assignTo=”{!LastName}” value=”” />
</apex:actionFunction>
</apex:form>
<script type=”text/javascript”>
function callActionMethod()
{
var txtVal1 = document.getElementById(“{!$Component.frmActionFunction.txtFirstName}”).value;
var txtVal2 = document.getElementById(“{!$Component.frmActionFunction.txtLastName}”).value;

GreetUser(txtVal1,txtVal2);
}
</script>

</apex:page>

Where,

<apex:outputLabel value=”{!GreetingMessage}” /> will display the response return from the server.

Output:

Action Function

View More:

Conclusion:

I hope you would love this post. Please feel free to ask any technical question. Your feedback and suggestions would be appreciated.

Thank You.

Leave a Comment