Het werkitemformulier uitbreiden

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

Gebruik extensies om het werkitemformulier aan te passen door groepen, pagina's, menuacties, waarnemers of aangepaste besturingselementen toe te voegen.

• Een groep toevoegen
• Een pagina (tabblad) toevoegen
• Een menuactie toevoegen
• Een aangepaste controle toevoegen
• Luisteren naar gebeurtenissen
• Bijdragen configureren

Zie het voorbeeld van de gebruikersinterface in de voorbeelden van Azure DevOps-extensies op GitHub voor de volledige broncode.

Een groep toevoegen

Als u een groep wilt toevoegen aan de hoofdpagina, voegt u een bijdrage toe aan uw uitbreidingsmanifest met het type ms.vss-work-web.work-item-form-group targeting ms.vss-work-web.work-item-form:

"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

JavaScript-voorbeeld

In dit voorbeeld wordt een provider geregistreerd die reageert op formulierevenementen van werkitems. Het gebruikt WorkItemFormService om veldwaarden te lezen wanneer het werkitem wordt geladen.

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

async function getWorkItemFormService(): Promise<IWorkItemFormService> {
    return await SDK.getService<IWorkItemFormService>(WorkItemTrackingServiceIds.WorkItemFormService);
}

SDK.init();

SDK.ready().then(() => {
    SDK.register(SDK.getContributionId(), () => {
        return {
            // Called when the active work item is modified
            onFieldChanged: (args) => {
                console.log("onFieldChanged", JSON.stringify(args));
            },

            // Called when a new work item is being loaded in the UI
            onLoaded: async (args) => {
                const service = await getWorkItemFormService();
                const values = await service.getFieldValues([
                    "System.Id", "System.Title", "System.State", "System.CreatedDate"
                ]);
                console.log("onLoaded", JSON.stringify(values));
            },

            // Called when the active work item is being unloaded in the UI
            onUnloaded: (args) => {
                console.log("onUnloaded", JSON.stringify(args));
            },

            // Called after the work item has been saved
            onSaved: (args) => {
                console.log("onSaved", JSON.stringify(args));
            },

            // Called when the work item is reset to its unmodified state (undo)
            onReset: (args) => {
                console.log("onReset", JSON.stringify(args));
            },

            // Called when the work item has been refreshed from the server
            onRefreshed: (args) => {
                console.log("onRefreshed", JSON.stringify(args));
            }
        };
    });
});

Evenementen

Een pagina toevoegen

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

Als u een pagina wilt toevoegen aan het werkitemformulier, voegt u een bijdrage toe aan uw uitbreidingsmanifest met het type ms.vss-work-web.work-item-form-page targeting ms.vss-work-web.work-item-form:

"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

JavaScript-voorbeeld

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

Evenementen

Bijdragen configureren

In Azure DevOps Services worden groepsextensies standaard aan het einde van de tweede kolom weergegeven en paginabijdragen worden weergegeven als het laatste tabblad. Bijdragen van besturingselementen worden niet standaard weergegeven. Gebruikers moeten ze handmatig toevoegen aan het formulier. Zie Formulierextensies voor werkitems configureren in Azure DevOps Server om bijdragen weer te geven, te verbergen of te verplaatsen.

Menuactie toevoegen

Als u een item wilt toevoegen aan de werkbalk werkitem, voegt u deze bijdrage-element toe aan uw extensie-manifest. Het item wordt weergegeven in het uitklapmenu met verticale weglatingstekens (...).

"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

Luister naar gebeurtenissen

Waarnemers luisteren naar werkitem-gebeurtenissen zonder gebruikersinterface op het formulier. Gebruik waarnemers om naar de onSaved gebeurtenis te luisteren, omdat waarnemers zich buiten het formulier bevinden en niet worden vernietigd wanneer het formulierdialoogvenster wordt gesloten.

"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

Evenementen

JavaScript-voorbeeld

In het volgende voorbeeld wordt een waarnemer geregistreerd met behulp van de moderne SDK:

import * as SDK from "azure-devops-extension-sdk";

SDK.init();

SDK.ready().then(() => {
    SDK.register(SDK.getContributionId(), () => {
        return {
            onFieldChanged: (args) => {
                // Handle field changes
            },
            onLoaded: (args) => {
                // Handle work item loaded
            },
            onUnloaded: (args) => {
                // Handle work item unloaded
            },
            onSaved: (args) => {
                // Handle work item saved
            },
            onReset: (args) => {
                // Handle work item reset (undo)
            },
            onRefreshed: (args) => {
                // Handle work item refreshed
            }
        };
    });
});

Compatibiliteitsnotities

Actie versus actie-aanbieder

Gebruik ms.vss-web.action-provider wanneer u menu-items dynamisch laadt met getMenuItems op de menuhandler. Gebruik ms.vss-web.action deze optie wanneer uw menu-items statisch zijn en zijn gedefinieerd in het manifest.

Verouderde patronen

De volgende patronen worden niet meer ondersteund:

• require("VSS/Events/Document") - niet ondersteund met New Boards Hub
• SDK.jsscripttag met usePlatformScripts: true - gebruik in plaats daarvan het npm-pakket azure-devops-extension-sdk

Verwante inhoud

• Een aangepast besturingselement toevoegen aan het werkitemformulier
• Formulierextensies voor werkitems configureren (on-premises)
• Verwijzing naar het extensiemanifest
• bijdragemodel