Aggiungere schede nelle pagine dei risultati della query

Azure DevOps Services | Azure DevOps Server | Azure DevOps Server 2022

È possibile ospitare qualsiasi pagina Web compatibile con iframe come scheda nelle pagine dei risultati della query di Azure DevOps. Questo articolo illustra come aggiungere una semplice scheda Hello World.

Screenshot di una scheda personalizzata sulla pagina dei risultati della query.

Suggerimento

Per le linee guida più recenti per lo sviluppo di estensioni, incluse la tematizzazione e la migrazione da VSS.SDK, vedere il portale per sviluppatori di Azure DevOps Extension SDK.

Creare la pagina Web

  1. Installare il pacchetto azure-devops-extension-sdk e inserire il SDK.js file in home/sdk/scripts.

     npm install azure-devops-extension-sdk

  2. Creare la pagina Web da visualizzare. Nell'esempio seguente viene aggiunta una pagina semplice hello-world.html alla home directory .

  3. Nella pagina HTML fare riferimento all'SDK e chiamare SDK.init() seguito da SDK.notifyLoadSucceeded().

     <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 	<title>Hello World</title>
 	<script src="sdk/scripts/SDK.js"></script>
 </head>
 <body>
 	<script type="text/javascript">SDK.init();</script>
 	<h1>Hello World</h1>
 	<script type="text/javascript">SDK.notifyLoadSucceeded();</script>
 </body>
 </html>

Aggiornare il manifesto dell'estensione

Aggiorna il file manifesto dell'estensione con il codice seguente:

...

	"contributions": [
		{
            "id": "Fabrikam.HelloTab.Query.Tabs",
            "type": "ms.vss-web.tab",
            "description": "Adds a 'Hello' tab to the query results",
            "targets": [
                "ms.vss-work-web.query-tabs"
            ],
            "properties": {
                "uri": "hello-query-tab.html",
                "title": "Hello",
                "name": "Hello"
            }
        }
	],
	"scopes": [
		"vso.work"
	],
	"files": [
		{
			"path": "hello-query-tab.html", "addressable": true
		},
		{
			"path": "scripts", "addressable": true
		},
		{
			"path": "sdk/scripts", "addressable": true
		},
		{
			"path": "images/logo.png", "addressable": true
		}
	]
...

Contributi

Ogni contributo definisce una type (scheda), una target (schede di query) e un properties specifico per tipo. Per una scheda, impostare name e title sul testo visualizzato e uri sul percorso della pagina rispetto all'URI di base dell'estensione.

Ambiti

La sezione ambiti dichiara le autorizzazioni necessarie per l'estensione. Nell'esempio seguente viene vso.work usato per accedere agli elementi di lavoro.

File

La sezione files elenca ogni file necessario per l'estensione in fase di esecuzione. Impostare addressable su true per i file che devono essere indirizzabili tramite URL.

Esempio

SDK.register(SDK.getContributionId(), {
    pageTitle: function(state) {
        return "Hello";
    },
    updateContext: function(tabContext) {
    },
    isInvisible: function(state) {
        return false;
    },
    isDisabled: function(state) {
        return false;
    }
});

Per tutti i punti di contributo disponibili, vedere Punti di estendibilità.

Contenuti correlati

  • Last updated on