Add an Action - Azure DevOps

Article
05/31/2023

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

In this example, we add an action to the query context menu in the work item queries hub.

Tip

Check out our newest documentation on extension development using the Azure DevOps Extension SDK.

Prerequisites for this article

You need to create a web app for your action, which can be found in the hub example.
If you haven't, take a look at the write your first extension tutorial to learn about the basics.

Update extension manifest file

Below is the code snippet that adds your action to the contributions section of your extension manifest.

...
    "contributions": [
        {
            "id": "myAction",
            "type": "ms.vss-web.action",
            "description": "Run in Hello hub action",
            "targets": [
                "ms.vss-work-web.work-item-query-menu"
            ],
            "properties": {
                "text": "Run in Hello hub",
                "title": "Run in Hello hub",
                "icon": "images/icon.png",
                "groupId": "actions",
                "uri": "action.html"
            }
        }
    ]
...

Properties

Property	Description
text	Text that appears on the menu item.
title	Tooltip text that appears on the menu item.
icon	URL to an icon that appears on the menu item. Relative URLs are resolved using baseUri.
groupId	Determines where this menu item appears in relation to the others.
uri	URI to a page that registers the menu action handler (see below).
registeredObjectId	(Optional) Name of the registered menu action handler. Defaults to the contributor ID.

Learn about all of the places where you can add actions in Extensibility points.

Your HTML page

Your menu action is represented by a JavaScript script embedded in an HTML file. Save the following contents in a file and location that matches the reference to it in your extension's manifest file.

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Action Sample</title>
	</head>
	<body>
		<div>
			The end user doesn't see the content on this page.
			It is only in the background to handle the contributed menu item being selected.
		</div>
	</body>
	</html>

Your JavaScript

The script below registers the handler object to handle the action, place it in the head section of the previous HTML page.

We aliased lib to be node_modules/azure-devops-extension-sdk/lib in our sdk-extension.json manifest file.

<script src="lib/SDK.min.js"></script>
<script>
    SDK.init();

    // Use an IIFE to create an object that satisfies the IContributedMenuSource contract
    var menuContributionHandler = (function () {
        "use strict";
        return {
            // This is a callback that gets invoked when a user selects the newly contributed menu item
            // The actionContext parameter contains context data surrounding the circumstances of this
            // action getting invoked.
            execute: function (actionContext) {
                alert("Hello, world");
            }
        };
    }());

    // Associate the menuContributionHandler object with the "myAction" menu contribution from the manifest.
    SDK.register(SDK.getContributionId(), menuContributionHandler);
</script>

Tip

For more information, see Extensibility points, menus and toolbars, the Contribution model the Formula Design System, REST API reference, Extension samples, and resources in the Developer Community.

Next steps

Now that you've written your extension, the next steps are to Package, Publish, and Install your extension. You can also check out the documentation for Testing and Debugging your extension.

Share via

Add a menu action