locked
Custom Controls for TFS 2015 Update 1 TWA

    Question

  • We have some Custom Controls in TFS Web Access. They worked well with TFS2013. For TFS 2015 RTM they worked after some modification. Now, with TFS 2015 Update 1, I do not get them running. Error-Text in the form:

    Arbeitselement-Steuerelement vom Typ "ALTelefonNr" kann nicht erstellt werden

     This worked in TFS 2015 RTM:

    TFS.module
    (
        "AL.TelefonNr",
        [
            "TFS.WorkItemTracking.Controls",
            "TFS.WorkItemTracking",
            "VSS/Utils/Core"
        ],
        function () {
            // Module Inhalt
            var WITOM = TFS.WorkItemTracking,
                WITCONTROLS = TFS.WorkItemTracking.Controls,
                delegate = VSS.Core.delegate,
                moduleBaseUrl = TFS.getModuleBase("AL.TelefonNr");

    What is to Change to make it work again?

    Is there any documentation about Tfs Custom Controls für Web Access?

    Wednesday, December 02, 2015 8:08 AM

Answers

  • try

    WebAccess version="14.0">
      <plugin name="TelefonNr Custom Control" vendor="Alte Leipziger" moreinfo="http://www.alte-leipziger.de" version="1.14.1" >
        <modules>
          <module namespace="AL.TelefonNr.js" kind="TFS.WorkItem.CustomControl"/>  
        </modules>
      </plugin>
    </WebAccess>

    add the extension .js in module namespace.



    Please use Mark as Answer if my post solved your problem and use Vote As Helpful if a post was useful.

    • Marked as answer by Stefan Troll Thursday, December 03, 2015 3:24 PM
    Thursday, December 03, 2015 2:09 PM

All replies

  • I'm having a similar error with both my own custom controls as well as from others, like this one: https://witcustomcontrols.codeplex.com/

    They work fine from VS 2015 Update 1 but not as web access extensions. Something is messed up within this release or the API has changed without documentation or mention.


    John D. Shkolnik

    Wednesday, December 02, 2015 5:47 PM
  • Stefan & John

    are you sure that your custom control is failing in the initialize phase and not when beeing search?

    could you provide the exact error message  - probably just only "could not create work item ..." ?

    could you provide the manifest file used in the zip archive uploaded to TFS ?


    Please use Mark as Answer if my post solved your problem and use Vote As Helpful if a post was useful.

    Wednesday, December 02, 2015 7:35 PM
  • Stefan & John

    are you sure that your custom control is failing in the initialize phase and not when beeing search?

    could you provide the exact error message  - probably just only "could not create work item ..." ?

    could you provide the manifest file used in the zip archive uploaded to TFS ?


    Please use Mark as Answer if my post solved your problem and use Vote As Helpful if a post was useful.

    It's during initialize. It's not "a" custom control, it's "all" custom controls as far as I can tell. How about this...can you reference a single working example of a web access extension for custom controls in TFS 2015 Update 1? Make as simple a control as you like and then add it to a work item template. If you have one, please post the manifest and js here.

    "Script error for: /tfs/_plugins/4422/CodePlex.WitCustomControls.MultiValueControl http://requirejs.org/docs/errors.html#scripterror"


    John D. Shkolnik

    Thursday, December 03, 2015 2:03 AM
  • Hi Daniel,

    the error comes, when the custom control ist activated. The error message is (in german):

    Arbeitselement-Steuerelement vom Typ "ALTelefonNr" kann nicht erstellt werden

    Translation: could not create work item control of type ...

    It's no difference if the plugin is activated or not.

    This ist my manifest file:

    <WebAccess version="14.0">
      <plugin name="TelefonNr Custom Control" vendor="Alte Leipziger" moreinfo="http://www.alte-leipziger.de" version="1.14.1" >
        <modules>
          <module namespace="AL.TelefonNr" kind="TFS.WorkItem.CustomControl"/>  
        </modules>
      </plugin>
    </WebAccess>

    With TFS 2015 RTM the WebAccess Version worked wirh 11.

    On the Tfs-Server I see, that the Version number of the directory for the scripts is not numeric:

    C:\Program Files\Microsoft Team Foundation Server 14.0\Application Tier\Web Services\_static\tfs\Dev14.M89-Part7\_scripts\TFS\debug\....

    May this be a Problem?

    Thursday, December 03, 2015 8:26 AM
  • try

    WebAccess version="14.0">
      <plugin name="TelefonNr Custom Control" vendor="Alte Leipziger" moreinfo="http://www.alte-leipziger.de" version="1.14.1" >
        <modules>
          <module namespace="AL.TelefonNr.js" kind="TFS.WorkItem.CustomControl"/>  
        </modules>
      </plugin>
    </WebAccess>

    add the extension .js in module namespace.



    Please use Mark as Answer if my post solved your problem and use Vote As Helpful if a post was useful.

    • Marked as answer by Stefan Troll Thursday, December 03, 2015 3:24 PM
    Thursday, December 03, 2015 2:09 PM
  • That works! Thank's very much!
    Thursday, December 03, 2015 3:23 PM
  • try

    WebAccess version="14.0">
      <plugin name="TelefonNr Custom Control" vendor="Alte Leipziger" moreinfo="http://www.alte-leipziger.de" version="1.14.1" >
        <modules>
          <module namespace="AL.TelefonNr.js" kind="TFS.WorkItem.CustomControl"/>  
        </modules>
      </plugin>
    </WebAccess>

    add the extension .js in module namespace.




    Adding the .js results in this error:

    /tfs/_static/tfs/Dev14.M89-Part7/_scripts/TFS/debug/VSS.Core.js 404 (Not Found)

    I also tried TFS.Core and got:

    /tfs/_static/tfs/Dev14.M89-Part7/_scripts/TFS/debug/TFS.Core.js 404 (Not Found)


    John D. Shkolnik

    Thursday, December 03, 2015 5:27 PM
  • Stefan, can I see your JavaScript code? Maybe the references I'm using or something is complicating my situation.

    John D. Shkolnik

    Thursday, December 03, 2015 6:20 PM
  • hi John

    why not providing your source code ?

    you only need to add ".js" in the manifest to your script file - not to the standard name space provided by TFS resp. in the TFS.module list.


    Please use Mark as Answer if my post solved your problem and use Vote As Helpful if a post was useful.

    Thursday, December 03, 2015 7:00 PM
  • hi John

    why not providing your source code ?

    you only need to add ".js" in the manifest to your script file - not to the standard name space provided by TFS resp. in the TFS.module list.


    Please use Mark as Answer if my post solved your problem and use Vote As Helpful if a post was useful.

    There's nothing proprietary in my code, I just figured it'd be less work for someone else if I did the comparison. In any case, I managed to fix it by slowly tracking down all the undocumented changes to the undocumented API.

    John D. Shkolnik

    Friday, December 04, 2015 3:01 AM
  • Hi John,

    the Name and Location of TFS.Core has changed in TFS2015. I solved it by changing the reference from "TFS.Core" to "VSS/Utils/Core". See the beginning of my code:

    TFS.module
    (
        "AL.TelefonNr",
        [
            "TFS.WorkItemTracking.Controls",
            "TFS.WorkItemTracking",
            "VSS/Utils/Core"
        ],
        function () {
            // Module Inhalt
            var WITOM = TFS.WorkItemTracking,
                WITCONTROLS = TFS.WorkItemTracking.Controls,
                delegate = VSS.Core.delegate,
                moduleBaseUrl = TFS.getModuleBase("AL.TelefonNr.js");

    Friday, December 04, 2015 7:27 AM
  • Hi John,

    the Name and Location of TFS.Core has changed in TFS2015. I solved it by changing the reference from "TFS.Core" to "VSS/Utils/Core". See the beginning of my code:

    TFS.module
    (
        "AL.TelefonNr",
        [
            "TFS.WorkItemTracking.Controls",
            "TFS.WorkItemTracking",
            "VSS/Utils/Core"
        ],
        function () {
            // Module Inhalt
            var WITOM = TFS.WorkItemTracking,
                WITCONTROLS = TFS.WorkItemTracking.Controls,
                delegate = VSS.Core.delegate,
                moduleBaseUrl = TFS.getModuleBase("AL.TelefonNr.js");

    It was a lot more than that, like the stuff moved to TFS.Legacy.AJAX and Artifacts, etc. It took 2 days to track it all down. The .js in the namespace was also a big one.

    John D. Shkolnik

    Friday, December 04, 2015 3:09 PM
  • I had the same problem and was able to get my custom controls working with the help of this thread. My problem now is my custom style sheet isn't getting loaded. I can see that the CSS file is there in the page and my function to load the style sheet is getting fired, but the CSS isn't getting evaluated.

    Have any of you had this issue?

    Here's a code snippet:

    TFS.module("DataboundDropdownList",
      [
          "TFS.WorkItemTracking.Controls",
          "TFS.WorkItemTracking",
          "VSS\\Utils\\Core"
      ],
      function () {
     
        var WITOM       = TFS.WorkItemTracking,
          WITCONTROLS   = TFS.WorkItemTracking.Controls,
          delegate      = VSS.Core.delegate,
          moduleBaseUrl = TFS.getModuleBase("DataboundDropdownList.js"),
          domElem       = TFS.UI.domElem;
     
        // Constructor for MultiValueControl
        function DataboundDropdownList(container, options, workItemType) {
          this.baseConstructor.call(this, container, options, workItemType);
        }  
    
    
     DataboundDropdownList.inherit(WITCONTROLS.WorkItemControl, {
    
          _init: function () {
    
            this._base();
    
            // load up styling
            this._loadStyle('chosen.min.css');
            this._loadStyle('DataboundDropdownList.css');
    
            // load chosen for select dropdowns
            this._loadScript('chosen.jquery.min.js');
    
            // create proper layering
            var valueInput = document.createElement('select');
    
            // add properties to each div
            $(valueInput)
              .attr('id', this._options.controlId + '_select')
              .attr('maxlength', 255)
              .addClass('itmsProduct chosen-select');
    
            // output to page
            $(this._container).append(valueInput);
    
            // style select box
            this._getSelect().chosen({
              allow_single_deselect    : true,
              disable_search_threshold: 0, // never, ever
              width: '100%'
            });
    
          },
    
          _loadStyle : function(fileName) {
    
            // IE hack
            if(document.createStyleSheet) {
              return document.createStyleSheet(moduleBaseUrl + fileName);
            }
    
            $('<link />')
              .attr('href', moduleBaseUrl + fileName)
              .attr('type', 'text/css')
              .attr('rel', 'stylesheet')
              .appendTo($('head').first());
    
          },
    


    Wednesday, December 09, 2015 1:42 PM
  • I am experiencing the same issue with the CSS. Anyone have any solutions?

    J F Conklin

    Wednesday, December 09, 2015 8:24 PM
  • How odd. I got an email alert that said:

    Try this:

    $("<link />").attr("href", moduleBaseUrl + "chosen.min.css").attr("type", "text/css").attr("rel", "stylesheet").appendTo($("head").first());

    But that response is not in these threads.....

    Unfortunately our code already looked exactly like this, with the filename hardcoded.

    So I looked back at the code sample sent by AspiringTFSGuru, and noticed this:

    moduleBaseUrl = TFS.getModuleBase("DataboundDropdownList.js"),

    Our code did not have the ".js" suffix.

    When I added it, everything worked!!!

    So hopefully AspiringTFSGuru's problem will be resolved by the suggestion to hardcode the filename.



    J F Conklin

    Thursday, December 10, 2015 9:45 AM
  • My code already has the .js suffix. :/
    Thursday, December 10, 2015 2:00 PM
  • Oh. I interpreted it to mean for you to replace this code:

    $('<link />') .attr('href', moduleBaseUrl + fileName)
             
    .attr('type', 'text/css')
             
    .attr('rel', 'stylesheet')
             
    .appendTo($('head').first());

    with this code that explicitly gives the .css filename. You might not be able to do that, but it's probably worth trying to see if it resolves the issue.  My code already looked like this example below. Yours does not.  I was missing the .js suffix in the call to TFS.getModuleBase.

    $("<link />").attr("href", moduleBaseUrl + "chosen.min.css")

    .attr("type", "text/css")

    .attr("rel", "stylesheet")

    .appendTo($("head").first());

    Good luck!


    J F Conklin

    Thursday, December 10, 2015 7:03 PM
  • Thanks. I'll give it a try.
    Friday, December 11, 2015 11:53 AM
  • Oh. I interpreted it to mean for you to replace this code:

    $('<link />') .attr('href', moduleBaseUrl + fileName)
             
    .attr('type', 'text/css')
             
    .attr('rel', 'stylesheet')
             
    .appendTo($('head').first());

    with this code that explicitly gives the .css filename. You might not be able to do that, but it's probably worth trying to see if it resolves the issue.  My code already looked like this example below. Yours does not.  I was missing the .js suffix in the call to TFS.getModuleBase.

    $("<link />").attr("href", moduleBaseUrl + "chosen.min.css")

    .attr("type", "text/css")

    .attr("rel", "stylesheet")

    .appendTo($("head").first());

    Good luck!


    J F Conklin

    So I tried it both ways and both ways function. The problem is that I think the CSS files need to be put in a different folder, but I don't know what that is.
    Friday, December 11, 2015 3:55 PM