Delen via

Een hub toevoegen

Azure DevOps Services

Aanbeveling

Voor de nieuwste richtlijnen voor uitbreidingsontwikkeling, inclusief thema's en migratie van VSS. SDK raadpleegt u de ontwikkelaarsportal van de Azure DevOps Extension SDK.

In dit artikel maakt u een hub die wordt weergegeven in Azure Boards na de Sprints - en Query-hubs .

Schermopname van de locatie van een nieuwe hub in Azure Boards.

Vereiste voorwaarden

  • Node.js
  • Hulpprogramma voor uitbreidingspakketten: uitvoeren npm install -g tfx-cli

De extensiestructuur maken

  1. Maak een map voor uw extensie en initialiseer deze:

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

  2. Uw directory moet er als volgt uitzien:

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

De hubpagina maken

Maak hello-world.html in de hoofdmap van uw extensiemap. Op deze pagina wordt de SDK geladen, geïnitialiseerd en wordt de naam van de huidige gebruiker weergegeven.

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

Zie de naslaginformatie over uitbreidbaarheidspunten voor de volledige lijst met hubgroepen waarop u zich kunt richten.

Het extensiemanifest maken

Maak vss-extension.json in de hoofdmap van je extensie.

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

Belangrijk

Wijzig uitgever naar de naam van uw uitgever. Als u een uitgever wilt maken, raadpleegt u Pakket, publiceert en installeert u. Houd public ingesteld op false tijdens de ontwikkeling.

Belangrijkste manifest eigenschappen

Vastgoed Beschrijving
Bijdragen Declareert de hub. Dit type is ms.vss-web.hub, en targets geeft aan welke hubgroep deze moet worden toegevoegd. Zie Uitbreidbaarheidspunten voor alle doelbare hubgroepen.
contributions.properties.name Weergavenaam van de hub.
bijdragen.eigenschappen.volgorde Positie van de hub binnen de hubgroep.
contributions.properties.uri Pad (ten opzichte van de basis-URI van de extensie) van de pagina die moet worden weergegeven als de hub.
Scopes Machtigingen die nodig zijn voor de extensie. vso.work verleent leestoegang tot werkitems. Zie Reikwijdtes.
bestanden Bestanden die in het pakket moeten worden opgenomen. Instellen addressable: true voor bestanden die een URL nodig hebben.

Zie voor meer informatie over het manifest de handleiding voor extensiemanifesten.

Een aangepaste hubgroep toevoegen

In plaats van een hub toe te voegen aan een ingebouwde hubgroep, zoals Werk of Code, maakt u uw eigen hubgroep en voegt u er hubs aan toe. Voeg zowel een ms.vss-web.hub-group bijdrage als een ms.vss-web.hub bijdrage toe, waarbij de ms.vss-web.hub bijdrage de ms.vss-web.hub-group bijdrage beoogt.

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

Belangrijke verschillen tussen het toevoegen van een hub aan een ingebouwde groep:

  • De bijdrage doelen van de hubgroep ms.vss-web.project-hub-groups-collection voor projectniveau en ms.vss-web.collection-hub-groups-collection voor organisatieniveau.
  • De matrix van de hub targets gebruikt een relatieve verwijzing (.sample-hub-group) die verwijst naar de hubgroep die in dezelfde extensie is gedefinieerd.
  • De order eigenschap in de hubgroep bepaalt waar de groep wordt weergegeven in de navigatie.

Volgende stap

extensies verpakken, publiceren en installeren

Verwante inhoud

  • Last updated on