Egyéni vezérlő hozzáadása a munkaelem-űrlaphoz

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

Az egyéni vezérlők segítségével módosíthatja, hogy a felhasználók hogyan tekinthetik meg és kezelhetik a munkaelem-űrlapon lévő mezőket. Az alábbi cikk bemutatja, hogyan készült ez a minta egyéni vezérlő. Ez a cikk bemutatja, hogyan hozhat létre saját egyéni vezérlőt.

Tipp.

A legújabb bővítményfejlesztési útmutatásért, beleértve a témázást és a VSS.SDK-ből való migrálást, lásd az Azure DevOps Extension SDK fejlesztői portálját.

Előfeltételek

Az azure-devops-extension-sdk belefoglalása a projektbe:

  1. Telepítse az SDK-t npm használatával: npm install azure-devops-extension-sdk.

  2. Inicializálja a JavaScript-kódban:

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

A vezérlő hozzájárulás hozzáadása

Adj hozzá egy hozzájárulást a bővítményjegyzékhez a ms.vss-work-web.work-item-form-control típus megcélzásával 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"
    ]

A munkaelem űrlapján egy egyéni vezérlő töltődik be IFrame-ben.

Vezérlőtulajdonságok

Tulajdonság Leírás
name A csoportban megjelenő szöveg.
uri URI az IFrame-ben betöltött HTML-lapra.
height (Nem kötelező) Az IFrame magassága képpontban. Az alapértelmezett érték 50.
inputs A felhasználók által megadott értékek, amikor hozzáadják a vezérlőt az űrlaphoz.

Az IFrame dinamikus átméretezéséhez használja az resize SDK metódusát.

Az egyéni vezérlő egy olyan hozzájárulás, amely hasonló a csoport- és oldal-hozzájárulásokhoz. A fő különbség az, hogy a vezérlőelem-hozzájárulások elfogadják a felhasználói bemeneteket, míg a csoport- és oldalbemenetek nem.

Hozzájárulási bemenetek szabályozása

inputs A hozzájárulási objektum tulajdonságával konfigurálható bemeneteket határozhat meg a vezérlőhöz.

Az alábbi példa két bemenetet határoz meg: FieldName meghatározza, hogy melyik munkaelemmezőhöz van társítva a vezérlő, és Colors konfigurálja, hogy mely színek feleljenek meg a mezőértékeknek. A felhasználók ezeket az értékeket akkor adják meg, amikor hozzáadják a vezérlőt az űrlaphoz, és az értékeket a rendszer betöltési időben továbbítja a vezérlőnek.

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

Bemeneti tulajdonságok

A következő tulajdonságok határoznak meg egy felhasználói bemenetet:

Tulajdonság Leírás
azonosító A bemenet egyedi azonosítója.
leírás A bemenet rövid leírása.
type (Nem kötelező) Bemeneti típus. Annak WorkItemField jelzésére szolgál, hogy az értéknek egy munkaelem-mező hivatkozási nevének kell lennie.
tulajdonságok (Nem kötelező) Egyéni tulajdonságok. A workItemFieldTypes-t használva korlátozhatja, hogy mely mezőtípusok érvényesek (például String, Integer, DateTime, Boolean).
Érvényesítés Érvényesítési szabályok. Beállítás dataType (String, , Number, Booleanvagy Field) és isRequired (true vagy false).

workItemFieldTypes Támogatott értékek: String, Integer, DateTime, PlainText, HTML, TreePath, History, Double, Guid, Boolean, Identity, PicklistStringPicklistIntegerPicklistDouble, .

JavaScript-minta

Az egyéni vezérlőbővítmények úgy működnek, mint egy csoport- vagy oldalbővítmény, azzal a kiegészítéssel, hogy beolvassa a felhasználói bemeneti értékeket SDK.getConfiguration().witInputs. Az alábbi minta regisztrál egy szolgáltatót, amely válaszol a munkaelem-űrlapeseményekre:

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

Az alábbi képernyőképen egy minta egyéni munkaelem-vezérlő látható a Prioritás mezőhöz.

Képernyőkép az egyéni vezérlőről a munkaelem-űrlapon.

Kapcsolódó tartalom

  • Last updated on