Condividi tramite

Aggiungere un hub

Servizi di Azure DevOps

Suggerimento

Per le linee guida più recenti per lo sviluppo di estensioni, incluse la tematizzazione e la migrazione da VSS.SDK, vedere il portale per sviluppatori di Azure DevOps Extension SDK.

In questo articolo viene creato un hub visualizzato in Azure Boards dopo gli hub Sprint e Query .

Screenshot che mostra la posizione del nuovo hub in Azure Boards.

Prerequisiti

  • Node.js
  • Strumento di creazione pacchetti di estensioni: eseguire npm install -g tfx-cli

Creare la struttura di estensione

  1. Creare una directory per l'estensione e inizializzarla:

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

  2. La tua directory dovrebbe apparire così:

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

Creare la pagina hub

Crea hello-world.html nella radice della directory dell'estensione. Questa pagina carica l'SDK, lo inizializza e visualizza il nome dell'utente corrente.

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

Per l'elenco completo dei gruppi hub di destinazione, vedere i riferimenti ai punti di estendibilità.

Creare il manifesto dell'estensione

Crea vss-extension.json nella radice della directory dell'estensione.

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

Importante

Cambiare l'editore con il nome del tuo editore. Per creare un server di pubblicazione, vedere Pacchetto, pubblicazione e installazione. Mantenere public impostato su false durante lo sviluppo.

Proprietà principali del manifesto

Proprietà Descrizione
Contributi Dichiara l'hub. type è ms.vss-web.hube targets specifica il gruppo hub a cui aggiungerlo. Vedere Punti di estendibilità per tutti i gruppi di hub di destinazione.
contributions.properties.name Nome dell'hub visualizzato.
contributions.properties.order Posizione dell'hub all'interno del gruppo hub.
contributions.properties.uri Percorso (relativo all'URI di base dell'estensione) della pagina da visualizzare come hub.
Ambiti Autorizzazioni necessarie per l'estensione. vso.work concede l'accesso in lettura agli elementi di lavoro. Vedere Ambiti.
file File da includere nel pacchetto. Impostare addressable: true per i file che richiedono un URL.

Per altre informazioni sul manifesto, vedere Informazioni di riferimento sul manifesto dell'estensione.

Aggiungere un gruppo di hub personalizzato

Invece di aggiungere un hub a un gruppo hub predefinito, ad esempio Lavoro o Codice, creare un gruppo hub personalizzato e aggiungervi hub. Aggiungere sia un ms.vss-web.hub-group contributo che un ms.vss-web.hub contributo destinato a un obiettivo specifico:

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

Differenze principali dall'aggiunta di un hub a un gruppo predefinito:

  • Il contributo del gruppo hub è destinato a livello di progetto ms.vss-web.project-hub-groups-collection o a livello di organizzazione ms.vss-web.collection-hub-groups-collection.
  • La matrice dell'hub targets usa un riferimento relativo (.sample-hub-group) per puntare al gruppo hub definito nella stessa estensione.
  • La order proprietà nel gruppo hub controlla dove viene visualizzato il gruppo nella navigazione.

Passo successivo

Pacchettizzare, pubblicare e installare le estensioni

Contenuti correlati

  • Last updated on