Wskazówki dotyczące nawigacji pionowej

Usługa Azure DevOps Services

Nawigacja pionowa powoduje zmiany wpływające na niektóre rozszerzenia. Te wyniki obejmują obsługę ikon rozszerzeń wraz ze zmianami kontekstu zespołu.

Porada

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 przedstawia listę ostatnich zespołów i sposób przeglądania wszystkich zespołów. W nowej nawigacji pionowej użytkownik może przejść tylko do projektu (a nie do zespołu). Ta zmiana została wprowadzonych w celu uproszczenia ogólnego środowiska pracy. Wprowadzono jednak 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 ramach którego 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ę twoje rozszerzenie.

Rozszerzenia koncentratora, które są obsługiwane przez zespół

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 tabeli przestawnej/paneli, 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 zespół odczytu z konfiguracji i powrót do zespołu odczytu z webContext w celu obsługi zarówno nowej nawigacji pionowej, jak i starszej nawigacji poziomej w wydaniach 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ółautora. Przykład przedstawia zespół odczytu 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ć element zawartości (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 includesata 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"
        }
    }
}