JS Remoting in Salesforce with Mustache

Js remoting is very useful & interesting feature. By this the page is not posted back to server & you will get result in less than a second...!!!

let's start with an example how this works. I am also going to use Mustache.js template in the VF page. Mustache is a js templates & can be used if you want to generate the html dynamically. It means you will define the template first & the data will be rendered as per the defined templates.

To know more about mustache you can check below url

https://github.com/janl/mustache.js or

http://mustache.github.com/

to implement the js remoting first we need to create a controller class in apex.

Please notice that the apiVersion for controller class must be 23 or above.

global class JSremotingController {

     @RemoteAction

     global static OuterWrapper getOuterWrapperObject(string oppId){

         return null;

     }

   @RemoteAction

   global static OuterWrapper setOuterWrapperObject(String jsonString, string oppId){

      return null

   }

global class InnerWrapper{

   public string name {get;set;}

   public string description {get;set;}

   public InnerWrapper(String strName, String strDesceription){

      this.name = strName;

      this.description = strDesceription;

   }

}

global class OuterWrapper{

  public String oppName {get;set;}

  public String oppDescription {get;set;}

  public List<InnerWrapper> listOfInnerWrapper {get;set;}

  public List<String> listOfStr_SelectOptions {get;set;}

  public OuterWrapper(Opportunity o){

     listOfStr_SelectOptions = SelectOptions_Global;

     listOfInnerWrapper = new List<InnerWrapper>();

     oppName = o.Name;

     oppDescription = o.Description;

   }

  }

}

let's dig the code step by step-

@RemoteAction

global static OuterWrapper getOuterWrapperObject(string oppId){

}

this method is defined as remote action by @RemoteAction tag

it must be declared with global & static keyword because the function is related to class instance. It will be called by js remoting to get the data on VF page.

@RemoteAction

global static OuterWrapper setOuterWrapperObject(string oppId){

}

this method is same as above just the difference is we will use this to update the opportunity description.

There are two wrapper class. One is main class & other class list used in main class. The reason why I took this wrapper class structure to explain how we can deserialize the input (json string) directly to wrapper class.

Now again taking the implementataion part for the methods-

@RemoteAction

global static OuterWrapper getOuterWrapperObject(string oppId){

   Opportunity opp = [Select o.Name, o.Id, o.Description From     

   Opportunity o WHERE Id=:oppId];

    OuterWrapper objOuterWrapper = new OuterWrapper(Opp);

    List<InnerWrapper> WrapperT = new List<InnerWrapper>();

    listOfInnerWrapperT.add(new InnerWrapper('TEST1','DESC1'));

    objOuterWrapper.listOfInnerWrapper = listOfInnerWrapperT;

   return objOuterWrapper;

}

in this method we will pass a opp od from the VF page, the code will get the detail from the database create wrapper & return this.

In JS we will get a js object of OuterWrapper, we can directly access it's field same as we get the value we get in javascript code. You will get it more clearly as I will add the vf page in nect couple of lines.

@RemoteAction

global static OuterWrapper setOuterWrapperObject(String jsonString, string oppId){

   OuterWrapper objOuterWrapper =   

   (OuterWrapper)System.JSON.deserialize(jsonString,OuterWrapper.Class);

  Opportunity opp = new Opportunity(Id=oppId);

   opp.Description = objOuterWrapper.oppDescription;

  update opp;

  return objOuterWrapper;

}

this method simply updateting the opp description. This method will be called from the VF page buttton.

Now let's move on the VF page detail-

first of all you need to include the js files for this. There are two js files-

<apex:includescript value="{!URLFOR($Resource.JS,'jquery-1.4.2.min.js')}" />

<apex:includescript value="{!URLFOR($Resource.JS,'mustache.js')}" />

I have to include these files because I am using the mustache in the page, you can avoid this if not required.

