Erweitern des Arbeitselementformulars

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

In diesem Artikel wird erläutert, wie Erweiterungen zum Anpassen des Arbeitselementformulars verwendet werden. Sie können eine Aktion, einen Beobachter, eine Gruppe oder eine Seite zum Arbeitsaufgabenformular in Azure DevOps hinzufügen.

• Hinzufügen einer Gruppe zur Hauptseite
• Hinzufügen einer Seite (Registerkarte)
• Hinzufügen einer Aktion zum Kontextmenü
• Hinzufügen eines benutzerdefinierten Steuerelements
• Auf Ereignisse im Formular lauschen
• Konfigurieren von Beiträgen im Arbeitsaufgabenformular

Den vollständigen Quellcode finden Sie im Beispiel für die Benutzeroberfläche in den Azure DevOps-Erweiterungsbeispielen auf GitHub.

Eine Gruppe hinzufügen

Um der Hauptseite eine Gruppe hinzuzufügen, fügen Sie ihrem Erweiterungsmanifest einen Beitrag hinzu. Die Art dieses Beitrags sollte sein ms.vss-work-web.work-item-form-group , und er sollte auf den ms.vss-work-web.work-item-form Beitrag abzielen.

"contributions": [
   {  
       "id": "sample-work-item-form-group",
       "type": "ms.vss-work-web.work-item-form-group",
       "description": "Custom work item form group",
       "targets": [
           "ms.vss-work-web.work-item-form"
       ],
       "properties": {
           "name": "My Group",
           "uri": "workItemGroup.html",
           "height": 600
       }
   }
]

Eigenschaften

JavaScript-Beispiel

In diesem Beispiel wird gezeigt, wie ein Objekt registriert wird, das aufgerufen wird, wenn Ereignisse im Arbeitsaufgabenformular auftreten, die sich auf die beigetragene Gruppe auswirken können.

import { IWorkItemFormService, WorkItemTrackingServiceIds } from "azure-devops-extension-api/WorkItemTracking";
import * as SDK from "azure-devops-extension-sdk";

// Get the WorkItemFormService.  This service allows you to get/set fields/links on the 'active' work item (the work item
// that currently is displayed in the UI).
async function getWorkItemFormService()
{
    const workItemFormService = await SDK.getService<IWorkItemFormService>(WorkItemTrackingServiceIds.WorkItemFormService);
    return workItemFormService;
}

// Register a listener for the work item group contribution after initializing the SDK.
SDK.register(SDK.getContributionId(), function () {
    return {
        // Called when the active work item is modified
        onFieldChanged: function(args) {
            $(".events").append($("<div/>").text("onFieldChanged - " + JSON.stringify(args)));
        },
        
        // Called when a new work item is being loaded in the UI
        onLoaded: function (args) {

            getWorkItemFormService().then(function(service) {            
                // Get the current values for a few of the common fields
                service.getFieldValues(["System.Id", "System.Title", "System.State", "System.CreatedDate"]).then(
                    function (value) {
                        $(".events").append($("<div/>").text("onLoaded - " + JSON.stringify(value)));
                    });
            });
        },
        
        // Called when the active work item is being unloaded in the UI
        onUnloaded: function (args) {
            $(".events").empty();
            $(".events").append($("<div/>").text("onUnloaded - " + JSON.stringify(args)));
        },
        
        // Called after the work item has been saved
        onSaved: function (args) {
            $(".events").append($("<div/>").text("onSaved - " + JSON.stringify(args)));
        },
        
        // Called when the work item is reset to its unmodified state (undo)
        onReset: function (args) {
            $(".events").append($("<div/>").text("onReset - " + JSON.stringify(args)));
        },
        
        // Called when the work item has been refreshed from the server
        onRefreshed: function (args) {
            $(".events").append($("<div/>").text("onRefreshed - " + JSON.stringify(args)));
        }
    }
});

Ereignisse

Seite hinzufügen

Eine neue Seite wird als Registerkarte im Arbeitsaufgabenformular gerendert. Neue Seiten werden neben der Registerkarte Details angezeigt.

Um dem Arbeitsaufgabenformular eine Seite hinzuzufügen, fügen Sie ihrem Erweiterungsmanifest einen Beitrag hinzu. Die Art dieses Beitrags sollte sein ms.vss-work-web.work-item-form-page , und er sollte auf den ms.vss-work-web.work-item-form Beitrag abzielen.

"contributions": [
    {  
        "id": "sample-work-item-form-page",
        "type": "ms.vss-work-web.work-item-form-page",
        "description": "Custom work item form page",
        "targets": [
            "ms.vss-work-web.work-item-form"
        ],
        "properties": {
            "name": "My Page",
            "uri": "workItemPage.html"
        } 
    }
]

Eigenschaften

JavaScript-Beispiel

Sehen Sie sich das JavaScript-Beispiel im Abschnitt "Formulargruppe" an. Der Name des registrierten Objekts sollte mit dem id Beitrag übereinstimmen.

