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.
- What is JavaScript Remoting?
- When we use JavaScript Remoting?
- How to use it?
- Real scenarios example.
- 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: –
- Unlike the action function, You can communicate with the VF page controller method without posting your form.
- Instead of the whole page, You can reRender the specific part of the page.
- 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.
- 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.
Is the apex call made will be synchronous or asynchronous?
What are considerations for callouts to external system?
Hi Chiran,
Actually, Visualforce remoting invokes the method synchronously, but its response is asynchronous.
Confused???
Let me explain to you what is happening in the whole process.
Suppose after the method of remoting, some console statements are available in your code. So, what will be happen . Remote invoke the method and if response data is heavy then next (console statement) will be execute first and response come after the execution of the console statement.
So, if you have to execute some statements after the remoting call. So, use the setTimeout() method of javascript.
setTimeout(your next code ,1000);
This will execute your statement after 1000 milliseconds.I hope your doubt has cleared now. Thanks for the query.
Keep learning, Keep Sharing.