0

We are trying to create a nice little VSTS dashboard widget to monitor some of our test metrics that will be stored in a remote storage. Using the following links,

https://www.visualstudio.com/en-us/docs/integrate/extensions/develop/add-dashboard-widget https://www.visualstudio.com/en-us/docs/integrate/extensions/develop/add-chart

I was able to create some basic line graphs. But, how does one go about customizing/fine tuning these further? The MSFT links do not provide extensive documentation (close to none) on the visualizations available. It looks like they are using HighCharts for the visualizations. But the services from VSS sdk do not accept the HighCharts options in the same format.

Basically, my questions are

  • Is there a way to build fancy visuals in the custom widgets? If so, where can I find the documentation on these.
  • Can we have advanced widgets that are interactive, for instance, something with a drop-down that modifies the data presented?


Considering the amount of time it takes to develop the widget (code, pacakges and publish!) it would be nice to have atleast documentation or source code for these.

P.S: If this is not the right channel for this question appreciate if some proper redirection is provided.

iambatman
  • 107
  • 1
  • 2
  • 16

2 Answers2

8

I create VSTS dashboards for my company, I am not going to lie about it, it is a hard process but I also pick the hard way too. dashboard normally uses knockout but, it is just CSS HTML and JavaScript. I use angular 4 for the dashboards and vanilla JS for the stand-alone widgets. I like Charts.js for my charts and you can do the same.

Just be careful on your file references (js,css etc.) don't do this /scripts/main.js do this : scripts/main.js and don't use base element in your html.

I will give you bunch of urls will help you to dive in. https://www.visualstudio.com/en-us/docs/integrate/extensions/get-started/node https://nocture.dk/2016/01/02/lets-make-a-visual-studio-team-services-extension/

https://github.com/Microsoft/vsts-extension-multivalue-control

those rest clients are very important : https://www.visualstudio.com/en-us/docs/integrate/extensions/reference/client/rest-clients but not the full set

Here is the Full set

