In my last post we saw how to write a TFS Data Source Component. In this one I will explain how to use them to generate a TFS report like the one below leveraging existing ASP.NET controls.
1. First create a new ASP.NET page.
2. Second register the TFS Data Source component DLL that we built earlier with the following line
<%@ Register TagPrefix="Tfs" Namespace="TfsWebComponents" Assembly="TfsWebComponents" %>
3. Third we need to define a TFS Data Source for our report. So include the following snippet
<Tfs:TfsDataSource id="srcWorkItems" Runat="Server" SelectMethod="GetWorkItemsByQuery">
<SelectParameters>
<asp:Parameter Name="teamProjectName" Type="String" DefaultValue="Developer Solutions" Direction="Input"/>
<asp:Parameter Name="storedQueryName" Type="String" DefaultValue="kannans" Direction="Input" />
</SelectParameters>
</Tfs:TfsDataSource>
Note that I have specified SelectMethod="GetWorkItemsByQuery" which is the name of the method we exposed as public in TFS Data Source Component we saw in my earlier post. The asp:Parameter in above snippet passes the parameters to that method.
4. Fourth, comes the fun part of creating the report. Simply use the existing ASP Grid View control. I have given the full snippet below.
[This code snippet is provided under the Microsoft Permissive License.]
<%@ Register TagPrefix="Tfs" Namespace="TfsWebComponents" Assembly="TfsWebComponents" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Content" Runat="Server">
<div style="margin-left:32px; margin-top:32px">
<asp:GridView
ID="tfsWorkItems"
DataSourceID="srcWorkItems"
AllowSorting="true"
AutoGenerateColumns="false"
HeaderStyle-CssClass="WitHeader"
FooterStyle-CssClass="WitHeader"
GridLines="Both"
CellPadding="4"
RowStyle-CssClass="Wit"
runat="server" OnRowDataBound="tfsWorkItems_RowDataBound">
<Columns>
<asp:BoundField
DataField="Priority" HeaderText="Priority"/>
<asp:HyperLinkField DataNavigateUrlFields="Id"
HeaderText="Id"
DataNavigateUrlFormatString="http://YourTFSServer:8080/WorkItemTracking/WorkItem.aspx?artifactMoniker={0}"
DataTextField="Id"
NavigateUrl="http://YourTfsServer:8080/WorkItemTracking/WorkItem.aspx" />
<asp:BoundField
DataField="State" HeaderText="Status"/>
<asp:BoundField
DataField="Title" HeaderText="Title"/>
<asp:BoundField
DataField="RemainingWork" HeaderText="Estimate"/>
<asp:BoundField
DataField="ChangedBy" HeaderText="Updated By"/>
<asp:BoundField
DataField="ChangedDate" HeaderText="Updated On" />
<asp:BoundField
DataField="CreatedBy" HeaderText="Opened By"/>
</Columns>
</asp:GridView>
<Tfs:TfsDataSource id="srcWorkItems" Runat="Server" SelectMethod="GetWorkItemsByQuery">
<SelectParameters>
<asp:Parameter Name="teamProjectName" Type="String" DefaultValue="Developer Solutions" Direction="Input"/>
<asp:Parameter Name="storedQueryName" Type="String" DefaultValue="kannans" Direction="Input" />
</SelectParameters>
</Tfs:TfsDataSource>
</div>
</asp:Content>
Remeber to change the 'YourTFSServer' in the above snippet to your actual tfs server name / port.
Another thing to remember is to add the following to your web.config so that the TFS Data Source would pick it up.
<
configuration>
<
appSettings/>
<
connectionStrings>
<add name="TfsServer" connectionString="http://yourTFsServer:8080
</
connectionStrings>
To make the report look pretty I have added some CSS and Icons. Feel free to include them.
CSS
.WitHeader
{
background:#0148B2;
font-family:Tahoma;
font-size:8pt;
font-weight:bold;
color:White;
}
.Wit
{
background:#EFF3FF;
font-family:Tahoma;
font-size:8pt;
color:#215DC6;
}
Images
Based on the Status text you could format the report to display icons instead of text the following way
// Conditional formatting of Status column in the report by replacing the text with an image.
protected void tfsWorkItems_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
if (e.Row.Cells[2].Text == "Active")
{
e.Row.Cells[2].Text = "<img border=0 src='images/RedCross.png'>";
}
else if (e.Row.Cells[2].Text == "Resolved")
e.Row.Cells[2].Text = "<img border=0 src='images/YellowTick.png'>";
else if (e.Row.Cells[2].Text == "Closed")
e.Row.Cells[2].Text = "<img border=0 src='images/GreenTick.png'>";
}
}
[This code snippet is provided under the Microsoft Permissive License.]
As you can find, it’s quite simple to write the report once you have the TFS Data Source Component. The good thing is that you can extend the TFS Data Source Control, by adding additional public methods and then using them in your ASP.NET web page to write different reports / gadgets including a TFS Dashboard for your team. The possibilities are unlimited.
