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

  • [アーティクル]

Azure DevOps Services

垂直方向のナビゲーションでは、一部の拡張機能に影響する変更が加わります。 これらの結果には、拡張機能アイコンのサポートと、チーム コンテキストの変更が含まれます。

ヒント

Azure DevOps 拡張機能 SDK を使用した拡張機能開発に関する最新のドキュメントをご覧ください。

チーム コンテキスト

従来の水平ナビゲーションでは、ユーザーはページ ヘッダーの左上にあるピッカーから選択することで、プロジェクトまたはチームに移動できます。 このピッカーは、最近のチームの一覧と、すべてのチームを参照する方法を示しました。 新しい垂直ナビゲーションでは、ユーザーはプロジェクトにのみ移動できます (チームには移動できません)。 この変更は、全体的なエクスペリエンスを簡略化するために行われました。 しかし、ページ ヘッダーで従来のチーム ピッカーを使用してチームを切り替えるユーザーの機能に依存する Web 拡張機能に対する課題が導入されました。

SDK.getWebContext()は、ユーザーが操作している現在のorganization、プロジェクト、チームに関する情報を提供する 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など) を設定できます。 このアイコンは、垂直ナビゲーション バーのハブの横に表示されます。 拡張機能と共にパッケージ化する必要があります。

注意

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

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

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

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

  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"
        }
    }
}