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 esserenode_modules/azure-devops-extension-sdk/lib
nelsdk-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.