Partager via

Ajouter un hub

Azure DevOps Services

Dans cet article, nous allons créer un hub qui s’affiche dans Azure Boards après les hubs Sprints et Requêtes .

Capture d’écran montrant l’emplacement du nouveau hub dans Azure Boards.

Structure d’une extension

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

Obtenez le Kit de développement logiciel (SDK) client : SDK.js

Le script du KIT de développement logiciel (SDK) principal, SDK.js, permet aux extensions web de communiquer avec l’hôte, Azure DevOps Services, frame. En outre, ce script initialise, avertit que l’extension est chargée et obtient un contexte sur la page actuelle. Obtenez le fichier du Kit de développement logiciel (SDK) SDK.js client et ajoutez-le à votre application web. Placez-le dans le home/sdk/scripts dossier.

Utilisez la commande « npm install » via la ligne de commande (nécessite Node) pour récupérer le Kit de développement logiciel (SDK) :

npm install azure-devops-extension-sdk

Remarque

Pour plus d’informations, consultez le Kit de développement logiciel (SDK) d’extension web Azure DevOps.

Votre page hub : hello-world.html

Créez un hello-world.html fichier dans le home répertoire de votre extension. Référencez le SDK et appelez init() et 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>

Fichier manifeste de votre extension : vss-extension.json

Créez un fichier json (vss-extension.jsonpar exemple) dans le home répertoire avec le contenu suivant :

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

Remarque

Remplacez l’éditeur par le nom de votre éditeur. Pour créer un éditeur, consultez Package, publication et installation.

Icônes

La section icônes spécifie le chemin de l’icône de votre extension dans votre manifeste.

Ajoutez une image carrée intitulée logo.png, comme indiqué dans le manifeste d’extension.

Contributions

La sanza des contributions ajoute votre contribution - le Hub Hello - à votre manifeste d’extension.

Pour chaque contribution de votre extension, le manifeste définit les éléments suivants :

  • type de contribution, hub
  • cible de contribution, groupe de hubs de travail (consultez tous les groupes de hubs pouvant être ciblés,
  • propriétés propres à chaque type de contribution. Un hub a les propriétés suivantes.
Propriété Descriptif
nom Nom du hub.
order Positionnement du hub dans le groupe de hubs.
URI Chemin d’accès (par rapport à l’URI de base de l’extension) de la page à afficher en tant que hub.

Étendues

Incluez les périmètres requis par votre extension.

Dans ce cas, nous devons vso.work accéder aux éléments de travail.

Fichiers

Les fichiers stanza indiquent les fichiers que vous souhaitez inclure dans votre package : votre page HTML, vos scripts, le script du Kit de développement logiciel (SDK) et votre logo.

Définissez addressable sur true sauf si vous incluez d’autres fichiers qui n’ont pas besoin d’être adressables par URL.

Remarque

Pour plus d’informations sur le fichier manifeste d’extension, comme les propriétés et la fonction, consultez la référence du manifeste d’extension.

Étapes suivantes

Empaqueter, publier et installer des extensions

Contenu connexe

  • Last updated on