-
Define Javascript Remoting for Salesforce Apex Controllers.
why to use Javascript remoting for apex controllers?
-
4 Replies
-
Hi,
Use javascript remoting in visualforce to call methods in apex controllers from javascript.
Javascript remoting has 3 parts.
1. The remote method invocation you add to the visualforce page, written in javascript.
2. The remote method definition in your Apex controller class.
3. This method definition is written in apex, but there are few differences from normal action methods.
4. The response handles callback function you add to or include in your vf page, written in javascript. -
Hi
JavaScript remoting is a tool that front-end developers can use to make an AJAX request from a Visualforce page directly to an Apex controller. JavaScript remoting allows you to run asynchronous actions by decoupling the page from the controller and to perform tasks on the page without having to reload the entire page.
JavaScript code can be written in a Visualforce page and can be included in a Visualforce page by using a static resource within the script.
Example: Code snippet
<script type=”text/javascript”>
function getRemoteAccount() {
var accountName = document.getElementById(‘acctSearch’).value;
Visualforce.remoting.Manager.invokeAction(
‘{!$RemoteAction.MyController.getAccount}’,
accountName,
function(result, event){
if (event.status) {
// Code for callback handling
}
}, {escape: true}
);
}
</script>Controller:
@RemoteAction
global static String getItemId(String objectName) { … }Thanks
-
Hi Prachi,
Here’s a basic sample demonstrating how to use JavaScript remoting in your Visualforce pages
First, create an Apex controller called AccountRemoter:
global with sharing class AccountRemoter {
public String accountName { get; set; }
public static Account account { get; set; }
public AccountRemoter() { } // empty constructor@RemoteAction
global static Account getAccount(String accountName) {
account = [SELECT Id, Name, Phone, Type, NumberOfEmployees
FROM Account WHERE Name = :accountName];
return account;
}
}Other than the @RemoteAction annotation, this looks like any other controller definition.
To make use of this remote method, create a Visualforce page that looks like this:<apex:page controller="AccountRemoter">
<script type="text/javascript">
function getRemoteAccount() {
var accountName = document.getElementById('acctSearch').value;Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.AccountRemoter.getAccount}',
accountName,
function(result, event){
if (event.status) {
// Get DOM IDs for HTML and Visualforce elements like this
document.getElementById('remoteAcctId').innerHTML = result.Id
document.getElementById(
"{!$Component.block.blockSection.secondItem.acctNumEmployees}"
).innerHTML = result.NumberOfEmployees;
} else if (event.type === 'exception') {
document.getElementById("responseErrors").innerHTML =
event.message + "<br/>\n<pre>" + event.where + "</pre>";
} else {
document.getElementById("responseErrors").innerHTML = event.message;
}
},
{escape: true}
);
}
</script><input id="acctSearch" type="text"/>
<button onclick="getRemoteAccount()">Get Account</button>
<div id="responseErrors"></div><apex:pageBlock id="block">
<apex:pageBlockSection id="blockSection" columns="2">
<apex:pageBlockSectionItem id="firstItem">
<span id="remoteAcctId"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem id="secondItem">
<apex:outputText id="acctNumEmployees"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page> -
JavaScript remoting is optimized for use on mobile pages and on pages that use third-party JavaScript libraries. It enables dynamic, interactive pages that feel more responsive than traditional Visualforce pages.
JavaScript remoting is an alternative to standard Visualforce AJAX components and Visualforce Remote Objects. It provides a more idiomatic way of interacting with the Lightning platform from JavaScript. JavaScript remoting allows you to use familiar JavaScript practices and structures and makes leveraging other JavaScript frameworks and tool kits easier for front-end developers. Remoting creates a more responsive experience that’s ideal for mobile pages or any other page where your use case requires maximum efficiency and performance. Because it’s asynchronous, you can load only the initial page and the data that you need to display the page, and then lazily load additional data that might not be used on the page immediately. You can even use this method to pre-load data for pages or views that the user hasn’t accessed.
Although JavaScript remoting can provide an efficient, responsive, and optimized user experience, it’s not without limitations. It can take extra time to develop pages that use it, and you need to change how you develop and think about the flow of the page. Because you aren’t using forms and there’s no view state associated with the request, you have to manage the state of the page yourself, on the client side. On the other hand, there’s nothing that prevents you from combining JavaScript remoting with the standard Visualforce MVC design paradigm. As always, keep the problem that you’re trying to solve foremost when determining your design. JavaScript remoting is one of many tools available to you.
Thanks.
Log In to reply.
Popular Salesforce Blogs
Delivering Net Zero with the Power of Salesforce!
Welcome back as we return once again to Salesforce’s new kid on the block – Net Zero Cloud. You may have guessed this already, but…
Defining Salesforce Marketing Cloud Engagement and Why It's Crucial For Businesses
Salesforce Marketing Cloud Engagement previously known as Marketing Cloud Email Studio can play a critical part in a company's marketing strategy, helping develop client connections…
Custom "Range of Years" for "Standard Date Field" in Salesforce
Have you ever noticed that the standard date field shows year Range to only up to 7 years? What if we want that Range to…
