Share via

Lägga till en hubb

  • Artikel

Azure DevOps Services

I den här artikeln skapar vi en ny hubb som visas i Azure Boards efter hubbarna Sprints och Queries .

Screen shot showing location of new hub in Azure Boards.

Strukturen för ett tillägg

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

Hämta klient-SDK:et: SDK.js

SDK-kärnskriptet, SDK.js, gör det möjligt för webbtillägg att kommunicera med värden, Azure DevOps Services, ram. Det här skriptet initierar också, meddelar att tillägget har lästs in eller hämtar kontext om den aktuella sidan. Hämta Client SDK-filen SDK.js och lägg till den i webbappen. Placera den i home/sdk/scripts mappen.

Använd kommandot "npm install" via kommandoraden (kräver Node) för att hämta SDK:n:

npm install azure-devops-extension-sdk

Kommentar

Mer information finns i Azure DevOps Web Extension SDK.

Din hubbsida: hello-world.html

  • Varje hubb visar en webbsida
  • Kolla in de målinriktade hubbgrupperna i referensen för tilläggspunkter

Skapa en hello-world.html fil i katalogen för home tillägget. Referera till SDK och anropa init() och 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>

Tilläggets manifestfil: vss-extension.json

  • Varje tillägg måste ha en tilläggsmanifestfil
  • Läs referensen för tilläggsmanifestet
  • Läs mer om bidragspunkterna i Utökningspunkter

Skapa en json-fil (vss-extension.jsontill exempel) i home katalogen med följande innehåll:

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

Kommentar

Ändra utgivaren till ditt utgivarnamn. Information om hur du skapar en utgivare finns i Paketera, publicera och installera.

Ikoner

Ikonernas strof anger sökvägen till tilläggets ikon i manifestet.

Lägg till en fyrkantig bild med titeln logo.png, som visas i tilläggsmanifestet.

Bidrag

Bidragss strofen lägger till ditt bidrag – Hello-hubben – i tilläggsmanifestet.

För varje bidrag i tillägget definierar manifestet följande:

  • typ av bidrag, hubb
  • bidragsmål, arbetshubbens grupp (ta en titt på alla målinriktade hubbgrupper,
  • egenskaper som är specifika för varje typ av bidrag. En hubb har följande egenskaper.
Property Beskrivning
name Hubbens namn.
order Placering av hubben i hubbgruppen.
uri Sökväg (i förhållande till sidans tilläggsbas-URI) som ska visas som hubb.

Omfattningar

Inkludera de omfång som tillägget kräver.

I det här fallet måste vso.work vi komma åt arbetsobjekt.

Files

I filens strof står de filer som du vill inkludera i paketet – HTML-sidan, skripten, SDK-skriptet och logotypen.

Ange addressable till true såvida du inte inkluderar andra filer som inte behöver vara URL-adresserbara.

Kommentar

Mer information om tilläggsmanifestfilen, till exempel egenskaper och funktion, finns i tilläggsmanifestreferensen.

Nästa steg

Paketera, publicera och installera tillägg