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ő. Ez a cikk bemutatja, 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.
Előfeltételek
Az azure-devops-extension-sdk belefoglalása a projektbe:
Telepítse az SDK-t npm-en keresztül:
npm install azure-devops-extension-sdk
.Inicializálja a JavaScript-kódban:
import * as SDK from "azure-devops-extension-sdk"; SDK.init();
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
}
}
],
"manifestVersion": 1.0,
"scopes": [
"vso.work"
]
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.",
"type": "string",
"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.
- Érvényes értékek:
- 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 kulcsok:
- é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.
- Érvényes kulcsok:
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 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.