microsoft · danhellem · Apr 3, 2025 · Feb 28, 2025 · Mar 18, 2025 · Apr 1, 2025
diff --git a/src/Samples/backlog-board-card-item-menu/backlog-board-card-item-menu.json b/src/Samples/backlog-board-card-item-menu/backlog-board-card-item-menu.json
@@ -8,13 +8,13 @@
             ],
             "properties": {
                 "text": "Custom card menu item",
-                "uri": "dist/backlog-board-card-item-menu/backlog-board-card-item-menu",
+                "uri": "dist/backlog-board-card-item-menu/backlog-board-card-item-menu.html",
                 "icon": {
                     "light": "static/asterisk.png",
                     "dark": "static/asterisk.png"
                 },
                 "registeredObjectId": "backlog-board-card-item-menu"
             }
         }
-    ]   
+    ]
 }
diff --git a/src/Samples/backlog-board-card-item-menu/backlog-board-card-item-menu.ts b/src/Samples/backlog-board-card-item-menu/backlog-board-card-item-menu.ts
@@ -1,10 +1,18 @@
 import "es6-promise/auto";
 import * as SDK from "azure-devops-extension-sdk";
+import { CommonServiceIds, IHostPageLayoutService } from "azure-devops-extension-api";
 
 SDK.register("backlog-board-card-item-menu", () => {
     return {
         execute: async (context: any) => {
-            alert("Custom card menu action!");
+            const dialogService = await SDK.getService<IHostPageLayoutService>(CommonServiceIds.HostPageLayoutService);
+            dialogService.openPanel(SDK.getExtensionContext().id + ".panel-content", {
+                title: "Backlog Board Card Item Menu Panel",
+                description: "Project- and board context",
+                configuration: {
+                    context: context,
+                }
+            })
             console.log(context);
         }
     }

diff --git a/src/Samples/backlog-board-pivot-filter-menu/backlog-board-pivot-filter-menu.json b/src/Samples/backlog-board-pivot-filter-menu/backlog-board-pivot-filter-menu.json
@@ -13,5 +13,5 @@
                 "registeredObjectId": "backlog-board-pivot-filter-menu"
             }
         }
-    ]   
+    ]
 }
diff --git a/src/Samples/backlog-board-pivot-filter-menu/backlog-board-pivot-filter-menu.ts b/src/Samples/backlog-board-pivot-filter-menu/backlog-board-pivot-filter-menu.ts
@@ -1,11 +1,18 @@
 import "es6-promise/auto";
 import * as SDK from "azure-devops-extension-sdk";
+import { CommonServiceIds, IHostPageLayoutService } from "azure-devops-extension-api";
 
 SDK.register("backlog-board-pivot-filter-menu", () => {
     return {
         execute: async (context: any) => {
-            alert("Custom board pivot menu!");
-            console.log(context);
+            const dialogService = await SDK.getService<IHostPageLayoutService>(CommonServiceIds.HostPageLayoutService);
+            dialogService.openPanel(SDK.getExtensionContext().id + ".panel-content", {
+                title: "Backlog Board Pivot Filter Menu Panel",
+                description: "Team- and project context",
+                configuration: {
+                    context: context // pass the context to the panel
+                },
+            });
         }
     }
 });

diff --git a/src/Samples/backlog-item-menu/backlog-item-menu.json b/src/Samples/backlog-item-menu/backlog-item-menu.json
@@ -16,5 +16,5 @@
                 "registeredObjectId": "sample-backlog-item-menu"
             }
         }
-    ]   
+    ]
 }
diff --git a/src/Samples/backlog-item-menu/backlog-item-menu.ts b/src/Samples/backlog-item-menu/backlog-item-menu.ts
@@ -1,10 +1,18 @@
 import "es6-promise/auto";
 import * as SDK from "azure-devops-extension-sdk";
