Utöka formuläret för arbetsobjektet

Azure DevOps Services | Azure DevOps Server 2022 – Azure DevOps Server 2019

Lär dig hur du anpassar hur arbetsobjektsformuläret visas för användare via bidrag som görs via ett tillägg.

• Lägg till en grupp på huvudsidan
• Lägg till en sida (flik)
• Lägg till en åtgärd i snabbmenyn
• Lägga till en anpassad kontroll
• Lyssna efter händelser i formuläret
• Konfigurera bidrag i arbetsobjektsformulär

Se UI-exemplet i Azure DevOps-tilläggsexempel på GitHub för den fullständiga källan.

Lägg till en grupp

Om du vill lägga till en grupp på huvudsidan lägger du till ett bidrag till tilläggsmanifestet. Typen av bidrag bör vara ms.vss-work-web.work-item-form-group och den bör rikta in sig på ms.vss-work-web.work-item-form bidraget.

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

Egenskaper

JavaScript-exempel

Det här exemplet visar hur du registrerar ett objekt som anropas när händelser inträffar i arbetsobjektsformuläret som kan påverka din bidragsgrupp.

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

Händelser

Lägg till en sida

En ny sida återges som en flik i arbetsobjektsformuläret. Nya sidor visas bredvid fliken Information.

Om du vill lägga till en sida i arbetsobjektsformuläret lägger du till ett bidrag till tilläggsmanifestet. Typen av bidrag bör vara ms.vss-work-web.work-item-form-page och den bör rikta in sig på ms.vss-work-web.work-item-form bidraget.

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

Egenskaper

JavaScript-exempel

Se JavaScript-exemplet i avsnittet formulärgrupp. Namnet på det registrerade objektet ska matcha id bidragets.

Händelser

Konfigurera bidrag i arbetsobjektsformulär

I Azure DevOps Services visas som standard grupptilläggen i slutet av den andra kolumnen i formuläret och sidbidrag visas när alla arbetsobjektsformulärsidor visas som en flik. Kontrollbidrag visas inte i formuläret som standard, så användarna måste lägga till dem manuellt i formuläret. Information om hur du visar/döljer eller flyttar kontroll-, grupp- och sidbidrag i arbetsobjektsformulär finns i Konfigurera formulärtillägg för arbetsobjekt i Azure DevOps Server.

Lägg till menyåtgärd

Om du vill lägga till ett objekt i verktygsfältet för arbetsobjekt lägger du till det här bidraget i tilläggsmanifestet. Objektet visas i ... listrutan längst upp till höger i arbetsobjektsformuläret.

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

Egenskaper

Lyssna efter händelser

Om du vill lägga till en övervakare i arbetsobjektet, som lyssnar på händelser för arbetsobjektet, lägger du till det här bidraget i tilläggsmanifestet. Det finns ingen visualisering för observatörer i arbetsobjektsformuläret. Det här är det bästa sättet att lyssna på arbetsobjektsformuläret påAved-händelsen eftersom observatören bor utanför formuläret och inte förstörs när formuläret stängs, vilket kan hända direkt efter räddningen.

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

Egenskaper

Händelser

HTML/JavaScript-exempel

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

Ändringar med New Boards Hub

Använda de senaste SDK:erna

Kontrollera att tillägget använder den senaste versionen av azure-devops-extension-sdk

När du använder den nya SDK:n bör du också använda paketet azure-devops-extension-api för REST-API:er. Vi uppdaterar metoderna och gränssnitten varje sprint för att säkerställa att den innehåller alla de senaste funktionerna.

När åtgärds- eller åtgärdsprovider ska användas

Använd ms.vss-web.action-provider när menyalternativen läses in dynamiskt med hjälp av getMenuItems menyhanteraren. Undvik att använda ms.vss-web.action-provider när menyalternativen är statiska och definierade i manifestet. I stället ms.vss-web.action ska användas.

Paket kräv("VSS/Händelser/dokument") stöds inte längre

require("VSS/Events/Document") import stöds inte längre med New Boards Hub.