Freigeben über

Hinzufügen einer Menüaktion

  • Artikel

Azure DevOps Services | Azure DevOps Server 2022 – Azure DevOps Server 2019

In diesem Beispiel fügen wir dem Abfragekontextmenü im Hub für Arbeitsaufgabenabfragen eine Aktion hinzu.

Tipp

Schauen Sie sich unsere neueste Dokumentation zur Erweiterungsentwicklung mithilfe des Azure DevOps Extension SDKan.

Voraussetzungen

Erweiterungsmanifestdatei aktualisieren

Unten sehen Sie den Codeausschnitt, der Ihre Aktion dem Abschnitt "Beiträge" Ihres Erweiterungsmanifestshinzufügt.

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

Eigenschaften

Eigentum Beschreibung
Text Text, der im Menüelement angezeigt wird.
title QuickInfo-Text, der im Menüelement angezeigt wird.
Ikone URL zu einem Symbol, das im Menüelement angezeigt wird. Relative URLs werden mithilfe von baseUri aufgelöst.
Gruppen-ID Bestimmt, wo dieses Menüelement in Relation zu den anderen angezeigt wird.
uri URI zu einer Seite, die den Menüaktionshandler registriert (siehe unten).
registeredObjectId (Optional) Name des registrierten Menüaktionshandlers. Wird standardmäßig auf die Contributor-ID festgelegt.

Erfahren Sie mehr über alle Orte, an denen Sie Aktionen in Erweiterbarkeitspunktenhinzufügen können.

Ihre HTML-Seite

Ihre Menüaktion wird durch ein in eine HTML-Datei eingebettetes JavaScript-Skript dargestellt. Speichern Sie den folgenden Inhalt in einer Datei und einem Speicherort, der dem Verweis darauf in der Manifestdatei Ihrer Erweiterung entspricht.

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

Ihr JavaScript

Das folgende Skript registriert das Handlerobjekt, um die Aktion zu behandeln. Platzieren Sie es im abschnitt head der vorherigen HTML-Seite.

Wir haben lib unserer sdk-extension.json-Manifestdatei den Alias node_modules/azure-devops-extension-sdk/lib zugewiesen.

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

Tipp

Weitere Informationen finden Sie unter Erweiterungspunkte, Menüs und Symbolleisten, dem Beitragsmodell das Formelentwurfssystem, REST-API-Referenz, Erweiterungsbeispieleund Ressourcen in der Developer Community.

Nächste Schritte

Nachdem Sie Ihre Erweiterung geschrieben haben, sind die nächsten Schritte zum Packen, Veröffentlichen und Installieren Ihrer Erweiterung. Sie können sich auch die Dokumentation zum Testen und Debuggen Ihrer Erweiterung ansehen.