A few people have posted about this topic and while they have given great information and have noticed fewer still have remarked that a checkbox control is missing and would be easily created but… I couldn’t find one that was created… So I hope to fill that gap building on yet another post I found that offered the source code but it didn’t run for TFS 2012 update 4. I won’t go into the details of how and why since several others have already done it such as: http://blogs.msdn.com/b/serkani/archive/2012/06/22/work-item-custom-control-development-in-tf-web-access-2012-deployment.aspx
And
So below I offer what I used to make a control that works for me.
The manifest.xml
<WebAccess version=”11.0″>
<plugin name=”DTCheckBox Custom Control” vendor=”Discover Technologies” moreinfo=”https://discovertechnologies.com/” version=”1.1.1.0″ >
<modules>
<module namespace=”DtCheckBox” kind=”TFS.WorkItem.CustomControl”/>
</modules>
</plugin>
</WebAccess>
The DtCheckBox.js
// Register this module as “DtCheckBox” and declare
// dependencies on TFS.WorkItemTracking.Controls, TFS.WorkItemTr
TFS.module(“DtCheckBox”,
[
“TFS.WorkItemTracking.Controls”,
“TFS.WorkItemTracking”,
“TFS.Core”
],
function () {
// module content
var WITOM = TFS.WorkItemTracking,
WITCONTROLS = TFS.WorkItemTracking.Controls,
delegate = TFS.Core.delegate;
// Constructor for DtCheckBox
function DtCheckBox(container, options, workItemType) {
this.baseConstructor.call(this, container, options, workItemType);
}
DtCheckBox.inherit(WITCONTROLS.WorkItemControl, {
_control:null,
_init: function () {
this._base();
this._control = $(“<input type=’checkbox’ >”).appendTo(this._container); //.bind(“change”, delegate(this, this.onChanged));
},
bind : function(workitem) {
this.base.bind(workitem);
var val = this._getField().getValue();
if(this._control && this._control[0]) {
if (val == “checked”) {
this._control[0].checked = true;
}
else {
this._control[0].checked = false;
}
}
this._control.bind(“change”, delegate(this, this.onChanged));
},
unbind : function (workitem) {
this._control.unbind(“change”, delegate(this, this.onChanged));
this.base.unbind(workitem);
},
invalidate : function (flushing) {
if(this.isReadOnly()) {
this.setAttribute(“disabled”, “disabled”);
} else {
this.removeAttribute(“disabled”);
}
var val = this._getField().getValue();
if (val == “checked”)
this.checked = true;
else
this.checked = false;
},
getValue : function () {
var val = false;
if (this._control && this._control[0]) {
val = this._control[0].checked;
}
return val;
},
clear : function () {
this.attr(“checked”, false);
},
onChanged : function (e) {
if (this._control && this._control[0]) {
if(this._control[0].checked) {
this._getField().setValue(“checked”);
}
else {
this._getField().setValue(“unchecked”);
}
}
},
});
WITCONTROLS.registerWorkItemControl(“DtCheckBox”, DtCheckBox);
return {DtCheckBox: DtCheckBox};
});
As others have noted, you have to have two versions of the .js file, debug and min. During the development and testing phase, you can use the debug version of the .js file by cloning and renaming it to min.js but it is suggested that, you minify your .js file when the custom control is ready for the production.
Now you have the .js files and the manifest file ready, you can create your package. The simplest way of doing this is to place these three files in a temporary folder, select them all, right click and send to compressed folder.
Then just deploy using the extensions management page in the TFS web access Control Panel.
After having the extension package installed, you need to change the definition of the work item type which you want to add
the custom control to. You can use witadmin command line tool to export and import work item type definitions. Another option that I find much more palatable is to use a preinstalled copy of Team Foundation Power Tools. This gives you menu item within Visual Studio for the Process Editor. This allows you to edit work items types in two ways either locally by downloading, editing and uploading or opening the files from the server to use the Visual Studio user interface to edit. Everyone has their own opinions on this I prefer to download and edit locally using my favorite text editor however your mileage may vary. Either way you must modify an existing form item (its not recommended to modify out of the box items) or create new. The order of operations isn’t really important but you must create a new field and implement it in the form. I found plenty of white space in the User Story work item to create what I needed, but to use your new control you must reference it in the form. Once saved your new control should be usable within Team Foundation Server web access with no further actions on your part beyond possibly debugging your control if needed. This is easy by simply using your favorite browser’s debugging capability I typically use Internet Explorer so the F12 button is all I need and refreshing the page while displayed halts execution if there’s a syntax or program logic error.
Enjoy!
