Een aangepast besturingselement toevoegen aan het werkitemformulier

Artikel
10/16/2024

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

Met aangepaste besturingselementen kunt u wijzigen hoe gebruikers een veld in het werkitemformulier weergeven en gebruiken. In het volgende artikel wordt uitgelegd hoe dit aangepaste voorbeeldbeheer is gebouwd. In dit artikel leest u hoe u uw eigen aangepaste beheer kunt maken.

Tip

Bekijk onze nieuwste documentatie over uitbreidingsontwikkeling met behulp van de Azure DevOps Extension SDK.

Vereisten

Neem de azure-devops-extension-sdk op in uw project:

Installeer de SDK via npm: npm install azure-devops-extension-sdk.

Initialiseer deze in uw JavaScript-code:

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

Het aangepaste besturingselement toevoegen

Als u een besturingselement wilt toevoegen aan de hoofdpagina, voegt u een bijdrage toe aan het uitbreidingsmanifest. Het type bijdrage moet zijn ms.vss-work-web.work-item-form-control en moet gericht zijn op de ms.vss-work-web.work-item-form bijdrage.

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

Het werkitemformulier voegt een IFrame toe om het aangepaste besturingselement te hosten.

Eigenschappen

Eigenschappen	Beschrijving
`name`	Tekst die wordt weergegeven in de groep.
`uri`	URI naar een pagina die als host fungeert voor de HTML die door het IFrame wordt geladen.
`height`	(Optioneel) Hiermee definieert u de hoogte van het IFrame. Als u dit weglaat, is dit 50 pixels.
`inputs`	De waarden die een gebruiker in het formulier opbiedt.

Als u het formaat van het IFrame dynamisch wilt wijzigen, kunt u de resize method beschikbare in de client-SDK gebruiken.

Een aangepast besturingselement op het werkitemformulier is een ander type bijdrage, zoals de bijdrage van de groep en pagina. Het belangrijkste verschil is dat een bijdrage van een besturingselement een set gebruikersinvoer kan aannemen terwijl groeps- en paginabijdragen dat niet kunnen.

Invoer voor bijdragen beheren

Als u de invoer voor uw besturingselementbijdrage wilt definiëren, gebruikt u de inputs eigenschap in het bijdrageobject in het manifest.

In het volgende voorbeeld ziet u twee invoerwaarden: FieldName en Colors. FieldName geeft aan welk veld het besturingselement koppelt. Colors hiermee configureert u welke kleuren worden toegewezen aan welke waarden in het besturingselement.

De waarden voor de invoer worden geleverd door de gebruikers wanneer ze toevoegen aan het werkitemformulier. Deze waarden worden doorgegeven aan de bijdrage van het besturingselement wanneer deze in het formulier worden geladen.

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

Met de volgende eigenschappen wordt een gebruikersinvoer gedefinieerd die door de bijdrage kan worden gebruikt:

id : een unieke id voor de invoer.
beschrijving : een paar zinnen met een beschrijving van de invoer.
type (optioneel): het type invoer.
- Geldige waarden:
  - WorkItemField - Geeft aan dat de invoer een veld Werkitem is. De waarde van de gebruiker voor deze invoer moet een verwijzingsnaam zijn voor het geldige werkitemveld.
eigenschappen (optioneel): aangepaste eigenschappen voor de invoer.
- Geldige sleutels:
  - workItemFieldTypes - Definieert een matrix met veldtypen die door deze invoer worden ondersteund. Geldige waarden:
    - String
    - Integer
    - DateTime
    - PlainText
    - HTML
    - TreePath
    - History
    - Double
    - Guid
    - Boolean
    - Identity
    - PicklistString
    - PicklistInteger
    - PicklistDouble
validatie : een set eigenschappen die definieert welke waarden als geldig worden beschouwd voor de invoer.
- Geldige sleutels:
  - dataType - Definieert het gegevenstype van de invoerwaarde. Geldige waarden voor deze eigenschap:
    - String
    - Number
    - Boolean
    - Field
  - isRequired - Een Booleaanse waarde die aangeeft of de invoer een waarde moet hebben.

JavaScript-voorbeeld

Een besturingsextensie werkt als een groep of pagina-extensie met één verschil dat het bepaalde gebruikersinvoer kan aannemen. Als u de invoerwaarden van de gebruiker wilt lezen, gebruikt u VSS.getConfiguration().witInputs. In het volgende voorbeeld ziet u hoe u een object registreert dat wordt aangeroepen wanneer gebeurtenissen plaatsvinden in het werkitemformulier dat van invloed kan zijn op uw bijgedragen besturingselement. Het laat ook zien hoe u invoerwaarden leest die door de gebruiker voor dit besturingselement worden verstrekt.

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

In de volgende schermopname ziet u een voorbeeld van een besturingselement voor aangepast werkitem voor het veld Prioriteit .

Schermopname van aangepast besturingselement in werkitemformulier.

Delen via