Agregar una acción de menú
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
libde estarnode_modules/azure-devops-extension-sdk/liben nuestrosdk-extension.jsonarchivo 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).