Adding work item ids to Team Foundation Server Board

 

[Update: this feature has now been included in my Web Access Extension Task Board Enhancer]

TL;DR add this url [TFS-View Work Item IDs on Cards](javascript:$('.tbTile').each(function(){var t=this.id.substring(5,999),n=$(this).find('.witTitle').first();n.attr('_wi')===undefined&&(n.attr('_wi',t),n.html(''+t+'-'+n.text()))}),$('.board-tile').each(function(){var t=this.id,n=$(this).find('.title').first();n.attr('_wi')===undefined&&(n.attr('_wi',t),n.html(''+t+'-'+n.text()))})) to your browser bookmarks(you rename if you want it), to allow you to view work item ids in TFS boards cards (works better if added to the bookmark/favorites bar)

Team Foundation board has been introduced in TFS 2012 and it’s a pretty effective way to visualize your team’s work and the state of a sprint, not only it’s useful during day to day use, but it’s also pretty useful during your daily sprint meeting (for example you can see this Adam Cogan video (short version) (long version)where he interviewed the team responsible for TFS’s agile tooling at Microsoft and how they are dogfooding it).

Besides the task board that is included in Team Foundation Server 2012, the team recently added to Team Foundation Service a Kanban Board.

If you want to see what’s the Kanban board it’s all about, you can see this short video in Brian Keller blog where he interviewed Gregg Boer about it.

But I don’t want to spend time talking about the board, in this post I’m assuming you already know the benefits of using the board and are already using it.

People are typically happy the board works, but from what I’ve gathered there are two feature that everyone seems to request.

• The ability to see tasks that are orphaned, in other words tasks that do not have a requirement/user story as a parent.
• Ability to color the cards based on work item conditions

Apart from those features (they seem pretty recurrent with almost everyone I talk to) people also seem to like to have in the card itself the work item number on the card. Currently the card contains three things the work item title, the remaining work and the assigned to.

So if you want to see  the work item number for a given card, you have to click on it, where you will be able to see the number on the work item editor.

TFS 2012 also introduced a new extensibility model for Web Access, but so far is not yet documented. So this seems like a good opportunity to kill, enhance the board functionality and study the extensibility model.

While I have been able to successfully create an extension to add work item ids to the cards. The implementation has too many shortcomings for me to publish it. While it works when the cards are first drawn it fails when one of the following situation occurs (by failing I mean the work item id is not visible).

• A work item detail is visualized (by clicking on in)
• the remaining work/assigned to is changed inline
• a task is dragged
• a new task is added to the requirement/user story

This happens either to my inability to find a (clean) way to react to these events  so I can (re) add the work item id  to the card or a limitation of the board current implementation which doesn’t has such mechanisms.

Either way, I really want to see the IDs on the cards, so I’ve devised a semi manual method that allows me to see on the cards the work item ids without incurring the latency of having to open the work item editor.

I’ve created a bookmarklet. It still needs to be manually triggered, but it’s frictionless and sufficiently unintrusive to be used.

So if you want to see the work item ids on the board (both the scrum board and the kanban board) you just have to active the bookmark when the board is visible. I’ve added it to the Bookmarks Bar/Favorites Bar (or whatever your browser calls it) and click on it, and all the ids will be visible.

The bookmarklet is idempotent, so you can invoke it as many times as you want, and the ids will only be added to the cards that do not already have it.

Here is the link [TFS-View Work Item IDs on Cards](javascript:$('.tbTile').each(function(){var t=this.id.substring(5,999),n=$(this).find('.witTitle').first();n.attr('_wi')===undefined&&(n.attr('_wi',t),n.html(''+t+'-'+n.text()))}),$('.board-tile').each(function(){var t=this.id,n=$(this).find('.title').first();n.attr('_wi')===undefined&&(n.attr('_wi',t),n.html(''+t+'-'+n.text()))})) bookmark it or add it to the bar (in most browsers you only need to drag it to the bar).

This has been tested in both Internet Explorer and Chrome. I’ve also tested this on Team Foundation Server 2012 (on premises) and Team Foundation Service

Calling this on any page other than the board pages has no effect.