TFS Kanban Buddy.

Magnus Siverbrant
8 min readJun 17, 2014

--

How we customized Microsoft Team Foundation Server into a powerful Kanban Tool.

TFS Kanban Enhancements.

TFS out of the box does not support Kanban wery well it is a lot better in TFS 2013 than in 2012 in which we started. But with some client side Javascript we made it into a very capable kanban tool and all the functionality we have built is available to you as well. Neetly packaged in a chrome extension that is free in chrome store.

TFS Kanban Buddy

All functionalities mentioned below have been built into a chrome extension. Easily configurable through a web interface

All modifications is made client side in the browser only using data available in the DOM by standard TFS board. We use naming conventions on tickets to achieve all visual enhancements. The standard api:s that populate the board is used to collect data about the board.

We are running TFS 2013 on premise but the extension also work with TFS 2013 in Microsofts cloud . if you are interested in our chrome extension it is available as TFS Kanban buddy on chrome store. (There is also a 2012 version available as is with the functionality that we had when our company moved from TFS 2012)

Our Story

We were a team that is developing e-Comerse solutions. There had been some problems in the past so when we wanted to try something new we decided to go the Kanban route to Agility and drive improvements.

Unfortunatly the involved people are scattered over 4 different buildings in 3 different countries so going with a Physical board would have been quite hard.

The development is done With C# and the tool we are appointed to use is TFS 2013 we were told “TFS has got Kanban support” so that should be easy right?

Our basic work types CR (change request) is refined and broken into AT:s (acceptance test) that is fed into development. when all AT:s are validated the CR is done

Both CR:s and AT:s are of the tfs type PBI.

Bugs are just bugs.

We have set it up so that the AT is the successor Of a CR. This was the only way we could setup a TFS behind the scenes links between the PBI:s and show both on the same board.

The TFS Kanban board

The kanban board is supposed to be a hub driving our work. We found that there were really important parts missing to make the default setup act the part as the information Radiator a kanban board is supposed to be .

The Kanban Support in TFS 2012 (and 2013) is just a basic kanban board added on top of the regular scrum board.

This is what the Standard Kanban board looks like

Plain TFS Kanban Board

All tickets are displayed the same way except items that are not started or done they have a different colour.

Visually distinguishing items of different work types on the board can just be done by naming conventions the same goes for Blockers and Expedites and there is no support at all out of the box to handle these core concepts in line on the same board as the rest of the work.

Blockers. Behind the scenes we added a custom field called blocked and introduced a naming standard for blocked items as well (We no longer use the custom field just the naming convetion)

Expedites. We used multiple team capability and the Classification to differentiate Expedites behind the scenes and a naming standard for this as well on top of that a mirrored board showing just the expedites (We no longer use the custom field or the mirrored board just the naming convention)

The whole setup run in meetings over lync with low resolution sharing could be summarised in one word “Frustration” the board is there but except for counting cards in lanes it is inadequate as a kanban tool.

Then one of our developers spent a late night playing with UserScripting and this is what our board looked like the next day!

Now that is A millon times better we color cards based on the firstword in the title

  • CR:s Are Blue (CR)
  • AT:s Are Standard Colour (AT)
  • Expedites Are Orange (EX)
  • And Blockers are Red (BL)
  • (Now we have 11 colours to choose from and prefixes are configurable through a web interface see example below)
TFS Kanban board with colored cards

This really helped our daily meeting.

Relations

Our CR:s had a tracking number so we added the tracking number to the items both AT and CR but trying to find what cards had the same tracking number was not good enough so we implemented functionality for this. The first word in the title starting with # makes the word into a relation. Adding #12345 to a couple of cards titles make them related and hovering a card with relations will fade all tickets not related to the hovered ticket making it easy to see which cards belong together on the board.

Howering a ticket with relations will fade all unrelated tickets

Due Dates

When is it this ticket needs to be done? Dates on the format 2015–02–20 is highlighted with a black background. If the due date is more then a week away the text is white, less then a week the thext will be yellow and less then two days red.

Due dates is highlighted on the tickets

Project Links

Another problem was the Definition of done and other process information that we use daily while working on tickets these are stored on our teamplace and manually adding links or clicking our way there was not happening. We wanted quick access to from the board so we added custom links.

Custom TFS links makes it easy to navigate. these are also available on other pages in tfs

Direct links to folders documents and wikipages that are central to our kanban implmentation added alongside standard links on top of the board. (10 links available to configure)

WIP Limits

When we introduced wip limits TFS only slightly change the coloring of the text in the header of the column and the concept of having an in progres lane and a Done lane with a shared wip limit is not available in TFS. So ones again we built it. Now a lane with a wip limit of 0 (zero) is considered a done column attached to the column to the left and we highlight a broken wip limit by coloring the background of the column red. we also introduced a color for being at the limit.

Highlighting broken wips and anabling done lanes to add wip to the in progress lanes wip

Filter cards on the board

At one point there was more work and more people added to the board. (a project, bug corrections, ) and the coloring scheme didn't feel like it filled our need any more there was just too many things there on the board and we wanted to be able to track the different contexts separately so we added a functionality where if the last word in the title started with a | then it was considered a filter so ending the title of a few cards with |project enables us to filter out all tickets not having this title ending. This once more elevated our little enhancement to another level. we also have the ability to only show cards without a filter. We have also added the ability to filter by freetext.

TFS kanban board filtered for cards with project filter

Data

Kanban is metric centric but TFS has no way of providing historical data of how a card has moved across the board. Information on how long a card has been in the current lane is also missing so in order to provide this type of information we built functionality to capture snapshots of the board on all board loads save this data locally in the browser and aggrigate this data into exportable reports. The reports can be exported as Json or CSV.

You get to the reports by clicking flow data next to the Board link

Snapshot:

How the board looks currently and with data about how long the items have been in the current lane and how long it has been blocked.

Snapshot of how the TFS Kanban board looks right now with info on how long the tickets has been on the board, lane. if the card is blocked you can see how long it has been blocked

Flow report:

A report showing historical data of when a card has been in specific lanes and when it has been blocked you can filter the data if you want

Flow Data:

Shows how long a card has been in the different lanes on the board (a very wide table) you can filter this data

this functionality is handy for exporting data to Excel for analysis.

CFD (beta)

The collected data can be shown in the form of a CFD. right now the functionality is kind of limited but you can chose what columns you want to show

Complete cfd data
By filtering out some lanes you can analyse WIP over time and by hovering the chart you can see the WIP of the individual Lanes

Cycle time

cycle time is another thing you want to be able to track. you can choose what column to start and stop tracking cycletime and filter out the cards you want to see

Configuration

Configuration is done through a web interface you reach the configuration by clicking the extension plugin icon

TFS Kanban Buddy icon is the one with four differently colored cards

The config looks like this for the Scrum and kanban board

adding two prefixes separated by semicolon makes it possible for two prefixes to use the same color “BUG;BR”

you can configure this any way you see fit.

Links

Sharing Configurations

Having a big team and a rich board where the modifications is done locally proved more tedious than we first thought so in order to make it easier to handle this we first created functionality to export/import config as json files and the natural evolution of this was to add functionality for automatic import of settings from an url. (Pastebin github or whatever) in our case we put the config file on our teamplace so it was easy to update but the limitation in our teamplace to not allow json files made us rename it as a .jpg file instead.

Code

code is freely available on github if you miss some functionality feel free to add it https://github.com/paddelkraft/TfsKanbanBuddy

--

--