開發垂直 Web 導覽的延伸模組 - Azure DevOps

發行項
06/01/2023

Azure DevOps Services

垂直導覽會帶來會影響某些延伸模組的變更。這些結果包括延伸模組圖示的支援，以及小組內容的變更。

提示

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

小組內容

在傳統的水準流覽中，使用者可以從頁首左上方的選擇器中選取來移至專案或小組。此選擇器會顯示最近小組的清單，以及流覽所有小組的方式。在新垂直導覽中，使用者只能流覽至專案 (，而不能流覽至小組) 。這項變更是為了簡化整體體驗而進行。但是，它針對依賴使用者在頁面標頭中使用傳統小組選擇器切換團隊能力的 Web 延伸模組帶來挑戰。

SDK.getWebContext() 是 SDK 所提供的用戶端 API，提供使用者正在操作之目前組織、專案和小組的相關資訊：

{
    "account": {
        "name": "Fabrikam",
        "id": "50e49b94-4bb6-40e7-8c85-a6d756d8a4d8"
    },
    "project": {
        "name": "Fabrikam Dev",
        "id": "049b1af2-fc87-4e50-95e4-151357f04b7f"
    },
    "team": {
        "name": "Ops Team",
        "id": "9b3a6b80-fe95-4c8c-8aa1-1e5d535d7af1"
    }
}

我們不建議依賴 SDK.getWebContext().team 。相反地，請遵循下列指引，根據您的延伸模組落在的類別之下。

小組感知的中樞延伸模組

如果您的延伸模組需要為使用者提供選取小組的方式，您可以使用 Teams REST API 來取得目前專案的小組清單。下列範例示範如何從擴充功能呼叫此 API。

import { getClient } from "azure-devops-extension-api";
import { CoreRestClient } from "azure-devops-extension-api/Core";
import * as SDK from "azure-devops-extension-sdk";

private async getTeams() {
    const client = getClient(CoreRestClient);
    
    client.getTeams(SDK.getWebContext().project.id).then(
        function(teams) {
            console.log(teams);
        }
    );
}

如需提供小組選擇器控制項的延伸模組範例，請參閱 Team Calendar。

小組感知中樞內的樞紐/面板延伸模組，例如待辦專案和儀表板

您的延伸模組可以檢查傳遞至您貢獻的組態物件。此物件會根據貢獻類型以及裝載貢獻的位置，有不同的屬性。範例顯示從組態讀取小組，並從 webCoNtext 回到讀取小組，以支援內部部署版本中的新垂直流覽和較舊的水準導覽。

function getCurrentTeam() {
  let webContext = SDK.getWebContext();
  let configuration = SDK.getConfiguration();

  if ("team" in configuration) {
    return configuration.team;
  } else if ("team" in webContext) {
    return webContext.team;
  } else {
    return null; // should only happen if not in a project context
  }
}

小組感知中樞的動作延伸模組，例如待辦專案和儀表板

擴充功能可以檢查當使用者選取參與功能表項目時，傳遞給叫用回呼的 actionCoNtext 物件。範例顯示從 actionCoNtext讀取小組。

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 team information.
            execute: function (actionContext) {
                if("team" in actionContext) {
                    alert(`Team. Id is ${actionContext.team.id}, Name is ${actionContext.team.name}`);
                }
            }
        };
    }());

中樞圖示

您可以選擇性地設定資產 (，例如.png或.jpg) 作為中樞的圖示。此圖示會出現在垂直導覽列中的中樞旁邊。它必須與您的擴充功能一起封裝。

注意

這些圖示不會出現在水準導覽中。

完成下列步驟來設定中樞的圖示。

將 iconAsset 中樞貢獻的屬性設定為完整的資產識別碼，其遵循模式： {publisher-id}.{extension-id}/{asset-path} 。
在參與屬性中新增此資產的專案 includesata 。
將資產列在資訊清單根目錄的屬性中 files ，以使用擴充功能封裝資產。

範例 #1：

{
  "id": "my-extension",
  "publisherId": "my-publisher",
  ...
  "contributions": [
        {
            "id": "example-hub",
            "type": "ms.vss-web.hub",
            "targets": [
                "ms.vss-code-web.code-hub-group"
            ],
            "properties": {
                "name": "My Hub",
                "iconAsset": "my-publisher.my-extension/images/fabrikam-logo.png",
                "includesData": {
                    "assets": [
                        "my-publisher.my-extension/images/fabrikam-logo.png"
                    ]
                }
            }
       }
  ],
 "files": [
     {
         "path": "images/fabrikam-logo.png",
         "addressable": true
     }
 ]
}

範例 #2：

套用淺色與深色等主題時，您可以在延伸模組資訊清單中指定圖示，如下所示。


{
    "id": "hub",
    "type": "ms.vss-web.hub",
    "targets": [
        "ms.vss-work-web.work-hub-group"
    ],
    "properties": {
        "name": "Hub",
        "description": "Something",
        "uri": "pages/Hub.html",
        "icon": {
            "light": "img/hub-light.png",
            "dark": "img/hub-dark.png"
        }
    }
}

Share via

垂直導覽指引