JQuery – Jitendra Zaa

Salesforce REST API Playground

Jitendra Zaa — Tue, 25 Feb 2014 03:55:21 +0000

What is REST API ?

In my words, Getting data from Other System or Same System using HTTP request is known as REST API.

If you know, how website works, you know REST API. Before REST API, there was SOAP request which needed lots of configuration and very tightly coupled. If you make any modification , you had to modify client side also by generating stubs / proxy classes again. There were many more disadvantages which got address by REST API. However, it doesn’t mean we don’t need SOAP.

Back to REST API, It is very simple to setup and almost any programming language can make HTTP request so very easy to get data from other source. Return type of REST API can be XML, Simple HTTP, JSON or any media like image. However, JSON is very popular response type amongst all.

In Past, I have already written one article demonstrating REST API usage.

How to use Salesforce REST API using JQuery in Visualforce ?

REST API Playground : I have created Simple Visualforce page, which demonstrates how to use REST API of Salesforce. It is written in Visualforce with the help of JQuery. You can study this code and play with it in your organization, you just need to copy and paste it.

You also need to add URL “http://cdnjs.cloudflare.com” in Remote Site Settings, so that salesforce will allow Visualforce page to get JQuery library from CDN.

Video Demo :

REST API playground in Salesforce

Complete Visualforce page :

Client side Templating using Underscore.js and JQuery

Jitendra — Thu, 02 Jan 2014 02:32:21 +0000

Recently, I ran into requirement where I was getting JSON response and needed to render it on my Mobile application. I had two Options, Server side processing and Client side Templating. I studied and checked both way ; came to conclusion on using Client side Templating. There are many plugins and libraries available however there is one which stands different, easy to use and faster as compared to others which is “Underscore.js“.

Underscore.js library needs JQuery as prerequisite. You can find complete documentation here, Only remember following three points :

<% %> – to execute some code
<%= %> – to print some value in template
<%- %> – to print some values with HTML escaped

Example Source code:

Below Example shows how to render JSON in tabular format using Underscore.js and JQuery.



	
		Demo of Templating using underscore.js
	








    
        
            Sr. No
            Name

Output:

Underscore.js

How it Works ?

Line 31, we are going to append data in this table.
Line 42-48, defines template on how we are going to render JSON values. We are looping through values and rendering in “td” tag of “table”.
Line 73, Single line is doing the magic here. It is getting template which is defined between line 42 and 48 and then rendering values in table defined at line 31.

Please leave comment for feedback.

JQuery Based Raffle in Salesforce

Jitendra — Fri, 28 Jun 2013 21:19:02 +0000

Recently i run into very interesting scenario where i had to randomly take name of few contacts. There are many ways to do it but I thought why not to implement this functionality in Salesforce with help of some Javascript? So i came up with this – JQuery based Raffle in Salesforce.

I have created a List View Button, where I select few contacts and using JQuery, One Contact is selected Randomly. Assuming that you already know how to create List View Button, I will share my Visualforce and Controller Extension code with you.

Also, Please note that to run this demo, you need to have JQuery file in your static resource with name “JQueryAndCss”.

JQuery Based Raffle in Salesforce

Visualforce – PlayRaffle

Controller Extension : PlayRaffle

public class PlayRaffle {

    public List contactNames {get;set;}

    public PlayRaffle(ApexPages.StandardSetController controller) {

        contactNames = new List();
        List sfdcContacts = (List)controller.getSelected();
        Set conIds = new Set();
         for(SFDC_Contact__c s : sfdcContacts )
        {
            conIds.add(s.Id);
        }

        sfdcContacts = [Select Name, Last_Name__c FROM SFDC_Contact__c Where Id IN : conIds];

        for(SFDC_Contact__c s : sfdcContacts )
        {
            contactNames.add(s.Name+' '+s.Last_Name__c);
        }

    }

}

AutoComplete Component in Visualforce using JQueryUI

Jitendra — Fri, 28 Jun 2013 18:23:42 +0000

