Delen via


Het werkitemformulier uitbreiden

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

Meer informatie over het aanpassen van hoe het werkitemformulier aan gebruikers wordt gepresenteerd via bijdragen die via een extensie worden gemaakt.

Zie het voorbeeld van de gebruikersinterface in de Voorbeelden van de Azure DevOps-extensie op GitHub voor de volledige bron.

Een groep toevoegen

Werkbalkitem in werkitemformulier.

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

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

Eigenschappen

Eigenschappen Beschrijving
name Tekst die wordt weergegeven in de groep.
uri URI naar een pagina die als host fungeert voor de HTML die wordt weergegeven in het werkitemformulier en de bijbehorende scripts.
height (Optioneel) Hiermee definieert u de hoogte van de groep. Als u dit weglaat, is dit 100%.

JavaScript-voorbeeld

In dit 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 groep.

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

gebeurtenis

Gebeurtenis Gebeurtenisbeschrijving Argument Beschrijving van argument
onFieldChanged Geactiveerd nadat een veld is gewijzigd. Als de veldwijziging regels heeft uitgevoerd die andere velden hebben bijgewerkt, maken al deze wijzigingen deel uit van één gebeurtenis. Id De id van het werkitem.
changedFields Matrix met de verwijzingsnaam van alle gewijzigde velden. Id De id van het werkitem.
onLoaded Wordt geactiveerd nadat de gegevens in het werkitemformulier worden geladen, wanneer de gebruiker een werkitem opent of wanneer de gebruiker naar een ander werkitem navigeert in de sorteerweergave. Id De id van het werkitem.
onReset Wordt geactiveerd nadat de gebruiker de wijzigingen in het werkitem ongedaan heeft genomen. Id De id van het werkitem.
onRefreshed Wordt geactiveerd nadat de gebruiker het werkitem handmatig heeft vernieuwd. Id De id van het werkitem.
onSaved Wordt geactiveerd nadat een werkitem is opgeslagen. Voor werkitems in een dialoogvenster moet u het type ms.vss-work-web.work-item-notifications instellen om ervoor te zorgen dat de gebeurtenis wordt geactiveerd nadat het dialoogvenster is gesloten, dit bijdragetype wordt verwijderd. Zie Luisteren naar gebeurtenissen voor meer informatie. Id De id van het werkitem.
onUnloaded Geactiveerd voordat de gebruiker het dialoogvenster sluit of voordat de gebruiker naar een ander werkitem in de sorteerweergave gaat. Id De id van het werkitem.

Een pagina toevoegen

Een nieuwe pagina wordt weergegeven als een tabblad in het werkitemformulier. Nieuwe pagina's worden weergegeven naast het tabblad Details.

Nieuwe pagina als tabblad in het werkitemformulier.

Als u een pagina wilt toevoegen aan het werkitemformulier, voegt u een bijdrage toe aan het uitbreidingsmanifest. Het type van deze bijdrage moet zijn ms.vss-work-web.work-item-form-page en moet gericht zijn op de ms.vss-work-web.work-item-form bijdrage.

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

Eigenschappen

Eigenschappen Beschrijving
naam Tekst die wordt weergegeven op de tabbladpagina.
uri URI naar een pagina die als host fungeert voor de HTML die wordt weergegeven in het werkitemformulier en de bijbehorende scripts.

JavaScript-voorbeeld

Zie het JavaScript-voorbeeld in de sectie formuliergroep. De naam van het geregistreerde object moet overeenkomen met de id bijdrage.

gebeurtenis

Gebeurtenis Gebeurtenisbeschrijving Argument Beschrijving van argument
onFieldChanged Geactiveerd nadat een veld is gewijzigd. Als de veldwijziging regels heeft uitgevoerd die andere velden hebben bijgewerkt, maken al deze wijzigingen deel uit van één gebeurtenis. Id De id van het werkitem.
changedFields Matrix met de verwijzingsnaam van alle gewijzigde velden. Id De id van het werkitem.
onLoaded Wordt geactiveerd nadat de gegevens in het werkitemformulier worden geladen, wanneer de gebruiker een werkitem opent of wanneer de gebruiker naar een ander werkitem navigeert in de sorteerweergave. Id De id van het werkitem.
onReset Wordt geactiveerd nadat de gebruiker de wijzigingen in het werkitem ongedaan heeft genomen. Id De id van het werkitem.
onRefreshed Wordt geactiveerd nadat de gebruiker het werkitem handmatig heeft vernieuwd. Id De id van het werkitem.
onSaved Wordt geactiveerd nadat een werkitem is opgeslagen. Voor werkitems in een dialoogvenster moet u het type ms.vss-work-web.work-item-notifications instellen om ervoor te zorgen dat de gebeurtenis wordt geactiveerd nadat het dialoogvenster is gesloten, dit bijdragetype wordt verwijderd. Zie Luisteren naar gebeurtenissen voor meer informatie. Id De id van het werkitem.
onUnloaded Geactiveerd voordat de gebruiker het dialoogvenster sluit of voordat de gebruiker naar een ander werkitem in de sorteerweergave gaat. Id De id van het werkitem.

Bijdragen configureren in werkitemformulier

