User Guide

SSW Smashing Barrier User Guide

In order to use SSW SmashingBarrier 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 developers.

Setting it up

  1. Create a new web project with Framework 3.5.
  2. Unzip the project package.
  3. Copy “References” and “_CONTROLTEMPLATES” folders into the project root folder and include them into the new project.

    a) Click “Show All Files” button in Solution Explorer.

    Figure: Click Show All Files button in Solution Explorer

    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

      Figure: Add the references 

      Figure: Browse and add the reference
  5. Add the reference to the TFSQuery.ascx to the pages that you want to host this widget. Tip: Most developers choose to put in the footer of the master page
    • a) Register the widget at the top of the page (Under “ <%@ Page……” line).

      <%@ Register Namespace=”SSW.TFSSmashingBarrier.UserControls” Assembly=”SSW.TFSSmashingBarrier.UserControls.TFSQuery” TagPrefix=”ssw” %>
      <%@ Register src=”/_controltemplates/SSWUserControls/TFSSB/TfsQuery.ascx” tagname=”TfsQuery” tagprefix=”ssw” %>
    • b) Add the widget 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” />
    • 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:
    • Note: You are expected to change the configurations to fit to your environment later.

          <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]”/> 
  7. Configure the settings step by step:
    • a) Replace the highlighted part to set the correct settings for your TFS.

          <add key=”TFSServer” value=”” />
          <add key=”TeamProjectName” value=”Sample.SampleProject”/>
          <add key=”TFSWebAccess” value=” “/>
    • b) Provide the credentials for your TFS, 
      Note: this account must have [Project Contributor] permission on the Team Project.

          <add key=”TFSUserName” value=”username”/>
          <add key=”TFSPassword” value=”password”/> 
          <add key=”TFSDomain” value=”sampledomain”/> 
    • Now, you are ready to add the URL field into your TFS template.  

How to add “SSW.Agile.URL” field for TFS 2013 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.

  1. Install TFS 2013 Power ToolsBefore adding the new “SSW.Agile.URL” field, you need to make sure you have TFS power tools for Visual Studio 2012 installed. 

    Figure: Make sure that the Power Tools are installed 

    Note: You have to use VS 2012 (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
  2. Add URL field in to a TFS process template) Open Visual Studio 2012 and select “Tools |Process Editor |Work Item Types |Open WIT from Server”. 

    Figure: Open the Work Item from the server  

    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 

    c) Visual Studio will open the “Task.wit” like below: 

    Figure: The Task would item type is open for editing 

     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” 

     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 

     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

     g) After completing the modification, click “Save” to update it to TFS: 

    Figure: Save the changes back to TFS 

     h) Refresh team explorer to get the latest WIT types for the projects

     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
  3. Done.

We now have a custom field in our Task work item type that can be used to track web pages or form. 

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
  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
  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