Hinzufügen eines benutzerdefinierten Steuerelements zum Arbeitsaufgabenformular

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

Mit benutzerdefinierten Steuerelementen können Sie ändern, wie Benutzer ein Feld im Arbeitselementformular anzeigen und damit interagieren. Der folgende Artikel erklärt Ihnen, wie dieses benutzerdefinierte Beispiel-Steuerelement erstellt wurde. In diesem Artikel erfahren Sie, wie Sie ein eigenes benutzerdefiniertes Steuerelement erstellen.

Voraussetzungen

Fügen Sie das Azure-devops-extension-sdk in Ihr Projekt ein:

1. Installieren Sie das SDK über npm: npm install azure-devops-extension-sdk.

2. Initialisieren Sie sie in Ihrem JavaScript-Code:

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

Hinzufügen des Steuerungsanteils

Fügen Sie einen Beitrag zu Ihrem Erweiterungsmanifest mit Typ ms.vss-work-web.work-item-form-control zur Zielausrichtung ms.vss-work-web.work-item-form hinzu:

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

Das Formular für Arbeitsaufgaben lädt ein benutzerdefiniertes Steuerelement in einem IFrame.

Steuerelementeigenschaften

Um die Größe des IFrame dynamisch zu ändern, verwenden Sie die resize Methode im SDK.

Ein benutzerdefiniertes Steuerelement ist eine Art von Beitrag ähnlich wie Gruppen- und Seitenbeiträge. Der Hauptunterschied besteht darin, dass Steuerungsbeiträge Benutzereingaben akzeptieren, während Gruppen- und Seitenbeiträge keine Benutzereingaben akzeptieren.

Steuerung von Beitragsdaten

Verwenden Sie die inputs Eigenschaft im Beitragsobjekt, um konfigurierbare Eingaben für Ihr Steuerelement zu definieren.

Im folgenden Beispiel werden zwei Eingaben definiert: FieldName Gibt an, welches Arbeitselementfeld das Steuerelement zugeordnet ist, und Colors konfiguriert, welche Farben den Feldwerten zugeordnet sind. Benutzer geben diese Werte an, wenn sie das Steuerelement dem Formular hinzufügen, und die Werte werden zum Ladezeitpunkt an das Steuerelement übergeben.

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

Eingabeeigenschaften

Die folgenden Eigenschaften definieren eine Benutzereingabe:

Unterstützte workItemFieldTypes Werte: String, Integer, DateTime, PlainText, HTML, TreePath, History, Double, Guid, Boolean, Identity, PicklistString, PicklistInteger, PicklistDouble.

JavaScript-Beispiel

Eine benutzerdefinierte Steuerelementerweiterung funktioniert wie eine Gruppen- oder Seitenerweiterung, mit der zusätzlichen Fähigkeit, dass sie Benutzereingabewerte über SDK.getConfiguration().witInputs liest. Im folgenden Beispiel wird ein Anbieter registriert, der auf Arbeitsaufgabenformularereignisse reagiert:

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

Der folgende Screenshot zeigt ein Beispiel für ein benutzerdefiniertes Arbeitsaufgabensteuerelement für das Feld "Priorität ".

Verwandte Inhalte

• Workitem-Formular erweitern
• Erweiterungsmanifestreferenz
• Beitragsmodell