Přidání vlastního ovládacího prvku do formuláře pracovní položky

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

Vlastní ovládací prvky umožňují změnit způsob zobrazení uživatelů a interakci s polem ve formuláři pracovní položky. Následující článek vás provede postupem vytvoření tohoto ukázkového vlastního ovládacího prvku. V tomto článku se dozvíte, jak vytvořit vlastní ovládací prvek.

Tip

Nejnovější pokyny k vývoji rozšíření, včetně motivů a migrace z VSS.SDK, najdete na portálu pro vývojáře sady Azure DevOps Extension SDK.

Požadavky

Do projektu zahrňte sadu azure-devops-extension-sdk:

  1. Nainstalujte sadu SDK prostřednictvím npm: npm install azure-devops-extension-sdk.

  2. Inicializujete ho v kódu JavaScriptu:

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

Přidat příspěvek k ovládání

Přidejte příspěvek do manifestu rozšíření s typem ms.vss-work-web.work-item-form-control zaměřeným na 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"
    ]

Formulář pracovní položky načte vlastní ovládací prvek do prvku IFrame.

Vlastnosti ovládacího prvku

Vlastnost Popis
name Text, který se zobrazí ve skupině
uri Identifikátor URI stránky HTML načtené do elementu IFrame.
height (Volitelné) Výška prvku IFrame v pixelech Výchozí hodnota je 50.
inputs Hodnoty, které uživatelé zadají při přidávání ovládacího prvku do formuláře.

Pokud chcete dynamicky změnit velikost prvku IFrame, použijte metodu resize v sadě SDK.

Vlastní ovládací prvek je typ příspěvku podobného příspěvkům skupin a stránek. Klíčovým rozdílem je, že řízení příspěvků přijímá vstupy uživatelů, zatímco příspěvky skupin a stránek ne.

Řízení vstupů příspěvků

inputs Pomocí vlastnosti v objektu příspěvku můžete definovat konfigurovatelné vstupy pro váš ovládací prvek.

Následující příklad definuje dva vstupy: FieldName určuje pole pracovní položky, ke kterému je ovládací prvek přidružen, a Colors nakonfiguruje, které barvy se mapují na hodnoty pole. Uživatelé tyto hodnoty zadají při přidání ovládacího prvku do formuláře a hodnoty se předají ovládacímu prvku v době načtení.

"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
        }
    }
]

Vstupní vlastnosti

Následující vlastnosti definují vstup uživatele:

Vlastnost Popis
id Jedinečné ID pro vstup.
popis Stručný popis vstupu.
type (Volitelné) Typ vstupu. Použijte WorkItemField, pokud má být hodnota označena jako název odkazu pole pracovní položky.
vlastnosti (Volitelné) Vlastní vlastnosti. Slouží workItemFieldTypes k omezení platných typů polí (například String, Integer, DateTime, ). Boolean
Ověření Ověřovací pravidla. Nastavení dataType (String, Number, Booleannebo Field) a isRequired (true nebo false).

Podporované workItemFieldTypes hodnoty: String, Integer, DateTime, , PlainTextHTML, TreePathHistory, DoubleGuidBooleanIdentityPicklistString, PicklistInteger, . PicklistDouble

Ukázka JavaScriptu

Rozšíření vlastního ovládacího prvku funguje jako skupina nebo rozšíření stránky s přidáním, které čte vstupní hodnoty uživatele prostřednictvím SDK.getConfiguration().witInputs. Následující ukázka zaregistruje zprostředkovatele, který reaguje na události formuláře pracovní položky:

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);
});

Následující snímek obrazovky ukazuje ukázkový ovládací prvek pro vlastní pracovní položku v poli Priorita.

Snímek obrazovky vlastního ovládacího prvku ve formuláři pracovní položky

Související obsah

  • Last updated on