Étendre le formulaire d’élément de travail

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

Utilisez des extensions pour personnaliser le formulaire d’élément de travail en ajoutant des groupes, des pages, des actions de menu, des observateurs ou des contrôles personnalisés.

• Ajouter un groupe
• Ajouter une page (onglet)
• Ajouter une action de menu
• Ajouter un contrôle personnalisé
• Écouter les événements
• Configurer les contributions

Pour obtenir le code source complet, consultez l’exemple d’interface utilisateur dans les exemples d’extension Azure DevOps sur GitHub.

Ajouter un groupe

Pour ajouter un groupe à la page principale, ajoutez une contribution à votre manifeste d’extension avec le type ms.vss-work-web.work-item-form-group ciblant 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
       }
   }
]

Propriétés

Exemple en JavaScript

Cet exemple enregistre un fournisseur qui répond aux événements de formulaire pour un élément de travail. Il utilise le WorkItemFormService pour lire les valeurs des champs lorsque l'élément de travail se charge.

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

Événements

Ajouter une page

Une nouvelle page est affichée sous la forme d’un onglet du formulaire d’élément de travail. De nouvelles pages s’affichent à côté de l’onglet Détails .

Pour ajouter une page au formulaire d'élément de travail, ajoutez une contribution à votre manifeste d'extension avec le type ms.vss-work-web.work-item-form-page ciblant 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"
        } 
    }
]

Propriétés

Exemple en JavaScript

Consultez l’exemple JavaScript dans la section groupe de formulaires. Le nom de l’objet inscrit doit correspondre à id la contribution.

Événements

Configurer les contributions

Dans Azure DevOps Services, les extensions de groupe apparaissent à la fin de la deuxième colonne par défaut, et les contributions de page apparaissent sous la forme du dernier onglet. Les contributions de contrôle ne sont pas affichées par défaut : les utilisateurs doivent les ajouter manuellement au formulaire. Dans Azure DevOps Server, consultez Configurer les extensions de formulaire d’élément de travail pour afficher, masquer ou déplacer des contributions.

Ajouter une action de menu

Pour ajouter un élément à la barre d’outils de l’élément de travail, ajoutez cette contribution à votre manifeste d’extension. L’élément apparaît dans le menu déroulant vertical des points de suspension (...).

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

Propriétés

Écouter les événements

Les observateurs écoutent les événements des éléments de travail sans interface utilisateur sur le formulaire. Utilisez des observateurs pour écouter l’événement onSaved , car les observateurs vivent en dehors du formulaire et ne sont pas détruits lorsque le dialogue de formulaire se ferme.

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

Propriétés

Événements

Exemple en JavaScript

L’exemple suivant inscrit un observateur à l’aide du Kit de développement logiciel (SDK) moderne :

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

Notes de compatibilité

Action vs. fournisseur d’actions

Utilisez cette option ms.vss-web.action-provider lors du chargement dynamique des éléments de menu à l’aide getMenuItems du gestionnaire de menus. Utilisez ms.vss-web.action quand vos éléments de menu sont statiques et définis dans le manifeste.

Modèles déconseillés

Les modèles suivants ne sont plus pris en charge :

• require("VSS/Events/Document") - non pris en charge avec New Boards Hub
• SDK.js balise de script avec usePlatformScripts: true - utiliser le package azure-devops-extension-sdk npm à la place

Contenu connexe

• Ajouter un contrôle personnalisé au formulaire d’élément de travail
• Configurer des extensions de formulaire de travail (sur site)
• Référence du manifeste d’extension
• Modèle de contribution