Freigeben über

Hinzufügen eines Hubs

Azure DevOps Services

Tipp

Für die neuesten Anleitungen zur Erweiterungsentwicklung, einschließlich Themengestaltung und Migration von VSS.SDK, besuchen Sie das Entwicklerportal des Azure DevOps Extension SDK.

In diesem Artikel erstellen Sie einen Hub, der in Azure Boards nach den Sprints und Abfragen-Hubs angezeigt wird.

Screenshot der Position des neuen Hubs in Azure Boards.

Voraussetzungen

  • Node.js
  • Tool zum Packen von Erweiterungen: ausführen npm install -g tfx-cli

Erstellen der Erweiterungsstruktur

  1. Erstellen Sie ein Verzeichnis für Ihre Erweiterung, und initialisieren Sie es:

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

  2. Ihr Verzeichnis sollte wie folgt aussehen:

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

Erstellen der Hubseite

Erstellen Sie hello-world.html im Stammverzeichnis Ihres Erweiterungsverzeichnisses. Diese Seite lädt das SDK, initialisiert es und zeigt den Namen des aktuellen Benutzers an.

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

Die vollständige Liste der Hubgruppen, auf die Sie abzielen können, finden Sie in der Referenz zu Erweiterbarkeitspunkten.

Erstellen des Erweiterungsmanifests

Erstellen Sie vss-extension.json im Stammverzeichnis Ihres Erweiterungsverzeichnisses:

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

Von Bedeutung

Ändern Sie den Verlag zu Ihrem Verlagsnamen. Um einen Herausgeber zu erstellen, siehe Paketieren, Veröffentlichen und Installieren. Halten Sie public während der Entwicklung auf false eingestellt.

Wichtige Manifest-Eigenschaften

Eigentum BESCHREIBUNG
Beiträge Deklariert den Hub. Dies type ist ms.vss-web.hub, und targets gibt an, welcher Hubgruppe sie hinzugefügt werden soll. Weitere Informationen finden Sie unter Erweiterbarkeitspunkte für alle zielfähigen Hubgruppen.
contributions.properties.name Anzeigename des Hubs.
contributions.properties.order Position des Hubs innerhalb der Hubgruppe.
contributions.properties.uri Pfad (relativ zum Erweiterungsbasis-URI) der Seite, die als Hub angezeigt werden soll.
Bereiche Berechtigungen, die für die Erweiterung erforderlich sind. vso.work gewährt Lesezugriff auf Arbeitsaufgaben. Siehe Scopes.
Dateien Dateien, die in das Paket eingeschlossen werden sollen. Legen Sie addressable: true für Dateien fest, die eine URL benötigen.

Weitere Informationen zum Manifest finden Sie unter Erweiterungsmanifestreferenz.

Hinzufügen einer benutzerdefinierten Hubgruppe

Anstatt einer integrierten Hubgruppe, z. B. "Arbeit" oder "Code", einen Hub hinzuzufügen, erstellen Sie ihre eigene Hubgruppe, und fügen Sie ihr Hubs hinzu. Fügen Sie sowohl einen ms.vss-web.hub-group Beitrag als auch einen ms.vss-web.hub Beitrag hinzu, der darauf abzielt:

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

Wichtige Unterschiede beim Hinzufügen eines Hubs zu einer integrierten Gruppe:

  • Die Ziele für den Beitrag der ms.vss-web.project-hub-groups-collection Hubgruppe auf Projektebene oder ms.vss-web.collection-hub-groups-collection auf Organisationsebene.
  • Das Array des Hubs targets verwendet eine relative Referenz (.sample-hub-group), um auf die in derselben Erweiterung definierte Hubgruppe zu verweisen.
  • Die Eigenschaft order der Hubgruppe steuert, wo die Gruppe in der Navigation erscheint.

Nächster Schritt

Packen, Veröffentlichen und Installieren von Erweiterungen

Verwandte Inhalte

  • Last updated on