TFS 2017 Work item Extension not working - tfs

Question

New to this TS scripting so a little help is requested,
I'm trying to create an extension that created a url from 4 work item fields.
example contribution:
{
"manifestVersion": 1,
"id": "tritech-tfsurl-control",
"version": "0.1.18",
"name": "tritech-tfsurl-control",
"scopes": [ "vso.work", "vso.work_write" ],
"description": "4 fields to a url",
"publisher": "TriTech-Software-Systems",
"icons": {
"default": "img/logo.png"
},
"targets": [
{
"id": "Microsoft.VisualStudio.Services"
}
],
"tags": [
"Work Item",
"Work Item control",
"Url",
"Url tfs server"
],
"content": {
"details": {
"path": "details.md"
}
},
"links": {
"home": {
"uri": "http://www.Tritech.com"
}
},
"branding": {
"color": "rgb(220, 235, 252)",
"theme": "light"
},
"files": [
{
"path": "img",
"addressable": true
},
{
"path": "index.html",
"addressable": true
}
],
"categories": [
"Plan and track"
],
"contributions": [
{
"id": "tfsurlcontrol-action",
"type": "ms.vss-work-web.work-item-form-control",
"description": "Work Item fields to create url from",
"targets": [
"ms.vss-work-web.work-item-form"
],
"properties": {
"name": "tfsurl-control",
"uri": "index.html",
"height": 90,
"inputs": [
{
"id": "PreviousTFSServer",
"description": "The TFS server url that has the work item.",
"type": "WorkItemField",
"properties": {
"workItemFieldTypes": [ "String" ]
},
"validation": {
"dataType": "String",
"isRequired": true
}
},
{
"id": "TFSCollection",
"description": "The original tfs collection name",
"type": "WorkItemField",
"properties": {
"workItemFieldTypes": [ "String" ]
},
"validation": {
"dataType": "String",
"isRequired": true
}
},
{
"id": "TfsTeamProject",
"description": "Original TFS project name",
"type": "WorkItemField",
"properties": {
"workItemFieldTypes": [ "String" ]
},
"validation": {
"dataType": "String",
"isRequired": true
}
},
{
"id": "TfsWorkItemId",
"description": "Original work item id",
"type": "WorkItemField" ,
"properties": {
"workItemFieldTypes": [ "Integer" ]
}
}
]
}
}
]
}
then in my App.ts file is this,
///<reference types="vss-web-extension-sdk" />
import { Controller } from "./control";
import * as ExtensionContracts from "TFS/WorkItemTracking/ExtensionContracts";
import { WorkItemFormService } from "TFS/WorkItemTracking/Services";
var control: Controller;
var provider = () => {
return {
onLoaded: (workItemLoadedArgs: ExtensionContracts.IWorkItemLoadedArgs) => {
control = new Controller();
}
}
};
VSS.register(VSS.getContribution().id, provider);
this is my Control.ts file,
`
private _initialize(): void {
this._inputs = VSS.getConfiguration().witInputs;
this._ServerFieldName = this._inputs["PreviousTFSServer"];
this._CollectionFieldName = this._inputs["TFSCollection"];
this._ProjectFieldName = this._inputs["TFSTeamProject"];
this._WorkItemIdFieldName = this._inputs["TfsWorkItemId"];
WitService.WorkItemFormService.getService().then(
(service) => {
Q.spread<any, any>(
[ service.getFieldValue(this._ServerFieldName),service.getFieldValue(this._CollectionFieldName),
service.getFieldValue(this._ProjectFieldName),service.getFieldValue(this._WorkItemIdFieldName)],
(server: string, collection: string, project:string, id: number) => {
this._view = new View(server,collection,project,id);
}, this._handleError
).then(null, this._handleError);
},
this._handleError);
}
private _handleError(error: string): void {
let errorView = new ErrorView(error);
}
}
`
Then I added a view.ts
export class View {
constructor(server: string, collection: string, project: string, id: number) {
// container div
if(server)
{
var Container = $("<div />");
var workItemUrl = $("<span></span>").text("Original work item");
var a = $("<a> </a>");
var url = 'server + "/" + collection + "/" + project + "/_workitemId?=" + String(id)'
a.attr("href", url );
a.attr("target", "_blank");
a.text("here.");
workItemUrl.append(a);
//$('body').empty().append(Container);
$(".events").append(workItemUrl);
}
}
}
<Input Id="PreviousTFSServer" Value="TriTech.Source.Server" />
<Input Id="TFSCollection" Value="TriTech.Source.Collection" />
<Input Id="TFSTeamProject" Value="TriTech.Source.Project" />
<Input Id="TfsWorkItemId" Value="TriTech.Source.Id" />
</Inputs>
</ControlContribution>
</Group>`
I started with the latest edition of the vsts-extension-ts-seed-simple-master package. Compiles and creates the extension but I'm not seeing any url or link.
What am I missing?
The WIT has been edited to use the extension.
Web debug shows it is being loaded,
{"id":"TriTech-Software-Systems.tritech-tfsurl-control.tritech-tfsurlcontrol-action","description":"Work Item fields to create url from","type":"ms.vss-work-web.work-item-form-control-group","targets":["ms.vss-work-web.work-item-form"],"properties":{"name":"tritech-tfsurl-control","uri":"index.html","height":90,"inputs":[{"id":"PreviousTFSServer","description":"The TFS server url that has the work item.","type":"WorkItemField","properties":{"workItemFieldTypes":["String"]},"validation":{"dataType":"String","isRequired":true}},{"id":"TFSCollection","description":"The original tfs collection name","type":"WorkItemField","properties":{"workItemFieldTypes":["String"]},"validation":{"dataType":"String","isRequired":true}},{"id":"TfsTeamProject","description":"Original TFS project name","type":"WorkItemField","properties":{"workItemFieldTypes":["String"]},"validation":{"dataType":"String","isRequired":true}},{"id":"TfsWorkItemId","description":"Original work item id","type":"WorkItemField","properties":{"workItemFieldTypes":["Integer"]}}],"::Attributes":16,"::Version":"0.1.20"}}
Thanks in advance.

Answer 1

I ended up using static values and got it working.
var Provider = () => {
this.ServerfieldName = "Source.Server";
this.CollectionfieldName = "Source.Collection";
this.ProjectfieldName = "Source.Project";
this.WorkItemIdfieldName = "Source.Id";
this._view = View;
return{
onLoaded: (WorkItemLoadedArgs: ExtensionContracts.IWorkItemLoadedArgs) => {
var deferred = Q.defer();
WorkItemFormService.getService().then(
(service) => {
Q.spread<any, any>(
[service.getFieldValue(this.ServerfieldName),service.getFieldValue(this.CollectionfieldName),
service.getFieldValue(this.ProjectfieldName),service.getFieldValue(this.WorkItemIdfieldName)],
(server: string, collection: string, project: string, workitemId: number) => {
var data =(`${server}/${collection}/${project}/_workitems#_a=edit&id=${workitemId}`);
if(server){
this._view = new View(data);
}
else{
$('body').empty().append("This is the original Work Item");
}
})
.catch(function (e) {deferred.reject(e)}
);
return deferred.promise; //.then(null);
}
)}
}
};
and used a view,
/// <reference path="../typings/index.d.ts" />
export class View {
constructor(public value:string) {
var Container = $("<div role='link'> </div>");
Container.addClass("Container");
Container.attr('tabindex', '0');
var rdiv = $("<div/>").addClass("rightDiv");
var ldiv = $("<div/>");
var help = $("<span></span>").text("Original Tfs work item ");
var a = $("<a> </a>");
a.attr("href", value);
a.attr("target", "_blank");
a.text("here.");
help.append(a);
ldiv.append(help);
Container.append(rdiv);
Container.append(ldiv);
$('body').empty().append(Container);
}
}