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.