Desarrollo de extensiones para la navegación web vertical - Azure DevOps

Artículo
07/20/2023

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

Consulte nuestra documentación más reciente sobre el desarrollo de extensiones mediante el SDK de extensión de Azure DevOps.

Contexto del equipo

En la navegación horizontal tradicional, los usuarios podrían ir a un proyecto o equipo seleccionando en 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, el proyecto y el equipo actuales en los 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 que son 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 paneles o tablas dinámicas que se encuentran en centros compatibles con el equipo, como trabajos pendientes y paneles

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 de dónde se hospeda la contribución. En el ejemplo se muestra cómo leer el equipo de la configuración y volver al equipo de lectura de webContext para admitir la nueva navegación vertical y la navegación horizontal anterior en versiones locales.

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 acciones que se encuentran en centros compatibles con el equipo, como trabajos pendientes y panel

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. En el ejemplo se muestra la lectura del equipo de 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 de concentrador

Opcionalmente, puede establecer un recurso (como un .png o .jpg) como el icono del centro. Este icono aparece junto al concentrador 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 establecer un icono para el centro.

Establezca la iconAsset propiedad de la contribución del centro en el identificador de recurso completo, que sigue el patrón : {publisher-id}.{extension-id}/{asset-path}.
Agregue una entrada para este recurso en la includesata propiedad de contribución.
Empaquete el recurso con la extensión enumerandolo en la files propiedad en la raíz del 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 de la siguiente manera.


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

Compartir a través de

Guía de navegación vertical