Mathias Olausson [MVP]

Have you ever wanted to add custom behavior to the TFS work item tracking system? TFS is very flexible when it comes to adding fields, rules and state transitions. But when we need more specialized behavior there is usually only one solution – to implement custom work item controls. It’s pretty straight-forward to implement a work item control (http://witcustomcontrols.codeplex.com/ has some good examples), but we need to implement the control for each client we want to use it (Visual Studio, Web access) and also the control must be deployed to each machine where the client is run.

A much simpler approach can be to implement the extension as a web page and host the web page in the work item form. This solution works with any client (since it’s just a web page) so you won’t have to have one implement for each client type. In TFS 2010 the WebpageControl was introduced, which can be used to host a custom web page inside a work item form. We can configure the control to pass data from the work item to the web page when the control is displayed. So with the WebpageControl we can use the TFS API to write a web page that can surface more or less any data in the work item UI.

In this example I will extend the Test Case work item type with a tab that shows the test suites where the test case is used together with the status of the latest test run in each of the suites.

Note: it’s recommended to work with TFS customization in a sandbox environment so you don’t disturb production use of your TFS. A very easy way to get a development environment for TFS is to use Brian Keller’s Visual Studio / TFS 2012 virtual machine.

The WebpageControl isn’t that much documented on MSDN so I’m going take you through the steps of extending a work item type with the control and linking it to a custom web page.

1. Implement the web page for the extension you want. Since this is just a web application it’s simple to develop, debug and test the extension. Design the page so data can be passed from the work item to the page using URL parameters.

   

2. Add a WebpageControl to the work item type. The easiest way to add a control is to use the Process Template Editor (part of the TFS Power Tools):

   

   Make sure to set the Dock property to Fill if you want the control to use the whole tab space.

3. Configure the WebpageControl using the Control Settings:

   

   Set the URL to display and other properties as appropriate:

   

   Note the use of field names. You can reference any field with it’s unique reference id, for instance the Team Project name would be $(System.TeamProject).

4. Save and update the work item type definition. Refresh the client you are using to make sure the test case type definition has been updated.
5. Open a test case and see the new control with the custom web page content appear under the Test Suites tab.

   

Simple, wasn’t it? Feel free to leave comments on what you think of this approach.