Delen via

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's hubs.

Schermafbeelding met de locatie van een nieuwe 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

De client-SDK ophalen: SDK.js

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

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 SDKvoor meer informatie.

Jouw hubpagina: hello-world.html

Maak een hello-world.html bestand in de home map van uw extensie. Verwijs naar de SDK en roep init() en notifyLoadSucceeded()aan.

<!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 (bijvoorbeeldvss-extension.json) in de map home 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 uitgever naar de naam van uw uitgever. Als u een uitgever wilt maken, raadpleegt u Pakket, publiceert en installeert u.

Pictogrammen

De stanza van de iconen specificeert het pad naar het icoon van uw extensie in uw manifest.

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

Bijdragen

De bijdragen sectie 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 werkgroep werkhub (bekijk alle doelhubgroepen,
  • de eigenschappen die specifiek zijn voor elk type bijdrage. Een hub heeft de volgende eigenschappen.
Vastgoed Beschrijving
naam Naam van de hub.
bestelling Plaatsing van de hub in de hubgroep.
Uri Pad (ten opzichte van de basis-URI van de extensie) van de pagina die als hub moet worden weergegeven.

Toepassingsgebieden

Neem de bereiken op die uw extensie nodig heeft.

In dit geval hebben we vso.work nodig om toegang te krijgen tot werkitems.

Bestanden

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

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

Notitie

Raadpleeg de extensiemanifestverwijzingvoor meer informatie over het manifestbestand van de extensie, zoals eigenschappen en functies.

Volgende stappen

extensies verpakken, publiceren en installeren