Hinzufügen von Registerkarten auf Abfrageergebnisseiten

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

Sie können jede iframekompatible Webseite als Registerkarte auf den Azure DevOps-Abfrageergebnisseiten hosten. In diesem Artikel wird das Hinzufügen einer einfachen Registerkarte "Hello World" erläutert.

Screenshot einer benutzerdefinierten Registerkarte auf der Abfrageergebnisseseite.

Tipp

Für die neuesten Anleitungen zur Erweiterungsentwicklung, einschließlich Themengestaltung und Migration von VSS.SDK, besuchen Sie das Entwicklerportal des Azure DevOps Extension SDK.

Erstellen Ihrer Webseite

  1. Installieren Sie das Azure-devops-extension-sdk-Paket , und platzieren Sie die SDK.js Datei in home/sdk/scripts.

     npm install azure-devops-extension-sdk

  2. Erstellen Sie die Webseite, die Sie anzeigen möchten. Im folgenden Beispiel wird dem hello-world.html Verzeichnis eine einfache home Seite hinzugefügt.

  3. Referenzieren Sie das SDK auf Ihrer HTML-Seite und rufen Sie SDK.init() gefolgt von SDK.notifyLoadSucceeded() auf.

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

Aktualisieren des Erweiterungsmanifests

Aktualisieren Sie Die Erweiterungsmanifestdatei mit dem folgenden Code:

...

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

Beiträge

Jeder Beitrag definiert eine type (Registerkarte), eine target (Abfragetabs) und spezifische properties für den jeweiligen Typ. Legen Sie für eine Registerkarte name und title als Anzeigetext fest und setzen Sie uri für den Seitenpfad relativ zum Basis-URI der Erweiterung.

Geltungsbereiche

Im Abschnitt "Bereiche " werden die Berechtigungen deklariert, die ihre Erweiterung benötigt. Im folgenden Beispiel wird vso.work verwendet, um auf Arbeitsaufgaben zuzugreifen.

Dateien

Im Abschnitt "Dateien " werden alle Dateien aufgelistet, die Ihre Erweiterung zur Laufzeit benötigt. Setze addressable auf true für Dateien, die URL-adressierbar sein müssen.

Example

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

Alle verfügbaren Beitragspunkte finden Sie unter Erweiterbarkeitspunkte.

Verwandte Inhalte

  • Last updated on