In Azure DevOps Services worden standaard de groepsextensies weergegeven aan het einde van de tweede kolom van het formulier en paginabijdragen nadat alle formulierpagina's van het werkitem als tabblad worden weergegeven. Bijdragen van besturingselementen worden standaard niet in het formulier weergegeven, zodat gebruikers ze handmatig aan het formulier moeten toevoegen. Als u in Azure DevOps Server het besturingselement, de groeps- en paginabijdragen in het werkitemformulier wilt weergeven of verbergen of verplaatsen, raadpleegt u Formulierextensies voor werkitems configureren.

Menuactie Toevoegen

Voeg een item toe aan de werkbalk van het werkitem.

Als u een item wilt toevoegen aan de werkbalk van het werkitem, voegt u deze bijdrage toe aan het uitbreidingsmanifest. Het item wordt weergegeven in de ... vervolgkeuzelijst in de rechterbovenhoek van het werkitemformulier.

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

Eigenschappen

Eigenschappen Beschrijving
sms verzenden Tekst die wordt weergegeven op het werkbalkitem.
title Knopinfotekst die wordt weergegeven in het menu-item.
werkbalkTekst Tekst die wordt weergegeven wanneer het item wordt aanwijzer.
uri URI naar een pagina die de handler van de werkbalkactie registreert.
Menu URL naar een pictogram dat wordt weergegeven in het menu-item. Relatieve URL's worden omgezet met behulp van baseUri.
groeperen Bepaalt waar het menu-item wordt weergegeven, gerelateerd aan anderen. Werkbalkitems met dezelfde groepsnaam worden gegroepeerd en gedeeld door een scheidingsteken van de rest van de items.
registeredObjectId (Optioneel) Naam van de geregistreerde menuactiehandler. Standaard ingesteld op de bijdrage-id.

Luisteren naar gebeurtenissen

Als u een waarnemer wilt toevoegen aan het werkitem, dat luistert naar de gebeurtenissen van het werkitem, voegt u deze bijdrage toe aan uw uitbreidingsmanifest. Er is geen visualisatie voor waarnemers op het werkitemformulier. Dit is de beste manier om te luisteren naar het werkitemformulier op de gebeurtenisSaved, omdat de waarnemer buiten het formulier woont en niet wordt vernietigd wanneer het formulier wordt gesloten, wat kan gebeuren direct na het opslaan.

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

Eigenschappen

Eigenschappen Beschrijving
uri URI naar een pagina waarop de scripts worden gehost die naar gebeurtenissen luisteren.

gebeurtenis

Gebeurtenis Gebeurtenisbeschrijving Argument Beschrijving van argument
onFieldChanged Geactiveerd nadat een veld is gewijzigd. Als de veldwijziging regels heeft uitgevoerd die andere velden hebben bijgewerkt, maken al deze wijzigingen deel uit van één gebeurtenis. Id De id van het werkitem.
changedFields Matrix met de verwijzingsnaam van alle gewijzigde velden. Id De id van het werkitem.
onLoaded Wordt geactiveerd nadat de gegevens in het werkitemformulier worden geladen, wanneer de gebruiker een werkitem opent of wanneer de gebruiker naar een ander werkitem navigeert in de sorteerweergave. Id De id van het werkitem.
onReset Wordt geactiveerd nadat de gebruiker de wijzigingen in het werkitem ongedaan heeft genomen. Id De id van het werkitem.
onRefreshed Wordt geactiveerd nadat de gebruiker het werkitem handmatig heeft vernieuwd. Id De id van het werkitem.
onSaved Wordt geactiveerd nadat een werkitem is opgeslagen. Voor werkitems in een dialoogvenster moet u het type ms.vss-work-web.work-item-notifications instellen om ervoor te zorgen dat de gebeurtenis wordt geactiveerd nadat het dialoogvenster is gesloten, dit bijdragetype wordt verwijderd. Zie Luisteren naar gebeurtenissen voor meer informatie. Id De id van het werkitem.
onUnloaded Geactiveerd voordat de gebruiker het dialoogvenster sluit of voordat de gebruiker naar een ander werkitem in de sorteerweergave gaat. Id De id van het werkitem.

HTML-/JavaScript-voorbeeld

<!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>    

Wijzigingen met Nieuwe Boards Hub

Notitie

New Boards Hub is momenteel in preview, maar is op schema voor iedereen beschikbaar. We raden u sterk aan om New Boards Hub onmiddellijk in te schakelen en uw interne extensies te testen.

De nieuwste SDK's gebruiken

Zorg ervoor dat uw extensie de nieuwste versie van azure-devops-extension-sdk gebruikt

Wanneer u de nieuwe SDK gebruikt, moet u ook het azure-devops-extension-api-pakket voor REST API's gebruiken. We werken de methoden en interfaces bij elke sprint om ervoor te zorgen dat deze alle nieuwste functies bevat.

Wanneer moet u actie of actieprovider gebruiken

Gebruik ms.vss-web.action-provider deze optie wanneer u menu-items dynamisch laadt met behulp van getMenuItems de menuhandler. Vermijd het gebruik wanneer ms.vss-web.action-provider uw menu-items statisch zijn en zijn gedefinieerd in uw manifest. In plaats daarvan ms.vss-web.action moet worden gebruikt.

Pakket vereist("VSS/Events/Document") wordt niet meer ondersteund

require("VSS/Events/Document") importeren wordt niet meer ondersteund met New Boards Hub.