function getOuterWrapperObjectByJSRemoting(oppId) {

  JSremotingController.getOuterWrapperObject(oppId, function(result, event){

  if (event.status) {

   result_Global= result;

   var template = "<b><span>Opportunity Name:</span>  {{oppName}}</b><br/><br/><span>Opportunity Description</span>  {{oppDescription}}";

   var html = Mustache.to_html(template, result);

   $('#SPANOppName').html(html);

  } else if (event.type === 'exception') {

    alert("exception");

    document.getElementById("responseErrors").innerHTML = event.message;

  } else {

   alert("else");

   document.getElementById("responseErrors").innerHTML = event.message;

  }

}, {escape:true});

}

by this js method we will pass a opp id & will get the detail in jsObject result. You can check/run result_Global on the console to check the structure of the js object.

function SetOuterWrapperObjectByJSRemoting(jsonString, oppId){

  JSremotingController.setOuterWrapperObject(jsonString, oppId, function(result, event){

  if (event.status) {

    result_Global2 = result;

    alert('updated..!!');

  } else if (event.type === 'exception') {

    alert("exception");

    document.getElementById("responseErrors").innerHTML = event.message;

  } else {

    alert("else");

    document.getElementById("responseErrors").innerHTML = event.message;

  }

 }, {escape:true});

}

this method simply udate the opp description by js remoting.

function getJSONObject(){

//Outer Wrapper

var objOpportunityWrapper = new Object();

objOpportunityWrapper["oppDescription"] = $("#inputOppDescription").val();

var InnerWrapper = new Object();

var InnerWrapperArray = new Array();

InnerWrapper["name"] = 'TEST Name1';

InnerWrapper["description"] = 'TEST Description1';

InnerWrapperArray[0] = InnerWrapper;

objOpportunityWrapper["listOfInnerWrapper"] = InnerWrapperArray;

JSON_STR = JSON.stringify(objOpportunityWrapper);

SetOuterWrapperObjectByJSRemoting(JSON_STR,Opp_Id);

}

I think this is the most important method on the js. this method is going to create structure same as the wrapper class. it there is any difference in between the object you created on JS & controller class than the json string will not be serialized in controller.

let's put the whole code in one place-

class code will be

global class JSremotingController {

  private static List<String> SelectOptions_Global =    

  getFieldDescibe(Opportunity.LeadSource.getDescribe());

  

public static List getFieldDescibe(Schema.DescribeFieldResult Res){

  List<String> listOfOpt = new List<String>();

  List<Schema.PicklistEntry> pe = Res.getPicklistValues();

  if(pe != NULL && pe.SIZE()>0){

    for(Schema.PicklistEntry p:pe){

       listOfOpt.add(p.getLabel());

    }

  }

  return listOfOpt;

}

@RemoteAction

global static OuterWrapper getOuterWrapperObject(string oppId){

  Opportunity opp = [Select o.Name, o.Id, o.Description From Opportunity o WHERE Id=:oppId];

  OuterWrapper objOuterWrapper = new OuterWrapper(Opp);

  List<InnerWrapper> listOfInnerWrapperT = new List<InnerWrapper>();

  listOfInnerWrapperT.add(new InnerWrapper('TEST1','DESC1'));

  objOuterWrapper.listOfInnerWrapper = listOfInnerWrapperT;

  return objOuterWrapper;

}

@RemoteAction

global static OuterWrapper setOuterWrapperObject(String jsonString, string oppId){

  OuterWrapper objOuterWrapper =  

  (OuterWrapper)System.JSON.deserialize(jsonString,OuterWrapper.Class);

  Opportunity opp = new Opportunity(Id=oppId);

  opp.Description = objOuterWrapper.oppDescription;

  update opp;

  return objOuterWrapper;

}

global class InnerWrapper{

  public string name {get;set;}

  public string description {get;set;}

  public InnerWrapper(String strName, String strDesceription){

    this.name = strName;

    this.description = strDesceription;

 }

}

global class OuterWrapper{

  public String oppName {get;set;}

  public String oppDescription {get;set;}

  public List<InnerWrapper> listOfInnerWrapper {get;set;}

  public List<String> listOfStr_SelectOptions {get;set;}

  public OuterWrapper(Opportunity o){

    listOfStr_SelectOptions = SelectOptions_Global;

    listOfInnerWrapper = new List<InnerWrapper>();

    oppName = o.Name;

    oppDescription = o.Description;

  }

}

}