In this tutorial, I am going to explain very Simple AJAX and JSON based Auto Complete component with the help of JQuery UI. First I am assuming that you already have Static Resource of named “AutoCompleteWithModal“. This Static resource has all images, CSS and JQuery library needed to implement this component.

In one of my old post, I have already explained that how to generate JSON in Visualforce page. So Considering same article I have create Visualforce page named “Account_JSON” which returns list of Accounts on basis of text entered in input field.

Live Demo :

try searching “gen” or “edg” and spacebar, It will load account after one space.

Visualforce Account_JSON :


{!JSON}

Controller AccountJSONCreator :

public with sharing class AccountJSONCreator {

    public String getJSON()
    {
        String AccountName = Apexpages.currentPage().getParameters().get('AccName');
        List wrp = new List();
        for (Account a : [Select a.Id, a.Website, a.Name, a.BillingCountry, a.BillingCity
                            From
                                Account a
                            WHERE Name Like : '%'+AccountName+'%' ]) {
               AccountWrapper w = new AccountWrapper (a.Name, nullToBlank (a.BillingCountry), nullToBlank (a.BillingCity));
               wrp.add(w);
            }
        return JSON.serialize(wrp);
    }

    public String nullToBlank(String val)
    {
        return val == null ?'':val;
    }

    public class AccountWrapper
    {
        String AccName,BillingCountry,BillingCity;

        public AccountWrapper(String aName, String bCountry, String bCity)
        {
            AccName = aName;
            BillingCountry = bCountry;
            BillingCity = bCity;
        }
    }

    static testMethod void AccountJSONCreatorTest() {
        AccountJSONCreator obj = new AccountJSONCreator();
        obj.getJSON();
    }
}

Now let’s create a Component which will make AJAX request to above visualforce page “Account_JSON” and Parse JSON page using JQuery.

Component Autocomplete_Component :


 








{!ComponentLabel}

Now Visualforce page, which will host above Component.

Viusalforce Page : AutoCompleteDemo

JQuery UI and JSON based AJAX AutoComplete Component in Salesforce

Download Static resource – AutoCompleteWithModal

Salesforce Helptext like Custom Tooltip using JQuery

Jitendra — Mon, 04 Feb 2013 01:24:50 +0000

Welcome back Readers. This is my first blog entry for year 2013, i know its too late. However i can ensure that i have lots of unique post which will come this year. I am starting this year with very light post , mimic the help-text style of Salesforce.

Salesforce like Helptext – Tooltip using JQuery

Download Salesforce Helptext like Tooltip using JQuery – Source Code

Most of the time when i override Visualforce page, customers many time demand for same Standard page layout.

apex:inputField and apex:outputField shows their help bubble (if applicable) when nested within a pageBlockSection component automatically.

If you want to provide your own text instead you can by utilizing the helpText attribute on pageBlockSectionItem. Also you can access the help text within an expression by using the respective $ObjectType global as such:

$ObjectType.Account.Fields.myField__c.inlineHelpText

However, there are scenario when we cant use pageBlockSection component. So, i came up with my own helptext CSS and javascript. For this post i am using JQuery and JQuery tooltip plugin.






Salesforce Helptext like Custom Tooltip using JQuery











Sample

Download Salesforce Helptext like Tooltip using JQuery – Source Code

Change year range in Datepicker – Salesforce

Jitendra — Thu, 20 Sep 2012 12:52:49 +0000

In Datepicker control of salesforce, most of the developers must have faced issue on year range for Datepicker control. We cannot configure the year range in standard date picker control. However, for a long time i am using a JQuery code to change the range of years in Datepicker and thought to share with you. You can find similar solution at many places but thought to add in my articles library also.

Year Range in Salesforce Date Picker

So, lets start to resolve this problem. The only thing we will need is Javascript based Home page Component.
Navigate to “Set up | App SetUp | Customize | Home | Home Page Components”.
click on “New” Custom Component. In Next screen you will prompted with the type of Homepage component.

Homepage Component Type in Salesforce

Select “HTML Area”.
In Next screen, click on checkbox “Show HTML” as shown in below image.

Javascript code in Home Page component – Salesforce

Now write below Javascript code in HTML area :

Note:

