Share via

添加菜单操作

  • 项目

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

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

提示

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

本文的先决条件

  • 需要为操作创建 Web 应用，可在中心示例中找到该应用。
  • 如果没有，请查看 第一个扩展教程 的编写，了解基础知识。

更新扩展清单文件

下面是将操作添加到扩展清单的贡献部分的代码片段。

...
    "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 显示在菜单项上的文本。
title 显示在菜单项上的工具提示文本。
图标 显示在菜单项上的图标的 URL。 使用 baseUri 解析相对 URL。
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>

Your JavaScript

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

我们别名lib位于node_modules/azure-devops-extension-sdk/libsdk-extension.json清单文件中。

<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 参考、扩展示例和资源。

后续步骤

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