次の方法で共有

縦型ナビゲーション ガイダンス

  • [アーティクル]

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」を参照してください。

バックログやダッシュボードなどのチーム対応ハブにあるピボット/パネル拡張機能

拡張機能では、コントリビューションに渡された configuration オブジェクトを確認できます。 このオブジェクトは、コントリビューションの種類とコントリビューションがホストされる場所によって異なるプロパティを持ちます。 例は、 構成からチームを読み取り オンプレミスリリースで新しい垂直ナビゲーションと以前の水平ナビゲーションの両方をサポートするために 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など) をハブのアイコンとして設定できます。 このアイコンは、垂直ナビゲーション バーのハブの横に表示されます。 拡張機能と共にパッケージ化する必要があります。

Note

これらのアイコンは、水平方向のナビゲーションには表示されません。

ハブのアイコンを設定するには、次の手順を実行します。

  1. ハブコントリビューションの iconAsset プロパティを完全修飾資産識別子に設定します。これは、次のパターンに従います: {publisher-id}.{extension-id}/{asset-path}。

  2. この資産のエントリを includesData コントリビューション プロパティに追加します。

  3. マニフェストのルートにある 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"
        }
    }
}