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:
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.
Analogue1 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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.