Compartilhar via

Adicionar uma ação de menu

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

Neste exemplo, adicionamos uma ação ao menu de contexto de consulta no hub de consultas do item de trabalho.

Dica

Confira nossa documentação mais recente sobre o desenvolvimento de extensão usando o SDK de Extensão do Azure DevOps.

Pré-requisitos

Atualizar o arquivo de manifesto da extensão

Abaixo está o snippet de código que adiciona sua ação à seção de contribuições do manifesto da extensão.

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

Propriedades

Propriedade Description
enviar SMS Texto que aparece no item de menu.
title Texto da dica de ferramenta que aparece no item de menu.
icon URL para um ícone que aparece no item de menu. as URLs relativas são resolvidas usando baseUri.
groupId Determina onde esse item de menu aparece em relação aos outros.
URI URI para uma página que registra o manipulador de ação de menu (veja abaixo).
identificadorDoObjetoRegistrado (Opcional) Nome do manipulador de ação de menu registrado. Define-se por padrão como a ID do colaborador.

Saiba mais sobre todos os locais em que você pode adicionar ações em pontos de extensibilidade.

Sua página HTML

Sua ação de menu é representada por um script JavaScript inserido em um arquivo HTML. Salve o conteúdo a seguir em um arquivo e local que corresponda à referência a ele no arquivo de manifesto da sua extensão.

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

Seu JavaScript

O script a seguir registra o objeto manipulador para manipular a ação, coloque-o head na seção da página HTML anterior.

Nós definimos um alias para lib como node_modules/azure-devops-extension-sdk/lib em nosso arquivo de manifesto sdk-extension.json.

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

Dica

Para obter mais informações, consulte pontos de extensibilidade, menus e barras de ferramentas, o modelo de Contribuição do Sistema de Design de Fórmulas, referência da API REST, exemplos de extensão e recursos na Comunidade de Desenvolvedores.

Próximas etapas

Agora que você escreveu sua extensão, as próximas etapas são empacotar, publicar e instalar sua extensão. Você também pode consultar a documentação para testar e depurar sua extensão.

  • Last updated on