Estendere il modulo dell'elemento di lavoro

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

Informazioni su come personalizzare il modo in cui il modulo dell'elemento di lavoro viene presentato agli utenti tramite contributi effettuati tramite un'estensione.

• Aggiungere un gruppo alla pagina principale
• Aggiungere una pagina (scheda)
• Aggiungere un'azione al menu di scelta rapida
• Aggiungere un controllo personalizzato
• Listen for events on the form (Listen for events on the form)
• Configurare i contributi nel modulo dell'elemento di lavoro

Per l'origine completa, vedere l'esempio di interfaccia utente negli esempi dell'estensione Azure DevOps in GitHub.

Aggiungi un gruppo

Per aggiungere un gruppo alla pagina principale, aggiungere un contributo al manifesto dell'estensione. Il tipo di questo contributo dovrebbe essere ms.vss-work-web.work-item-form-group e dovrebbe essere il ms.vss-work-web.work-item-form contributo.

"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à

Proprietà	Descrizione
name	Testo visualizzato nel gruppo
uri	URI di una pagina che ospita il codice HTML visualizzato nel modulo dell'elemento di lavoro e nei relativi script
height	(Facoltativo) Definisce l'altezza del gruppo. Quando viene omesso, è il 100%

Esempio in JavaScript

In questo esempio viene illustrato come registrare un oggetto chiamato quando si verificano eventi nel modulo dell'elemento di lavoro che può influire sul gruppo di contributi. Per altri esempi, vedere Esempio di WorkItemFormGroup .

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

evento

Event	Descrizione dell'evento	Argomento	Descrizione dell'argomento
onFieldChanged	Generato dopo la modifica di un campo. Se la modifica del campo ha eseguito regole che hanno aggiornato altri campi, tutte queste modifiche fanno parte di un singolo evento.	ID	ID dell'elemento di lavoro.
changedFields	Matrice con il nome di riferimento di tutti i campi modificati.	ID	ID dell'elemento di lavoro.
onLoaded	Generato dopo il caricamento dei dati nel modulo dell'elemento di lavoro, quando l'utente apre un elemento di lavoro o quando l'utente passa a un altro elemento di lavoro nella visualizzazione di valutazione.	ID	ID dell'elemento di lavoro.
onReset	Generato dopo che l'utente annulla le modifiche apportate all'elemento di lavoro.	ID	ID dell'elemento di lavoro.
onRefreshed	Generato dopo che l'utente ha aggiornato manualmente l'elemento di lavoro.	ID	ID dell'elemento di lavoro.
onSaved	Generato dopo il salvataggio di un elemento di lavoro. Per gli elementi di lavoro in una finestra di dialogo, è necessario impostare come destinazione il tipo "ms.vss-work-web.work-item-notifications" per assicurarsi che l'evento venga generato dopo la chiusura della finestra di dialogo, questo tipo di contributo viene scaricato. Per altre informazioni, vedere Listen for events .For more information, see Listen for events.	ID	ID dell'elemento di lavoro.
onUnloaded	Generato prima che l'utente chiuda la finestra di dialogo o prima che l'utente passi a un altro elemento di lavoro nella visualizzazione di valutazione.	ID	ID dell'elemento di lavoro.

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. Il tipo di questo contributo dovrebbe essere ms.vss-work-web.work-item-form-page e dovrebbe essere il ms.vss-work-web.work-item-form contributo.

"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à

Proprietà	Descrizione
name	Testo visualizzato nella pagina della scheda.
uri	URI di una pagina che ospita il codice HTML visualizzato nel modulo dell'elemento di lavoro e nei relativi script.

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.

evento

Event	Descrizione dell'evento	Argomento	Descrizione dell'argomento
onFieldChanged	Generato dopo la modifica di un campo. Se la modifica del campo ha eseguito regole che hanno aggiornato altri campi, tutte queste modifiche fanno parte di un singolo evento.	ID	ID dell'elemento di lavoro.
changedFields	Matrice con il nome di riferimento di tutti i campi modificati.	ID	ID dell'elemento di lavoro.
onLoaded	Generato dopo il caricamento dei dati nel modulo dell'elemento di lavoro, quando l'utente apre un elemento di lavoro o quando l'utente passa a un altro elemento di lavoro nella visualizzazione di valutazione.	ID	ID dell'elemento di lavoro.
onReset	Generato dopo che l'utente annulla le modifiche apportate all'elemento di lavoro.	ID	ID dell'elemento di lavoro.
onRefreshed	Generato dopo che l'utente ha aggiornato manualmente l'elemento di lavoro.	ID	ID dell'elemento di lavoro.
onSaved	Generato dopo il salvataggio di un elemento di lavoro. Per gli elementi di lavoro in una finestra di dialogo, è necessario impostare come destinazione il tipo "ms.vss-work-web.work-item-notifications" per assicurarsi che l'evento venga generato dopo la chiusura della finestra di dialogo, questo tipo di contributo viene scaricato. Per altre informazioni, vedere Listen for events .For more information, see Listen for events.	ID	ID dell'elemento di lavoro.
onUnloaded	Generato prima che l'utente chiuda la finestra di dialogo o prima che l'utente passi a un altro elemento di lavoro nella visualizzazione di valutazione.	ID	ID dell'elemento di lavoro.

