作業項目フォームにカスタム コントロールを追加する

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

ユーザー設定コントロールを使用すると、ユーザーが作業項目フォームのフィールドを表示および操作する方法を変更できます。 次の記事では、このサンプル カスタム コントロールの作成方法について説明します。 この記事では、独自のカスタム コントロールを構築する方法について説明します。

前提条件

プロジェクトに azure-devops-extension-sdk を含めます。

1. npm: npm install azure-devops-extension-sdk を使用して SDK をインストールします。

2. JavaScript コードで初期化して下さい。

   import * as SDK from "azure-devops-extension-sdk";
   SDK.init();
   

コントロールの寄与を追加する

拡張機能マニフェストに、種類ms.vss-work-web.work-item-form-controlでターゲットms.vss-work-web.work-item-formに対するコントリビューションを追加します。

"contributions": [
    {  
        "id": "sample-work-item-form-control",
        "type": "ms.vss-work-web.work-item-form-control",
        "description": "Custom work item form control",
        "targets": [
            "ms.vss-work-web.work-item-form"
        ],
        "properties": {
            "name": "My Control",
            "uri": "workItemControl.html",
            "height": 600
        }
    }
],
"manifestVersion": 1.0,
    "scopes": [
        "vso.work"
    ]

作業項目フォームは、IFrame にカスタム コントロールを読み込みます。

コントロールのプロパティ

IFrame のサイズを動的に変更するには、SDK で resize メソッドを使用します。

カスタム コントロールは、グループとページのコントリビューションに似た投稿の種類です。 主な違いは、コントロールコントリビューションはユーザー入力を受け入れるのに対し、グループとページのコントリビューションは受け入れないということです。

コントリビューション入力を制御する

コントリビューション オブジェクトの inputs プロパティを使用して、コントロールの構成可能な入力を定義します。

次の例では、2 つの入力を定義します。 FieldName コントロールが関連付けられている作業項目フィールドを指定し、 Colors どの色がどのフィールド値にマップするかを構成します。 ユーザーは、フォームにコントロールを追加するときにこれらの値を指定し、値は読み込み時にコントロールに渡されます。

"inputs": [
    {
        "id": "FieldName",
        "description": "The field associated with the control.",
        "type": "WorkItemField",
        "properties": {
            "workItemFieldTypes": ["String"]
        },
        "validation": {
            "dataType": "String",
            "isRequired": true
        }
    },
    {
        "id": "Colors",
        "description": "The colors that match the values in the control.",
        "type": "string",
        "validation": {
            "dataType": "String",
            "isRequired": false
        }
    }
]

入力プロパティ

次のプロパティは、ユーザー入力を定義します。

サポートされている workItemFieldTypes 値: String、 Integer、 DateTime、 PlainText、 HTML、 TreePath、 History、 Double、 Guid、 Boolean、 Identity、 PicklistString、 PicklistInteger、 PicklistDouble。

JavaScript のサンプル

カスタム コントロール拡張機能は、グループまたはページ拡張機能と同様に機能し、 SDK.getConfiguration().witInputsを介してユーザー入力値を読み取ります。 次の例では、作業項目フォーム イベントに応答するプロバイダーを登録します。

import { Control } from "control";
import * as SDK from "azure-devops-extension-sdk";
import * as ExtensionContracts from "azure-devops-extension-api/WorkItemTracking/WorkItemTracking";

let control;

const provider = () => {
    return {
        onLoaded: (workItemLoadedArgs) => {
            // create the control
            const config = SDK.getConfiguration();
            const fieldName = config.witInputs["FieldName"];
            const colors = config.witInputs["Colors"];
            control = new Control(fieldName, colors);
        },
        onFieldChanged: (fieldChangedArgs) => {
            const changedValue = fieldChangedArgs.changedFields[control.getFieldName()];
            if (changedValue !== undefined) {
                control.updateExternal(changedValue);
            }
        }
    };
};

SDK.init();
SDK.ready().then(() => {
    SDK.register(SDK.getContributionId(), provider);
});

次のスクリーンショットは、 Priority フィールドのカスタム作業項目コントロールの例を示しています。

関連するコンテンツ

• 作業項目フォームの拡張
• 拡張機能マニフェスト参照
• コントリビューションモデル