Note:- To understand this blog, you need to go through the basics of Visualforce from Trailhead.
It is a tool that enables the direct invocation of controller action methods from JavaScript code via an AJAX request.
A <apex:actionFunction> component must be a child of a component of the <apex:form>.
Make sure that the order of <apex:param> matches the order of the caller's argument list because binding between the caller and <apex:actionFunction> is based on parameter order.
In contrast to <apex:actionSupport>, that only provides support for invoking controller action methods from other Visualforce components, <apex:actionFunction> defines a new JavaScript function that can be called from within a block of JavaScript code.
Prerequisite : Visualforce Trialhead.
Note: After API version 23 you can't place <apex:actionFunction> inside an iteration component like <apex:pageBlockTable>, <apex:repeat> you can put a normal JavaScript function that calls it inside the iteration instead or use <apex:actionFunction> after the iteration component.
How to invoke controller action mehtods by actionfunction?
Steps to invoke an action by use of actionfunction:
Invoke action using action attribute ex:- action=”{!calledFromVFPage}”
Mention JavaScript name in the name attribute ex:- name=”callContollerMethod”.
Note: All these attributes must be written in between <apex:form> and </apex:form> tag.<apex:param> is used to define arguments on the function. Param component must be used inside actionfunction component.
Example of actionFunction
We are going to have two input fields Name and Phone for the creation of account. The user will input Name and Phone and after click of insert button the account will be created.
We will follow the following steps to develop this functionality:
● Create two inputfields Name and Phone.
● Create a Insert Account button on click of which callJavaScriptFunction javascript function will be called.
● callJavaScriptFunction will call the actionfuntion callContollerMethod(name,phone);
● In <apex:actionFunction> we will accept two <apex:param> name and phone
● In <apex:actionFunction> we will call controller’s method calledFromVFPage
● calledFromVFPage method from controller will create new account and redirect to newly created account detail page.
VisualForce page
<apex:page controller="AccountCustomController" id="controller">
<apex:form id="formid" >
<apex:pageblock id = "pageBlock">
<apex:pageBlockSection id = "input">
<apex:inputText value="{!newAccountToInsert.Name}" id ="name" />
<apex:inputText value="{!newAccountToInsert.Phone}" id = "phone"/>
</apex:pageBlockSection>
<apex:pageBlockButtons>
<apex:outputPanel onclick="callJavaScriptFunction();" styleClass="btn">
{!$Label.AccountInsertButton}
</apex:outputPanel>
</apex:pageBlockButtons>
</apex:pageblock>
<script>
functioncallJavaScriptFunction(){
let name = document.getElementById('controller:formid:pageBlock:input:name').value;
let phone = document.getElementById('controller:formid:pageBlock:input:phone).value;
if(name == "") {
alert('{!$Label.NameIsBlank}');
}
elseif(phone == "") {
alert('{!$Label.PhoneIsBlank}');
}
else{
callContollerMethod(name, phone);
}
}
</script>
<apex:actionFunction name="callContollerMethod" action="{!calledFromVFPage}" rerender="">
<apex:param name="name" value="" />
<apex:param name="phone" value="" />
</apex:actionFunction>
</apex:form>
</apex:page>Controller class : AccountCustomController
publicclassAccountCustomController {
public string state {get; set;}
public Account newAccountToInsert {get; set;}
public AccountCustomController() {
state = '';
newAccountToInsert = newAccount();
}
public PageReference calledFromVFPage() {
String name = System.currentPageReference().getParameters().get('name');
String phone = System.currentPageReference().getParameters().get('phone');
Account accounts = newAccount();
accounts.Name = name;
accounts.Phone = phone;
insert accounts;
PageReference pageReference = newPageReference('/' + accounts.id);
pageReference.setRedirect(true);
return pageReference ;
}
}Happy!! to help you add to your knowledge. You can leave a comment to help me understand how the blog helped you. If you need further assistance, please contact us. You can click "Reach Us" on the website and share the issue with me.
References:
Blog Credit:
S. Chaudhary
Salesforce Developer
Avenoir Technologies Pvt. Ltd.
Reach us: team@avenoir.ai
Comentários