VF Page

<apex:page controller="JSremotingController" sidebar="false" showHeader="false">

 <apex:form id="form1">

 <apex:includescript value="{!URLFOR($Resource.JS,'jquery-1.4.2.min.js')}" />

 <apex:includescript value="{!URLFOR($Resource.JS,'mustache.js')}" />

 <script type="text/javascript">

   var result_Global;

   var Opp_Id = '006900000071POn';

   function getOuterWrapperObjectByJSRemoting(oppId) {

  JSremotingController.getOuterWrapperObject(oppId, function(result, event){

  if (event.status) {

      result_Global= result;

var template = "<b><span>Opportunity Name:</span>  {{oppName}}</b><br/><br/><span>Opportunity Description</span>  {{oppDescription}}";

       var html = Mustache.to_html(template, result);

       $('#SPANOppName').html(html);

                      

   } else if (event.type === 'exception') { 

       alert("exception");

       document.getElementById("responseErrors").innerHTML = event.message;

   } else {

       alert("else");

       document.getElementById("responseErrors").innerHTML = event.message;

   }

}, {escape:true});

 }

$(document).ready(function(){

   getOuterWrapperObjectByJSRemoting(Opp_Id);

});

var result_Global2;

 function SetOuterWrapperObjectByJSRemoting(jsonString, oppId){

  JSremotingController.setOuterWrapperObject(jsonString, oppId, function(result, event){

  if(event.status) {

    result_Global2 = result;

       alert('updated..!!');

  } else if (event.type === 'exception') {

       alert("exception");

       document.getElementById("responseErrors").innerHTML = event.message;

  } else {

       alert("else");

       document.getElementById("responseErrors").innerHTML = event.message;

  }

 }, {escape:true});

}

var JSON_STR;

function getJSONObject(){

  //Outer Wrapper

  var objOpportunityWrapper = new Object();

  objOpportunityWrapper["oppDescription"] = $("#inputOppDescription").val();

                    

  var InnerWrapper = new Object();

  var InnerWrapperArray = new Array();

  InnerWrapper["name"] = 'TEST Name1';

  InnerWrapper["description"] = 'TEST Description1';

  InnerWrapperArray[0] = InnerWrapper;

  objOpportunityWrapper["listOfInnerWrapper"] = InnerWrapperArray;

  JSON_STR = JSON.stringify(objOpportunityWrapper);

  SetOuterWrapperObjectByJSRemoting(JSON_STR,Opp_Id);

}   

                    

</script>    

  <apex:pageBlock title="GET DATA BY JS REMOTING">

 <apex:pageBlockSection >

  <span id="SPANOppName"></span>

 </apex:pageBlockSection>

  </apex:pageBlock>  

  <apex:pageBlock title="SET/UPDATE DATA BY JS REMOTING">

<apex:pageBlockSection >

  <apex:pageBlockSectionItem >

  <span>Opportunity Description</span>

  <input type="text" id="inputOppDescription" />

  </apex:pageBlockSectionItem>

<apex:pageBlockSectionItem >

<input type="button" onclick="getJSONObject()" value="Update" class="btn"/>

</apex:pageBlockSectionItem>

 </apex:pageBlockSection>

   </apex:pageBlock>

  </apex:form>  

</apex:page>

to run this example you just need to copy & paste & change the Opp id in in the top of the vf page.

 var Opp_Id = '006900000071POn';

the page ui will be as below