JQuery Sortable and VisualForce

So todays topic of discussion is how to use the sortable method of JQuery within a VisualForce page to display and allow users to update the specic order of the records. I am going to cover this in it's most generic form and what you choose to do with it is up to your imagination. I was recently asked to create an interface for users to view a list of projects by department and provide them the ability to move these projects around based on priority etc and then update the list order. So our finshed result was very detailed lists with status icons for such things approved, priority level, color coded based on department and so on.

So lets get started. In your development account, the products object should already have an existing set of generic product records. So for the purposes of this tutorial I decided to go ahead and what was there, but you can use any existing or custom object of your choosing.

First thing we are going to do is add a new custom field to the object, I choose to name mine "sort order" and set the field type to number. Next lets create a new Apex class and name it ProductSort. In the Apex class lets go ahead and query the Product object and return a list ordering it by our new field which at the moment contains no data. Your code should look similar to this:

public  class ProductSort {
public list  p;
public Product2[] getp() {
 p=[Select Id,Name, sort_order__c From Product2  Order by sort_order__c];
 return p;
}
}

Next lets create a new VisualForce page (I just named mine Sort) and add a few references to the JQuery and JQuery UI libraries hosted on on Google. Then we are going to setup the JQuery Sortable list and embed an apex:repeat wthin it.

 



 


 



{!prod.Name}

Looking at the page you can see we have include statements to the JQuery and UI libraries, one to the Cupertino theme Style sheet(You can choose an existing theme or roll your own) and some minimal list styling. Next we have our function to intialize the sortable list based on the DOM Id of the object (#sortable). Within the <ul> tags we have an apex:repeat to display the list of products that we queried. If you look carefuly we are settting the id of each <li> to the record Id of the products, we are going to use this next to update the sort order within the product record.

Now if we take a look at the page you should see something simular to this:

You should be able to drag the products up and down within the list.

Now lets go ahead and tie into the Sortable method and update our sort order. There are alot of different ways you can go about this. For instance you could kick off an update routine within your Apex class, you could use a button on the page and allow the users to update all of the records at one time after they have finished getting all of the records sorted the way they want, and so on.

We are going to use Ajax to update the entire list each time a user changes the postion of a product. First we are going to add our includes to the Ajax libraries on our VisualForce page. Then on the update method of the sortable function we are going to iterate through our list and update the sort order id relative to its order within the array. You may also notice that there is a call to toggle within the script. I just created a div to provide feedback to the user that the list was updating and to please wait.

In this example we realy do not care what the previous sort order was and so we are just re-ordering the records each time. If you were filtering records out etc and wanted to just update the order of certain records while maintaining the exiting ones, you would just save the existing order into an array and then use that collection of values durring the update process. You can also add touchable events to the list which would provide the same functionality to users on an IPad or other touch based device.