Azure Question posted in
The official documentation to get you started can be found here.

No content displayed in Custom Dialog box (Azure devops extension)

I am currently trying to make an azure devops extension that shows a list of sub tickets for a given work item in a custom dialog box.

After setting up the manifest and the ts scripts, I published the custom dialog box and no content gets displayed on the custom dialog box.

Image of my custom modal in devops boards:

Image

What might have I done wrong here? I have followed the example in hub.tsx in the example .

This is my contributions in the manifest 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"
            }
        }
    ]

and this would be my code :

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();

The .addItemsDialog extension points to a html page:

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

There is an example in their samples github repo.

This is what I tried to follow:

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 });
                }
            }
        });
    }

And this is their contributions:

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

I am not sure how to make this work or what I am missing from this above example, I am trying to do something similar but I want to open my custom dialog box from the work item context menu instead of a hub.

Tags:

2

Answers


  1. 0

    Based on your description so far, it seemed that your extension was referencing this document to add menu action for work items rather than to add a hub.

    Following another similar sample extension for work-item-toolbar-menu, it generates the work-item-toolbar-menu.html and work-item-toolbar-menu.js under distwork-item-toolbar-menu path and targets the contribution of ms.vss-work-web.work-item-toolbar-menu. However, the addItemsDialog in your manifest has no target contributions. We also had no clue whether your Typescript had generated all those pages. If possible, you may consider rendering the index.html with your expected contents targeting a single contribution.

    Login or Signup to reply.
  2. 0

    From what I see, your extension is built using azure-devops-extension-sdk.

    I would recommend switching to azure-devops-extension-api and react with Node Js. This API offers numerous advantages: it is far more intuitive in terms of structuring your extension, managing variables between components, and overall usability. Additionally, there are more examples and documentation available for implementing extensions with this approach.

    Here’s a repository where I found a lot of useful ideas: [repo link]. It contains several examples that you might find helpful.

    If you have any questions about this method, I could help you further

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search