Azure DevOps 服務
在本文中,我們將建立新的中樞,以在 Sprints 和 Queries 中樞之後顯示在 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
- 每個中樞都會顯示網頁
- 查看擴充點參照中的可選擇的中樞群組
在hello-world.html延伸模組的目錄中建立home檔案。
參考 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
使用下列內容在vss-extension.json目錄中建立 json 檔案 (home例如) :
{
"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 Hub - 新增至擴充功能清單。
針對延伸模組中的每個貢獻,指令清單會定義下列各項:
- 貢獻類型,中心
- 貢獻目標,工作中心群組(查看所有 可設為目標的中心群組,
- 每個參與類型特有的屬性。 中樞具有下列屬性。
| 房產 | 說明 |
|---|---|
| 名稱 | 中樞的名稱。 |
| 順序 | 中樞在中樞群組中的位置。 |
| 統一資源識別碼 (URI) | 頁面的路徑(相對於擴展基底 URI),以呈現為中樞頁面。 |
範圍
包含擴充功能所需的 範圍 。
在此情況下,我們需要 vso.work 存取工作專案。
檔案儲存體
這些 檔案 會說明您想要包含在套件中的檔案 - 您的 HTML 頁面、腳本、SDK 腳本和標誌。
將 設定為 ,除非您包含不需要 URL 尋址的其他檔案。
備註
如需 擴充指令清單檔的詳細資訊,例如屬性和函式,請參閱 延伸模組指令清單參考。