作業項目フォームの拡張

Azure DevOps Services |Azure DevOps Server |Azure DevOps Server 2022

拡張機能を使用して、グループ、ページ、メニュー アクション、オブザーバー、またはカスタム コントロールを追加して作業項目フォームをカスタマイズします。

• グループ を追加する
• ページを追加する (タブ)
• メニュー アクションを追加する
• カスタム コントロールを追加する
• イベントを監視する
• コントリビューションを構成する

完全なソース コードについては、GitHub の Azure DevOps 拡張機能サンプルの UI の例を参照してください。

グループを追加する

メインページにグループを追加するには、ms.vss-work-web.work-item-formをターゲットとしたms.vss-work-web.work-item-form-groupの種類を持つ拡張機能マニフェストに貢献を追加します。

"contributions": [
   {  
       "id": "sample-work-item-form-group",
       "type": "ms.vss-work-web.work-item-form-group",
       "description": "Custom work item form group",
       "targets": [
           "ms.vss-work-web.work-item-form"
       ],
       "properties": {
           "name": "My Group",
           "uri": "workItemGroup.html",
           "height": 600
       }
   }
]

プロパティ

JavaScript のサンプル

次の使用例は、作業項目フォーム イベントに応答するプロバイダーを登録します。 作業項目の読み込み時に、 WorkItemFormService を使用してフィールド値を読み取ります。

import { IWorkItemFormService, WorkItemTrackingServiceIds } from "azure-devops-extension-api/WorkItemTracking";
import * as SDK from "azure-devops-extension-sdk";

async function getWorkItemFormService(): Promise<IWorkItemFormService> {
    return await SDK.getService<IWorkItemFormService>(WorkItemTrackingServiceIds.WorkItemFormService);
}

SDK.init();

SDK.ready().then(() => {
    SDK.register(SDK.getContributionId(), () => {
        return {
            // Called when the active work item is modified
            onFieldChanged: (args) => {
                console.log("onFieldChanged", JSON.stringify(args));
            },

            // Called when a new work item is being loaded in the UI
            onLoaded: async (args) => {
                const service = await getWorkItemFormService();
                const values = await service.getFieldValues([
                    "System.Id", "System.Title", "System.State", "System.CreatedDate"
                ]);
                console.log("onLoaded", JSON.stringify(values));
            },

            // Called when the active work item is being unloaded in the UI
            onUnloaded: (args) => {
                console.log("onUnloaded", JSON.stringify(args));
            },

            // Called after the work item has been saved
            onSaved: (args) => {
                console.log("onSaved", JSON.stringify(args));
            },

            // Called when the work item is reset to its unmodified state (undo)
            onReset: (args) => {
                console.log("onReset", JSON.stringify(args));
            },

            // Called when the work item has been refreshed from the server
            onRefreshed: (args) => {
                console.log("onRefreshed", JSON.stringify(args));
            }
        };
    });
});

イベント

ページを追加

新しいページが作業項目フォームのタブとしてレンダリングされます。 [ 詳細 ] タブの横に新しいページが表示されます。

作業項目フォームにページを追加するには、ms.vss-work-web.work-item-form-pageをターゲットにしたms.vss-work-web.work-item-form型の拡張機能マニフェストにコンポーネントを追加してください。

"contributions": [
    {  
        "id": "sample-work-item-form-page",
        "type": "ms.vss-work-web.work-item-form-page",
        "description": "Custom work item form page",
        "targets": [
            "ms.vss-work-web.work-item-form"
        ],
        "properties": {
            "name": "My Page",
            "uri": "workItemPage.html"
        } 
    }
]

プロパティ

JavaScript のサンプル

フォーム グループセクションの JavaScript サンプルを参照してください。 登録されているオブジェクトの名前は、コントリビューションの id と一致する必要があります。

イベント

コントリビューションを構成する

Azure DevOps Services では、グループ拡張機能は既定で 2 番目の列の末尾に表示され、ページのコントリビューションは最後のタブとして表示されます。コントロールの投稿は既定では表示されません。ユーザーは手動でフォームに追加する必要があります。 Azure DevOps Server で、コントリビューションを表示、非表示、または移動するように 作業項目フォーム拡張機能を構成 するを参照してください。

メニュー アクションの追加

作業項目ツール バーに項目を追加するには、拡張機能マニフェストにこのコントリビューションを追加します。 項目が縦の省略記号 (...) ドロップダウン メニューに表示されます。

"contributions": [
   {  
      "id": "sample-work-item-menu",  
      "type": "ms.vss-web.action",  
      "description": "Sample toolbar item which updates the title of a work item",  
      "targets": [  
          "ms.vss-work-web.work-item-context-menu"  
      ],  
      "properties": {  
          "text": "Try me!",  
          "title": "Updates the title of the work item from the extension",  
          "toolbarText": "Try me!",  
          "icon": "images/show-properties.png",  
          "uri": "menu-workItemToolbarButton.html"  
      }  
   }
]

プロパティ

イベントをリッスンする

オブザーバーは、フォーム上の UI なしで作業項目イベントをリッスンします。 オブザーバーを使用してonSavedイベントをリッスンします。なぜなら、オブザーバーはフォームの外部に存在しており、フォームダイアログが閉じても破棄されないためです。

"contributions": [
   {  
       "id": "sample-work-item-form-observer",
       "type": "ms.vss-work-web.work-item-notifications",
       "description": "Gets events about the current work item form for the 'Try Me!' toolbar button",
       "targets": [
           "ms.vss-work-web.work-item-form"
       ],
       "properties": {
           "uri": "myformobserver.html"
       }
   }
]

プロパティ

イベント

JavaScript のサンプル

次の例では、最新の SDK を使用してオブザーバーを登録します。

import * as SDK from "azure-devops-extension-sdk";

SDK.init();

SDK.ready().then(() => {
    SDK.register(SDK.getContributionId(), () => {
        return {
            onFieldChanged: (args) => {
                // Handle field changes
            },
            onLoaded: (args) => {
                // Handle work item loaded
            },
            onUnloaded: (args) => {
                // Handle work item unloaded
            },
            onSaved: (args) => {
                // Handle work item saved
            },
            onReset: (args) => {
                // Handle work item reset (undo)
            },
            onRefreshed: (args) => {
                // Handle work item refreshed
            }
        };
    });
});

互換性に関する注意事項

アクション対アクション プロバイダー

メニュー ハンドラーでms.vss-web.action-providerを使用してメニュー項目を動的に読み込む場合は、getMenuItemsを使用します。 メニュー項目が静的であり、マニフェストで定義されている場合は、 ms.vss-web.action を使用します。

非推奨のパターン

次のパターンはサポートされなくなりました。

• require("VSS/Events/Document") - 新しい Boards Hub ではサポートされていません
• SDK.js usePlatformScripts: trueを含むスクリプト タグ - 代わりに npm パッケージ azure-devops-extension-sdkを使用します

関連するコンテンツ

• 作業項目フォームにカスタム コントロールを追加します。
• 作業項目フォーム拡張機能を構成する (オンプレミス)
• 拡張機能マニフェスト参照
• コントリビューションモデル