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 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).

a board

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. Smile

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

a card witht the work item id visible

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 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.

Leave a comment ?

10 Comments.

  1. Great work Tiago. I love your tenacity in finding a workaround to the issue.

    Cheers

    Anthony

  2. That’s been a great help Tiago.

    Is it possible to extend this to include the ID numbers of the Parent items as well that are displayed down the left hand side of the board? Our team has just moved to TFS 2012 and that is something that we use extensively and are missing greatly.

    Cheers,
    Tony

    • Are you using this on premises or on visualstudio.com?

      If using an on premises, you can install my taskboard enhancer which (amongs other things) adds work item ids to the parent work items.

    • My team asked for the same thing, so I added it to the bookmarklet. I’ve also made a few other tweaks. I added spaces between the number, the hyphen, and the title; and I’ve wrapped the bookmarklet in a self-invoking function, which allows it work correctly in Firefox.

      I assume the blogging software won’t let me include a JavaScript link, so edit your current bookmarklet and paste this code in instead.

      javascript:(function()%20%7b$(‘.tbTile’).each(function()%7bvar%20t=this.id.substring(5,999),n=$(this).find(‘.witTitle’).first();n.attr(‘_wi’)===undefined&&(n.attr(‘_wi’,t),n.html(‘%3cstrong%3e’+t+’%3c\/strong%3e%20-%20′+n.text()))%7d),$(‘.board-tile’).each(function()%7bvar%20t=this.id,n=$(this).find(‘.title’).first();n.attr(‘_wi’)===undefined&&(n.attr(‘_wi’,t),n.html(‘%3cstrong%3e’+t+’%3c\/strong%3e%20-%20′+n.text()))%7d),$(‘.taskboard-row:not(.taskboard-row-summary)’).each(function()%7bvar%20p=$(this).find(‘.taskboard-parent’).first(),t=(p.get(0).id!==undefined&&p.get(0).id.substring(17,999)),m=$(this).next().find(‘.witTitle’).first(),n=$(this).find(‘.witTitle’).first();m.attr(‘_wi’)===undefined&&(m.attr(‘_wi’,t),m.html(‘%3cstrong%3e’+t+’%3c\/strong%3e%20-%20′+m.text()));n.attr(‘_wi’)===undefined&&(n.attr(‘_wi’,t),n.html(‘%3cstrong%3e’+t+’%3c\/strong%3e%20-%20′+n.text()))%7d)%7d)();

  3. I installed the extension on tfs 2012 update 3, but I do not see any change on the task boards. Does this not work with update 3 or am I missing a step? I already activated the extension and refreshed / re logged in etc.

  4. How about you just tell us how to change the HTML markup to include the id rather than promoting your blackbox plug-in. There used to be a post on the net somewhere that detailed how to modify the HTML for work-items to do this – I can’t find it anymore argggg!

    Sorry, forcing my team to hit your bookmarklet aint going to cut it. The id should display just as the rest of the info does on the 1st rendering.

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackbacks and Pingbacks: