Добавление центра

  • Статья

Azure DevOps Services

В этой статье мы создадим новый концентратор, который отображается в Azure Boards после центров Sprints и запросов .

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, позволяет веб-расширениям взаимодействовать с узлом, Azure DevOps Services, кадром. Этот скрипт также инициализирует, уведомляет о загрузке расширения или получает контекст о текущей странице. Получите файл пакета SDK SDK.js клиента и добавьте его в веб-приложение. Поместите его в папку home/sdk/scripts .

Используйте команду npm install через командную строку (требуется узел), чтобы получить пакет SDK:

npm install azure-devops-extension-sdk

Примечание.

Дополнительные сведения см. в пакете SDK для веб-расширений Azure DevOps.

Ваша центральная страница: 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

Создайте json-файл (vss-extension.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 — в манифест расширения.

Для каждого вклада в расширение манифест определяет следующее:

  • тип вклада, концентратор
  • Целевой объект вклада, группа рабочего центра (проверка из всех целевых групп концентраторов,
  • свойства, относящиеся к каждому типу вклада. Концентратор имеет следующие свойства.
Свойство Описание
name Имя концентратора.
заказ Размещение концентратора в группе концентраторов.
uri Путь (относительно базового URI расширения) страницы на поверхность в качестве концентратора.

Области

Включите необходимые область расширения.

В этом случае нам нужно vso.work получить доступ к рабочим элементам.

Files

Файлы стэнза содержат файлы, которые необходимо включить в пакет — HTML-страницу, скрипты, скрипты пакета SDK и логотип.

Установите значение addressabletrue , если вы не включаете другие файлы, которые не должны быть url-адресируемыми.

Примечание.

Дополнительные сведения о файле манифеста расширения, например свойствах и функциях, проверка ссылкой на манифест расширения.

Следующие шаги

Пакеты, публикация и установка расширений