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.

Warunki wstępne

Aktualizowanie pliku manifestu rozszerzenia

Poniżej znajduje się fragment kodu, który dodaje twoją akcję do sekcji wkładu w manifeście 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łasność Opis
Tekst Tekst wyświetlany w elemencie menu.
tytuł Tekst podpowiedzi wyświetlany w elemencie menu.
ikona Adres URL ikony wyświetlanej w elemencie menu. Względne adresy URL są rozwiązywane za pomocą bazowego URI.
groupId (identyfikator grupy) 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).
zarejestrowanyIdObiektu (Opcjonalnie) Nazwa zarejestrowanego programu obsługi akcji menu. Domyślnie jest to identyfikator współautora.

Dowiedz się, gdzie możesz 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 obsługi do obsługi akcji i umieszcza go w sekcji head poprzedniej strony HTML.

Ustanowiliśmy alias lib jako node_modules/azure-devops-extension-sdk/lib w naszym pliku manifestu 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>

Wskazówka

Aby uzyskać więcej informacji, zobacz Punkty rozszerzalności, menu i paski narzędzi, model kontrybucji, Formula Design System, dokumentację interfejsu API REST, przykłady rozszerzeń oraz zasoby w Developer Community.

Następne kroki

Teraz, po napisaniu Twojego rozszerzenia, kolejnymi krokami są: zapakować, opublikować i zainstalować rozszerzenie. Możesz również zapoznać się z dokumentacją dotyczącą testowania i debugowania rozszerzenia.