新增功能表動作

  • 發行項

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

在此範例中，我們會將動作新增至工作專案查詢中樞的查詢操作功能表。

提示

請參閱使用 Azure DevOps 擴充功能 SDK 進行擴充功能開發的最新檔。

本文的必要條件

  • 您必須為動作建立 Web 應用程式，您可以在中 樞範例中找到。
  • 如果您尚未這麼做，請參閱撰寫您的第一個 延伸模塊教學課程 ，以瞭解基本概念。

更新延伸模組指令清單檔案

以下是將動作新增至延伸模組指令清單貢獻區段的代碼段。

...
    "contributions": [
        {
            "id": "myAction",
            "type": "ms.vss-web.action",
            "description": "Run in Hello hub action",
            "targets": [
                "ms.vss-work-web.work-item-query-menu"
            ],
            "properties": {
                "text": "Run in Hello hub",
                "title": "Run in Hello hub",
                "icon": "images/icon.png",
                "groupId": "actions",
                "uri": "action.html"
            }
        }
    ]
...

屬性

屬性 說明
text 出現在功能表項上的文字。
title 出現在功能表項上的工具提示文字。
圖示 出現在功能表項上的圖示 URL。 相對 URL 是使用 baseUri 解析。
groupId 決定此功能表項與其他人相關的位置。
uri 登錄功能表動作處理程式之頁面的 URI（請參閱下方）。
registeredObjectId （選擇性）已註冊功能表動作處理程序的名稱。 預設為參與者標識碼。

瞭解您可以在擴充點中新增動作的所有位置。

您的 HTML 頁面

您的功能表動作是由內嵌在 HTML 檔案中的 JavaScript 腳本表示。 將下列內容儲存在符合延伸模組指令清單檔案中參考的檔案和位置中。

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Action Sample</title>
	</head>
	<body>
		<div>
			The end user doesn't see the content on this page.
			It is only in the background to handle the contributed menu item being selected.
		</div>
	</body>
	</html>

您的 JavaScript

下列腳本會註冊處理程式對象來處理動作，並將它放在 head 上一個 HTML 頁面的 區段中。

我們別名 lib 為 位於 node_modules/azure-devops-extension-sdk/lib 指令 sdk-extension.json 清單檔案中。

<script src="lib/SDK.min.js"></script>
<script>
    SDK.init();

    // Use an IIFE to create an object that satisfies the IContributedMenuSource contract
    var menuContributionHandler = (function () {
        "use strict";
        return {
            // This is a callback that gets invoked when a user selects the newly contributed menu item
            // The actionContext parameter contains context data surrounding the circumstances of this
            // action getting invoked.
            execute: function (actionContext) {
                alert("Hello, world");
            }
        };
    }());

    // Associate the menuContributionHandler object with the "myAction" menu contribution from the manifest.
    SDK.register(SDK.getContributionId(), menuContributionHandler);
</script>

提示

如需詳細資訊，請參閱擴充點、功能表和工具列、公式設計系統的貢獻模型、REST API 參考、擴充功能範例，以及 開發人員社群 中的資源。

下一步

現在您已撰寫延伸模組，接下來的步驟是套件、發佈和安裝擴充功能。 您也可以查看測試及偵錯延伸模組的檔。