Добавление пользовательского элемента управления в форму рабочего элемента

Сервисы Azure DevOps | Azure DevOps Server | Azure DevOps Server 2022

Пользовательские элементы управления позволяют изменять режим просмотра и взаимодействия пользователей с полем в форме рабочего элемента. В следующей статье описывается, как был создан этот пример пользовательского элемента управления. В этой статье показано, как создать собственный пользовательский элемент управления.

Предварительные условия

Включите azure-devops-extension-sdk в проект:

1. Установите пакет SDK через npm: npm install azure-devops-extension-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, используйте resize метод в пакете SDK.

Настраиваемый элемент управления — это тип компонента, аналогичного групповым и страницевым компонентам. Ключевое различие заключается в том, что контрольные вклады принимают входные данные пользователей, а вклады в группу и страницы не принимают.

Управление входными данными

Используйте свойство inputs в объекте взноса, чтобы определить настраиваемые входные параметры для элемента управления.

В следующем примере определяются два входных данных: 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 .

Связанный контент

• Расширение формы рабочего элемента
• Референция манифеста расширения
• модель распределения взносов