通过

添加菜单操作

  • 项目

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

在此示例中，我们将操作添加到工作项查询中心的查询上下文菜单。

提示

请查看我们关于使用 Azure DevOps 扩展 SDK进行扩展开发的最新文档。

先决条件

更新扩展清单文件

下面是一个代码片段，用于将你的操作添加到 扩展清单的贡献部分。

...
    "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"
            }
        }
    ]
...

性能

财产 描述
text 显示在菜单项上的文本。
标题 显示在菜单项上的工具提示文本。
图标 显示在菜单项上的图标的 URL。 相对 URL 将使用 baseUri 进行解析。
groupId 确定此菜单项相对于其他菜单项的显示位置。
uri 注册菜单操作处理程序的页面的 URI（请参阅下文）。
registeredObjectId （可选）已注册菜单操作处理程序的名称。 默认为参与者 ID。

了解可以在 扩展点中添加操作的所有位置。

您的 HTML 页面

菜单操作由嵌入 HTML 文件中的 JavaScript 脚本表示。 将以下内容保存在与扩展清单文件中引用匹配的文件和位置中。

	<!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>

您的JavaScript

下面的脚本注册处理程序对象来处理操作，将其置于上一 HTML 页面的 head 节中。

我们在 sdk-extension.json 清单文件中将 lib 设置为 node_modules/azure-devops-extension-sdk/lib 的别名。

<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>

提示

有关详细信息，请参阅 扩展点、菜单和工具栏、贡献模型公式设计系统、REST API 参考、扩展示例以及 开发人员社区中的资源。

后续步骤

编写扩展后，后续步骤是打包、发布和安装扩展。 还可以查看用于测试和调试扩展的文档。