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

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

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

Совет

Для получения последних рекомендаций по разработке расширений, включая темизацию и миграцию из VSS.SDK, смотрите на портале разработчика пакета SDK для расширений Azure DevOps.

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

Включите 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.

Свойства элемента управления

Свойство Описание
name Текст, отображаемый в группе.
uri URI к HTML-странице, загруженной в IFrame.
height (Необязательно) Высота IFrame в пикселях. Значение по умолчанию — 50.
inputs Значения, которые пользователи предоставляют при добавлении элемента управления в форму.

Чтобы динамически изменить размер 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
        }
    }
]

Входные свойства

Следующие свойства определяют входные данные пользователя:

Свойство Описание
идентификатор Уникальный идентификатор входных данных.
описание Краткое описание входных данных.
type (Необязательно) Тип входных данных. Используется WorkItemField для указания значения, которое должно быть именем ссылки на поле рабочего элемента.
свойства (Необязательно) Настраиваемые свойства. Используйте workItemFieldTypes для ограничения допустимых типов полей (например, String, Integer, , DateTime). Boolean
Проверки Правила проверки. Задать dataType (String, Number, Boolean, или Field) и isRequired (true или 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 .

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

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

  • Last updated on