Adicionar uma ação de menu

  • Artigo

Serviços de DevOps do Azure | 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 a nossa documentação mais recente sobre o desenvolvimento de extensões usando o SDK de Extensão do Azure DevOps .

Pré-requisitos

Atualizar arquivo de manifesto da 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
Texto Texto que aparece no item de menu.
título Texto de dica de ferramenta que aparece no item de menu.
ícone URL para um ícone que aparece no item de menu. As URLs relativas são resolvidas usando baseUri.
ID do grupo Determina onde este 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).
ID de Objeto Registado (Opcional) Nome do manipulador de ações de menu registrado. Por padrão, é utilizado o ID do colaborador.

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

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

O seu JavaScript

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

Atribuímos lib a ser node_modules/azure-devops-extension-sdk/lib no 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, o Formula Design System, a referência da API REST, Exemplos de extensãoe recursos na Comunidade de Desenvolvedores.

Próximos passos

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 sobre como testar e depurar a sua extensão.