How to incorporate the azure-devops-sdk npm package into my Azure DevOps extension project?

Other Questions NPM
1

I’m working on an Azure DevOps extension that adds a button to the work item page. When clicked, it makes an API call and should display the response on the page. I’ve got the API call working, but I’m stuck on how to show the results.

I think I need the azure-devops-sdk package to update the work item page, but I’m not sure how to set up my project to use it. My current setup is pretty basic:

project/
├── button.html
└── vss-extension.json

The button.html file has some JavaScript that makes the API call, and vss-extension.json defines the extension.

How can I restructure my project to use the azure-devops-sdk? Do I need to switch to TypeScript? Any tips on integrating this package would be super helpful!

2

I’ve implemented several Azure DevOps extensions, and incorporating the azure-devops-sdk is indeed crucial for updating work item pages. While TypeScript isn’t mandatory, leveraging it can improve code quality and maintainability. You can restructure your project as suggested by Mike71. First, install the necessary dependencies such as azure-devops-sdk, webpack, and typescript via npm. In your TypeScript file, import the SDK modules:

import * as SDK from 'azure-devops-extension-sdk';
import { WorkItemFormService } from 'azure-devops-extension-api/WorkItemTracking';

SDK.init();
SDK.ready().then(() => {
    // Your logic here
});

Using the WorkItemFormService, you can interact with the work item form effectively. Bundling your code with webpack will help manage dependencies and streamline deployment.

3

hey sophiac, i’ve been there! you don’t necessarily need to switch to typescript, but it’s recommended. restructure ur project like this:

project/
├── src/
│ ├── button.ts
│ └── index.ts
├── webpack.config.js
└── vss-extension.json

use webpack to bundle everything. install azure-devops-sdk and import the modules u need in ur .ts files. good luck!

4

I’ve been down this road before, and integrating azure-devops-sdk can be a game-changer for your extension. While you don’t have to use TypeScript, it’s definitely worth considering for the long-term maintainability of your project.

Here’s what worked for me:

  1. Restructure your project as others suggested.
  2. Install necessary packages: azure-devops-sdk, webpack, typescript, and their types.
  3. Create a tsconfig.json for TypeScript configuration.
  4. Update your button.ts to use the SDK:
import * as SDK from 'azure-devops-extension-sdk';
import { getClient } from 'azure-devops-extension-api';
import { WorkItemTrackingRestClient } from 'azure-devops-extension-api/WorkItemTracking';

SDK.init();
SDK.ready().then(async () => {
    const client = getClient(WorkItemTrackingRestClient);
    // Your API call logic here
    // Use client to update work item
});

This approach lets you leverage the full power of the SDK while keeping your code organized and maintainable. Remember to update your vss-extension.json to point to your bundled script. Good luck with your extension!