Action Function In VisualForce Page.

In this blog we will learn about <apex:actionFunction> tag. This tag is used to invoke Apex action by using JavaScript asynchronously via AJAX requests.

JavaScript is Dynamic scripting language which perform action on client side. By use of this language we can reduce traffic on web server. <apex:actionFunction> and <apex:actionSupport> are two components which we use in visualforce page to execute different JavaScript task.

Attributes:

Attribute Name	Type	Description	Required
action	ApexPages.Action	The action method invoked when the actionFunction is called by a DOM event elsewhere in the page markup.If an action is not specified, the page simply refreshes. Example action = “{!delete}”	No
focus	String	The ID of the component that is in focus after the AJAX request completes.

id	String	Identifier	No
immediate	Boolean	A Boolean value that specifies whether the action associated with this component should happen immediately, without processing any validation rules associated with the fields on the page. Default is set to false.
name	String	The name of the JavaScript function that, when invoked elsewhere in the page markup	Yes
namespace	String	The namespace to use for the generated JavaScript function.For example, “webkul” and “wk_vfPage” are supported as namespaces.
onbeforedomupdate	String	The JavaScript invoked when the onbeforedomupdate event occurs–that is, when the AJAX request has been processed, but before the browser’s DOM is updated.	No
oncomplete	String	The JavaScript invoked when the result of an AJAX update request completes on the client.	No
rendered	Boolean	It specifies whether the component is rendered on the page. Default is true.
reRender	Object	Id of component to be refresh	No
status	String	Id of component to show the Status of an AJAX update request.	No
timeout	Integer	The amount of time (in milliseconds) before an AJAX update request should time out.	No

Example

Here is an example how to use action function in visualforce page. In this example we will create account by using action function then update it asynchronously.

1). You have to create a VisualForce page by using following code.

<apex:page controller="exampleJs" tabstyle="Account">
<!-- 
    /**
     * Webkul Software.
     *
     * @category  Webkul
     * @author    Webkul
     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
     * @license   https://store.webkul.com/license.html
     */
 -->	   
 <style>
        .progressBar
        {
        width: 0;
        height : 13px;
        border : grey;
        background : green;
        }
        .loading{
        Display: none;
        position:Absolute;
        top:-2px;
        left:-2px;
        width:100%;
        height:100%;
        background:black;
        opacity: .5;
        border:0;
        }
        
        .loadingMessage
        {
        Display: none;
        position:fixed;
        width:100px;
        height:30px;
        padding:10px 5px;
        top:50%;
        Left:50%;
        margin-top:-25px;
        margin-left:-60px;
        background:#ffffff;
        border:3px solid #ffba1a;
        Color:#222222;
        font-size:12px;
        font-weight:bold;
        }
    </style>
    <script>
    var i = 0;
    var j = 0;
    function load()
    {
        document.getElementById("wholeLoad").style.display="Block";
        document.getElementById("lodMsg").style.display="Block";
        return false; 
    }
    function color()
    {
        
        if(i<10)
        {
            j += 10;
            document.getElementById("progressBar").style.width = j+'%' ; 
            i++;
        }
            
    }
    </script>
    <apex:form >
        <apex:actionFunction action="{!createAccount}" name="createRecordJS"  status="createStatus" oncomplete="updateAccount();" />
        <apex:actionFunction action="{!updateAccount}" name="updateAccount" status="wsStatus"  oncomplete="color(),createRecordJS();"/>
        <apex:outputPanel id="statuses">
            <div class="loading" id="wholeLoad"/>
            <div class="loadingMessage" id="lodMsg">
                <div class="progressBar" id = "progressBar">
                    
                </div>
                Processing....
            </div>
            
        </apex:outputPanel>
        <apex:outputPanel id="msgs">
            <apex:pageMessages />
        </apex:outputPanel>
        <div><input name="CreateAndCall" class="btn" type="button" value="Create And Update !!!" onclick="load(),createRecordJS();return false;"/></div>
    </apex:form>
</apex:page>

2). Create apex class say exampleJs and write following code.

public with sharing class exampleJs {
  /**
    * Webkul Software.
    *
    * @category  Webkul
    * @author    Webkul
    * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
    * @license   https://store.webkul.com/license.html
    */
  
    Account myAccount;
    integer i =0;
    //Creates an account record.
    public PageReference createAccount() {
        //Create an account using DML operation.
        if(i<10){
            myAccount = new Account(name = 'Webkul Software Pvt. Ltd.');
            insert myAccount;
            i++;
            return null;
        }  else {
            pageReference pg =page.remoteAction;
            pg.setRedirect(true);
            return pg;
        }
       
    }
    
    public PageReference updateAccount() {
       // Update the same account record  
        myAccount.Name = 'Webkul After Update';
        update myAccount; 
        return null;
    }
    
}

Output

Support

That’s all for Action Funtion , still if you have any further query feel free to add a ticket, we will be happy to help you https://webkul.uvdesk.com/en/customer/create-ticket/.

Categories: JavaScript Salesforce

Tags: ActionFunction Ajax in salesforce Invoke the apex method in salesforce Js in salesforce

snehil jaiswal 16-July-2021

View Comments Comment or Ask a Question

Quick Links

Action Function In VisualForce Page.

Table of Content

Attributes:

Example

Output

Support