Een hub toevoegen

  • Artikel

Azure DevOps Services

In dit artikel maken we een nieuwe hub die wordt weergegeven in Azure Boards na de Sprints - en Query-hubs .

Screen shot showing location of new hub in Azure Boards.

Structuur van een extensie

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

Haal de client-SDK op: SDK.js

Met het sdk-kernscript, SDK.js, kunnen webextensies communiceren met de host, Azure DevOps Services, frame. Dit script initialiseert ook of de extensie is geladen of krijgt context over de huidige pagina. Haal het client-SDK-bestand SDK.js op en voeg het toe aan uw web-app. Plaats deze in de home/sdk/scripts map.

Gebruik de opdracht npm install via de opdrachtregel (vereist Node) om de SDK op te halen:

npm install azure-devops-extension-sdk

Notitie

Zie Azure DevOps Web Extension SDK voor meer informatie.

De hubpagina: hello-world.html

Maak een hello-world.html bestand in de home map van uw extensie. Verwijs naar de SDK en roep init() aan en 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>

Het manifestbestand van uw extensie: vss-extension.json

Maak een json-bestand (vss-extension.jsonbijvoorbeeld) in de home map met de volgende inhoud:

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

Notitie

Wijzig de uitgever in de naam van uw uitgever. Als u een uitgever wilt maken, raadpleegt u Pakket, publiceren en installeren.

Pictogrammen

De pictogrammen stanza geeft het pad naar het pictogram van uw extensie in uw manifest.

Voeg een vierkante afbeelding toe met logo.pngde titel , zoals wordt weergegeven in het extensiemanifest.

Bijdragen

De bijdragen stanza voegt uw bijdrage - de Hello-hub - toe aan uw uitbreidingsmanifest.

Voor elke bijdrage in uw extensie definieert het manifest het volgende:

  • type bijdrage, hub
  • bijdragedoel, de work hub-groep (bekijk alle doelbare hubgroepen,
  • de eigenschappen die specifiek zijn voor elk type bijdrage. Een hub heeft de volgende eigenschappen.
Eigenschappen Beschrijving
name Naam van de hub.
order Plaatsing van de hub in de hubgroep.
uri Pad (ten opzichte van de basis-URI van de extensie) van de pagina die als hub wordt weergegeven.

Bereiken

Neem de bereiken op die uw extensie nodig heeft.

In dit geval moeten vso.work we toegang krijgen tot werkitems.

Files

In de bestanden worden de bestanden vermeld die u wilt opnemen in uw pakket: uw HTML-pagina, uw scripts, het SDK-script en uw logo.

Ingesteld addressable op true tenzij u andere bestanden opneemt die niet url-adresseerbaar hoeven te zijn.

Notitie

Raadpleeg de referentie voor het extensiemanifest voor meer informatie over het extensiemanifestbestand, zoals eigenschappen en functies.

Volgende stappen

Extensies verpakken, publiceren en installeren