メニュー アクションを追加する
Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019
この例では、作業項目クエリ ハブのクエリ コンテキスト メニューにアクションを追加します。
ヒント
Azure DevOps Extension SDKを使用した拡張機能開発に関する最新のドキュメントをご覧ください。
前提 条件
拡張機能マニフェスト ファイルを更新する
以下に拡張機能マニフェストの貢献セクションにアクションを追加するコードスニペットを示します。
...
"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"
}
}
]
...
プロパティ
| 財産 | 説明 |
|---|---|
| テキスト | メニュー項目に表示されるテキスト。 |
| タイトル | メニュー項目に表示されるツールヒント テキスト。 |
| アイコン | メニュー項目に表示されるアイコンの URL。 相対 URL は baseUri を使用して解決されます。 |
| groupId | このメニュー項目が他のメニュー項目と関連して表示される場所を決定します。 |
| uri | メニュー アクション ハンドラーを登録するページへの URI (下記参照)。 |
| 登録済みオブジェクトID | (省略可能)登録済みのメニュー アクション ハンドラーの名前。 既定値は共同作成者 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>
あなたのJavaScript
次のスクリプトは、アクションを処理するハンドラー オブジェクトを登録し、前の HTML ページの head セクションに配置します。
私たちは
sdk-extension.jsonマニフェスト ファイルでlibをnode_modules/azure-devops-extension-sdk/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 リファレンス、拡張機能のサンプル、および Developer Communityのリソース コントリビューション モデルを参照してください。
次の手順
拡張機能を作成したので、次の手順は拡張機能のパッケージ化、発行、インストールです。 拡張機能のテストとデバッグに関するドキュメントを確認することもできます。