Wskazówki dotyczące nawigacji pionowej

Azure DevOps Services

Nawigacja pionowa wprowadza zmiany wpływające na niektóre rozszerzenia. Wyniki te obejmują obsługę ikon rozszerzeń wraz ze zmianami w kontekście zespołu.

Napiwek

Zapoznaj się z naszą najnowszą dokumentacją dotyczącą programowania rozszerzeń przy użyciu zestawu SDK rozszerzenia usługi Azure DevOps.

Kontekst zespołu

W tradycyjnej nawigacji poziomej użytkownicy mogą przejść do projektu lub zespołu, wybierając z selektora, który znajduje się w lewym górnym rogu nagłówka strony. Ten selektor przedstawił listę ostatnich zespołów i sposób przeglądania wszystkich zespołów. W nowej nawigacji pionowej użytkownik może przechodzić tylko do projektu (a nie do zespołu). Ta zmiana została wprowadzona w celu uproszczenia ogólnego środowiska. Jednak wprowadzono wyzwanie dla rozszerzeń internetowych, które polegają na możliwości przełączania zespołów przez użytkowników przy użyciu tradycyjnego selektora zespołu w nagłówku strony.

SDK.getWebContext() to interfejs API po stronie klienta udostępniany przez zestaw SDK, który udostępnia informacje o bieżącej organizacji, projekcie i zespole, w których działa użytkownik:

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

Nie zalecamy polegania na .SDK.getWebContext().team Zamiast tego postępuj zgodnie z poniższymi wskazówkami na podstawie kategorii, w której znajduje się rozszerzenie.

Rozszerzenia koncentratora, które mają świadomość zespołu

Jeśli twoje rozszerzenie musi zapewnić użytkownikom sposób wybierania zespołu, możesz użyć interfejsu API REST usługi Teams, aby uzyskać listę zespołów dla bieżącego projektu. W poniższym przykładzie pokazano, jak wywołać ten interfejs API z rozszerzenia.

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

Aby zapoznać się z przykładem rozszerzenia udostępniającego kontrolkę selektora zespołu, zobacz Kalendarz zespołu.

Rozszerzenia przestawne/panele, które znajdują się w centrach obsługujących zespoły, takich jak listy prac i pulpit nawigacyjny

Rozszerzenie może sprawdzić obiekt konfiguracji przekazany do udziału. Ten obiekt ma różne właściwości w zależności od typu udziału i miejsca, w którym współtworzenie jest hostowane. Przykład przedstawia odczytywanie zespołu z konfiguracji i powrót do zespołu odczytu z elementu webContext w celu obsługi zarówno nowej nawigacji pionowej, jak i starszej nawigacji poziomej w wersjach lokalnych.

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

Rozszerzenia akcji, które znajdują się w centrach obsługujących zespół, takich jak listy prac i pulpit nawigacyjny

Rozszerzenie może sprawdzić obiekt actionContext przekazany do wywołania zwrotnego, gdy użytkownik wybierze element menu współautor. Przykład przedstawia odczytywanie zespołu z akcjiContext.

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}`);
                }
            }
        };
    }());

Ikona koncentratora

Opcjonalnie możesz ustawić zasób (na przykład .png lub .jpg) jako ikonę centrum. Ta ikona jest wyświetlana obok centrum na pionowym pasku nawigacyjnym. Musi być spakowany z rozszerzeniem.

Uwaga

Te ikony nie są wyświetlane w nawigacji poziomej.

Wykonaj poniższe kroki, aby ustawić ikonę centrum.

1. iconAsset Ustaw właściwość współtworzenia centrum na w pełni kwalifikowany identyfikator zasobu, który jest zgodny ze wzorcem: {publisher-id}.{extension-id}/{asset-path}.

2. Dodaj wpis dla tego elementu zawartości we includesData właściwości contribution.

3. Spakuj zasób z rozszerzeniem, wyświetlając go we files właściwości w katalogu głównym manifestu.

Przykład nr 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
     }
 ]
}

Przykład nr 2:

W przypadku zastosowania motywów takich jak jasny i ciemny można określić ikony w manifeście rozszerzenia w następujący sposób.

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