Ereignisse

Konfigurieren von Beiträgen im Arbeitsaufgabenformular

In Azure DevOps Services werden die Gruppenerweiterungen standardmäßig am Ende der zweiten Spalte des Formulars angezeigt, und Seitenbeiträge werden nach allen Formularseiten der Arbeitsaufgabe als Registerkarte angezeigt. Steuerelementbeiträge werden standardmäßig nicht im Formular angezeigt, sodass Benutzer sie dem Formular manuell hinzufügen müssen. Informationen zum Ein-/Ausblenden oder Verschieben des Steuerelements, der Gruppen- und Seitenbeiträge im Arbeitsaufgabenformular finden Sie unter "Konfigurieren von Formularerweiterungen für Arbeitsaufgaben" in Azure DevOps Server.

Menüaktion hinzufügen

Wenn Sie der Symbolleiste für Arbeitsaufgaben ein Element hinzufügen möchten, fügen Sie diesen Beitrag zu Ihrem Erweiterungsmanifest hinzu. Wählen Sie die vertikalen Auslassungspunkte im Arbeitselementformular aus, um das Dropdownmenü anzuzeigen.

"contributions": [
   {  
      "id": "sample-work-item-menu",  
      "type": "ms.vss-web.action",  
      "description": "Sample toolbar item which updates the title of a work item",  
      "targets": [  
          "ms.vss-work-web.work-item-context-menu"  
      ],  
      "properties": {  
          "text": "Try me!",  
          "title": "Updates the title of the work item from the extension",  
          "toolbarText": "Try me!",  
          "icon": "images/show-properties.png",  
          "uri": "menu-workItemToolbarButton.html"  
      }  
   }
]

Eigenschaften

Auf Ereignisse lauschen

Um der Arbeitsaufgabe einen Beobachter hinzuzufügen, der die Arbeitsaufgabenereignisse überwacht, fügen Sie diesen Beitrag zu Ihrem Erweiterungsmanifest hinzu. Es gibt keine Visualisierung für Beobachter im Arbeitsaufgabenformular. Dies ist die beste Möglichkeit, das Arbeitselementformular onSaved-Ereignis zu überwachen, da sich der Beobachter außerhalb des Formulars befindet und nicht zerstört wird, wenn das Formular geschlossen wird, was direkt nach dem Speichern passieren kann.

"contributions": [
   {  
       "id": "sample-work-item-form-observer",
       "type": "ms.vss-work-web.work-item-notifications",
       "description": "Gets events about the current work item form for the 'Try Me!' toolbar button",
       "targets": [
           "ms.vss-work-web.work-item-form"
       ],
       "properties": {
           "uri": "myformobserver.html"
       }
   }
]

Eigenschaften

Ereignisse

HTML/JavaScript-Beispiel

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Work item extension page sample</title>
</head>

<body>
    <script src="sdk/scripts/SDK.js"></script>

    <script>
        SDK.init({
            usePlatformScripts: true
        });
        
        SDK.ready(function () {
             // Register a listener for the work item page contribution.
            SDK.register(SDK.getContributionId(), function () {
                return {
                    // Called when the active work item is modified
                    onFieldChanged: function(args) {
                        
                    },
                    
                    // Called when a new work item is being loaded in the UI
                    onLoaded: function (args) {
            
                    },
                    
                    // Called when the active work item is being unloaded in the UI
                    onUnloaded: function (args) {
            
                    },
                    
                    // Called after the work item has been saved
                    onSaved: function (args) {
            
                    },
                    
                    // Called when the work item is reset to its unmodified state (undo)
                    onReset: function (args) {
            
                    },
                    
                    // Called when the work item has been refreshed from the server
                    onRefreshed: function (args) {
            
                    }
                }
            });    
        });
     </script>
</body>
</html>    

Änderungen mit dem Hub für neue Boards

Verwenden der neuesten SDKs

Stellen Sie sicher, dass Ihre Erweiterung die neueste Version von azure-devops-extension-sdk verwendet.

Wenn Sie das neue SDK verwenden, sollten Sie auch das Azure-devops-extension-api-Paket für REST-APIs verwenden. Wir aktualisieren die Methoden und Schnittstellen jedes Sprints, um sicherzustellen, dass es alle neuesten Features enthält.

Gründe für die Verwendung von Aktionen oder Aktionsanbietern

Wird ms.vss-web.action-provider beim dynamischen Laden von Menüelementen im getMenuItems Menühandler verwendet. Vermeiden Sie die Verwendung ms.vss-web.action-provider , wenn Ihre Menüelemente statisch und in Ihrem Manifest definiert sind. Stattdessen ms.vss-web.action sollte verwendet werden.

Paket require("VSS/Events/Document") wird nicht mehr unterstützt

Der Import von require("VSS/Events/Document")wird nicht mehr für den Neuen Boards-Hub unterstützt.