{"id":2643,"date":"2012-01-15T01:00:38","date_gmt":"2012-01-14T19:30:38","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=2643"},"modified":"2012-01-15T01:00:38","modified_gmt":"2012-01-14T19:30:38","slug":"passing-parameter-in-actionfunction-in-visualforce","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/passing-parameter-in-actionfunction-in-visualforce\/","title":{"rendered":"Passing multiple Parameters in ActionFunction in Visualforce"},"content":{"rendered":"

Calling Apex Method from the Visualforce page is the one of the most required functionality in application development in Salesforce. <apex:actionFunction><\/strong> is one of the method used to achieve this functionality.<\/p>\n

Most often we need to supply the arguments in <apex:actionFunction><\/strong> and in this article I will demonstrate the way in which we can pass one or more than one parameter.
\nThe output of the example will be like below screen.<\/p>\n

\"Passing<\/a>
Passing Parameter in ActionFunction in Visualforce<\/figcaption><\/figure>\n

Create Apex class with following code:<\/p>\n

\npublic with sharing class PassParameterActionFunction {\n    public String val{get;set;}\n    public String enteredText1{get;set;}\n    public String enteredText2{get;set;}\n\n    public void echoVal()\n    {\n     val = 'You have entered : 1 - '+enteredText1+' 2 -'+enteredText2;\n    }\n}\n<\/pre>\n
In above code, the variables “enteredText1<\/strong>“\u009d and “enteredText2<\/strong>“\u009d will be the parameters supplied by the javascript and variable “val<\/strong>“\u009d will display the concatenated result.
\nNow create the Visualforce page with code:<\/p>\n
\n<apex:page controller="PassParameterActionFunction">\n<style type="text\/css">\n.pointer\n{\n    cursor:pointer;\n    border:1px solid #ccc;\n    padding:5px;\n}\n<\/style>\n<apex:form id="frm">\n<apex:outputPanel id="resultPanel">\n<apex:actionStatus startText="requesting..." stopText="" id="myStatus" \/>\n<br \/>\n<b><apex:outputLabel value="{!val}" \/><\/b>\n<\/apex:outputPanel>\n<br \/>\nEnter Value 1 :\n<apex:inputText id="txt1" \/>\n<br \/>\nEnter Value 2 :\n<apex:inputText id="txt2" \/>\n<br \/>\n<br \/>\n<br \/>\n<span class="pointer" onclick="callActionMethod()"> Click Me !!! <\/span>\n\n<apex:actionFunction name="echo" action="{!echoVal}" reRender="resultPanel" status="myStatus">\n<apex:param name="firstParam" assignTo="{!enteredText1}" value="" \/>\n<apex:param name="secondParam" assignTo="{!enteredText2}" value="" \/>\n<\/apex:actionFunction>\n<\/apex:form>\n<script type="text\/javascript">\nfunction callActionMethod()\n{\n var txtVal1 = document.getElementById("{!$Component.frm.txt1}").value;\n var txtVal2 = document.getElementById("{!$Component.frm.txt2}").value;\n \/*Below Method is generated by "apex:actionFunction" which will call Apex Method "echoVal" *\/\n echo(txtVal1,txtVal2);\n}\n<\/script>\n\n<\/apex:page>\n\n<\/pre>\n
The below code snippet is used to define the “actionFunction<\/strong>“\u009d in visual force page.
\nTo supply the parameter, we have to use “apex:param<\/strong>“\u009d tag. Attribute “assignTo<\/strong>“\u009d will assign the parameter to variable name specified in Apex code. Here we have assigned the value to variable “enteredText1<\/strong>“\u009d and “enteredText2<\/strong>“\u009d.<\/p>\n
\n<apex:actionFunction name="echo" action="{!echoVal}" reRender="resultPanel" status="myStatus">\n<apex:param name="firstParam" assignTo="{!enteredText1}" value="" \/>\n<apex:param name="secondParam" assignTo="{!enteredText2}" value="" \/>\n<\/apex:actionFunction>\n<\/pre>\n
The resulting JavaScript function created by the visualforce will be “echo<\/strong>“\u009d because we have set that name for the “apex:actionFunction<\/strong>“\u009d.
\nAttribute “action<\/strong>“\u009d will call the method specified on Apex class and “status<\/strong>“\u009d will show the Ajax request status.
\nBelow JavaScript method is used to call the generated method by “apex:actionFunction<\/strong>“\u009d.<\/p>\n
\nfunction callActionMethod()\n{\n var txtVal1 = document.getElementById("{!$Component.frm.txt1}").value;\n var txtVal2 = document.getElementById("{!$Component.frm.txt2}").value;\n \/*Below Method is generated by "apex:actionFunction" which will call Apex Method "echoVal" *\/\n echo(txtVal1,txtVal2);\n}\n\n<\/pre>\n
As you can see that we have called the method “echo<\/strong>” with two arguments, because in “apex:actionFunction<\/strong>” we have specified the parameters for the method.<\/p>\n
\n
Method 2:<\/strong><\/p>\n
In this method, instead of creating two temporary variable in Apex page and assigning it using\u00a0attribute “assignTo<\/strong>”\u00a0of we can directly get the value in Apex code by something like using<\/p>\n
\nApexpages.currentPage().getParameters().get('paramName');\n<\/pre>\n
So the resultant Apex code<\/strong> will be:<\/p>\n
\npublic with sharing class PassParameterActionFunction {\n    public String val{get;set;}\n\n    public void echoVal()\n    {\n     val = 'You have entered : 1 - '+Apexpages.currentPage().getParameters().get('firstParam')+' 2 -'+Apexpages.currentPage().getParameters().get('secondParam');\n    }\n}\n<\/pre>\n
Visualforce code:<\/strong><\/p>\n
\n<apex:page controller="PassParameterActionFunction">\n<style type="text\/css">\n.pointer\n{\n    cursor:pointer;\n    border:1px solid #ccc;\n    padding:5px;\n}\n<\/style>\n<apex:form id="frm">\n<apex:outputPanel id="resultPanel">\n<apex:actionStatus startText="requesting..." stopText="" id="myStatus" \/>\n<br \/>\n<b><apex:outputLabel value="{!val}" \/><\/b>\n<\/apex:outputPanel>\n<br \/>\nEnter Value 1 :\n<apex:inputText id="txt1" \/>\n<br \/>\nEnter Value 2 :\n<apex:inputText id="txt2" \/>\n<br \/>\n<br \/>\n<br \/>\n<span class="pointer" onclick="callActionMethod()"> Click Me !!! <\/span>\n\n<apex:actionFunction name="echo" action="{!echoVal}" reRender="resultPanel" status="myStatus">\n<apex:param name="firstParam"  value="" \/>\n<apex:param name="secondParam"  value="" \/>\n<\/apex:actionFunction>\n<\/apex:form>\n<script type="text\/javascript">\nfunction callActionMethod()\n{\n var txtVal1 = document.getElementById("{!$Component.frm.txt1}").value;\n var txtVal2 = document.getElementById("{!$Component.frm.txt2}").value;\n \/*Below Method is generated by "apex:actionFunction" which will call Apex Method "echoVal" *\/\n echo(txtVal1,txtVal2);\n}\n<\/script>\n\n<\/apex:page>\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Example and Source code of  multiple Parameters  Parameter in ActionFunction in Visualforce – Salesforce<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9,18],"tags":[331,336],"class_list":["post-2643","post","type-post","status-publish","format-standard","hentry","category-salesforce","category-visualforce","tag-salesforce","tag-visualforce"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":1080,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/one-visualforce-page-as-an-iframe-in-another-visualforce-page-salesforce-com\/","url_meta":{"origin":2643,"position":0},"title":"One visualforce page as an iframe in another visualforce page – Salesforce.com","author":"Jitendra","date":"September 15, 2010","format":false,"excerpt":"Example to include one visualforce page into another visual force with the help of iframe and getting back the request parameter in visual force page.","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2501,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/very-useful-tips-and-tricks-of-the-apex-salesforce-interview-questions-part-4\/","url_meta":{"origin":2643,"position":1},"title":"Latest Salesforce Interview Questions – Part 4 – Related to Dynamic Apex","author":"Jitendra","date":"November 27, 2011","format":false,"excerpt":"Most Frequently Asked interview questions of Apex, Dynamic Apex, SOSL, Visualforce, SOQL in Salesforce.com SFDC","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2470,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/salesforce-tutorial-create-simple-ajax-based-visualforce-page\/","url_meta":{"origin":2643,"position":2},"title":"Salesforce Tutorial – Create Simple Ajax based Visualforce page","author":"Jitendra","date":"October 17, 2011","format":false,"excerpt":"Salesforce Tutorial - Step by step tutorial to create AJAX based application in visualforce page with Apex class","rel":"","context":"In "Web Technology"","block_context":{"text":"Web Technology","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/"},"img":{"alt_text":"Simple AJAX demo in salesforce using visualforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/10\/Simple-AJAX-demo-in-salesforce-using-visualforce.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":28,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-interview-questions\/","url_meta":{"origin":2643,"position":3},"title":"Salesforce Interview Questions – Part 1","author":"Jitendra","date":"May 6, 2010","format":false,"excerpt":"Set of most often asked questions on the salesforce.com developement","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4102,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-faq-part-20-lightning-questions\/","url_meta":{"origin":2643,"position":4},"title":"Salesforce interview question related to Lightning framework – Part 20","author":"Jitendra","date":"February 4, 2015","format":false,"excerpt":"Salesforce interview questions for Salesforce developers and admin , mostly related to newly released Salesforce Lightning components and applications","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5662,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/send-visualforce-as-an-email-attachment-from-apex-trigger-alternate-design\/","url_meta":{"origin":2643,"position":5},"title":"Send Visualforce as an email attachment from Apex Trigger – Alternate design","author":"Jitendra","date":"August 27, 2016","format":false,"excerpt":"Process Builder & InvocableMethod- Alternative to send Visualforce as an email attachment from Apex Trigger","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Send Visualforce as an email attachment from Apex Trigger","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/08\/Send-Visualforce-as-an-email-attachment-from-Apex-Trigger.jpg?fit=922%2C369&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/08\/Send-Visualforce-as-an-email-attachment-from-Apex-Trigger.jpg?fit=922%2C369&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/08\/Send-Visualforce-as-an-email-attachment-from-Apex-Trigger.jpg?fit=922%2C369&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/08\/Send-Visualforce-as-an-email-attachment-from-Apex-Trigger.jpg?fit=922%2C369&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=2643"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2643\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=2643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=2643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=2643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}