Task Status Manager With ECMAscript and jQuery UI

February 01, 2011

What if you could manage your task statuses by just a drag and drop action? Wouldn’t that be cool? This was the idea that a colleague and I had last week.

Concept

For this concept I am only going to use the following task statuses:

  • Not Started
  • In Progress
  • Completed

To visualise the task items, I have created three task status blocks.

Concept layout

Concept layout

The task items will be retrieved with the SharePoint 2010 ECMAscript client object model.
jQuery and jQuery UI will be used to place the task items on the page and be able to drag and drop them.

How it is worked out

The task list that I am going to use contains the following items:

Task list items

Task list items

On a new page I added my conceptual layout to the page and the jQuery and jQuery UI script references inside a "Content Editor" web part. To be a more flexible, I also added another script reference that will contain the code for this solution.

Retrieve the task list items

The first thing that needs to be done is retrieving all the task items from the task list.

The "onListItemsLoadSuccess" function will be used to place the task items to the correct task status blocks.

This piece of code will result in:

Recieved tasks

Recieved tasks

Each task item contains its "ID" in a "ref" attribute.

Enable drag and drop

The task items are added with JavaScript to the page, this means that you cannot directly add the "draggable" handler to the task items. A solution for this problem is to live bind the "draggable" handler to the task items. The following jQuery helper function can be used to solve this problem.

When this function is added to the JavaScript file, the jQuery code can be written.

  1. Attach the “draggable” handler to the task items;
  2. Make it possible to drop items on the status blocks;

    • Add a new item to the status block when dropped;
    • Remove the dropped item, otherwise two task items will exists;
    • Create a call to the update function.

Currently it is only possible to drag around the items and drop them on another status block. The next step is to write update function.

Update the task item status

The update function will make use of the SharePoint ECMAscript client object model.

The "onQueryFailed" function is reused from the “Retrieve the task list items” section.

Demo

Download the source files.

Comments