Custom Widgets

• List Changes per Work Item
• List Changes per Day
• List Changes per Label
• Duration of Each Column

Build A Custom Widget On Dashboard

Visual, low-code, and team-oriented widgets can help Agile teams better grasping the key factors of delivery effort no matter that’s development velocity or service lead/cycle time.

There are some good read from Microsoft’s site for building widgets on VSTS for your reference.

Here are steps to build one for on-premises TFS

First, download the sdk from GitHub’s Microsoft/vss-web-extension

Second, create 2 Html files, one for showing and one for configuring.

    <!-- Bootstrap core CSS -->

    <!-- Custom styles for this template --></pre>
<div class="widget" style="overflow: auto;"></div>
<pre>

Third, create a vss-entension.json file as the manifest file Find more details here

{
    "manifestVersion": 1,
    "id": "changes-workitems-files",
    "version": "1.0.0",
    "name": "List Changes Per Workitem",
    "description": "List Changes Per Workitem Per File",
    "publisher": "MySCM",
    "targets": [
        {
            "id": "Microsoft.VisualStudio.Services"
        }
    ],
    "icons": {
        "default": "img/logo.png"
    },

    "contributions": [
        {
            "id": "changes-workitems-files",
            "type": "ms.vss-dashboards-web.widget",
            "targets": [
                "ms.vss-dashboards-web.widget-catalog",
                ".changes-workitems-files.Configuration"
            ],
            "properties": {
                "name": "List Changes Per Workitem",
                "description": "List Changes Per Workitem Per File",
                "catalogIconUrl": "img/helloWorld.png",
                "previewImageUrl": "img/helloWorld_330x160.png",
                "uri": "changes-workitems-files.html",
                "supportedSizes": [
                  {
                    "rowSpan": 4,
                    "columnSpan": 4
                  }
                ],
                "supportedScopes": [
                    "project_team"
                ]
            }
        },
        {
            "id": "changes-workitems-files.Configuration",
            "type": "ms.vss-dashboards-web.widget-configuration",
            "targets": [
                "ms.vss-dashboards-web.widget-configuration"
            ],
            "properties": {
                "name": "List Changes Per Workitem Configuration",
                "description": "Configures changes-workitems-files",
                "uri": "configuration.html"
            }
        }
    ],
    "files": [
        {
            "path": "changes-workitems-files.html",
            "addressable": true
        },
        {
            "path": "configuration.html",
            "addressable": true
        },
        {
            "path": "bower_components/vss-web-extension-sdk/lib/VSS.SDK.min.js",
            "addressable": true
        },
        {
            "path": "treeview/jquery.js",
            "addressable": true
        },
        {
            "path": "treeview/bootstrap-treeview.js",
            "addressable": true
        },
        {
            "path": "treeview/treeview.js",
            "addressable": true
        },
        {
            "path": "treeview/bootstrap.css",
            "addressable": true
        },
        {
            "path": "treeview/dashboard.css",
            "addressable": true
        },
        {
            "path": "templates",
            "addressable": true
        },
        {
            "path": "img",
            "addressable": true
        }
    ],
    "scopes": [
      "vso.work",
      "vso.code"
    ]
}

Forth, optional icon/image file

Fifth, Package it into a vsix file

tfx extension create --manifest-globs vss-extension.json

Sixth, upload to the server, install, and enable it from there.

 

This example also incorporate some additional customization including

• A custom field in PBI for external ticket ID (the team use it to track their work and get approve for their deployment)
• A custom build step to label the code based on their associated external ticket by their associated work items

So here you go, we have a widget showing all changes in all branches for any specific external ticket. We got the whole picture, list of changed items, and movements of when and who.