While importing JQuery from Google or any other CDN, don’t write “http” protocol. It will automatically detect the protocol.
Don’t write any single line comment, as Salesforce will internally convert above Javascript code into single line. And if you write any single line comment then everything after that will be commented. Multiple line comment will work.
If you are using Datepicker in custom Visualforce page and if sidebar is not enabled then above work around will not work.
We are hiding the home page component itself by line “parent().parent().hide()”, as there is no need to show this component to end user.

Update – 23-Jul-2015

Above solution will not work after Summer 15 as HTML area is changed not to allow javascript, However you can check this SFSE thread for still workable workaround to inject above Javacsript.

Streaming API Using JQuery – Salesforce

Jitendra — Sun, 06 May 2012 11:40:48 +0000

Push technology is a model of Internet-based communication in which information transfer is initiated from a server to the client. Also called the publish/subscribe model, this type of communication is the opposite of pull technology in which a request for information is made from a client to the server. The information that’s sent by the server is typically specified in advance. When using Streaming API, you specify the information the client receives by creating a PushTopic. The client then subscribes to the PushTopic channel to be notified of events that match the PushTopic criteria.

In push technology, the server pushes out information to the client after the client has subscribed to a channel of information. In order for the client to receive the information, the client must maintain a connection to the server. Streaming API uses the Bayeux protocol and CometD, so the client to server connection is maintained through long polling.

The Bayeux protocol and CometD both use long polling.

Bayeux is a protocol for transporting asynchronous messages, primarily over HTTP.
CometD is a scalable HTTP-based event routing bus that uses an AJAX push technology pattern known as Comet. It implements the Bayeux protocol.

There is nice jQuery plugin available on web which implements Bayeux protocol and CometD.

Navigate here for Salesforce documentation for Streaming API.

Common Terms used in Streaming API:

Event : Either the creation of a record or the update of a record. Each event may trigger a notification.
Notification : A message in response to an event. The notification is sent to a channel to which one or more clients are subscribed.
PushTopic : A record that you create. The essential element of a PushTopic is the SOQL query. The PushTopic defines a Streaming API channel.

Example used in this article :

I want notifications about all opportunity whose status is won.
First step to implement any streaming API is to create the Push Topic, which is going to subscribed by all the clients.

Create PushTopic:

To create PushTopic, we will need the developer console of the Salesforce and assume that the name of the topic is “WonOpportunity”.

PushTopic pushTopic = new PushTopic();
pushTopic.ApiVersion = 23.0;
pushTopic.Name = 'WonOpportunity';
pushTopic.Description = 'Notify if the Opportunity won';
pushTopic.NotifyForOperations = 'All';
pushTopic.NotifyForFields = 'Referenced';
pushtopic.Query = 'Select o.OwnerId, o.Name, o.IsWon, o.Id, o.Amount From Opportunity o WHERE o.IsWon = true';
insert pushTopic;
System.debug('Created new PushTopic: '+ pushTopic.Id);

Salesforce Streaming API - Create Push topic

Step 2:
Download the CometD compressed archive (.tgz) file from http://download.cometd.org/cometd-2.2.0-distribution.tar.gz

Step 3:
In the extracted folder you will find the war file at location “cometd-2.2.0/cometd-javascript/common/target”.

Unpack that war file using below DOS command in Windows and same command will work on shell also

cd cometd-2.2.0/cometd-javascript/common/target
jar xvf cometd-javascript-common-2.2.0.war org/cometd.js

Salesforce UnPack war file - Streaming API

If you will not follow the above step and if use different “cometd.js” file then you may get error “Uncaught ReferenceError: org is not defined”

Step 4:
Extract the following JavaScript files from “cometd-2.2.0-distribution.tar.gz”

cometd-2.2.0/cometd-javascript/common/target/org/cometd.js (This file must be from war file)
cometd-2.2.0/cometd-javascript/jquery/src/main/webapp/jquery/jquery-1.5.1.js
cometd-2.2.0/cometd-javascript/jquery/src/main/webapp/jquery/json2.js
cometd-2.2.0/cometd-javascript/jquery/src/main/webapp/jquery/jquery.cometd.js

