Добавьте хаб

Azure DevOps Services

Подсказка

Для получения последних рекомендаций по разработке расширений, включая темизацию и миграцию из VSS.SDK, смотрите на портале разработчика пакета SDK для расширений Azure DevOps.

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

Снимок экрана: расположение нового концентратора в Azure Boards.

Необходимые условия

  • Node.js
  • Инструмент упаковки расширений: выполните npm install -g tfx-cli

Создание структуры расширения

  1. Создайте каталог для расширения и инициализируйте его:

    mkdir my-hub-extension
cd my-hub-extension
npm init -y
npm install azure-devops-extension-sdk --save

  2. Каталог должен выглядеть следующим образом:

    |--- my-hub-extension
    |--- node_modules
        |--- azure-devops-extension-sdk
    |--- images
        |--- icon.png
    |--- hello-world.html
    |--- package.json
    |--- vss-extension.json

Создание центральной страницы

Создайте hello-world.html в корневом каталоге расширения. Эта страница загружает пакет SDK, инициализирует его и отображает имя текущего пользователя.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hello World</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
    <script>
        window.requirejs.config({
            enforceDefine: true,
            paths: {
                'SDK': './lib/SDK.min'
            }
        });
        window.requirejs(['SDK'], function (SDK) {
            SDK.init();
            SDK.ready().then(() => {
                document.getElementById("name").innerText = SDK.getUser().displayName;
            });
        });
    </script>
</head>
<body>
    <h1>Hello, <span id="name"></span></h1>
</body>
</html>

Полный список целевых групп концентраторов см. в справочнике по точкам расширяемости.

Создание манифеста расширения

Создайте vss-extension.json в корневом каталоге расширения:

{
    "manifestVersion": 1,
    "id": "sample-extension",
    "version": "0.1.0",
    "name": "My first sample extension",
    "description": "A sample Azure DevOps extension.",
    "publisher": "fabrikamdev",
    "public": false,
    "categories": ["Azure Boards"],
    "targets": [
        {
            "id": "Microsoft.VisualStudio.Services"
        }
    ],
    "icons": {
        "default": "images/icon.png"
    },
    "contributions": [
        {
            "id": "hello-world-hub",
            "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": "node_modules/azure-devops-extension-sdk",
            "addressable": true,
            "packagePath": "lib"
        },
        {
            "path": "images/icon.png", "addressable": true
        }
    ]
}

Это важно

Измените издателя на название вашего издательства. Сведения о создании издателя см. в разделе "Пакет", "Публикация" и "Установка". Держите public установленным на false во время разработки.

Ключевые свойства манифеста

Недвижимость Описание
Взносы Объявляет концентратор. type является ms.vss-web.hub, и targets указывает, в какую группу концентратора необходимо добавить его. См. точки расширяемости всех целевых групп концентраторов.
contributions.properties.name Отображаемое имя сетевого концентратора.
contributions.properties.order Положение концентратора в группе концентраторов.
contributions.properties.uri Путь (относительно базового URI расширения) страницы, отображаемой в качестве центральной.
Области действия Разрешения, требуемые расширением. vso.work предоставляет доступ на чтение рабочих элементов. См. области.
Файлы Файлы для включения в пакет. Задайте addressable: true для файлов, которым требуется URL-адрес.

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

Добавьте настроенную группу хабов

Вместо добавления концентратора в встроенную группу концентраторов, например Work или Code, создайте собственную группу концентраторов и добавьте в нее концентраторы. Добавьте как вклад ms.vss-web.hub-group, так и вклад ms.vss-web.hub, предназначенный для него.

"contributions": [
    {
        "id": "sample-hub-group",
        "type": "ms.vss-web.hub-group",
        "description": "Adds a 'Samples' hub group at the project level.",
        "targets": [
            "ms.vss-web.project-hub-groups-collection"
        ],
        "properties": {
            "name": "Samples",
            "order": 100
        }
    },
    {
        "id": "hello-hub",
        "type": "ms.vss-web.hub",
        "description": "Adds a 'Hello' hub to the Samples hub group.",
        "targets": [
            ".sample-hub-group"
        ],
        "properties": {
            "name": "Hello",
            "order": 99,
            "uri": "hello-world.html"
        }
    }
]

Основные отличия от добавления концентратора в встроенную группу:

  • Целевые показатели ms.vss-web.project-hub-groups-collection вклада в группу концентраторов для уровня проекта или ms.vss-web.collection-hub-groups-collection для уровня организации.
  • Массив хаба targets использует относительную ссылку (.sample-hub-group), чтобы указать на группу хабов, определенную в том же расширении.
  • Свойство order в группе узлов определяет, где группа отображается в навигации.

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

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

Связанный контент

  • Last updated on