Estendere il modulo dell'elemento di lavoro

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

Usare le estensioni per personalizzare il modulo dell'elemento di lavoro aggiungendo gruppi, pagine, azioni di menu, osservatori o controlli personalizzati.

• Aggiungere un gruppo
• Aggiungere una pagina (scheda)
• Aggiungere un'azione di menu
• Aggiungere un controllo personalizzato
• Ascoltare gli eventi
• Configurare i contributi

Per il codice sorgente completo, vedere l'esempio dell'interfaccia utente negli esempi di estensione Azure DevOps in GitHub.

Aggiungi un gruppo

Per aggiungere un gruppo alla pagina principale, aggiungi un contributo al manifesto dell'estensione con il tipo ms.vss-work-web.work-item-form-group e destinazione 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
       }
   }
]

Proprietà

Esempio in JavaScript

In questo esempio viene registrato un provider che risponde agli eventi del modulo dell'elemento di lavoro. Usa il WorkItemFormService per leggere i valori dei campi quando viene caricato l'elemento di lavoro.

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

Eventi

Aggiungi una pagina

Viene eseguito il rendering di una nuova pagina come scheda nel modulo dell'elemento di lavoro. Le nuove pagine vengono visualizzate accanto alla scheda Dettagli .

Per aggiungere una pagina al modulo dell'elemento di lavoro, aggiungere un contributo al manifesto dell'estensione di tipo ms.vss-work-web.work-item-form destinato a ms.vss-work-web.work-item-form-page:

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

Proprietà

Esempio in JavaScript

Vedere l'esempio JavaScript nella sezione del gruppo di moduli. Il nome dell'oggetto registrato deve corrispondere all'oggetto id del contributo.

Eventi

Configurare i contributi

In Azure DevOps Services le estensioni di gruppo vengono visualizzate alla fine della seconda colonna per impostazione predefinita e i contributi di pagina vengono visualizzati come ultima scheda. I contributi di controllo non vengono visualizzati per impostazione predefinita. Gli utenti devono aggiungerli manualmente al modulo. In Azure DevOps Server, vedere Configurare le estensioni dei moduli degli elementi di lavoro per visualizzare , nascondere o spostare i contributi.

Azione aggiungi menu

Per aggiungere un elemento alla barra degli strumenti dell'elemento di lavoro, aggiungere questo contributo al manifesto dell'estensione. L'elemento viene visualizzato nel menu a discesa con i puntini di sospensione verticale (...).

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

Proprietà

Ascoltare gli eventi

Gli osservatori ascoltano gli eventi degli elementi di lavoro senza alcuna interfaccia utente nel form. Usare gli osservatori per ascoltare l'evento onSaved, poiché gli osservatori vivono all'esterno del modulo e non vengono eliminati definitivamente quando il dialogo del modulo viene chiuso.

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

Proprietà

Eventi

Esempio in JavaScript

L'esempio seguente registra un osservatore usando l'SDK moderno:

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

Note sulla compatibilità

Azione vs fornitore di azioni

Usare ms.vss-web.action-provider quando si caricano dinamicamente le voci di menu usando getMenuItems nel gestore di menu. Usare ms.vss-web.action quando le voci di menu sono statiche e definite nel manifesto.

Modelli deprecati

I modelli seguenti non sono più supportati:

• require("VSS/Events/Document") - non supportato con il nuovo hub delle Board
• SDK.js tag script con usePlatformScripts: true : usare invece il pacchetto azure-devops-extension-sdk npm

Contenuti correlati

• Aggiungere un controllo personalizzato al modulo dell'elemento di lavoro
• Configurare le estensioni dei moduli degli elementi di lavoro (in locale)
• Riferimento al manifesto di estensione
• modello di contributo