Share via

Adicionar uma ação de menu

  • Artigo

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

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

Dica

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

Pré-requisitos para este artigo

  • Você precisa criar um aplicativo Web para sua ação, que pode ser encontrado no exemplo de hub.
  • Se você ainda não o fez, dê uma olhada no tutorial de escrever sua primeira extensão para aprender sobre o básico.

Atualizar arquivo de manifesto de extensão

Abaixo está o trecho de código que adiciona sua ação à seção de contribuições do manifesto de 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 Descrição
text Texto que aparece no item de menu.
title Texto da dica de ferramenta que aparece no item de menu.
ícone URL para um ícone que aparece no item de menu. 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ções de menu (veja abaixo).
registeredObjectId (Opcional) Nome do manipulador de ações de menu registrado. O padrão é o ID do colaborador.

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

Sua página HTML

Sua ação de menu é representada por um script JavaScript incorporado 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 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 abaixo registra o objeto manipulador para manipular a ação, coloque-o head na seção da página HTML anterior.

Nós aliased lib para estar node_modules/azure-devops-extension-sdk/lib em nosso sdk-extension.json arquivo de manifesto.

<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órmula, 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 verificar a documentação para testar e depurar sua extensão.