Mathias Olausson [MVP]

Build Status Badge for TFS and Visual Studio Online

with one comment

With the new Markdown support in Visual Studio Online you can easily create a great project Wiki with information relevant to your team. One nice thing to have there is the build status(es), which for instance the AppVeyor build system provides as a small image – a build badge. Here’s how that could look in a Wiki page:


Adding the build badge is done by simply including an image element in the Markdown page:


I really like how easy it is to create mashups of different services to visualize data for the team using Markdown.

As for the build badge I think this is something that would be nice to have included in the product, if you think so too, vote on the following UserVoice suggestion:


But until that eventually happens we can always solve it ourselves. So what is needed to do this? It’s actually really simple, just write a service that looks up the build status and returns an image containing the badge.

In this example I’ve solved it by implementing a standard ASP.NET MVC application. I’ve used a controller that accepts a team project and build definition name as query string arguments:


for example;

http: //

This request will return a .png image like this:


Ok, so how did I do this? Let’s look at the code.

To make it easy to generate the badge I’ve created 150×30 px images to draw the image. The Images folder contains a couple of images like the one below, which we’ll then draw the status text on.


The code to generate a badge image is implemented as a MVC controller action. The code below gets the details from the latest build, draws the badge image and finally returns it as an image/png stream as the result:


GetBadgeDetails is a small helper function to give us the data to render on the badge image:


Finally the DrawRoundedRectangle renders the bounding rectangle for the badge:


To get the build data we need a couple of references to TFS:

  • Microsoft.TeamFoundation.Build.Client.dll
  • Microsoft.TeamFoundation.Client.dll

The code to get the TFS build details is as simple as this:


That’s all. Build and deploy to your favorite IIS server and you’re ready to start serving build badges for your team!

Download the complete sample here.

Written by Mathias Olausson

December 30th, 2014 at 10:26 pm

Posted in Build,TFS 2013,VSO

One Response to 'Build Status Badge for TFS and Visual Studio Online'

Subscribe to comments with RSS or TrackBack to 'Build Status Badge for TFS and Visual Studio Online'.

  1. […] Build Status Badge for TFS and Visual Studio Online […]

Leave a Reply