自定义对话框中不显示任何内容（Azure devops 扩展）

Question

我目前正在尝试制作一个 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
            }
        }
    ]
}

我不确定如何进行这项工作，或者我在上面的示例中缺少什么，我正在尝试做类似的事情，但我想从工作项上下文菜单而不是中心打开我的自定义对话框。

Answer 1

根据您到目前为止的描述，您的扩展似乎引用此文档来为工作项添加菜单操作，而不是添加中心。

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

。

Answer 2

据我所知，您的扩展是使用 azure-devops-extension-sdk 构建的。

我建议切换到 azure-devops-extension-api 并与 Node Js 进行反应。该 API 提供了许多优点：在构建扩展、管理组件之间的变量以及整体可用性方面更加直观。此外，还有更多示例和文档可用于使用此方法实现扩展。

这是一个存储库，我在其中发现了很多有用的想法：[存储库链接]。它包含几个可能对您有用的示例。

如果您对此方法有任何疑问，我可以进一步帮助您

自定义对话框中不显示任何内容（Azure devops 扩展）

问题描述投票：0回答：2

2个回答

最新问题

自定义对话框中不显示任何内容（Azure devops 扩展）

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2