When you know who Teemo is, you already died: TFS Web Access Work Item

Team Foundation Server Web Access - Timesheet Plugin

Visual Studio Version

For the Visual Studio Timesheet Plugin, there are some good posts:

Step by step introduction about adding a work item control in visual studio: https://nickhoggard.wordpress.com/2009/11/12/tfs-2010-beta-2-custom-work-item-controls-step-1-getting-started/

Source code for Visual Studio 2010: https://tfstimesheets.codeplex.com/

I remember the source code in codeplex is for Visual Studio 2010, to work on other versions of Visual Studio, you need to replace some of the assemblies with the right version.

For example, to add the timesheet for Visual Studio 2015,

Assembly: Microsoft.TeamFoundation.WorkItemTracking.Client is located at

C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Microsoft.TeamFoundation.WorkItemTracking.Client.dll

Assembly: Microsoft.TeamFoundation.WorkItemTracking.Controls is located at

C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Microsoft.TeamFoundation.WorkItemTracking.Controls.dll

To add those dlls, you may need to install TFS 2015 on your local machine.

There are many good posts on web, if you search a little bit, you will be able to get some idea or instruction to make it work. I won't show you how to work on the visual studio version on this post.

To debug your code, see my next post Debug timesheet plugin for tfs.

Web Access Version

Instroduction

There are many posts about visual studio version of tfs work item control, but the web access version is limited.

Here are some good ones: http://www.ewaldhofman.nl/post/2010/08/10/Create-custom-work-item-control-for-TFS-Web-Access-2010-(TWA).aspx

But for "timesheet" plugin, it is a little bit complicated, because it needs to get data from the work item control, like "completed hours", "remaining hours", "timesheetRawData", it is not a simple button or text message.

In this post, I would show you how to create a timesheet control for TFS 2013 Web Access. It will be looking like this:

For TFS that has version 2013 or higher, the control items for web are all written in javascript, no back end code involved. But in the Visual Studio version, it has a timesheetControl model created which handles all the actions and events from the control. This means we have to transform the C# code in the model to javascript to implement the same functionality.

Deploy Timesheet Control in TFS Web Access

The basic idea of Web Control for TFS 2013 is that you create a .zip file includes some description about your control and some javascript codes about your control, then in the tfs web interface, install the .zip file in control panel (tell the system, here is the code you need), and update the task.xml to include the layout of the timesheet.(Tell the system where I want to put my control in. In my example, I create the timesheet tab under "task"). In the installation part, you will need proper permission to install the extension, if you are not the admin of your tfs server, you can install tfs 2013 on your local, test the control item, and then send the zip file to your tfs server admin to let them install it for you.

Get Ready for the Code

There are totally three files need to be zipped in,

1. manifest.xml

2. TimeSheetControl.WorkItemTimeSheetControl.debug.js

3. TimeSheetControl.WorkItemTimeSheetControl.min.js

1. manifest.xml

</modules>

</plugin>

</WebAccess>

2. TimeSheetControl.WorkItemTimeSheetControl.debug.js

View source code here

3. TimeSheetControl.WorkItemTimeSheetControl.min.js
For debug purpose, instead of create a min file, we copy, paste TimeSheetControl.WorkItemTimeSheetControl.debug.js and rename it as TimeSheetControl.WorkItemTimeSheetControl.min.js, which means .min.js and .js has the same content and it is easy for debugging.

When release, to make the min.js file, you can use any online free tools, I used http://fmarcia.info/jsmin/test.html, copy the code from TimeSheetControl.WorkItemTimeSheetControl.debug.js, and paste it on the website and click JSMin button, you will get the min version of js file. Copy the min code and create a new TimeSheetControl.WorkItemTimeSheetControl.min.js file and paste it.

Now you have three files

Select all the files and right click -> Send to -> Compressed(Zipped) folder, the name of the folder doesn't matter.

Install Timesheet Plugin

We have the source code ready, now we need to install it on tfs.

Open your tfs web portal, click the button on the right top corner

Go to Control Panel.

Go to tab Extensions, click "Install" button and choose the zip file we just created.

"Enable" the extension by click "Enable" under the control.

Modify Task.xml

Now we are all set about the code and installation part. TFS now knows what is the timesheet, how it should be look like, what it does, but TFS dosen't know where it should appear. The next step is to update the task.xml file in tfs server, to tell TFS we want the timesheet to be a tab under "task" work item.

Run Command Prompt by click start -> Type in "cmd" in search box, hit enter.

Go and run the command below, /p:is your project name:

Then you will get your task.xml file under the folder: C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE

Open task.xml, add the high lighted following in proper location

</Tab>

</Tab>

Save the file and run the command:

If you get any error, you probably don't have the right permission to update the file or you have wrong format in your file.

Now go to any task:

If there is any error messages show up, you can debug it yourself, see my next post: Debug timeshee plugin for TFS

When you know who Teemo is, you already died

Tuesday, December 22, 2015

TFS Web Access Work Item - Timesheet Plugin