rmo.d.ts(6): "ReleaseManagement/Core/Constants" 
rmo.d.ts(180): "ReleaseManagement/Core/Contracts" 
rmo.d.ts(1649): "ReleaseManagement/Core/ExtensionContracts" 
rmo.d.ts(1741): "ReleaseManagement/Core/RestClient" 
rmo.d.ts(2479): "ReleaseManagement/Core/Utils" 
tfs.d.ts(6): "TFS/Build/Contracts" 
tfs.d.ts(1894): "TFS/Build/ExtensionContracts" 
tfs.d.ts(1942): "TFS/Build/RestClient" 
tfs.d.ts(3473): "TFS/Chat/Contracts" 
tfs.d.ts(3609): "TFS/Chat/RestClient" 
tfs.d.ts(3776): "TFS/Core/Contracts" 
tfs.d.ts(4183): "TFS/Core/RestClient" 
tfs.d.ts(4454): "TFS/Dashboards/Contracts" 
tfs.d.ts(4714): "TFS/Dashboards/Events" 
tfs.d.ts(4724): "TFS/Dashboards/RestClient" 
tfs.d.ts(5182): "TFS/Dashboards/Services" 
tfs.d.ts(5215): "TFS/Dashboards/WidgetContracts" 
tfs.d.ts(5444): "TFS/Dashboards/WidgetHelpers" 
tfs.d.ts(5558): "TFS/DistributedTaskCommon/Contracts" 
tfs.d.ts(5610): "TFS/DistributedTask/Contracts" 
tfs.d.ts(6986): "TFS/DistributedTask/TaskAgentRestClient" 
tfs.d.ts(8132): "TFS/DistributedTask/TaskRestClient" 
tfs.d.ts(8379): "TFS/TestImpact/Contracts" 
tfs.d.ts(8531): "TFS/TestImpact/RestClient" 
tfs.d.ts(8629): "TFS/TestManagement/Contracts" 
tfs.d.ts(10145): "TFS/TestManagement/Helper/Utils" 
tfs.d.ts(10321): "TFS/TestManagement/RestClient" 
tfs.d.ts(11583): "TFS/VersionControl/Contracts" 
tfs.d.ts(13987): "TFS/VersionControl/Controls" 
tfs.d.ts(14063): "TFS/VersionControl/GitRestClient" 
tfs.d.ts(15175): "TFS/VersionControl/Services" 
tfs.d.ts(15202): "TFS/VersionControl/TfvcRestClient" 
tfs.d.ts(15543): "TFS/VersionControl/UIContracts" 
tfs.d.ts(15573): "TFS/WorkItemTracking/BatchRestClient" 
tfs.d.ts(15689): "TFS/WorkItemTracking/Contracts" 
tfs.d.ts(16337): "TFS/WorkItemTracking/ExtensionContracts" 
tfs.d.ts(16409): "TFS/WorkItemTracking/ProcessContracts" 
tfs.d.ts(16811): "TFS/WorkItemTracking/ProcessDefinitionsContracts" 
tfs.d.ts(17234): "TFS/WorkItemTracking/ProcessDefinitionsRestClient" 
tfs.d.ts(17783): "TFS/WorkItemTracking/ProcessRestClient" 
tfs.d.ts(17927): "TFS/WorkItemTracking/ProcessTemplateContracts" 
tfs.d.ts(17980): "TFS/WorkItemTracking/ProcessTemplateRestClient" 
tfs.d.ts(18069): "TFS/WorkItemTracking/RestClient" 
tfs.d.ts(18751): "TFS/WorkItemTracking/Services" 
tfs.d.ts(18940): "TFS/WorkItemTracking/UIContracts" 
tfs.d.ts(18957): "TFS/Work/Contracts" 
tfs.d.ts(19970): "TFS/Work/RestClient" 
vss.d.ts(2707): XDM 
vss.d.ts(2834): VSS 
vss.d.ts(2958): "VSS/Accounts/Contracts" 
vss.d.ts(3139): "VSS/Accounts/RestClient" 
vss.d.ts(3293): "VSS/Adapters/Knockout" 
vss.d.ts(3422): "VSS/Ajax" 
vss.d.ts(3466): "VSS/Artifacts/Constants" 
vss.d.ts(3501): "VSS/Artifacts/Services" 
vss.d.ts(3569): "VSS/Authentication/Contracts" 
vss.d.ts(3595): "VSS/Authentication/RestClient" 
vss.d.ts(3655): "VSS/Authentication/Services" 
vss.d.ts(3783): "VSS/Bundling" 
vss.d.ts(3837): "VSS/Commerce/Contracts" 
vss.d.ts(4808): "VSS/Commerce/RestClient" 
vss.d.ts(5119): "VSS/Common/Constants/Platform" 
vss.d.ts(5188): "VSS/Common/Contracts/FormInput" 
vss.d.ts(5463): "VSS/Common/Contracts/Platform" 
vss.d.ts(6336): "VSS/Common/Contracts/System" 
vss.d.ts(6381): "VSS/Common/Contracts/System.Data" 
vss.d.ts(6549): "VSS/Compatibility" 
vss.d.ts(6554): "VSS/Context" 
vss.d.ts(6652): "VSS/Contributions/Contracts" 
vss.d.ts(7728): "VSS/Contributions/Controls" 
vss.d.ts(7867): "VSS/Contributions/PageEvents" 
vss.d.ts(7869): "VSS/Contributions/RestClient" 
vss.d.ts(7972): "VSS/Contributions/Services" 
vss.d.ts(8399): "VSS/Controls" 
vss.d.ts(8743): "VSS/Controls/AjaxPanel" 
vss.d.ts(8749): "VSS/Controls/CheckboxList" 
vss.d.ts(8821): "VSS/Controls/Combos" 
vss.d.ts(9665): "VSS/Controls/Dialogs" 
vss.d.ts(10264): "VSS/Controls/EditableGrid" 
vss.d.ts(10545): "VSS/Controls/ExternalHub" 
vss.d.ts(10572): "VSS/Controls/FileInput" 
vss.d.ts(10708): "VSS/Controls/Filters" 
vss.d.ts(10878): "VSS/Controls/FormInput" 
vss.d.ts(11105): "VSS/Controls/Grids" 
vss.d.ts(12344): "VSS/Controls/Header" 
vss.d.ts(12369): "VSS/Controls/Histogram" 
vss.d.ts(12462): "VSS/Controls/KeyboardShortcuts" 
vss.d.ts(12632): "VSS/Controls/Menus" 
vss.d.ts(13646): "VSS/Controls/Navigation" 
vss.d.ts(14177): "VSS/Controls/Notifications" 
vss.d.ts(14330): "VSS/Controls/Panels" 
vss.d.ts(14471): "VSS/Controls/PerfBar" 
vss.d.ts(14473): "VSS/Controls/PopupContent" 
vss.d.ts(14588): "VSS/Controls/RichEditor" 
vss.d.ts(14884): "VSS/Controls/Search" 
vss.d.ts(15072): "VSS/Controls/Splitter" 
vss.d.ts(15376): "VSS/Controls/StatusIndicator" 
vss.d.ts(15700): "VSS/Controls/TabContent" 
vss.d.ts(16223): "VSS/Controls/TreeView" 
vss.d.ts(16703): "VSS/Controls/Validation" 
vss.d.ts(16933): "VSS/Controls/Virtualization" 
vss.d.ts(16999): "VSS/DelegatedAuthorization/Contracts" 
vss.d.ts(17260): "VSS/DelegatedAuthorization/RestClient" 
vss.d.ts(17395): "VSS/Diag" 
vss.d.ts(17749): "VSS/Diag/Services" 
vss.d.ts(17790): "VSS/Error" 
vss.d.ts(17796): "VSS/Events/Action" 
vss.d.ts(17878): "VSS/Events/Document" 
vss.d.ts(17962): "VSS/Events/Handlers" 
vss.d.ts(18061): "VSS/Events/Page" 
vss.d.ts(18116): "VSS/Events/Services" 
vss.d.ts(18146): "VSS/ExtensionManagement/Contracts" 
vss.d.ts(18868): "VSS/ExtensionManagement/RestClient" 
vss.d.ts(19175): "VSS/FeatureAvailability/Contracts" 
vss.d.ts(19201): "VSS/FeatureAvailability/RestClient" 
vss.d.ts(19301): "VSS/FeatureAvailability/Services" 
vss.d.ts(19340): "VSS/FeatureManagement/Contracts" 
vss.d.ts(19470): "VSS/FeatureManagement/RestClient" 
vss.d.ts(19594): "VSS/FileContainer/Contracts" 
vss.d.ts(19776): "VSS/FileContainer/RestClient" 
vss.d.ts(19880): "VSS/FileContainer/Services" 
vss.d.ts(19908): "VSS/Flux/Action" 
vss.d.ts(19931): "VSS/Flux/AsyncLoadedComponent" 
vss.d.ts(19944): "VSS/Flux/Component" 
vss.d.ts(19963): "VSS/Flux/PlatformComponent" 
vss.d.ts(20015): "VSS/Flux/Store" 
vss.d.ts(20049): "VSS/Gallery/Contracts" 
vss.d.ts(21571): "VSS/Gallery/RestClient" 
vss.d.ts(22268): "VSS/Graph/Contracts" 
vss.d.ts(22504): "VSS/Graph/RestClient" 
vss.d.ts(22688): "VSS/Identities/Contracts" 
vss.d.ts(22886): "VSS/Identities/Mru/Contracts" 
vss.d.ts(22906): "VSS/Identities/Mru/RestClient" 
vss.d.ts(22991): "VSS/Identities/Picker/Cache" 
vss.d.ts(23134): "VSS/Identities/Picker/Common" 
vss.d.ts(23160): "VSS/Identities/Picker/Constants" 
vss.d.ts(23214): "VSS/Identities/Picker/Controls" 
vss.d.ts(23972): "VSS/Identities/Picker/RestClient" 
vss.d.ts(24120): "VSS/Identities/Picker/Services" 
vss.d.ts(24347): "VSS/Identities/RestClient" 
vss.d.ts(24613): "VSS/JoinOrganization/Contracts" 
vss.d.ts(24623): "VSS/JoinOrganization/RestClient" 
vss.d.ts(24661): "VSS/Licensing/Contracts" 
vss.d.ts(24993): "VSS/Licensing/RestClient" 
vss.d.ts(25243): "VSS/Locations" 
vss.d.ts(25383): "VSS/Locations/Contracts" 
vss.d.ts(25553): "VSS/Locations/RestClient" 
vss.d.ts(25642): "VSS/Navigation/HubsProvider" 
vss.d.ts(25685): "VSS/Navigation/HubsService" 
vss.d.ts(25858): "VSS/Navigation/Services" 
vss.d.ts(26027): "VSS/Operations/Contracts" 
vss.d.ts(26099): "VSS/Operations/RestClient" 
vss.d.ts(26165): "VSS/OrganizationPolicy/Contracts" 
vss.d.ts(26191): "VSS/OrganizationPolicy/RestClient" 
vss.d.ts(26271): "VSS/Organization/Contracts" 
vss.d.ts(26446): "VSS/Organization/RestClient" 
vss.d.ts(26654): "VSS/Performance" 
vss.d.ts(26876): "VSS/Profile/Contracts" 
vss.d.ts(26989): "VSS/Profile/Metrics" 
vss.d.ts(27163): "VSS/Profile/RestClient" 
vss.d.ts(27629): "VSS/ReparentCollection/Contracts" 
vss.d.ts(27694): "VSS/SDK/Services/Dialogs" 
vss.d.ts(27751): "VSS/SDK/Services/ExtensionData" 
vss.d.ts(27874): "VSS/SDK/Services/Navigation" 
vss.d.ts(27955): "VSS/Search" 
vss.d.ts(28235): "VSS/SecurityRoles/Contracts" 
vss.d.ts(28319): "VSS/SecurityRoles/RestClient" 
vss.d.ts(28419): "VSS/Security/Contracts" 
vss.d.ts(28606): "VSS/Security/RestClient" 
vss.d.ts(28758): "VSS/Serialization" 
vss.d.ts(28826): "VSS/Service" 
vss.d.ts(28977): "VSS/Settings" 
vss.d.ts(29026): "VSS/Settings/RestClient" 
vss.d.ts(29123): "VSS/Telemetry/Contracts" 
vss.d.ts(29143): "VSS/Telemetry/RestClient" 
vss.d.ts(29209): "VSS/Telemetry/Services" 
vss.d.ts(29255): "VSS/UserMapping/Contracts" 
vss.d.ts(29269): "VSS/UserMapping/RestClient" 
vss.d.ts(29318): "VSS/Utils/Accessibility" 
vss.d.ts(29424): "VSS/Utils/Array" 
vss.d.ts(29610): "VSS/Utils/Clipboard" 
vss.d.ts(29644): "VSS/Utils/Core" 
vss.d.ts(29929): "VSS/Utils/Culture" 
vss.d.ts(30047): "VSS/Utils/Date" 
vss.d.ts(30247): "VSS/Utils/Draggable" 
vss.d.ts(30249): "VSS/Utils/File" 
vss.d.ts(30305): "VSS/Utils/Html" 
vss.d.ts(30406): "VSS/Utils/Mobile" 
vss.d.ts(30420): "VSS/Utils/Number" 
vss.d.ts(30471): "VSS/Utils/String" 
vss.d.ts(30668): "VSS/Utils/Tree" 
vss.d.ts(30715): "VSS/Utils/UI" 
vss.d.ts(31009): "VSS/Utils/Url" 
vss.d.ts(31170): "VSS/VSS" 
vss.d.ts(31423): "VSS/WebApi/Constants" 
vss.d.ts(31563): "VSS/WebApi/Contracts" 
vss.d.ts(31854): "VSS/WebApi/RestClient"
Murat Mercan
  • 623
  • 7
  • 22
  • Hello. Thanks for the detailed response. I am trying to see if I can avoid using external libraries for charts. The default "Charts/Services" provides some basic options that should suit our needs, as used in this link https://www.visualstudio.com/en-us/docs/integrate/extensions/develop/add-chart. But, other than the ones in the example, I cannot seems to find documentation or code about other options. I am trying to create some line charts in the widgets. – iambatman Jul 19 '17 at 07:34
  • https://www.visualstudio.com/en-us/docs/integrate/extensions/develop/add-chart is the source, I checked the typings files in vss-web-extension-sdk, and there is no reference there. – Murat Mercan Jul 19 '17 at 07:59
  • Yes. That is what is so confusing. I cannot figure out where and how that is being used. I am going to give Charts.js a shot. We will see how that goes. It looks easy enough. Thanks! – iambatman Jul 19 '17 at 08:04
  • Thanks for spelling out the undocumented REST clients. I have a feeling some of those are governed by undocumented OAuth scopes; any idea if a full list as available? See https://stackoverflow.com/questions/44765983/which-scope-lets-a-tfs-extension-manipulate-acls – Seva Alekseyev Aug 02 '17 at 23:06
  • Nevermind, found it, the scope is vso.base. Available since TFS 2017, undocumented, works for GET but not for POST. – Seva Alekseyev Aug 03 '17 at 18:51
