Remote Action in Visualforce Page

Hello Friends, In this tutorial we are going to learn about @RemoteAction annotation in apex and how to call a remote action using javascript in the visualforce page.

After completing this tutorial you'll be able to understand:

• What is Remote Action?
• How to declare Remote Action in apex class?
• How to call remote action through javascript?
• How to get a result in a javascript object?

What is Remote Action?

Remote Action function allow Salesforce users to call any apex class method through javascript and get the result in a javascript object for further manipulation. To call an apex method through javascript you have to declare @RemoteAction annotation on method. Every method that denoted with @RemoteAction must be static. 

For example:

 @RemoteAction 
 public static List getAccountList(){        
 }

So here is the working example of @Remoteaction annotation function.

 

Step 1: Login to your Salesforce Org. and open developer console.

Step 2: Navigate to File | New | Apex Class and create an apex class called RemoteActionHandler and replace the following code.

RemoteActionHandler.apxc

 public class RemoteActionHandler{
    @RemoteAction 
    public static List getAccountList(){
        return [SELECT Id,Name,Phone FROM Account limit 10];
    }
 }

Step 3: Navigate to File | New | Visualforce Page and create a visualforce page called RemoteActionExm and replace the following code.

RemoteActionExm.vfp

 <apex:page controller="RemoteActionHandler" sidebar="false" showHeader="false"> 
    <center>
        <P style="font-size:25px;">Account Details</P> 
        <table width="90%" border="1">
            <tr style="text-align:center;">
                <td><b>Id</b></td>
                <td><b>Name</b></td>
                <td><b>Phone</b></td>
            </tr>
            <tbody id="tbody"></tbody>
        </table>
    </center>
    <script>
    window.onload=function(){
        RemoteActionHandler.getAccountList(function(result,event){
            if(event.status){
                if(result.length>0){
                    var html='';
                    for(var i=0;i<result.length;i++){
                        html+="<tr><td>"+result[i].Id+"</td><td>"+result[i].Name+"</td><td>"+result[i].Phone+"</td></tr>";
                    }
                    document.getElementById('tbody').innerHTML=html;
                }
            }
        })
    }
    </script>
 </apex:page>

Output:

See also:

• Set PDF filename in Visualforce Page
• Visualforce Pagination With Dynamic Query
• Pagination without Standard Controller in Visualforce page.

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.