バックログ ページにパネルを追加する

Azure DevOps サービス

この記事では、ポートフォリオ バックログ、製品バックログ、イテレーション バックログの各ページにカスタム パネルを追加する方法について説明します。

ヒント

テーマ設定や VSS からの移行など、最新の拡張機能開発ガイダンスについて説明します。SDK については、 Azure DevOps Extension SDK 開発者ポータルを参照してください。

[ストーリー] バックログ ページの拡張パネルが開いているスクリーンショット。

カスタム パネルは、マッピング パネルと同じスペースで開きます。

[ポートフォリオ バックログ] ページのカスタム パネル拡張機能のスクリーンショット。

3 つのバックログ カテゴリでパネル拡張機能がサポートされます。 アジャイル、スクラム、および CMMI プロセス テンプレートには、次のコントリビューション ポイントが適用されます。 カスタム テンプレートの場合は、プロセスを確認して、要件またはポートフォリオ カテゴリを使用するバックログを特定します。

バックログ カテゴリ 貢献ポイント
ポートフォリオ (エピック、フィーチャー) ms.vss-work-web.portfolio-backlog-toolpane
要件 (ユーザー ストーリー、製品バックログ項目) ms.vss-work-web.requirement-backlog-toolpane
スプリント バックログ ms.vss-work-web.iteration-backlog-toolpane

詳細については、 Azure DevOps Services 拡張機能のサンプルを参照してください。

拡張機能マニフェストを更新する

拡張機能マニフェスト ファイルを次のコードで更新します。 次の使用例は、3 つのバックログの種類すべてにパネルを追加します。

{
	"contributions": [
		{
			"id": "Fabrikam.HelloWorld.Backlogs.Panel",
			"type": "ms.vss-work-web.backlog-panel",
			"description": "Adds a 'Hello' panel to Product and Iteration backlog pages.",
			"targets": [
				"ms.vss-work-web.requirement-backlog-toolpane",
				"ms.vss-work-web.portfolio-backlog-toolpane",
				"ms.vss-work-web.iteration-backlog-toolpane"
			],
			"properties": {
				"title": "Hello Panel Pane",
				"name": "Hello Panel",
				"uri": "index.html",
				"registeredObjectId": "backlogPanelObject"
			}
		}
	],
	"scopes": [
		"vso.work"
	]
}

貢献

拡張機能の各コントリビューションに対して、マニフェストは次を定義します。

  • 投稿の種類 (例: backlog-panel
  • コントリビューション ターゲット (要件、ポートフォリオ、イテレーション バックログ ツールペインなど)
  • 各コントリビューションの種類に固有のプロパティ

次の表では、パネル固有のプロパティについて説明します。

プロパティ Description
title メニュー項目に表示されるツールヒント テキスト。
name パネル選択のドロップダウンに表示されるテキスト。
uri パネルとして表示するページの、拡張機能のベース URI を基準としたパス。
registeredObjectId パネルに登録されているオブジェクトの ID。

拡張機能を追加できる場所の詳細については、「 拡張ポイント」を参照してください。

スコープ

拡張機能に必要なスコープを含めます。 この例では、 vso.work を使用して作業項目にアクセスします。

選択イベントを取得する

どの作業項目が選択されているかに関する選択イベントを取得するには、登録されているオブジェクトにこのインターフェイスを実装します。

...
	IContributedPanel {
		workItemSelectionChanged: (selectedWorkItems) => void;
	}
...

次のステップ