Aggiungere un'azione di menu

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

In questo esempio viene aggiunta un'azione al menu di scelta rapida della query nell'hub query degli elementi di lavoro.

Suggerimento

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

Prerequisiti per questo articolo

  • È necessario creare un'app Web per l'azione, disponibile nell'esempio dell'hub.
  • In caso contrario, vedere l'esercitazione sulla scrittura della prima estensione per informazioni sulle nozioni di base.

Aggiornare il file manifesto dell'estensione

Di seguito è riportato il frammento di codice che aggiunge l'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.
title Testo della descrizione comando visualizzato nella voce di menu.
icona URL di un'icona visualizzata nella voce di menu. Gli URL relativi vengono risolti usando baseUri.
groupId 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).
registeredObjectId (Facoltativo) Nome del gestore dell'azione del menu registrato. L'impostazione predefinita è l'ID collaboratore.

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

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>

Your JavaScript

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

È stato eseguito lib l'alias per essere node_modules/azure-devops-extension-sdk/lib nel sdk-extension.json file manifesto.

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

Suggerimento

Per altre informazioni, vedere Punti di estendibilità, menu e barre degli strumenti, modello di contributo sistema di progettazione delle formule, informazioni di riferimento sull'API REST, esempi di estensioni e risorse nella community degli sviluppatori.

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.