Configurare i contributi nel modulo dell'elemento di lavoro

Per impostazione predefinita, in Azure DevOps Services le estensioni del gruppo vengono visualizzate alla fine della seconda colonna del modulo e dei contributi della pagina dopo tutte le pagine del modulo dell'elemento di lavoro come scheda. I contributi di controllo non vengono visualizzati nel modulo per impostazione predefinita, pertanto gli utenti devono aggiungerli manualmente al modulo. In Azure DevOps Server, per mostrare/nascondere o spostare i contributi di controllo, gruppo e pagina nel modulo dell'elemento di lavoro, vedere Configurare le estensioni dei moduli degli elementi di lavoro.

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 in ... nell'elenco a discesa in alto a destra del modulo dell'elemento di lavoro.

"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à

Proprietà	Descrizione
Testo	Testo visualizzato sull'elemento della barra degli strumenti.
title	Testo della descrizione comando visualizzato nella voce di menu.
toolbarText	Testo visualizzato quando si passa il puntatore del mouse sull'elemento.
uri	URI di una pagina che registra il gestore dell'azione della barra degli strumenti.
icona	URL di un'icona visualizzata nella voce di menu. Gli URL relativi vengono risolti usando baseUri.
group	Determina la posizione in cui viene visualizzata la voce di menu, correlata ad altri. Gli elementi della barra degli strumenti con lo stesso nome di gruppo vengono raggruppati e divisi per un separatore dal resto degli elementi.
registeredObjectId	(Facoltativo) Nome del gestore dell'azione del menu registrato. Il valore predefinito è l'ID contributo.

Ascoltare gli eventi

Per aggiungere un osservatore all'elemento di lavoro, in ascolto degli eventi dell'elemento di lavoro, aggiungere questo contributo al manifesto dell'estensione. Non è disponibile alcuna visualizzazione per gli osservatori nel modulo dell'elemento di lavoro. Questo è il modo migliore per ascoltare il modulo dell'elemento di lavoro sull'evento OnSaved poiché l'osservatore si trova all'esterno della maschera e non viene eliminato quando la maschera si chiude, che potrebbe verificarsi subito dopo il salvataggio.

"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à

Proprietà	Descrizione
uri	URI a una pagina che ospita gli script in ascolto degli eventi

evento

Event	Descrizione dell'evento	Argomento	Descrizione dell'argomento
onFieldChanged	Generato dopo la modifica di un campo. Se la modifica del campo ha eseguito regole che hanno aggiornato altri campi, tutte queste modifiche fanno parte di un singolo evento.	ID	ID dell'elemento di lavoro.
changedFields	Matrice con il nome di riferimento di tutti i campi modificati.	ID	ID dell'elemento di lavoro.
onLoaded	Generato dopo il caricamento dei dati nel modulo dell'elemento di lavoro, quando l'utente apre un elemento di lavoro o quando l'utente passa a un altro elemento di lavoro nella visualizzazione di valutazione.	ID	ID dell'elemento di lavoro.
onReset	Generato dopo che l'utente annulla le modifiche apportate all'elemento di lavoro.	ID	ID dell'elemento di lavoro.
onRefreshed	Generato dopo che l'utente ha aggiornato manualmente l'elemento di lavoro.	ID	ID dell'elemento di lavoro.
onSaved	Generato dopo il salvataggio di un elemento di lavoro. Per gli elementi di lavoro in una finestra di dialogo, è necessario impostare come destinazione il tipo "ms.vss-work-web.work-item-notifications" per assicurarsi che l'evento venga generato dopo la chiusura della finestra di dialogo, questo tipo di contributo viene scaricato. Per altre informazioni, vedere Listen for events .For more information, see Listen for events.	ID	ID dell'elemento di lavoro.
onUnloaded	Generato prima che l'utente chiuda la finestra di dialogo o prima che l'utente passi a un altro elemento di lavoro nella visualizzazione di valutazione.	ID	ID dell'elemento di lavoro.

Esempio HTML/JavaScript

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