Lock Product Backlog - TFS Web Extension

Update 20/06/2014: This extension does not work with TFS 2013 Update 2 (I will get round to fixing this), you can still use the code example as a guide however.

I love TFS, particularly the new agile features that have been built into the TFS web access portal - which has now become the home for TFS work item management.  This web portal has been built to support touch devices, so stand-up meetings can take place around a touch-enabled large screen and agile team members can update their TFS work items directly.  In earlier versions of TFS, I've seen customers maintain manual kanban boards with post-it notes and then retrospectively update the corresponding TFS work items after the stand-up - so being able to quickly update the work items via the web UI is a big time saver and ensures that TFS always remains a single source of the truth.  The UI is designed to be used with either mouse or touch screen devices, so for those customers with large touch enabled display screens - having the stand-up around the screen and being able to view and update work items via touch is a great way to interact with the backlog.

However, some customers are still relatively new to adopting agile processes and therefore still transferring any outstanding product backlog into their shiny new TFS installation.  One customer recently had an issue with the Product Backlog ordering within TFS web access - in that as they were using touch-enabled devices when viewing the TFS web access portal they were accidently re-arranging and updating the Product Backlog order.  If you have a large backlog where the entire list is not visible at once, and have spent valuable time prioritising items, accidental updates are a hindrance.  However, one of the great benefits of TFS is the audit capability that's built in, so it's always possible to view any change that has been either intentionally or accidently made.  Currently, there is no built in functionality to rollback a TFS work item to a previous state, so you would have to write your own application to achieve this using the TFS API. 

This got me thinking though, wouldn't it be nice to add a simple "lock" facility to the UI to prevent such unwanted updates?  So here's a simple implementation of that feature:

Whilst in the "locked" state, you can still double click individual work items to view them, which is useful to still be able to interact with them - you just won't be able to assign them to an iteration or re-order the items.  The default view is to always lock the items, so that you make a conscious decision that you want to update anything.  This extension is provided below and has been tested in TFS 2012 and TFS 2013, but is provided as is. 

To install the extension navigate to your TFS administration control panel: http://[MACHINE]:8080/tfs/_admin/_extensions, select Install, choose the zip file and then OK:

You'll then need to enable the extension:

and confirm:

Then navigate back to the TFS Project team backlog (you may need to refresh the page) and the new menu item should appear:

Documentation around custom control development for TFS Web Access is limited, there is an excellent article here though that will take you through the process: http://blogs.msdn.com/b/serkani/archive/2012/06/22/work-item-custom-control-development-in-tf-web-access-2012-development.aspx.  I've included the *.debug.js javascript file so you can see how I've done this one and it will give you a starting point.  Thanks to my colleague Phil Stockwell for the JQueryUI pointer!  If you do decide to have a go and create your own, this article makes debugging much easier: http://www.alexandervanwynsberghe.be/debugging-tfs-web-access-customizations/

Gordon Beeming (ALM Ranger) has since released a book on Team Foundation Server 2013 Customisation, which is also well worth checking out.

Let us know if you have questions or feedback.