Freigeben über

Hinzufügen eines Hubs

Azure DevOps Services

In diesem Artikel erstellen wir einen neuen Hub, der in Azure Boards nach den Hubs Sprints und Abfragen angezeigt wird.

Screenshot, der den Speicherort des neuen Hubs in Azure Boards zeigt.

Struktur einer Erweiterung

|--- README.md
|--- sdk    
	|--- node_modules           
	|--- scripts
		|--- SDK.js       
|--- images                        
	|--- icon.png                           
|--- scripts                        	// not used in this tutorial
|--- hello-world.html				// html page to be used for your hub  
|--- vss-extension.json				// extension's manifest

Abrufen des Client-SDK: SDK.js

Das Kern-SDK-Skript, SDK.js, ermöglicht es Weberweiterungen, mit dem Host-Frame Azure DevOps Services zu kommunizieren. Dieses Skript initialisiert auch, benachrichtigt, dass die Erweiterung geladen wurde, oder ruft Kontext zu der aktuellen Seite ab. Rufen Sie die Client SDK-Datei SDK.js ab, und fügen Sie sie Ihrer Web-App hinzu. Platzieren Sie ihn in dem home/sdk/scripts Ordner.

Verwenden Sie den Befehl "npm install" über die Befehlszeile (erfordert Node), um das SDK abzurufen:

npm install azure-devops-extension-sdk

Hinweis

Weitere Informationen finden Sie unter Azure DevOps Web Extension SDK.

Ihre Hubseite: hello-world.html

Erstellen Sie eine hello-world.html Datei im home Verzeichnis Ihrer Erweiterung. Verweisen Sie auf das SDK und rufen Sie init() und 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>

Manifestdatei Ihrer Erweiterung: vss-extension.json

Erstellen Sie eine JSON-Datei (vss-extension.jsonz. B. ) im home Verzeichnis mit dem folgenden Inhalt:

	{
		"manifestVersion": 1,
		"id": "sample-extension",
		"version": "0.1.0",
		"name": "My first sample extension",
		"description": "A sample Visual Studio Services extension.",
		"publisher": "fabrikamdev",
		"categories": ["Azure Boards"],
		"targets": [
			{
				"id": "Microsoft.VisualStudio.Services"
				}
			],
		"icons": {
			"default": "images/logo.png"
		 },
		"contributions": [
			{
				"id": "Fabrikam.HelloWorld",
				"type": "ms.vss-web.hub",
				"description": "Adds a 'Hello' hub to the Work hub group.",
				"targets": [
					"ms.vss-work-web.work-hub-group"
					],
				"properties": {
					"name": "Hello",
					"order": 99,
					"uri": "hello-world.html"
				}
			}
		],
		"scopes": [
			"vso.work"
		],
		"files": [
			{
				"path": "hello-world.html", "addressable": true
			},
			{
				"path": "sdk/scripts", "addressable": true
			},
			{
				"path": "images/logo.png", "addressable": true
			}
		]
	}

Hinweis

Ändern Sie den Verlag zu Ihrem Verlagsnamen. Um einen Herausgeber zu erstellen, siehe Paketieren, Veröffentlichen und Installieren.

Ikonen

Die Icon-Stanza gibt den Pfad zu dem Icon Ihrer Erweiterung in Ihrem Manifest an.

Fügen Sie ein quadratisches Bild mit logo.pngdem Titel hinzu, wie im Erweiterungsmanifest dargestellt.

Beiträge

Die Beiträge fügen Ihren Beitrag - den Hello-Hub - zu Ihrem Erweiterungsmanifest hinzu.

Für jeden Beitrag in Ihrer Erweiterung definiert das Manifest Folgendes:

  • Beitragstyp, Hub
  • Beitragsziel, die Arbeitshubgruppe (sehen Sie sich alle zielfähigen Hubgruppen an,
  • die für jeden Beitragstyp spezifischen Eigenschaften. Ein Hub verfügt über die folgenden Eigenschaften.
Eigentum BESCHREIBUNG
name Name des Hubs.
order Platzierung des Hubs in der Hubgruppe.
uri Pfad (relativ zum Basis-URI der Erweiterung) der Seite, die als Hub angezeigt werden soll.

Geltungsbereiche

Schließen Sie die Bereiche ein, die Ihre Erweiterung erfordert.

In diesem Fall müssen vso.work wir auf Arbeitselemente zugreifen.

Dateien

Die Dateien stanza gibt die Dateien an, die Sie in Ihr Paket aufnehmen möchten – Ihre HTML-Seite, Ihre Skripts, das SDK-Skript und Ihr Logo.

Stellen Sie addressable auf true ein, es sei denn, Sie schließen andere Dateien ein, die nicht URL-adressierbar sein müssen.

Hinweis

Weitere Informationen zur Erweiterungsmanifestdatei, z. B. Eigenschaften und Funktionen, finden Sie in der Erweiterungsmanifestreferenz.

Nächste Schritte

Packen, Veröffentlichen und Installieren von Erweiterungen

Verwandte Inhalte

  • Last updated on