CODEWITHSUNDEEP
tfsazure-devops
iambatman
iambatman

Reputation: 107

Creating a custom VSTS dashboard widget

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


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.

Upvotes: 0

Views: 5590

Answers (2)

starian chen-MSFT
starian chen-MSFT

Reputation: 33708

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>

Upvotes: 4

Murat Mercan
Murat Mercan

Reputation: 641

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"

Upvotes: 8

Related Questions