Agregar una acción de menú

  • Artículo

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

En este ejemplo, agregamos una acción al menú contextual de consulta en el centro de consultas del elemento de trabajo.

Sugerencia

Consulte nuestra documentación más reciente sobre el desarrollo de extensiones mediante el SDK de extensión de Azure DevOps.

Requisitos previos para este artículo

  • Debe crear una aplicación web para la acción, que se puede encontrar en el ejemplo del centro.
  • Si no lo ha hecho, eche un vistazo al tutorial de escritura de la primera extensión para obtener información sobre los conceptos básicos.

Actualizar archivo de manifiesto de extensión

A continuación se muestra el fragmento de código que agrega la acción a la sección de contribuciones del manifiesto de extensión.

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

Propiedades

Property Descripción
text Texto que aparece en el elemento de menú.
title Texto de información sobre herramientas que aparece en el elemento de menú.
Icono Dirección URL a un icono que aparece en el elemento de menú. Las direcciones URL relativas se resuelven mediante baseUri.
groupId Determina dónde aparece este elemento de menú en relación con los demás.
uri URI en una página que registra el controlador de acciones de menú (consulte a continuación).
registeredObjectId (Opcional) Nombre del controlador de acción de menú registrado. El valor predeterminado es el identificador de colaborador.

Obtenga información sobre todos los lugares donde puede agregar acciones en puntos de extensibilidad.

Página HTML

La acción de menú se representa mediante un script de JavaScript incrustado en un archivo HTML. Guarde el siguiente contenido en un archivo y una ubicación que coincida con la referencia a él en el archivo de manifiesto de la extensión.

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

Su JavaScript

El script siguiente registra el objeto de controlador para controlar la acción, colóquelo en la head sección de la página HTML anterior.

Hemos alias lib de estar node_modules/azure-devops-extension-sdk/lib en nuestro sdk-extension.json archivo de manifiesto.

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

Sugerencia

Para obtener más información, vea Puntos de extensibilidad, menús y barras de herramientas, modelo de contribución del sistema de diseño de fórmulas, referencia de API REST, ejemplos de extensiones y recursos en la comunidad de desarrolladores.

Pasos siguientes

Ahora que ha escrito la extensión, los pasos siguientes son Empaquetar, Publicar e Instalar la extensión. También puede consultar la documentación de Testing and Debugging your extension (Probar y depurar la extensión).