Share via

Een menuactie toevoegen

  • Artikel

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

In dit voorbeeld voegen we een actie toe aan het contextmenu van de query in de hub queryquery's voor werkitems.

Tip

Bekijk onze nieuwste documentatie over uitbreidingsontwikkeling met behulp van de Azure DevOps Extension SDK.

Vereisten voor dit artikel

  • U moet een web-app maken voor uw actie, die u kunt vinden in het voorbeeld van de hub.
  • Als u dat nog niet hebt gedaan, bekijkt u de zelfstudie voor het schrijven van uw eerste extensie voor meer informatie over de basisbeginselen.

Manifestbestand voor extensie bijwerken

Hieronder ziet u het codefragment waarmee u uw actie toevoegt aan de sectie bijdragen van uw extensiemanifest.

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

Eigenschappen

Eigenschappen Beschrijving
sms verzenden Tekst die wordt weergegeven in het menu-item.
title Knopinfotekst die wordt weergegeven in het menu-item.
Menu URL naar een pictogram dat wordt weergegeven in het menu-item. Relatieve URL's worden omgezet met behulp van baseUri.
groupId Bepaalt waar dit menu-item wordt weergegeven ten opzichte van de andere items.
uri URI naar een pagina die de menuactie-handler registreert (zie hieronder).
registeredObjectId (Optioneel) Naam van de geregistreerde menuactiehandler. De standaardwaarde is de inzender-id.

Meer informatie over alle plaatsen waar u acties kunt toevoegen in uitbreidbaarheidspunten.

Uw HTML-pagina

De menuactie wordt vertegenwoordigd door een JavaScript-script dat is ingesloten in een HTML-bestand. Sla de volgende inhoud op in een bestand en locatie die overeenkomt met de verwijzing in het manifestbestand van uw extensie.

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

Uw JavaScript

Met het onderstaande script wordt het handler-object geregistreerd om de actie af te handelen. Plaats het in de head sectie van de vorige HTML-pagina.

We hebben een alias in ons sdk-extension.json manifestbestand.libnode_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>

Tip

Zie Uitbreidbaarheidspunten, menu's en werkbalken, het bijdragemodel voor het formuleontwerpsysteem, REST API-verwijzing, extensievoorbeelden en resources in de ontwikkelaarscommunity voor meer informatie.

Volgende stappen

Nu u uw extensie hebt geschreven, zijn de volgende stappen het pakket, publiceren en installeren van uw extensie. U kunt ook de documentatie voor testen en foutopsporing van uw extensie bekijken.