JSON – Jitendra Zaa's Blog

Ajax based AutoComplete / TypeAhead Directive in AngularJS

Previously we already discussed below Auto Complete components:

In this article, we will be creating TypeAhead Directive (Auto Complete) again in Salesforce However this time we will use AngularJs. Why we are using AngularJS ? We discussed already in one of article.

Getting Remote Data in JSON format using AJAX from:

To get data from remote source, we are using same code “Visualforce Account_JSON” and “Controller AccountJSONCreator ” explained in this article. Only thing I have added in wrapper class is ID field.

Other than AngularJs, we are also using Bootstrap in this article to make slick UI.

Angular Directive :

Directive is great way of declaring your own component and re-use throughout page. write once and re-use every where. Our directive will look like :

Pagination, Searching and Sorting of Data Table using AngularJS

We have already discussed “Basics of AngularJS” and “Simple Searching and Sorting“. In this article, we will add Pagination feature also to our previous example. What makes difficult is Sorting result when values are returned from Search and pagination is enabled. Unlike previous post we cannot use standard “OrderBy” filter provided by AngularJs framework, this time we have to create Javascript function inside Controller for Sorting purpose.

Prerequisite Libraries :

This post used “Custom Service”, so please read this article to understand Dependency Injection in AngularJs.

Searching Sorting and Pagination in Table using AngularJS

Table with Sorting and Searching using AngularJS

I hope, from last article you got basic information about AngularJS. This time, I will demonstrate how to add basic Searching and Sorting capability to data table using AngularJs.

Output will look something like this :

Searching and Sorting in Table using AngularJS

Prerequisite Libraries :

Why should I use JSON over XML ?

Why should I use JSON over XML ? Why JSON is given so importance these days ?

Many questions like these are asked many times by new developers. So, I decided to write this article. However last year I presented same topic and uploaded in SlideShare.

Before Winter12 release, for JSON related stuff we had to depend on external Libraries. However in Winter12, salesforce has added support for JSON natively on force.com plateform. Also, on every release Salesforce is making required changes in JSON library to make it more stable and more usable. I have shared many topics on JSON in past, on which you can have a look.

AutoComplete Component in Visualforce using JQueryUI

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.

Gantt Chart in Salesforce using JQuery and JSON

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"       : "<b>Task #1<br>"
       , "customClass": "ganttRed" (optional)
       , "label"      : "Task #1" (optional)
      },
      {  "from"       : "/Date(1296637200000)/"
       , "to"         : "/Date(1296649800000)/"
       , "desc": "<b>Task #</b>"
       , "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.

JSON output in Visualforce

In this article, i will demonstrate using the JSON.serialize() method provided by the Salesforce to convert the class into equivalent JSON String.

Before going into depth would like to explain the basic concept of JSON syntax for the newbie.

There are following thumb rules i have identified from my experience, please comment in this article if i miss something here:

The JSON stands for “Java Script Object Notation“.
JSON is used widely as an option to xml, because the xml is very verbose whereas the JSON is having very simple representation.
It Simply have a key and value pair combination.
DataTypes supported by the JSON are “Number, String, Boolean, Array, Object and null”.
Key and value pair are separated by colon “:”
Object is enclosed between curly brackets “{” and “}”.
Array is enclosed using square bracket “[“, “]” separated by the comma.

Example of JSON syntax:

{
     "firstName": "Jitendra",
     "lastName" : "Zaa",
     "age"      : 26,
     "address"  :
     {
         "streetAddress": "21 2nd Street",
         "city"         : "Nagpur",
         "state"        : "MH",
         "postalCode"   : "400008"
     },
     "phoneNumber":
     [
         {
           "type"  : "Mobile",
           "number": "212 555-1234"
         },
         {
           "type"  : "Home",
           "number": "646 555-4567"
         }
     ]
 }

Download Source code – Visualforce page as JSON