4

There are many library that can build fancy visual chart, such as bootstrap charts, jQuery charts.

Regarding widget extension, you can set configuration page to configure widget. Check Hello World with Configuration article.

Simple sample from SimplePieChart, you can change pie to line (lowercase) for line chart.

<!DOCTYPE html>
<html>

<head>
    <script src="bower_components/vss-web-extension-sdk/lib/VSS.SDK.min.js"></script>
    <script type="text/javascript">
VSS.init({
        explicitNotifyLoaded: true,
        usePlatformStyles: true 
    });

VSS.require([
        "TFS/Dashboards/WidgetHelpers", 
        "Charts/Services"
        ],
        function (WidgetHelpers, Services) {
        WidgetHelpers.IncludeWidgetStyles();
        VSS.register("SimplePieChart", function () { 
             return {
             load:function() {
                return Services.ChartsService.getService().then(function(chartService){
                    var $container = $('#Chart-Container');
                    var chartOptions = { 
                        "hostOptions": { 
                            "height": "290", 
                            "width": "300"
                        },
                        "chartType": "pie",
                        "series": [{
                            "data": [11, 4, 3, 1]
                        }],
                        "xAxis": { 
                            "labelValues": ["Design", "On Deck", "Completed", "Development"] 
                        }, 
                        "specializedOptions": {
                            "showLabels": "true",
                            "size": 200
                        } 
                    };

                    chartService.createChart($container, chartOptions);
                    return WidgetHelpers.WidgetStatusHelper.Success();
                });
                }
             }
            });
    VSS.notifyLoadSucceeded();
});
</script>
</head>

<body>
    <div class="widget">
        <h2 class="title">Chart Widget</h2>
        <div id="Chart-Container"></div>
    </div>
</body>

</html>
starian chen-MSFT
  • 33,174
  • 2
  • 29
  • 53
  • But the default "Charts/Services" module is actually quite nice. This link here https://www.visualstudio.com/en-us/docs/integrate/extensions/develop/add-chart shows how to add pie chart, etc. It would be nice to have all the options detailed somewhere. We are trying to add some line charts in the widget that could have a dropdown. Do you think it is better to pursue the other options you have mentioned instead, that is bootstrap, jquery etc? It just seems like extra code that can be avoided. – iambatman Jul 19 '17 at 07:25
  • @iambatman No, just based on detail requirement, if some features aren't supported in Charts/Services, you can choose others or you are familiar with some 3rd libs. – starian chen-MSFT Jul 19 '17 at 08:15
  • @iambatman The sample from vsts-extension-sample is simple, you can refer to it to do test. (I updated my answer) – starian chen-MSFT Jul 19 '17 at 09:13