Guía de navegación vertical

Azure DevOps Services

La navegación vertical aporta cambios que afectan a algunas extensiones. Estos resultados incluyen compatibilidad con iconos de extensión junto con cambios en el contexto del equipo.

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.

Contexto del equipo

En la navegación horizontal tradicional, los usuarios pueden ir a un proyecto o equipo seleccionando entre un selector que se encuentra en la parte superior izquierda del encabezado de página. Este selector presentó una lista de equipos recientes y una manera de buscar todos los equipos. En la nueva navegación vertical, un usuario solo puede navegar a un proyecto (y no a un equipo). Este cambio se realizó para simplificar la experiencia general. Sin embargo, introdujo un desafío para las extensiones web que dependen de la capacidad de los usuarios para cambiar de equipo mediante el selector de equipos tradicional en el encabezado de página.

SDK.getWebContext() es una API del lado cliente proporcionada por el SDK que proporciona información sobre la organización actual, el proyecto y el equipo en el que está funcionando el usuario:

{
    "account": {
        "name": "Fabrikam",
        "id": "50e49b94-4bb6-40e7-8c85-a6d756d8a4d8"
    },
    "project": {
        "name": "Fabrikam Dev",
        "id": "049b1af2-fc87-4e50-95e4-151357f04b7f"
    },
    "team": {
        "name": "Ops Team",
        "id": "9b3a6b80-fe95-4c8c-8aa1-1e5d535d7af1"
    }
}

No se recomienda confiar en SDK.getWebContext().team. En su lugar, siga las instrucciones siguientes, en función de la categoría en la que se encuentra la extensión.

Extensiones de concentrador compatibles con el equipo

Si la extensión necesita proporcionar a los usuarios una manera de seleccionar un equipo, puede usar la API REST de Teams para obtener una lista de equipos para el proyecto actual. En el ejemplo siguiente se muestra cómo llamar a esta API desde la extensión.

import { getClient } from "azure-devops-extension-api";
import { CoreRestClient } from "azure-devops-extension-api/Core";
import * as SDK from "azure-devops-extension-sdk";

private async getTeams() {
    const client = getClient(CoreRestClient);
    
    client.getTeams(SDK.getWebContext().project.id).then(
        function(teams) {
            console.log(teams);
        }
    );
}

Para obtener un ejemplo de una extensión que proporciona un control de selector de equipo, consulte Calendario de equipo.

Extensiones de panel y pivote

La extensión puede comprobar el objeto de configuración pasado a la contribución. Este objeto tiene propiedades diferentes en función del tipo de contribución y donde se hospeda la contribución. En el ejemplo se muestra cómo se lee el equipo desde la configuración y se cambia para leer el equipo desde webContext para admitir tanto la nueva navegación vertical como la navegación horizontal anterior en versiones locales instaladas.

function getCurrentTeam() {
  let webContext = SDK.getWebContext();
  let configuration = SDK.getConfiguration();

  if ("team" in configuration) {
    return configuration.team;
  } else if ("team" in webContext) {
    return webContext.team;
  } else {
    return null; // should only happen if not in a project context
  }
}

Extensiones de acción

La extensión puede comprobar el objeto actionContext pasado a la devolución de llamada invocada cuando un usuario selecciona el elemento de menú contribuido. El ejemplo muestra cómo se lee el equipo desde el actionContext.

var menuContributionHandler = (function () {
        "use strict";
        return {
            // This is a callback that gets invoked when a user selects the newly contributed menu item
            // The actionContext parameter contains team information.
            execute: function (actionContext) {
                if("team" in actionContext) {
                    alert(`Team. Id is ${actionContext.team.id}, Name is ${actionContext.team.name}`);
                }
            }
        };
    }());

Icono del concentrador

Opcionalmente, puede configurar un archivo (como un .png o .jpg) como el icono para su hub. Este icono aparece junto al centro en la barra de navegación vertical. Debe empaquetarse con la extensión.

Nota:

Estos iconos no aparecen en la navegación horizontal.

Complete los pasos siguientes para configurar un icono para el hub.

1. Establezca la iconAsset propiedad de la contribución del hub al identificador completamente calificado del activo, que sigue el patrón: {publisher-id}.{extension-id}/{asset-path}.

2. Agregue una entrada para este recurso en la propiedad de contribución includesData.

3. Empaquete el recurso con su extensión incluyéndolo en la propiedad files en la raíz del archivo de manifiesto.

Ejemplo 1:

{
  "id": "my-extension",
  "publisherId": "my-publisher",
  ...
  "contributions": [
        {
            "id": "example-hub",
            "type": "ms.vss-web.hub",
            "targets": [
                "ms.vss-code-web.code-hub-group"
            ],
            "properties": {
                "name": "My Hub",
                "iconAsset": "my-publisher.my-extension/images/fabrikam-logo.png",
                "includesData": {
                    "assets": [
                        "my-publisher.my-extension/images/fabrikam-logo.png"
                    ]
                }
            }
       }
  ],
 "files": [
     {
         "path": "images/fabrikam-logo.png",
         "addressable": true
     }
 ]
}

Ejemplo 2:

Cuando se aplican temas como claro frente a oscuro, puede especificar los iconos en el manifiesto de extensión como se indica a continuación.

{
    "id": "hub",
    "type": "ms.vss-web.hub",
    "targets": [
        "ms.vss-work-web.work-hub-group"
    ],
    "properties": {
        "name": "Hub",
        "description": "Something",
        "uri": "pages/Hub.html",
        "icon": {
            "light": "img/hub-light.png",
            "dark": "img/hub-dark.png"
        }
    }
}