Leitfaden für die vertikale Navigation

Azure DevOps Services

Die vertikale Navigation bringt Änderungen mit sich, die sich auf einige Erweiterungen auswirken. Zu diesen Ergebnissen gehören unterstützung für Erweiterungssymbole sowie Änderungen am Teamkontext.

Tipp

Sehen Sie sich unsere neueste Dokumentation zur Erweiterungsentwicklung mithilfe des Azure DevOps-Erweiterungs-SDK an.

Teamkontext

In der herkömmlichen horizontalen Navigation können Benutzer zu einem Projekt oder Team wechseln, indem sie aus einer Auswahl auswählen, die sich oben links im Seitenkopf befindet. Diese Auswahl präsentierte eine Liste der zuletzt verwendeten Teams und eine Möglichkeit, nach allen Teams zu suchen. In der neuen vertikalen Navigation kann ein Benutzer nur in ein Projekt (und nicht in ein Team) navigieren. Diese Änderung wurde vorgenommen, um die Gesamterfahrung zu vereinfachen. Es wurde jedoch eine Herausforderung für Weberweiterungen eingeführt, die von der Fähigkeit der Benutzer abhängen, Teams mithilfe der herkömmlichen Teamauswahl in der Seitenkopfzeile zu wechseln.

SDK.getWebContext()ist eine clientseitige API, die vom SDK bereitgestellt wird und Informationen zum aktuellen organization, Projekt und Team bereitstellt, in dem der Benutzer arbeitet:

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

Es wird nicht empfohlen, sich auf zu SDK.getWebContext().teamverlassen. Befolgen Sie stattdessen die folgende Anleitung, basierend auf der Kategorie, unter die Ihre Erweiterung fällt.

Teamfähige Huberweiterungen

Wenn Ihre Erweiterung Benutzern die Möglichkeit bieten muss, ein Team auszuwählen, können Sie die Teams-REST-API verwenden, um eine Liste der Teams für das aktuelle Projekt abzurufen. Das folgende Beispiel zeigt, wie Sie diese API über Ihre Erweiterung aufrufen.

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

Ein Beispiel für eine Erweiterung, die ein Teamauswahlsteuerelement bereitstellt, finden Sie unter Teamkalender.

Pivots/Panels-Erweiterungen, die sich in teamfähigen Hubs wie Backlogs und Dashboard befinden

Ihre Erweiterung kann das Konfigurationsobjekt überprüfen, das an Ihren Beitrag übergeben wurde. Dieses Objekt verfügt über unterschiedliche Eigenschaften, je nach Dem Beitragstyp und dem Ort, an dem der Beitrag gehostet wird. Das Beispiel zeigt das Lesen des Teams aus der Konfiguration und das Zurückfallen auf das Leseteam aus webContext , um sowohl die neue vertikale Navigation als auch ältere horizontale Navigation in lokalen Releases zu unterstützen.

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

Aktionserweiterungen, die sich in teamfähigen Hubs befinden, z. B. Backlogs und Dashboard

Ihre Erweiterung kann das actionContext-Objekt überprüfen, das an den aufgerufenen Rückruf übergeben wird, wenn ein Benutzer das mitgewirkte Menüelement auswählt. Beispiel: Lesen des Teams aus dem 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}`);
                }
            }
        };
    }());

Hubsymbol

Sie können optional ein Asset (z. B. ein .png oder .jpg) als Symbol für Ihren Hub festlegen. Dieses Symbol wird neben dem Hub in der vertikalen Navigationsleiste angezeigt. Sie muss mit Ihrer Erweiterung gepackt werden.

Hinweis

Diese Symbole werden nicht in der horizontalen Navigation angezeigt.

Führen Sie die folgenden Schritte aus, um ein Symbol für Ihren Hub festzulegen.

1. Legen Sie die iconAsset Eigenschaft des Hubbeitrags auf den vollqualifizierten Ressourcenbezeichner fest, der dem Muster folgt: {publisher-id}.{extension-id}/{asset-path}.

2. Fügen Sie einen Eintrag für dieses Objekt in der contribution-Eigenschaft includesata hinzu.

3. Packen Sie das Objekt mit Ihrer Erweiterung, indem Sie es in der files Eigenschaft im Stammverzeichnis Ihres Manifests auflisten.

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

Beispiel Nr. 2:

Wenn Designs wie Hell oder Dunkel angewendet werden, können Sie die Symbole im Erweiterungsmanifest wie folgt angeben.

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