Een aangepast besturingselement toevoegen aan het werkitemformulier

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

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.

Vereisten

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

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

2. Initialiseer deze in uw JavaScript-code:

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

De bijdrage van het besturingselement toevoegen

Voeg een bijdrage toe aan uw uitbreidingsmanifest met het type ms.vss-work-web.work-item-form-control gericht op 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"
    ]

Het werkitemformulier laadt het aangepaste besturingselement in een IFrame.

Eigenschappen van bedieningselementen

Als u het formaat van het IFrame dynamisch wilt wijzigen, gebruikt u de resize methode in de SDK.

Een aangepast besturingselement is een soort bijdrage die vergelijkbaar is met groep- en paginabijdragen. Het belangrijkste verschil is dat besturingsbijdragen gebruikersinvoer accepteren, terwijl groeps- en pagina-bijdragen dat niet doen.

Bijdrage-invoer beheren

Gebruik de inputs eigenschap in het bijdrageobject om configureerbare invoer voor uw besturingselement te definiëren.

In het volgende voorbeeld worden twee invoerwaarden gedefinieerd: FieldName hiermee geeft u op aan welk werkitemveld het besturingselement is gekoppeld en Colors configureert u welke kleuren worden toegewezen aan welke veldwaarden. Gebruikers geven deze waarden op wanneer ze het besturingselement aan het formulier toevoegen en de waarden worden tijdens de laadtijd doorgegeven aan het besturingselement.

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

Invoereigenschappen

Met de volgende eigenschappen wordt een gebruikersinvoer gedefinieerd:

Ondersteunde workItemFieldTypes waarden: String, Integer, DateTime, PlainText, HTML, TreePath, History, Double, Guid, Boolean, Identity, PicklistString, PicklistInteger, PicklistDouble.

JavaScript-voorbeeld

Een aangepaste besturingsextensie werkt als een groep- of pagina-extensie, met de extra functionaliteit dat gebruikersinvoerwaarden via SDK.getConfiguration().witInputs worden gelezen. In het volgende voorbeeld wordt een provider geregistreerd die reageert op werkitemformulierevenementen:

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 schermafbeelding ziet u een voorbeeld van een aangepast besturingselement voor werkitems voor het veld Prioriteit.

Verwante inhoud

• Het werkitemformulier uitbreiden
• Verwijzing naar het extensiemanifest
• bijdragemodel