SDK.init() silently fails in Azure DevOps Extension

56 Views Asked by At

I followed the tutorial listed here ( https://learn.microsoft.com/en-us/azure/devops/extend/get-started/node?view=azure-devops ) and several other related examples.

The sample code builds and can be published. I can load the hub page and it displays the HTML contenxt (Hello, ), but the call to SDK.init() silently fails. No error messages, nothing logged in the console. I tried debugging, but the code is minified and I couldn't make sense of it.

Below is the HTML and Javascript code that the tutorial has us create after downloading the SDK.

I've been an ADO admin for years, but this is my first time writing an extension and I've been surprised by these frustrating hiccups.

Can anyone offer a hint or a clue or advice on creating a simple extension? My goal is to build a work item control (ms.vss-work-web.work-item-form-control) to show a field value from the parent or grandparent item, but this hub sample was a good, simple tutorial and I feel like I'm close but I don't know where to go from here.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
    <script>
        window.requirejs.config({
            enforceDefine: true,
            paths: {
                'SDK': './lib/SDK.min'
            }
        });
        window.requirejs(['SDK'], function (SDK) {
            if (typeof SDK !== 'undefined') {
                console.log("SDK is defined. Trying to initialize...");
                SDK.init();
                SDK.ready(function() {
                    console.log("SDK is ready");
                    document.getElementById("name").innerText = SDK.getUser().name;
                });
            } else {
                console.log('SDK is not defined');
            }
        });
    </script>
    <style>
        body {
            background-color: rgb(0, 67, 117);
            color: white;
            margin: 10px;    
            font-family: "Segoe UI VSS (Regular)","-apple-system",BlinkMacSystemFont,"Segoe UI",sans-serif;
        }
    </style>
</head>
<body>        
    <h1>Hello, <span id="name"></span></h1>
</body>
</html>
1

There are 1 best solutions below

2
Bright Ran-MSFT On

The sample you are trying is to add a custom option (hub) to under the Azure Repos hub group. When you click this custom option, it will open a web page defined by the HTML.

For your case, if you want to add a custom work item control, you can reference the sample "Add a custom control to the work item form".

The work item controls generally do not have the separate web pages. So, it is not required to define a HTML for this type of extensions.