メニュー アクションの追加
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"
}
}
]
...
Properties
| Property | 説明 |
|---|---|
| text | メニュー項目に表示されるテキスト。 |
| タイトル | メニュー項目に表示されるツールヒント テキスト。 |
| icon | メニュー項目に表示されるアイコンの URL。 相対 URL は baseUri を使用して解決されます。 |
| groupId | このメニュー項目が他のメニュー項目と関連して表示される場所を決定します。 |
| uri | メニュー アクション ハンドラーを登録するページへの URI (下記参照)。 |
| registeredObjectId | (省略可能)登録済みのメニュー アクション ハンドラーの名前。 既定値は共同作成者 ID です。 |
機能拡張ポイントでアクション を追加できるすべての場所について説明します。
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>
Your JavaScript
次のスクリプトは、アクションを処理するハンドラー オブジェクトを登録し、前の head HTML ページのセクションに配置します。
マニフェスト ファイルに
node_modules/azure-devops-extension-sdk/libエイリアスを設定sdk-extension.jsonしましたlib。
<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 リファレンス、拡張機能のサンプル、開発者コミュニティのリソース」を参照してください。
次のステップ
拡張機能を作成したので、次の手順は拡張機能のパッケージ化、発行、インストールです。 拡張機能のテストとデバッグに関するドキュメントをチェックすることもできます。