Attaching to saving and saved events of a Work Item in a Custom Control

We have been asked lately about whether it is possible to do something before or after save operation of a work item inside a custom control. The answer is, yes, you can do that.

When a change occurs in a work item, there is actually a lot of events fired like field change, revert, saving, saved, etc. All you need to do is subscribing to the work item change event and then applying appropriate filtering on the change type when the work item is bound to the form (bind event of all controls on the form is called when a work item is bound to a form).

Please do not forget unsubscribing during unbind. Also note that these are all read-only notifications which means none of them can be cancelled.

Let's see some code:

 bind: function (workItem) {
    this._base(workItem);
    this._workItemChangeDelegate = function(sender, args) {
        if (args.change === "saving") {
            // Do something...
        } else if (args.change === "saved") {
            // Do something...
        }
    }
    
    // Delegate enables the specified function to run under current custom control's context
    // so that you can access other methods inside _workItemChangeDelegate 
    workItem.attachWorkItemChanged(TFS.Core.delegate(this, this._workItemChangeDelegate));
}

unbind: function (workItem) {
    this._base(workItem);
    workItem.detachWorkItemChanged(this._workItemChangeDelegate);
    delete this._workItemChangeDelegate;
}

 

And one last comment about "Save & Close". The above events are fired from Object Model but  "Save & Close" happens in UI level which prevents custom controls to attach that event. Because we do not have any API's for UI commands, it is not possible to intervene. Sorry for any inconvenience.

Hope this code piece helps and let us know if you have any questions or feedback.

Comments

• Anonymous
  January 27, 2014
  Thanks Serkan for ery much useful info. I have implemented the sme and was able to get this working. Only location I face the problem is during unbind. Looks like workItem is undefined in the unbind method and throwing an error when calling detachWorkItemChanged method. I tried to skip the same, but the event is registered multiple times and an event is firing multiple times. Please let me know a possible work arround for this.

• Anonymous
  January 27, 2014
  I observed the above behavior when I try to move from one work item to another, and get back to the old work item. Since the unbind is not working as expected, the event is staying back with the work item. I also observed that the workItem.events . workitem-changed array is incremented when a new work item is opened. Hence the multiple process of _workItemChangeDelegate. Let me know if you need more information.

• Anonymous
  June 15, 2014
  I have the same problem during unbind as described by kumarSur. I was wondering if you were able to find a solution?

• Anonymous
  July 17, 2014
  @kumarSur and @irenam use: //// var workItem = this._workItem; in the unbind event start and remove function parameter "workItem". like: unbind: function () { var workItem = this._workItem; this._base(workItem); workItem.detachWorkItemChanged(this._workItemChangeDelegate); delete this._workItemChangeDelegate; }

• Anonymous
  March 30, 2015
  Hi , Could you please suggest the way to add or deploy this javascript code? How can we implement this?