Skip Ribbon Commands
Skip to main content
Navigate Up
Sign In
SSW TFS Smashing Barrier User Guide

In order to use the TFS Smashing Barrier control in your web application, you need to add the references and the UserControl to your project and add the configuration settings into the web.config,then putting/dragging onto the page(usually the footer of the master page). Then you will be able to create new Work items (and see existing ones) from the right way around ie. the current page you are on.

Add the control into your site.master to use it on all of your pages and begin using it to smash the barriers between your customers and your developers.

1.Setting it up
2.How to add “SSW.Agile.URL” field for TFS 2010 project?
3.How to use SSW TFS Smashing Barrier
  1. Setting it up
    1． Create a new web project with Framework 3.5.
    2． Unzip the project package.
    3． Copy “References” and “UserControls” folders into the project root folder and include them into the new project.
    1. a) Click “Show All Files” button in Solution Explorer.

      Figure: Click Show All Files button in Solution Explorer
    2. b) Right click on the selected two new folders and click “Include In Project”.

      Figure: Include the two new folders into the new project

    4． Add references to the listed assemblies
    • Microsoft.TeamFoundation.Client.dll,
    • Microsoft.TeamFoundation.WorkItemTracking.Client.dll
    • Microsoft.TeamFoundation.Common.dll
    • SSW.TFSSmashingBarrier.UserControls.TFSQuery.dll
    5． Add the reference to the TFSQuery.ascx to the pages that you want to host this user control. Tip: Most developers choose to put in the footer of the master page
    1. a) Register the user control at the top of the page (Under “ <%@ Page……” line).
      <%@ Register Namespace="SSW.TFSSmashingBarrier.UserControls" Assembly="SSW.TFSSmashingBarrier.UserControls.TFSQuery" TagPrefix="ssw" %>
      <%@ Register src="UserControls/TfsQuery.ascx" tagname="TfsQuery" tagprefix="ssw" %>
    2. b) Add the user control to the location you want to show it (referable inside <div>).
      Note: you need to include the Script Manager if you don’t already have one on that page.
      <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
      <ssw:TfsQuery ID="TfsQuery1" runat="server" />
    3. c) Add the CSS file reference into the page Note: if you are using a Master Page, it’s recommended to include this into your Master Page.
      <link rel="Stylesheet" href="UserControls/style/TFSQuery.css" />
    6． Add the following keys to your web.config:
    1. Note: You are expected to change the configurations to fit to your environment later.
      <appSettings>
          <add key="TFSServer" value="[TFS URL]"/>
          <add key="TeamProjectName" value="[Team Project Name]"/>
          <add key="TFSWebAccess" value="[TFS Web Access URL]"/>
          <add key="TFSUserName" value="[Username]"/>
          <add key="TFSPassword" value="[Password]"/>
          <add key="TFSDomain" value="[Domain]"/>
      </appSettings>
    7． Configure the settings step by step:
    1. a) Replace the highlighted part to set the correct settings for your TFS.
      <appSettings>
          <add key="TFSServer" value="http://sampledomain.com:8080/tfs" />
          <add key="TeamProjectName" value="Sample.SampleProject"/>
          <add key="TFSWebAccess" value="http://sampledomain.com/tfs/web/ "/>
      <appSettings>
    2. b) Provide the credentials for your TFS,
      Note: this account must have [Project Contributor] permission on the Team Project.
      <appSettings>
          <add key="TFSUserName" value="username"/>
          <add key="TFSPassword" value="password"/>
          <add key="TFSDomain" value="sampledomain"/>
      <appSettings>

    3. Now, you are ready to add the URL field into your TFS template. 
  2. How to add “SSW.Agile.URL” field for TFS 2010 project?
    In order to use SSW TFS Smashing Barrier you need to add a custom field to the Task work item type in TFS process template, so that we can store the unique identifier of the form or webpage URL and look it up later.
  3. 1.Install TFS 2010 Power Tools
    Before adding the new “SSW.Agile.URL” field, you need to make sure you have TFS power tools for Visual Studio 2010 installed.

    Figure: Make sure that the Power Tools are installed
  4.  
    NOTE: You have to use VS 2010 (not VS2008) with TFS Power Tools to finish the following steps, otherwise you will see the following error message:

    Figure: If you are using the wrong version of Visual Studio you will get an error later when importing the changes to TFS
  5.  
    2． Add URL field in to a TFS process template
    1. a) Open Visual Studio 2010 and select “Tools |Process Editor |Work Item Types |Open WIT from Server”.

      Figure: Open the Work Item from the server
    2.  
      b) Select the team project you want to add the field to, and then select Work Item Type “Task” and click “OK”.

      Figure: Select the Task work item type to edit
    3.  
      c) Visual Studio will open the “Task.wit” like below:

      Figure: The Task would item type is open for editing
    4.  
      d) Click “New” to add a new field “SSW.Agile.URL” like below, then click “OK”:

      Figure: Make sure you set “RefName” to “SSW.Agile.URL”
    5.  
      e) Switch to the “Layout” tab, add a new control under Layout| Group | Column| Group – Classification | Column:

      Figure: On the layout tab you need to add a new control so the field can be edited by someone filling out the Task
    6.  
      f) Use “SSW.Agile.URL” field in the new control, choose “FieldName” and input “Label” value

      Figure: Set the “FieldName” to “SSW.Agile.Url” and input “Label” value
    7.  
      g) After completing the modification, click “Save” to update it to TFS:

      Figure: Save the changes back to TFS
    8.  
      h) Refresh team explorer to get the latest WIT types for the projects
    9.  
      i) Open a work item type from the project to check the new “URL” field is there:

      Figure: Test that the changes have been saved
    10.  
    3． Done
    We now have a custom field in our Task work item type that can be used to track web pages or form.
  6. How to use SSW TFS Smashing Barrier
    1． Now you should be able to run the page successfully. Try to click “ Add … “ to add a new task in TFS related to your current page:

    Figure: click “Add..“ to create a new task in TFS
    Update the necessary fields and save it in the new opened window
  8. 2． Refresh the web page, you would be able to see the task in “Active Tasks” area:

    Figure: Active tasks in TFS relating to current page
     
  9. 3． Find the task in Visual Studio and close it, go back and refresh the web page again, you will see the “Closed” task in the “Completed Tasks” area:

    Figure: Completed tasks in TFS related to current page