Orientação de navegação vertical

Azure DevOps Services

A navegação vertical traz consigo alterações que afetam algumas extensões. Estes resultados incluem suporte para ícones de extensão, juntamente com alterações ao contexto de equipa.

Dica

Veja a nossa documentação mais recente sobre o desenvolvimento de extensões com o SDK da Extensão do Azure DevOps.

Contexto de equipa

Na navegação horizontal tradicional, os utilizadores podem aceder a um projeto ou equipa ao selecionar a partir de um seletor que se encontra no canto superior esquerdo do cabeçalho da página. Este selecionador apresentou uma lista de equipas recentes e uma forma de procurar por todas as equipas. Na nova navegação vertical, um utilizador só pode navegar para um projeto (e não para uma equipa). Esta alteração foi feita para simplificar a experiência global. No entanto, introduziu um desafio para as extensões Web que dependem da capacidade dos utilizadores de trocarem de equipas com o seletor de equipa tradicional no cabeçalho da página.

SDK.getWebContext() é uma API do lado do cliente fornecida pelo SDK que fornece informações sobre a organização atual, o projeto e a equipa em que o utilizador está a operar:

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

Não recomendamos que confie em SDK.getWebContext().team. Em vez disso, siga as orientações abaixo, com base na categoria em que a extensão se insere.

Extensões do hub com suporte para a equipa

Se a sua extensão precisar de fornecer aos utilizadores uma forma de selecionar uma equipa, pode utilizar a API REST do Teams para obter uma lista de equipas para o projeto atual. O exemplo seguinte mostra como chamar esta API a partir da sua extensão.

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 obter um exemplo de uma extensão que fornece um controlo de seletor de equipa, consulte Calendário de Equipa.

Extensões de Pivots/Panels que estão em hubs com deteção de equipa, como Registos de Tarefas Pendentes e Dashboard

A extensão pode verificar o objeto de configuração transmitido à sua contribuição. Este objeto tem propriedades diferentes consoante o tipo de contribuição e onde a contribuição está alojada. O exemplo mostra a equipa de leitura da configuração e a regressar à equipa de leitura da WebContext para suportar a nova navegação vertical e a navegação horizontal mais antiga em versões no local.

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

Extensões de ações que estão em hubs com deteção de equipa, como Registos de Tarefas Pendentes e Dashboard

A extensão pode verificar o objeto actionContext transmitido para a chamada de retorno invocada quando um utilizador seleciona o item de menu de contribuição. O exemplo mostra a equipa de leitura da 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}`);
                }
            }
        };
    }());

Ícone do Hub

Opcionalmente, pode definir um recurso (como um .png ou .jpg) como o ícone do seu hub. Este ícone é apresentado junto ao hub na barra de navegação vertical. Tem de ser empacotado com a sua extensão.

Nota

Estes ícones não aparecem na navegação horizontal.

Conclua os seguintes passos para definir um ícone para o hub.

1. Defina a iconAsset propriedade da contribuição do hub para o identificador de recursos completamente qualificado, que segue o padrão: {publisher-id}.{extension-id}/{asset-path}.

2. Adicione uma entrada para este recurso na includesata propriedade de contribuição.

3. Empacote o recurso com a extensão ao listá-lo na files propriedade na raiz do seu manifesto.

Exemplo n.º 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
     }
 ]
}

Exemplo n.º 2:

Quando são aplicados temas como claro ou escuro, pode especificar os ícones no manifesto da extensão da seguinte forma.

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