Compartir a través de

Adición de un centro

Azure DevOps Services

En este artículo, crearemos un nuevo centro que se muestra en Azure Boards después de Sprints y Queries.

Captura de pantalla que muestra la ubicación del nuevo centro en Azure Boards.

Estructura de una extensión

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

Obtenga el SDK de cliente: SDK.js

El script principal del SDK, SDK.js, permite que las extensiones web se comuniquen con el host, Azure DevOps Services, frame. Este script también inicializa, notifica que la extensión se cargó o obtiene contexto sobre la página actual. Obtenga el archivo del SDK del cliente y agréguelo SDK.js a la aplicación web. Colóquelo en la home/sdk/scripts carpeta .

Use el comando "npm install" mediante la línea de comandos (requiere Node) para recuperar el SDK:

npm install azure-devops-extension-sdk

Nota:

Para más información, consulte SDK de extensión web de Azure DevOps.

La página principal: hello-world.html

Cree un hello-world.html archivo en el directorio home de su extensión. Haga referencia al SDK y llame a init() y 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>

Archivo de manifiesto de la extensión: vss-extension.json

Cree un archivo JSON (vss-extension.jsonpor ejemplo) en el home directorio con el siguiente contenido:

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

Nota:

Cambie el publicador por el nombre del publicador. Para crear un publicador, consulte Empaquetar, publicar e instalar.

Iconos

La sección de iconos especifica la ruta de acceso al icono de tu extensión en el manifiesto.

Agregue una imagen cuadrada titulada logo.png, como se muestra en el manifiesto de extensión.

Contribuciones

La sección de contribuciones agrega su contribución - el Hello hub - al manifiesto de extensión.

Para cada contribución en tu extensión, el manifiesto define lo siguiente:

  • tipo de contribución, concentrador
  • destino de contribución, el grupo de trabajo del centro (consulte todos los grupos de centros de destino,
  • las propiedades específicas de cada tipo de contribución. Un centro tiene las siguientes propiedades.
Propiedad Descripción
nombre Nombre del centro.
orden Colocación del hub en el grupo de hubs.
uri Ruta de acceso (relativa al URI base de extensión) de la página que se va a exponer como centro.

Ámbitos

Incluya los ámbitos que requiere la extensión.

En este caso, es necesario vso.work acceder a los elementos de trabajo.

Archivos

La estrofa de archivos indica los archivos que quiere incluir en el paquete: la página HTML, los scripts, el script del SDK y el logotipo.

Establézcalo addressable en a true menos que incluya otros archivos que no necesiten ser direccionables por url.

Nota:

Para obtener más información sobre el archivo de manifiesto de extensión, como sus propiedades y funciones, consulte la referencia del manifiesto de extensión.

Pasos siguientes

Empaquetar, publicar e instalar extensiones

Contenido relacionado

  • Last updated on