Condividi tramite

Aggiungere un'azione di menu

  • Articolo

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

In questo esempio, aggiungiamo un'azione al menu di scelta rapida della query nell'hub delle query degli elementi di lavoro.

Consiglio

Vedere la documentazione più recente sullo sviluppo di estensioni usando Azure DevOps Extension SDK.

Prerequisiti

Aggiornare il file manifesto dell'estensione

Di seguito è riportato il frammento di codice che aggiunge la tua azione alla sezione contributi del manifesto dell'estensione .

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

Proprietà

Proprietà Descrizione
Testo Testo visualizzato nella voce di menu.
titolo Testo visualizzato nella voce di menu.
icona URL di un'icona visualizzata nella voce di menu. Gli URL relativi vengono risolti usando baseUri.
groupId (ID del gruppo) Determina la posizione in cui viene visualizzata questa voce di menu in relazione agli altri.
Uri URI a una pagina che registra il gestore dell'azione di menu (vedere di seguito).
IDOggettoRegistrato (Facoltativo) Nome del gestore dell'azione del menu registrato. Viene utilizzato come predefinito l'ID collaboratore.

Informazioni su tutte le posizioni in cui è possibile aggiungere azioni nei punti di estendibilità .

La tua Pagina HTML

L'azione di menu è rappresentata da uno script JavaScript incorporato in un file HTML. Salvare il contenuto seguente in un file e in un percorso corrispondente al riferimento nel file manifesto dell'estensione.

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

Il tuo JavaScript

Lo script seguente registra l'oggetto gestore per gestire l'azione, inserirlo nella sezione head della pagina HTML precedente.

Abbiamo impostato l'alias lib a node_modules/azure-devops-extension-sdk/lib nel file manifesto del 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>

Mancia

Per ulteriori informazioni, vedere i punti di estendibilità, menu e barre degli strumenti , il modello di contributo , il sistema di progettazione delle formule , il riferimento API REST , gli esempi di estensioni e le risorse nella Developer Community .

Passaggi successivi

Ora che l'estensione è stata scritta, i passaggi successivi sono Package, Publish e Install your extension (Creare pacchetti, pubblicare e installare l'estensione). È anche possibile consultare la documentazione relativa ai test e al debug dell'estensione.