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

Sehen Sie sich unsere neueste Dokumentation zur Erweiterungsentwicklung mithilfe des Azure DevOps-Erweiterungs-SDK an.

Voraussetzungen für diesen Artikel

Erweiterungsmanifestdatei aktualisieren

Unten sehen Sie den Codeausschnitt, der Ihre Aktion dem Abschnitt Beiträge Ihres Erweiterungsmanifests hinzufü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

Eigenschaften Beschreibung
Text Text, der im Menüelement angezeigt wird.
title QuickInfo-Text, der im Menüelement angezeigt wird.
Symbol URL zu einem Symbol, das im Menüelement angezeigt wird. Relative URLs werden mithilfe von baseUri aufgelöst.
groupId 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. Standardmäßig wird die Mitwirkender-ID verwendet.

Erfahren Sie mehr über alle Orte, an denen Sie Aktionen in Erweiterungspunkten hinzufü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, und platziert es im head Abschnitt der vorherigen HTML-Seite.

Wir haben aliasedlib, um in unserer sdk-extension.json Manifestdatei zu seinnode_modules/azure-devops-extension-sdk/lib.

<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 Erweiterbarkeitspunkte, Menüs und Symbolleisten, das Beitragsmodell des Formelentwurfssystems, rest-API-Referenz, Erweiterungsbeispiele und Ressourcen im Entwicklercommunity.

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.