Step 5:
Create a Visualforce page with following code :

After saving this page, open same salesforce instance in other browser or tab and make change to any opportunity with status “won”, it will display an alert that opportunity is won.
Output:

Salesforce Streaming API Example

JSON Reponse:
following JSON response we gets from Streaming API. The Rows returned in Object depends upon the Push topic create earlier.

[
   {
      "channel":"/topic/WonOpportunity",
      "data":{
         "event":{
            "type":"created",
            "createdDate":"2012-05-05T10:06:45.000+0000"
         },
         "sobject":{
            "Name":"om",
            "IsWon":true,
            "Amount":null,
            "OwnerId":"00590000000Gl5VAAS",
            "Id":"00690000006C8yFAAS"
         }
      }
   },
   {
      "channel":"/meta/connect",
      "advice":{
         "reconnect":"retry",
         "interval":0,
         "timeout":110000
      },
      "successful":true,
      "id":"3"
   }
]

Debugging Streaming API:
We can use “firebug” plugin of Mozilla to check whether the http request is made or not from JQuery (comet). Following screen can give you little idea about the http (XHR) requests made from JQuery .

Firebug Tool - Debugging Streaming API of Salesforce

Download Static Resource used in this article for Streaming API example of salesforce

Output Video of Streaming API:

Gantt Chart in Salesforce using JQuery and JSON

Jitendra — Tue, 17 Apr 2012 19:30:40 +0000

I have searched a lot for any library available for the Gantt Chart however there are very few available on the web. Even i was not able to find out the chart in “Google API”.

In this article, i will delineate creating the “Gantt Chart” using JQuery and JSON. In previous article we have seen that how to generate JSON using Salesforce. So continuing the last article, i will use the same JSON reponse to create the “Gantt Chart”.

What is Gantt Chart?

A Gantt chart is a type of bar chart, developed by Henry Gantt, that illustrates a project schedule. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project.

In this example i am going to create the Gantt Chart for room reservation system. for this i am going to use the JQuery plugin for creating Gantt Chart found here.

Plugin uses following JSON format :

[{  "name"  : "Task#1"
  , "desc"  : " Task Desc"
  , "values": [
      {  "from"       : "/Date(1296547200000)/"
       , "to"         : "/Date(1296554400000)/"
       , "desc"       : "Task #1
"
       , "customClass": "ganttRed" (optional)
       , "label"      : "Task #1" (optional)
      },
      {  "from"       : "/Date(1296637200000)/"
       , "to"         : "/Date(1296649800000)/"
       , "desc": "Task #"
       , "customClass": "ganttOrange" (optional)
       , "label": "Task #1" (optional)
      }
  ]
 },
 ...
]

However we know that the variable name “from” and “desc” are not valid in Apex because they are keyword. so as a workaround i am replacing the placeholders after the generation of JSON in previous article.

I have added the Static Resource of name “GanttChart” which includes the jQuery and jQuery plugin to draw the Gantt Chart.

Download Complete Source code for Gantt Chart in Salesforce with Static resources

following visualforce page renders the Grantt chart on the basis of JSON passed:

Gantt Chart will be rendered in div tag having class name as “gantt“.

Note : We have to Remember one thing that the Date must be passed in format of “/Date(VALUE_IN_MIL_SECOND)/” because regular expression is used by the plugin to identify and convert back date to javascript format.

Refer this API for Datetime methods of the Salesforce

The output will look like:

Gantt Chart in Salesforce

Download Complete Source code for Gantt Chart in Salesforce with Static resources

Handling Colon in Element ID in JQuery – Visualforce problem

Jitendra — Tue, 07 Feb 2012 19:25:12 +0000

