Compartir a través de

Adición de un centro

Azure DevOps Services

Sugerencia

Para obtener las instrucciones de desarrollo de extensiones más recientes, incluidas las temáticas y la migración desde VSS. SDK, consulte el portal para desarrolladores del SDK de extensión de Azure DevOps.

En este artículo, creará un hub que aparece en Azure Boards a continuación de Sprints y Queries.

Captura de pantalla que muestra la ubicación del nuevo centro en Azure Boards.

Prerrequisitos

  • Node.js
  • Herramienta de empaquetado de extensiones: ejecutar npm install -g tfx-cli

Creación de la estructura de extensión

  1. Cree un directorio para la extensión e inicialícelo:

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

  2. El directorio debe tener este aspecto:

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

Creación de la página central

Cree hello-world.html en la raíz del directorio de extensión. Esta página carga el SDK, lo inicializa y muestra el nombre del usuario actual.

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

Para obtener la lista completa de grupos de hubs que puedes seleccionar, consulta la referencia de puntos de extensibilidad.

Creación del manifiesto de extensión

Cree vss-extension.json en la raíz del directorio de extensión:

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

Cambie el publicador por el nombre del publicador. Para crear un publicador, consulte Empaquetar, publicar e instalar. Mantenga public establecido en false durante el desarrollo.

Propiedades clave del manifiesto

Propiedad Descripción
Contribuciones Declara el centro. type es ms.vss-web.huby targets especifica a qué grupo central se va a agregar. Consulte Puntos de extensibilidad para todos los grupos de hub objetivo.
contributions.properties.name Nombre visible del concentrador.
contribuciones.propiedades.orden Posición del concentrador dentro del grupo de concentradores.
contributions.properties.uri Ruta de acceso (relativa al URI base de la extensión) de la página que se va a mostrar como el centro principal.
Ámbitos Permisos que requiere la extensión. vso.work otorga acceso de lectura a los elementos de trabajo. Consulte Ámbitos.
Archivos Archivos que se van a incluir en el paquete. Establezca addressable: true para los archivos que necesitan una dirección URL.

Para obtener más información sobre el manifiesto, consulte Referencia del manifiesto de extensión.

Añadir un grupo concentrador personalizado

En lugar de agregar un centro a un grupo de centros integrado, como Work o Code, cree su propio grupo de centros y agregue centros a él. Agregue tanto una ms.vss-web.hub-group contribución como una ms.vss-web.hub contribución que tenga como destino:

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

Diferencias clave al agregar un centro a un grupo integrado:

  • La contribución del grupo concentrador se enfoca en objetivos ms.vss-web.project-hub-groups-collection a nivel de proyecto o ms.vss-web.collection-hub-groups-collection a nivel de organización.
  • La matriz del targets hub utiliza una referencia relativa (.sample-hub-group) que apunta al grupo concentrador definido en la misma extensión.
  • La propiedad order del grupo del hub controla dónde aparece el grupo en la navegación.

Paso siguiente

Empaquetar, publicar e instalar extensiones

Contenido relacionado

  • Last updated on