Quick Look Into JavaScript Remoting

Release notes can contain some wonderful surprises in them, as Quinton mentioned – it’s always good to looking for some gems in there.  Spring ‘11 is rolling out to general availability now, so you’ve either got your hands on it or should very soon.  While we’ve talked a lot about some of the great new features with the REST API or Chatter, let’s look at one that is a little more under the radar at the moment: JavaScript Remoting.

And when I say under the radar, I should more accurately put it that remoting is on the radar.  While some docs might suggest the feature is in Developer Preview, it’s really in more of a trial period.  This means there isn’t a quick way to register for a specific kind of org like we had for the REST preview, you’ll have to get in touch with technical support to enable the feature on a Spring ‘11 enabled org.  Feel free to email me (that’s joshua.birk at the domain one might suspect…) or tweet mewith an org ID and I’ll see about getting you the hookup.So what is JavaScript Remoting?  Essentially the feature allows for quick, tight integration between Apex and JavaScript.  If you had used the old AJAX toolkit in the past, it’s similar in some ways to how accessing an Apex Web Service worked – but is far more lightweight and simpler to get up and running.

First, you’ll need an globally scoped Apex class, with a static function defining the logic you want JavaScript to access.  By adding the RemoteAction annotation, you’ll be letting Visualforce know it should wrap this logic in a JavaScript friendly way:

global class remoteTest {
@RemoteAction
global static Contact[] findContacts(string Name) {
Name = '%'+Name+'%';
Contact[] c = [SELECT ID, Name, Phone, Email from Contact where NAME LIKE :Name ];
return c;
}
}

From there, associate the Visualforce to the class as a controller or extension, and Visualforce will include the ability to call the method from JavaScript.  The framework works on asynchronous results, so after passing in your params, you can grab the result from a handler function.  In this case, I’m taking my list of contacts and assigning it to a global array for use.

var contacts;
function contactSearch(name) {
remoteTest.findContacts(name,handleContacts);
}
function handleContacts(result, event) {
if(event.type == 'exception') {
alert(event.message);
} else {
contacts = result;
showContacts();
}
}

Then I can access the contacts and the fields I brought down with SOQL. In this example, I’ll use the returned array of contacts to browse for email and phone numbers. Here’s the complete, albiet quick and rough, Visualforce page:

var contacts;
function contactSearch(name) {
remoteTest.findContacts(name,handleContacts);
}
function handleContacts(result, event) {
if(event.type == 'exception') {
alert(event.message);
} else {
contacts = result;
showContacts();
}
}
function showContacts() {
var newList = "";
for(var i = 0; i < contacts.length; i++) {
newList += "
";
}
document.getElementById('contactList').innerHTML = newList;
}
function showContact(index) {
document.getElementById('phone').innerHTML = 'Phone: '+contacts[index].Phone;
document.getElementById('email').innerHTML = 'Email: '+contacts[index].Email;
}


And there you have it – with minimal overhead and effort, I have JavaScript powered by Apex in a client friendly manner.  While the event object returned in the callback includes the type (so that you can determine if there was an error) and message (to get the proper error message from Apex), you can also poke around there and see which class and method you were calling from Apex if you need it.  They are the action and method fields on the event object, respectively.

It’s pretty exciting stuff, and I can’t wait to see how it works with a certain library that rhymes with “jQuery”.  Again though, remember this isn’t ready for the mass public right away as we’re still tinkering with it – but if you want to enable this on a Spring ’11 org, contact technical support or shoot me an email or catch me on twitter.

 

Leave your comments...

Quick Look Into JavaScript Remoting