Tweaking the TFS Web Access Client

Recently Microsoft released a great usability tweak to the Web Access Client on Visual Studio Online. It allows users to use the rich text editor in full screen mode. This allows users to utilize the most out of their big screens and allows users to have a better editing and reading experience for large text fields, especially when combining images and text. More of these new features can be read here: Work item Improvements

While these features are to be expected to be in the next on premise TFS release, you may like to have similar functionality in your on-premise TFS right now!

Let me start with a disclaimer: The customization’s in this post are not supported by Microsoft. These changes can break any updates and will be undone by any update installations to your TFS environment.

For all of you accepting this disclaimer the following adjustments will allow you to use the most of your available screen size.

When you currently open a work item from the task board (or most other locations) you will see the following behavior. As the red arrows indicate, there is allot of space available at the edges and the rich text fields do not utilize the space available.

The steps below guide you to change the default behavior.

1. Download the FullDialog.css from my DropBox. FullDialog.css or FullDialog.zip

The CSS changes to UI Dialog to be positioned 45px from the top, and to utilize 98% of the available width. For the height it will use 85% of the View Port. Caution this may / will not work on ‘old’ browsers.

2. Add the FullDialog.css file to the following directory on your TFS server.

%ProgramFiles%\Microsoft Team Foundation Server 12.0\Application Tier\Web Services\_static\tfs\12\App_Themes\Default\

3. Open the Main.Master file

%ProgramFiles%\Microsoft Team Foundation Server 12.0\Application Tier\Web Services\_views\Shared\Main.Master

4. Add the following line to the indicated location

Changes to Main.Master Page — The marked line indicates the location to add the custom CSS file.

5. Execute an IISReset from the commandline. (Mind your step when doing this in a production environment!)

6. Test results! You’re workitem experience is now almost fullscreen and you’re rich text fields will utilize much more space.

Additional options, TFS has two UI settings modes available; Default and High contrast. If you do not wish to adjust the Default behavior for all your users you might want to implement this in the High Contrast profile only. This way you provide your users with a choice. These settings can be reached through your User Profile page.

3 Replies to “Tweaking the TFS Web Access Client”

Thanks for the post!

Reblogged this on The Road to ALM and commented:
In TFS 2013.4 some enhancements will improve the work item screen experience. Until this time, the space in the work item form is limited.

Jasper wrote a great post about tweaking this experience to get a full screen work item form.

Note: This is unsupported and might harm you TFS installation..But .. It works neat!

When I changed to high contrast in my settings, when I switch it back to default, the setting doesn’t seem to stick. When ever I go back into TFS, it’s back on the High Contrast. How do I reset it?