Ajouter un hub

Azure DevOps Services

Conseil / Astuce

Pour obtenir les dernières instructions de développement d’extension, notamment les thèmes et la migration à partir de VSS. Sdk, consultez le portail du kit de développement logiciel (SDK) d’extension Azure DevOps.

Dans cet article, vous allez créer un hub qui s’affiche dans Azure Boards après les hubs Sprints et Requêtes .

Capture d’écran montrant l’emplacement du nouveau hub dans Azure Boards.

Prerequisites

  • Node.js
  • Outil d’empaquetage d’extension : Exécuter npm install -g tfx-cli

Créer la structure d’extension

  1. Créez un répertoire pour votre extension et initialisez-le :

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

  2. Votre répertoire doit ressembler à ceci :

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

Créer la page hub

Créez hello-world.html à la racine de votre répertoire d’extension. Cette page charge le Kit de développement logiciel (SDK), l’initialise et affiche le nom de l’utilisateur actuel.

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

Pour obtenir la liste complète des groupes hub que vous pouvez cibler, consultez la référence des points d’extensibilité.

Créer le manifeste d’extension

Créez vss-extension.json à la racine de votre répertoire d’extension :

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

Important

Remplacez l’éditeur par le nom de votre éditeur. Pour créer un éditeur, consultez Package, publication et installation. Gardez public à false pendant le développement.

Propriétés clés du manifeste

Propriété Descriptif
contributions Déclare le hub. Le type est ms.vss-web.hub, et targets spécifie le groupe de hubs auquel l’ajouter. Consultez les points d’extensibilité pour tous les groupes de hubs ciblables.
contributions.properties.name Nom complet du hub.
contributions.properties.order Position du hub au sein du groupe de hubs.
contributions.properties.uri Chemin de la page à afficher en tant que hub (relatif à l’URI de base de l’extension).
scopes Autorisations requises par l’extension. vso.work accorde l’accès en lecture aux éléments de travail. Voir Étendues.
fichiers Fichiers à inclure dans le package. Configurez addressable: true pour les fichiers qui ont besoin d'une URL.

Pour plus d’informations sur le manifeste, consultez la référence du manifeste d’extension.

Ajouter un groupe hub personnalisé

Au lieu d’ajouter un hub à un groupe hub intégré, tel que Travail ou Code, créez votre propre groupe hub et ajoutez-y des hubs. Ajoutez une contribution ms.vss-web.hub-group ainsi qu'une contribution ms.vss-web.hub qui la cible :

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

Principales différences entre l’ajout d’un hub à un groupe intégré :

  • Objectifs de contribution du groupe hub pour le niveau de projet ou le niveau d'organisation.
  • Le tableau du targets hub utilise une référence relative (.sample-hub-group) pour référencer le groupe de hubs défini au sein de la même extension.
  • La propriété order du groupe hub contrôle l’emplacement où le groupe apparaît dans la navigation.

Étape suivante

Empaqueter, publier et installer des extensions

Contenu connexe

  • Last updated on