Partager via

Ajouter une action de menu

  • Article

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

Dans cet exemple, nous ajoutons une action au menu contextuel de requête dans le hub de requêtes d’élément de travail.

Conseil

Consultez notre documentation la plus récente sur le développement d’extensions à l’aide du Kit de développement logiciel (SDK) d’extension Azure DevOps.

Conditions préalables pour cet article

  • Vous devez créer une application web pour votre action, qui se trouve dans l’exemple hub.
  • Si ce n’est pas le cas, consultez le didacticiel d’écriture de votre première extension pour en savoir plus sur les concepts de base.

Mettre à jour le fichier manifeste d’extension

Voici l’extrait de code qui ajoute votre action à la section contributions de votre manifeste d’extension.

...
    "contributions": [
        {
            "id": "myAction",
            "type": "ms.vss-web.action",
            "description": "Run in Hello hub action",
            "targets": [
                "ms.vss-work-web.work-item-query-menu"
            ],
            "properties": {
                "text": "Run in Hello hub",
                "title": "Run in Hello hub",
                "icon": "images/icon.png",
                "groupId": "actions",
                "uri": "action.html"
            }
        }
    ]
...

Propriétés

Property Description
texte Texte qui apparaît dans l’élément de menu.
title Texte d’info-bulle qui s’affiche sur l’élément de menu.
icône URL vers une icône qui apparaît dans l’élément de menu. Les URL relatives sont résolues à l’aide de baseUri.
groupId Détermine l’emplacement où cet élément de menu apparaît par rapport aux autres.
URI URI vers une page qui inscrit le gestionnaire d’actions de menu (voir ci-dessous).
registeredObjectId (Facultatif) Nom du gestionnaire d’actions de menu inscrites. La valeur par défaut est l’ID de contributeur.

Découvrez tous les endroits où vous pouvez ajouter des actions dans des points d’extensibilité.

Votre page HTML

Votre action de menu est représentée par un script JavaScript incorporé dans un fichier HTML. Enregistrez le contenu suivant dans un fichier et un emplacement qui correspond à la référence à celui-ci dans le fichier manifeste de votre extension.

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Action Sample</title>
	</head>
	<body>
		<div>
			The end user doesn't see the content on this page.
			It is only in the background to handle the contributed menu item being selected.
		</div>
	</body>
	</html>

Votre code JavaScript

Le script ci-dessous inscrit l’objet gestionnaire pour gérer l’action, placez-le dans la head section de la page HTML précédente.

Nous avons alias lib pour être node_modules/azure-devops-extension-sdk/lib dans notre sdk-extension.json fichier manifeste.

<script src="lib/SDK.min.js"></script>
<script>
    SDK.init();

    // Use an IIFE to create an object that satisfies the IContributedMenuSource contract
    var menuContributionHandler = (function () {
        "use strict";
        return {
            // This is a callback that gets invoked when a user selects the newly contributed menu item
            // The actionContext parameter contains context data surrounding the circumstances of this
            // action getting invoked.
            execute: function (actionContext) {
                alert("Hello, world");
            }
        };
    }());

    // Associate the menuContributionHandler object with the "myAction" menu contribution from the manifest.
    SDK.register(SDK.getContributionId(), menuContributionHandler);
</script>

Conseil

Pour plus d’informations, consultez les points d’extensibilité, les menus et les barres d’outils, le modèle contribution du système de conception de formule, la référence de l’API REST, les exemples d’extension et les ressources dans la communauté des développeurs.

Étapes suivantes

Maintenant que vous avez écrit votre extension, les étapes suivantes sont de empaqueter, publier et installer votre extension. Vous pouvez également case activée la documentation relative au test et au débogage de votre extension.