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

Azure DevOps Services | Azure DevOps Server 2022 – Azure DevOps Server 2019

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ő. Megtudhatja, hogyan hozhat létre saját egyéni vezérlőt.

Tipp.

Tekintse meg a bővítményfejlesztéssel kapcsolatos legújabb dokumentációnkat az Azure DevOps Extension SDK használatával.

Az egyéni vezérlő hozzáadása

Ha vezérlőt szeretne hozzáadni a főoldalhoz, adjon hozzá egy hozzájárulást a bővítményjegyzékhez. A hozzájárulás típusának kell lennie ms.vss-work-web.work-item-form-control , és meg kell céloznia a hozzájárulást 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
        }
    }
]

A munkaelem-űrlap hozzáad egy IFrame-et az egyéni vezérlő üzemeltetéséhez.

Tulajdonságok

Tulajdonság	Leírás
name	A csoportban megjelenő szöveg.
uri	URI az IFrame által betöltött HTML-t tartalmazó lapra.
height	(Nem kötelező) Meghatározza az IFrame magasságát. Ha nincs megadva, az 50 képpont.
inputs	A felhasználó által az űrlapon megadott értékek.

Ha dinamikusan szeretné átméretezni az IFrame-et, használhatja az resize method ügyféloldali SDK-ban elérhetőeket.

A munkaeleműrlap egyéni vezérlőeleme egy másik típusú hozzájárulás, például csoport- és oldalbefizetés. A fő különbség az, hogy a vezérlőelem-hozzájárulások felhasználói bemenetek készletét is igénybe vehetik, míg a csoport- és oldalbemenetek nem.

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

A vezérlőelem-hozzájárulás bemeneteinek meghatározásához használja a inputs tulajdonságot a jegyzékben lévő hozzájárulási objektumban.

A következő mintában két bemenet látható: FieldName és Colors. FieldName megadja, hogy a vezérlő melyik mezővel társítja. Colors konfigurálja, hogy mely színek feleljenek meg a vezérlőben lévő értékeknek.

A bemenetek értékeit a felhasználók adják meg, amikor hozzáadják őket a munkaelem-űrlaphoz. Ezeket az értékeket a rendszer átadja a vezérlő-hozzájárulásnak, amikor betölti az űrlapra.

"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.",
        "validation": {
            "dataType": "String",
            "isRequired": false
        }
    }
]

A következő tulajdonságok határozzák meg a hozzájárulás által használható felhasználói bemenetet:

• id – A bemenet egyedi azonosítója.
• leírás – A bemenetet leíró néhány mondat.
• típus (nem kötelező) – A bemenet típusa.
  • Érvényes értékek:
    • WorkItemField – Azt jelzi, hogy a bemenet egy Munkaelem mező. A felhasználó által a bemenethez megadott értéknek az érvényes munkaelem-mező hivatkozási nevének kell lennie.
• tulajdonságok (nem kötelező) – A bemenet egyéni tulajdonságai.
  • Érvényes kulcsok:
    • workItemFieldTypes – A bemenet által támogatott mezőtípusok tömbjének meghatározása. Érvényes értékek:
      • String
      • Integer
      • DateTime
      • PlainText
      • HTML
      • TreePath
      • History
      • Double
      • Guid
      • Boolean
      • Identity
      • PicklistString
      • PicklistInteger
      • PicklistDouble
• érvényesítés – Olyan tulajdonságok halmaza, amelyek meghatározzák, hogy mely értékek tekinthetők érvényesnek a bemenethez.
  • Érvényes kulcsok:
    • dataType – Meghatározza a bemeneti érték adattípusát. A tulajdonság érvényes értékei:
      • String
      • Number
      • Boolean
      • Field
    • isRequired - Logikai érték, amely azt jelzi, hogy a bemenetnek rendelkeznie kell-e értékkel.

JavaScript-minta

A vezérlőbővítmények úgy működnek, mint egy csoport- vagy oldalbővítmény, egyetlen különbséggel, hogy bizonyos felhasználói bemeneteket is igénybe vehet. A felhasználói bemeneti értékek olvasásához használja a következőt VSS.getConfiguration().witInputs: . Az alábbi minta bemutatja, hogyan regisztrálhat egy objektumot, amely akkor van meghívva, amikor események történnek a munkaelem űrlapján, amely hatással lehet a közreműködő vezérlőelemre. Azt is bemutatja, hogyan olvashatja be a felhasználó által a vezérlőhöz megadott bemeneti értékeket.

import { Control } from "control";
import * as ExtensionContracts from "TFS/WorkItemTracking/ExtensionContracts";

var control: Control;

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

VSS.register(VSS.getContribution().id, provider);

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