In this article, we are going to discuss about JavaScript remoting. It is a very important concept in salesforce because it has provided some messi features.  

Below is the list of what we will discuss in this article. 

1. What is JavaScript Remoting? 
2. When we use JavaScript Remoting?
3. How to use it?  
4. Real scenarios example. 
5. Advantages 

What is JavaScript Remoting? 

JavaScript Remoting is the standard method to call the method of the apex controller. You can also send the parameters from page to controller in this method. And that method will return the result to page. When we use JavaScript Remoting?

When we use JavaScript Remoting?

When we want to show more than 10,000 records together on page. The standard limit of <apex: repeat> tag iteration is 1,000. And we can increase it to 10,000 in a read-only mode of page.

So, we use js remoting when we don’t know how many records will be shown on-page. So, the user does not face any issue in future.

How to use it? 

Before the dive into details, we should know about some important elements of it. Let’s look at the syntax of JavaScript Remoting. 

function functionName() { 
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.controllerName.mehtodName}',param1, param2, 
    funcation(result,event){ 
      If(event.status){ 
          // code will be witten here 
      } 
    }); 
 } 

If you don’t want to send any parameter to the controller. So, you can also invoke the remote methods in this way. 

function funcationName(){  
 ControllerName.methodName(   
 function(result, event){ 
   If(event.status){ 
     // code will be written here 
   } 
 }); 
} 

One more thing, we have to use annotation “@RemoteAction ” before the method of the controller. Otherwise remoting not distinguish the method. 

@RemoteAction   
 Public static void methodName(){ 
} 

Now, It’s time for a real scenario. So, we will show the records of the account on the page using remoting. So, please make attention we are going to dive.  

Code Of VisualForce Page:-

<apex:page controller="AccRecUsingJsController" >
    <style>
    	table tr th {
        	border : 1px  #409fed;
        	height : 50px;
        	background : #0088ff;
        	color : white; 
        }
        table{
        	width : 100%;
        }
        
        td{
        	border : 1px  white;
        	height : 50px;        	
        }
        table tr:nth-child(odd){
        	background : #409fed;
        }
        table tr:nth-child(even){
        	background : #b1d5f3;
        }
    </style>
    <script>
    	function getRemoteAcc(){ 
             
            AccRecUsingJsController.getAccRecord(  
            function(result, event){ 
            
                arrayOfAccount = result;  
                if(event.status){  
                    table='<table ><thead><th>Account Name</th><th>Billing City</th><th>Type</th></thead>';
                    table += '<tbody>' ;
                    for(var r=0; r < result.length; r++)
                    {   
                        table += '<tr>';  
                             table += '<td class = "Account">' +result[r].Name + '</td>';  
                        	table += '<td class = "Account">' +result[r].BillingState + '</td>';  
                        	table += '<td class = "Account">' +result[r].Type + '</td>';  
                        table += '</tr>';
                     } 
                      //setMyParam(table);

                      document.getElementById("span").innerHTML = table;  
                }else{
                    console.log('>>>>>>>>>>>>>>>>>>> error');
                } 
    	});
    } 
    getRemoteAcc();
    </script> 
    <apex:form >
        <div class="head" style="font-size: x-large;">
            <center>
                <h1>
                    Account Details
                </h1> 
            </center>
        </div>
    	<span id="span"></span>
    </apex:form>
</apex:page>

Code Of Apex Controller:-

public class AccRecUsingJsController {
	@RemoteAction
   public static List<Account> getAccRecord(){
        
        List<Account> listOfAcc = new List<Account>();
       // Map<Stirng,Account> mapAccountIdToObj = new Map<String,Account>()        
        for(Account tempAccObj : [SELECT Name,Type,BillingState FROM Account LIMIT 50000 ]){
            listOfAcc.add(tempAccObj);           
        } 
         
        return listOfAcc;
    }
}

Output of above code: –

Advantages & Disadvantages of remoting: – 

Advantages: – 

1. Unlike the action function, You can communicate with the VF page controller method without posting your form. 
2. Instead of the whole page, You can reRender the specific part of the page.   
3. Using the VF page, we can only show a maximum of 1,000 records. And 10,000 in read-only mode. Through remoting, we can more. 
4. No worry about ViewState. 

Disadvantages: – 

It doesn’t affect any standard governor limit of the Salesforce. 

I hope you have enjoyed the article. You can comment below, If you have any queries related above topic. Subscribe our blog for the latest updates.

Follow us on twitter and join our WhatsApp group.