添加菜单操作
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 | 显示在菜单项上的文本。 |
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/lib
sdk-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 参考、扩展示例和资源。
后续步骤
编写扩展后,后续步骤是打包、发布和安装扩展。 还可以检查用于测试和调试扩展的文档。