So, I have been wanting to create a sidebar gadget for a while, but I also wanted it to be something useful. In this post I have attached the source code for a sidebar gadget that monitors the build status of a particular build definition.

Build Status sidebar Key Features:
  • Each instance of the sidebar gadget monitors a particular build definition.
  • An icon represents the status of the most recent build for that definition.
  • The text is a hyperlink to the build report for the most recent build.
  • It automatically polls (based on a Java Script timer) the server to get the latest info.
  • As you can see, you can create as many instances as your sidebar will hold!

How It Works:

The easy part was creating an activeX control in C# that does all the Object Model calls. This version of the sidebar app is not compatible with Team Build V1. It only works with the new Object Model in Visual Studio codename Orcas. If you take a look at the code for the activeX control, it should be very easy to follow. There are several properties for both input and output and a couple of important functions. GetStatus does most of the work, contacting the server and getting the list of builds back. It also sorts the builds using the CompareBuilds function. By sorting the results we can determine which build is the latest.

I looked at a lot of examples of sidebar gadgets to figure out the best approach to calling a web service. Basically, I found that writing an ActiveX control was the simplist approach for me. It is also how the built in sidebar apps contact their web services!

The hard part for me was figuring out the details of the Java Script that you have to write to get a Gadget to work in the Sidebar. I basically copied one of the built in gadgets and removed all the junk I didn't need. There is also some magic around getting the gadget to look right in the sidebar. I still haven't got that perfect, but someday I will. Part of that magic is knowing that the background image is key to rounding corners and handling any other transparency needs. But again the code should be fairly straight forward. BuildStatus.js does most of the work, loading the activeX control, setting up the timer, and refreshing the portions of the HTML that need updating. One confusing element is the Settings page. When you click on a gadgets wrench icon, you get the Settings page. The only confusing part is how information is transferred from the application to the Settings page and back. The methods that do this are System.Gadget.Settings.write and System.Gadget.Settings.read. These methods are important to understanding how a gadget "remembers" the settings for a particular instance. I don't pretend to understand them fully yet, but I haven't read the docs either ;)

How do I install the gadget?

Installation of this gadget is quite easy. First unzip the "CheckBuildServer" ActiveX control files somewhere on your Vista box. Then run Visual Studio codename Orcas as an administrator (under Vista the OS won't run apps as an admin unless you specifically tell the OS to do so by clicking Run as Administrator on the context menu). Open the application and build it. This will in turn register the ActiveX control with the OS. Now you can unzip the "BuildStatus.gadget" files into your gadgets folder (mine is C:\Users\jpricket\AppData\Local\Microsoft\Windows Sidebar\Gadgets). The new folder has to have a name like BuildStatus.gadget. Once you've done all that simply add the gadget to your sidebar and change the settings to point to your orcas server. Queue some builds and watch the status get updated.

Things you might want to change

You may want to change the default server, project, and definition in the BuildStatus.js file before adding the gadget to the sidebar. It will make it easier to add multiple instances of the gadget.

Check the timer interval in BuildStatus.js as well. Depending on the average time of a build, you may want to adjust this interval. I thought about adding it to the Settings page, but decided not to. Most users don't care how often it polls the server.

Now that you have an example, create your own cool sidebar app that provides info for some other part of TFS. And make sure you share it with the community :)