Today i came across very known problem of jQuery and thought of sharing same with everyone. In Salesforce the element id is in the format of “j_id0:j_id3:j_id4:c_txt“. In previous post we have already discussed about getting the elementId in Visualforce.
When i tried to find the element in JQuery like $(‘#j_id0:j_id3:j_id4:c_txt’), i was getting the error on JavaScript console of the browser. After few searches, i got to know that this is known problem and faced by many of the developers.

Live Demo

So here i came with few workarounds as follow:

1. Using Traditional JavaScript:
This was the first option in mind and worked very well. We have to use it very straightforward as always,

var ele = document.getElementById("abc:xyz");

2. Using JQuery Approach 1:
In this approach instead of searching by $(“#abc:xyz”), we have to search like

var ele = $('[id="abc:xyz"]');

3. Using JQuery Approach 2:
Use double slash “\” in front of colon which will work as escape sequence

var ele = $("#abc\:xyz");

4. Using JQuery and JavaScript both:
We will find the element by traditional JavaScript and then assign it to the JQuery like

var ele = document.getElementById('abc:xyz'); ele = $(ele).val();

Complete Source Code demonstrating the scenario:

Handling Colon in Element ID in JQuery | ShivaSoft

Using    $("#abc:xyz")
Using     document.getElementById("abc:xyz")
Using    $('[id="abc:xyz"]')
Using double slash (Escape sequence) in front of colon    $("#abc\:xyz")
This is workaround. Get element by Javascript and pass to jQuery     var ans = document.getElementById('abc:xyz'); ans = $(ans).val();

Output -

Live Demo

Create Simple Drag and Drop Widget like iGoogle using JQuery

Jitendra — Thu, 19 Jan 2012 19:10:27 +0000

After reading this post you will come to know that how easy its to create the Drag and Drop functionality using JQuery.

To run this example you will need two javascript libraries as follow:

JQuery

JQueryUI

jQuery Drag and Drop Widgets

You can see the complete working demo here

Lets say you want to create the widget in two columns, so first create two DIV tags as shown below:

We are assuming that we can drag the elements from column1 to column2 and vice verse.

Now we will create the actual element which can be drag-gable.

Handle 1

Handle 2

As you can see
tag is used to create the heading and there are two (anchor) tags, one for delete and one for toggle.

Now its time to write the JQuery code to drag and drop the
tag with class=”dragbox”

$( function(){ $('a.maxmin').click( function(){ $(this).parent().siblings('.dragbox-content').toggle(); }); $('a.delete').click( function(){ var sel = confirm('do you want to delete the widget?'); if(sel) { //del code here } } ); $('.column').sortable({ connectWith: '.column', handle: 'h2', cursor: 'move', placeholder: 'placeholder', forcePlaceholderSize: true, opacity: 0.4, stop: function(event, ui) { $(ui.item).find('h2').click(); var sortorder=''; $('.column').each(function(){ var itemorder=$(this).sortable('toArray'); var columnId=$(this).attr('id'); sortorder+=columnId+'='+itemorder.toString()+'&'; }); sortorder = sortorder.substring(0, sortorder.length - 1) alert('SortOrder: '+sortorder); } }).disableSelection(); });

As you can see, on dom ready event using $() – which is equal to “$.ready()”, we have written the code like $(‘.column’).sortable(…) which will perform the drag and drop functionality. the “sortable” functionality is used to save the state of the widget in database so that next time you can load the widget in order which they are previously for this you will need to do some extra code here. The sort result is displayed using alert after element drop.

For the delete action, i have written the comment where server request can be called using Ajax to delete the widget. With the help of below CSS this example will be completed with nice look and feel.

.column{ width:49%; margin-right:.5%; min-height:300px; background:#fff; float:left; } .column .dragbox{ margin:5px 2px 20px; background:#fff; position:"relative"; border:1px solid #946553; -moz-border-radius:5px; -webkit-border-radius:5px; } .column .dragbox h2{ margin:0; font-size:12px; background:#946553; color:#fff; border-bottom:1px solid #946553; font-family:Verdana; cursor:move; padding:5px; } .dragbox-content{ background:#fff; min-height:100px; margin:5px; font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em; } .column .placeholder{ background: #EED5B7; border:1px dashed #946553; } .opIcons { background-image: url('iconSpirite.gif')!important; background-repeat: no-repeat; float:right; height:13px; width:13px; margin:0px 2px; } .maxmin { background-position:-26px 1px; } .delete { background-position:-269px center; padding-top:1px; }

You can see the complete working demo here