+import { CommonServiceIds, IHostPageLayoutService } from "azure-devops-extension-api";
 
 SDK.register("sample-backlog-item-menu", () => {
     return {
         execute: async (context: any) => {
-            alert("Hello, world");
+            const dialogService = await SDK.getService<IHostPageLayoutService>(CommonServiceIds.HostPageLayoutService);
+            dialogService.openPanel(SDK.getExtensionContext().id + ".panel-content", {
+                title: "Backlog Item Menu Panel",
+                description: "Project- and Backlogs context",
+                configuration: {
+                    context: context,
+                }
+            })
             console.log(context);
         }
     }

diff --git a/src/Samples/panel-content/panel-content.html b/src/Samples/panel-content/panel-content.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <div id="root"></div>
+        <script type="text/javascript" src="panel-content.js" charset="utf-8"></script>
+    </body>
+</html>
diff --git a/src/Samples/panel-content/panel-content.json b/src/Samples/panel-content/panel-content.json
@@ -0,0 +1,13 @@
+{
+    "contributions": [
+        {
+            "id": "panel-content",
+            "type": "ms.vss-web.external-content",
+            "properties": {
+                "name:": "Custom Panel Content",
+                "uri": "dist/panel-content/panel-content.html",
+                "registeredObjectId": "panel-content"
+            }
+        }
+    ]
+}
diff --git a/src/Samples/panel-content/panel-content.tsx b/src/Samples/panel-content/panel-content.tsx
@@ -0,0 +1,70 @@
+import * as React from "react";
+import * as SDK from "azure-devops-extension-sdk";
+
+import { showRootComponent } from "../../Common";
+import { Page } from "azure-devops-ui/Page";
+import { CommonServiceIds, IProjectPageService } from "azure-devops-extension-api";
+
+interface IPanelContent {
+    configuration: any;
+    projectContext: any;
+}
+
+class PanelContent extends React.Component<{}, IPanelContent> {
+
+    constructor(props: {}) {
+        super(props);
+        this.state = { configuration: undefined, projectContext: undefined };
+    }
+
+    public componentDidMount() {
+        try {
+            console.log("Component did mount, initializing SDK...");
+            SDK.init();
+
+            SDK.ready().then(() => {
+                console.log("SDK is ready, loading project config...");
+                this.setState({ configuration: SDK.getConfiguration() });
+                this.loadProjectContext();
+                SDK.resize(400, 600);
+            }).catch((error) => {
+                console.error("SDK ready failed: ", error);
+            });
+        } catch (error) {
+            console.error("Error during SDK initialization", error);
+        }
+    }
+
+    public render(): JSX.Element {
+        return (
+            <Page>
+                <div>
+                    <div>
+                        <h2>Extension Context:</h2>
+                        <pre>{JSON.stringify(this.state.configuration, null, 2)}</pre>
+                    </div>
+                    <div>
+                        <h2>Project Context:</h2>
+                        <pre>{JSON.stringify(this.state.projectContext, null, 2)}</pre>
+                    </div>
+                </div>
+            </Page>
+        );
+    }
+
+    private async loadProjectContext(): Promise<void> {
+        try {
+            const client = await SDK.getService<IProjectPageService>(CommonServiceIds.ProjectPageService);
+            const context = await client.getProject();
+
+            this.setState({ projectContext: context });
+
+            SDK.notifyLoadSucceeded();
+        } catch (error) {
+            console.error("Failed to load project context: ", error);
+        }
+    }
+
+}
+
+showRootComponent(<PanelContent />);
diff --git a/src/Samples/query-result-work-item-menu/query-result-work-item-menu.ts b/src/Samples/query-result-work-item-menu/query-result-work-item-menu.ts
@@ -1,13 +1,21 @@
 import "es6-promise/auto";
 import * as SDK from "azure-devops-extension-sdk";
+import { CommonServiceIds, IHostPageLayoutService } from "azure-devops-extension-api";
 
 SDK.register("query-result-work-item-menu", () => {
     return {
-        execute: async (context: any) => {
-            alert("Custom query result menu item!");
-            console.log(context);
+            execute: async (context: any) => {
+                const dialogService = await SDK.getService<IHostPageLayoutService>(CommonServiceIds.HostPageLayoutService);
+                dialogService.openPanel(SDK.getExtensionContext().id + ".panel-content", {
+                    title: "Query Result Work Item Menu Panel",
+                    description: "Project-and Queries context",
+                    configuration: {
+                        context: context,
+                    }
+                })
+                console.log(context);
+            }
         }
-    }
 });
 
 SDK.init();
diff --git a/src/Samples/sprint-board-pivot-filter-menu/sprint-board-pivot-filter-menu.json b/src/Samples/sprint-board-pivot-filter-menu/sprint-board-pivot-filter-menu.json
@@ -1,7 +1,7 @@
 {
     "contributions": [
         {
-            "id": "custom-sprint-board-pivot-filter-menu",
+            "id": "sprint-board-pivot-filter-menu",
             "type": "ms.vss-web.action",
             "targets": [
                 "ms.vss-work-web.sprint-board-pivot-filter-menu"
@@ -14,5 +14,5 @@
                 "registeredObjectId": "sprint-board-pivot-filter-menu"
             }
         }
-    ]   
+    ]
 }
diff --git a/src/Samples/sprint-board-pivot-filter-menu/sprint-board-pivot-filter-menu.ts b/src/Samples/sprint-board-pivot-filter-menu/sprint-board-pivot-filter-menu.ts
@@ -1,11 +1,18 @@
 import "es6-promise/auto";
 import * as SDK from "azure-devops-extension-sdk";
+import { CommonServiceIds, IHostPageLayoutService } from "azure-devops-extension-api";
 
 SDK.register("sprint-board-pivot-filter-menu", () => {
     return {
         execute: async (context: any) => {
-            alert("sprint board pivot menu!");
-            console.log(context);
+            const dialogService = await SDK.getService<IHostPageLayoutService>(CommonServiceIds.HostPageLayoutService);
+            dialogService.openPanel(SDK.getExtensionContext().id + ".panel-content", {
+                title: "Sprint Board Pivot Filter Menu Panel",
+                description: "Sprint- and project context",
+                configuration: {
+                    context: context // pass the context to the panel
+                },
+            });
         }
     }
 });

diff --git a/src/Samples/work-item-toolbar-menu/work-item-toolbar-menu.ts b/src/Samples/work-item-toolbar-menu/work-item-toolbar-menu.ts
@@ -1,10 +1,17 @@
 import "es6-promise/auto";
 import * as SDK from "azure-devops-extension-sdk";
+import { CommonServiceIds, IHostPageLayoutService } from "azure-devops-extension-api";
 
 SDK.register("work-item-toolbar-menu", () => {
     return {
         execute: async (context: any) => {
-            alert("Custom work item toolbar action!");
+            const dialogService = await SDK.getService<IHostPageLayoutService>(CommonServiceIds.HostPageLayoutService);
+            dialogService.openCustomDialog(SDK.getExtensionContext().id + ".panel-content", {
+                title: "Work Item Toolbar Menu Modal",
+                configuration: {
+                    context: context,
+                }
+            })
             console.log(context);
         }
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,5 +13,5 @@ @@
                     "registeredObjectId": "backlog-board-pivot-filter-menu"
                 }
             }
-        ]
+        ]
     }