我目前正在尝试制作一个 azure devops 扩展,它在自定义对话框中显示给定工作项的子票证列表。
设置清单和 ts 脚本后,我发布了自定义对话框,但自定义对话框上没有显示任何内容。
devops 板上我的自定义模式的图像:
我在这里可能做错了什么?我按照示例中
hub.tsx
中的示例进行操作。
这是我在清单中的贡献
json
:
"contributions": [
{
"id": "work-item-context-menu",
"type": "ms.vss-web.action",
"targets": ["ms.vss-work-web.work-item-context-menu"],
"properties": {
"text": "Test number 2",
"icon": "static/sort-amount-down-alt.png",
"uri": "dist/index.html",
"registeredObjectId": "work-item-toolbar-menu"
}
},
{
"id": "addItemsDialog",
"type": "ms.vss-web.control",
"targets": [],
"properties": {
"uri": "dist/dialog.html"
}
}
]
这将是我的代码:
import "es6-promise/auto";
import * as SDK from "azure-devops-extension-sdk";
import { CommonServiceIds, getClient, IHostPageLayoutService, } from "azure-devops-extension-api";
import { BuildDefinition, BuildRestClient } from "azure-devops-extension-api/Build";
SDK.register("work-item-toolbar-menu", () => {
return {
execute: async (context: BuildDefinition) => {
alert("Custom work item toolbar action!");
console.log(context);
const dialogSvc = await SDK.getService<IHostPageLayoutService>(CommonServiceIds.HostPageLayoutService);
dialogSvc.openCustomDialog(SDK.getExtensionContext().id + ".addItemsDialog", {
title: "My Custom Modal",
configuration: {
message: "testing",
initialValue: true
},
onClose: (result) => {
if (result !== undefined) {
console.log("Results")
console.log(result);
}
}
});
}
}
});
SDK.init();
.addItemsDialog
扩展指向html页面:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test App</title>
</head>
<body>
<!-- <script type="text/javascript" src="bundle.js" charset="utf-8"></script> -->
<p> Hello World </p>
</body>
</html>
他们的示例 github 存储库中有一个示例。
这就是我试图遵循的:
private async onCustomPromptClick(): Promise<void> {
const dialogService = await SDK.getService<IHostPageLayoutService>(CommonServiceIds.HostPageLayoutService);
dialogService.openCustomDialog<boolean | undefined>(SDK.getExtensionContext().id + ".panel-content", {
title: "Custom dialog",
configuration: {
message: "Use compact pivots?",
initialValue: this.state.useCompactPivots
},
onClose: (result) => {
if (result !== undefined) {
this.setState({ useCompactPivots: result });
}
}
});
}
这是他们的贡献:
{
"contributions": [
{
"id": "hub",
"type": "ms.vss-web.hub",
"targets": [
"ms.vss-build-web.build-release-hub-group"
],
"includes": [
"ms.vss-tfs-web.tfs-page-data-service",
"ms.vss-features.host-navigation-service",
"ms.vss-features.extension-data-service",
"ms.vss-features.host-dialog-service"
],
"properties": {
"name": "Sample hub",
"uri": "dist/Hub/Hub.html",
"icon": "asset://static/sample-icon.png",
"supportsMobile": true
}
}
]
}
我不确定如何进行这项工作,或者我在上面的示例中缺少什么,我正在尝试做类似的事情,但我想从工作项上下文菜单而不是中心打开我的自定义对话框。
根据您到目前为止的描述,您的扩展似乎引用此文档来为工作项添加菜单操作,而不是添加中心。
遵循 work-item-toolbar-menu 的另一个类似示例扩展,它在
work-item-toolbar-menu.html
路径下生成 work-item-toolbar-menu.js
和 dist\work-item-toolbar-menu
,并以 ms.vss-work-web.work-item-toolbar-menu
的贡献为目标。但是,清单中的 addItemsDialog
没有目标贡献。我们也不知道您的 Typescript 是否生成了所有这些页面。如果可能,您可以考虑使用针对单个贡献的预期内容来渲染 index.html
。
据我所知,您的扩展是使用 azure-devops-extension-sdk 构建的。
我建议切换到 azure-devops-extension-api 并与 Node Js 进行反应。该 API 提供了许多优点:在构建扩展、管理组件之间的变量以及整体可用性方面更加直观。此外,还有更多示例和文档可用于使用此方法实现扩展。
这是一个存储库,我在其中发现了很多有用的想法:[存储库链接]。它包含几个可能对您有用的示例。
如果您对此方法有任何疑问,我可以进一步帮助您