Lägg till en menyåtgärd

  • Artikel

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

I det här exemplet lägger vi till en åtgärd på frågekontextmenyn i navet för arbetsobjektsfrågor.

Dricks

Läs vår senaste dokumentation om tilläggsutveckling med hjälp av Azure DevOps Extension SDK.

Förutsättningar för den här artikeln

  • Du måste skapa en webbapp för din åtgärd, som finns i hubbexemplet.
  • Om du inte har gjort det kan du ta en titt på självstudien för att skriva din första tilläggsguide för att lära dig mer om grunderna.

Uppdateringstilläggets manifestfil

Nedan visas kodfragmentet som lägger till din åtgärd i bidragsavsnittet i tilläggsmanifestet.

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

Egenskaper

Property Beskrivning
text Text som visas på menyalternativet.
rubrik Knappbeskrivningstext som visas på menyalternativet.
Ikonen URL till en ikon som visas på menyalternativet. Relativa URL:er matchas med hjälp av baseUri.
groupId Avgör var det här menyalternativet visas i förhållande till de andra.
uri URI till en sida som registrerar menyåtgärdshanteraren (se nedan).
registeredObjectId (Valfritt) Namnet på den registrerade menyåtgärdshanteraren. Standardvärdet för deltagar-ID:t.

Lär dig mer om alla platser där du kan lägga till åtgärder i Utökningspunkter.

HTML-sidan

Din menyåtgärd representeras av ett JavaScript-skript som är inbäddat i en HTML-fil. Spara följande innehåll i en fil och plats som matchar referensen till den i tilläggets manifestfil.

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

Your JavaScript

Skriptet nedan registrerar hanteringsobjektet för att hantera åtgärden och placerar det i head avsnittet på föregående HTML-sida.

Vi har alias för lib att finnas node_modules/azure-devops-extension-sdk/lib i manifestfilen 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>

Dricks

Mer information finns i Utökningspunkter, menyer och verktygsfält, bidragsmodellen Formeldesignsystem, REST API-referens, tilläggsexempel och resurser i utvecklarcommunityn.

Nästa steg

Nu när du har skrivit tillägget är nästa steg att paketera, publicera och installera tillägget. Du kan också läsa dokumentationen för testning och felsökning av tillägget.