新增 中樞

  • 發行項

Azure DevOps Services

在本文中，我們將建立新的中樞，以在 Sprints 和 Queries 中樞之後顯示在 Azure Boards 中。

Screen shot showing location of new hub in Azure Boards.

延伸模組的結構

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

取得用戶端 SDK： SDK.js

核心 SDK 腳本 SDK.js 可讓 Web 延伸模組與主機、Azure DevOps Services、框架通訊。 此腳本也會初始化、通知載入延伸模組，或取得目前頁面的內容。 取得用戶端 SDK SDK.js 檔案，並將其新增至您的 Web 應用程式。 將它放在 home/sdk/scripts 資料夾中。

透過命令行使用 'npm install' 命令 （需要 Node） 來擷取 SDK：

npm install azure-devops-extension-sdk

注意

如需詳細資訊，請參閱 Azure DevOps Web 擴充功能 SDK。

您的中樞頁面： hello-world.html

  • 每個中樞都會顯示網頁
  • 查看擴充點參考中的可目標中 樞群組

在home延伸模組的目錄中建立hello-world.html檔案。 參考 SDK 並呼叫 init（） 和 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>

延伸模組的指令清單檔： vss-extension.json

使用下列內容在home目錄中建立 json 檔案 （vss-extension.json例如） ：

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

注意

將 發行者變更為您的發行者 名稱。 若要建立發行者，請參閱 封裝、發佈和安裝。

圖示

圖示存根會指定指令清單中延伸模組圖示的路徑。

新增標題為 logo.png的方形影像，如延伸模組指令清單所示。

投稿文章

參與 節會將 您的貢獻 - Hello 中樞 - 新增至延伸模組指令清單。

針對延伸模組中的每個貢獻，指令清單會定義下列各項：

  • 參與類型，中樞
  • 貢獻目標，工作中樞群組（查看所有 可鎖定的中樞群組，
  • 每個參與類型特有的屬性。 中樞具有下列屬性。
屬性 描述
NAME 中樞的名稱。
訂單 中樞在中樞群組中的位置。
uri 頁面的路徑（相對於延伸基底 URI），以呈現為中樞。

範圍

包含擴充功能所需的範圍。

在此情況下，我們需要 vso.work 存取工作專案。

Files

這些 檔案 會說明您想要包含在套件中的檔案 - 您的 HTML 頁面、腳本、SDK 腳本和標誌。

true除非您包含不需要 URL 尋址的其他檔案，否則請設定addressable為 。

注意

如需擴充指令清單檔的詳細資訊，例如屬性和函式，請參閱延伸模組指令清單參考。

下一步

套件、發佈及安裝延伸模組