Javascript Remoting & jquery templates – easy way to rich and high performance interfaces…!

Since release of Javascript remoting feature in Spring’11 release, I was super excited about it and was looking for spare time to play with it.
Few days back I read about jquery templates, that’s an awesome jquery plugin(soon going to be part of jquery min).

jQuery templates contain markup with binding expressions (‘Template tags’). Templates are applied to data objects or arrays, and rendered into the HTML DOM

This templating engine supports powerful tag lib in-built that supports conditions and iterations. For more details check this post. If you are coming from J2EE background you can treat this jquery template feature very similar to Apache Velocity and free marker templates.

Using jquery templates & Javascript Remoting together !

This mashup is important from force.com development point of view because

• Remoting allows you to perform almost any apex logic via Javascript.
• Using remoting one can by pass all the hassle of view state, and performance issues because of that on complex visualforce screens.
• Mashing up these two can result in very light weight, super fast and complex visualforce screens with lesser and more human readable code

We will see a simple example below, where

• We search for accounts for a user inputted account name using Remoting.
• Display the search results in Salesforce pageBlockStyle table without re-rendering and form submission. All using jquery templates, the lines of code required to do so is really trivial and the markup is very straight forward to understand.

Code Snippet

This code snippet is pretty similar to what you must have already seen in visualforce remoting docs. I only enhanced it for jqueryTemplate support to render a table easily. I am assuming you are already comfortable with basic Apex, HTML, jquery and visualforce. Only suggested reading is jqueryTemplates, please have a quick look at this page before diving into the code below, for easy understanding.

Apex Controller – testremotingcontroller.cls

public with sharing class  testremotingcontroller {
    @RemoteAction
    public static Account[] searchAccounts(String accountName) {
        // support * search like salesforce lookups
        accountName = accountName.replaceAll('[*]', '%');
        return [select id, name, phone, type, numberofemployees from 
             Account where name like :accountName ];
        
    }   
}

Visualforce Page – testremoting.page

 
    
        
            Account Name :
            
            Get Account
                
    

 
    
    
    

        
        

            

                
Id
                
 Name
                
 Phone
                
Type
                
 Number of Employees
                                 
            
        
    
        

    
    





    ${Id}
    ${Name}
    ${Phone}
    ${Type}        
    ${NumberOfEmployees}
           



// if you are inside some component
// use jquery nonConflict
// var t$ = jQuery.noConflict();

function searchAccounts() {
    var accountName = $('#accountNameToSearch').val();
    // clear previous results, if any
    $("#searchResults tbody").html('');
    
    // The Spring-11 gift from force.com. Javascript remoting fires here
    // Please note "abhinav" if my org wide namespace prefix
    // testremotingcontroller is the Apex controller
    // searchAccounts is Apex Controller method demarcated with @RemoteAction annotation.
    // DEPRECATED -     abhinav.testremotingcontroller.searchAccounts( accountName, ...) 
    // NEW - summer'12 approach for calling
    Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.testremotingcontroller.searchAccounts}',
                   accountName, function(result, event){            
        if (event.status && event.result) {  
          $.each(event.result, function () {                
             // for each result, apply it to template and append generated markup
             // to the results table body.
             $("#resultTableRowTemplate" ).tmpl(this).appendTo( "#searchResults tbody" );
          }
         );            
        } else {
           alert(event.message);
        }
    }, {escape:true});
}

Thats it guys, on executing this page and searching for records it comes up beautifully like this

Where I got stuck with javascript remoting !