Udostępnij za pośrednictwem

Dodawanie akcji menu

  • Artykuł

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

W tym przykładzie dodamy akcję do menu kontekstowego zapytania w centrum zapytań elementu roboczego.

Napiwek

Zapoznaj się z naszą najnowszą dokumentacją dotyczącą programowania rozszerzeń przy użyciu zestawu SDK rozszerzenia usługi Azure DevOps.

Wymagania wstępne dotyczące tego artykułu

  • Musisz utworzyć aplikację internetową dla akcji, która znajduje się w przykładzie centrum.
  • Jeśli jeszcze tego nie zrobisz, zapoznaj się z samouczkiem dotyczącym pisania pierwszego rozszerzenia, aby dowiedzieć się więcej o podstawach.

Aktualizowanie pliku manifestu rozszerzenia

Poniżej znajduje się fragment kodu, który dodaje akcję do sekcji współtworzenia manifestu rozszerzenia.

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

Właściwości

Właściwości opis
text Tekst wyświetlany w elemencie menu.
title Tekst etykietki narzędzia wyświetlany w elemencie menu.
menu Adres URL ikony wyświetlanej w elemencie menu. Względne adresy URL są rozwiązywane przy użyciu identyfikatora baseUri.
groupId Określa, gdzie ten element menu jest wyświetlany w odniesieniu do innych.
uri Identyfikator URI do strony, która rejestruje procedurę obsługi akcji menu (patrz poniżej).
registeredObjectId (Opcjonalnie) Nazwa zarejestrowanego programu obsługi akcji menu. Domyślnie jest to identyfikator współautora.

Dowiedz się więcej o wszystkich miejscach, w których można dodawać akcje w punktach rozszerzalności.

Strona HTML

Akcja menu jest reprezentowana przez skrypt JavaScript osadzony w pliku HTML. Zapisz następującą zawartość w pliku i lokalizacji zgodnej z odwołaniem do niego w pliku manifestu rozszerzenia.

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

Twój kod JavaScript

Poniższy skrypt rejestruje obiekt programu obsługi w celu obsługi akcji, umieść go w head sekcji poprzedniej strony HTML.

Alias mamy lib być node_modules/azure-devops-extension-sdk/lib w naszym sdk-extension.json pliku manifestu.

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

Napiwek

Aby uzyskać więcej informacji, zobacz Punkty rozszerzalności, menu i paski narzędzi, model współtworzenia systemu projektowania formuł, dokumentacja interfejsu API REST, przykłady rozszerzeń i zasoby w społeczności deweloperów.

Następne kroki

Teraz, po napisaniu rozszerzenia, następnym krokiem są pakiety, publikowanie i instalowanie rozszerzenia. Możesz również zapoznać się z dokumentacją dotyczącą testowania i debugowania rozszerzenia.