Leitfaden für die vertikale Navigation

Azure DevOps Services

Die vertikale Navigation bringt Änderungen mit sich, die sich auf einige Erweiterungen auswirken. Diese Ergebnisse umfassen die Unterstützung von Erweiterungssymbolen sowie Änderungen am Teamkontext.

Teamkontext

In der herkömmlichen horizontalen Navigation können Benutzer zu einem Projekt oder Team wechseln, indem sie in einem Menü eine Option wählen, das sich oben links in der Kopfzeile befindet. Diese Auswahl stellte eine Liste der zuletzt verwendeten Teams und eine Möglichkeit, alle Teams zu durchsuchen, bereit. In der neuen vertikalen Navigation kann ein Benutzer nur zu einem Projekt (und nicht zu einem Team) navigieren. Diese Änderung wurde vorgenommen, um die Gesamterfahrung zu vereinfachen. Es wurde jedoch eine Herausforderung für Weberweiterungen eingeführt, die auf die Fähigkeit der Benutzer angewiesen sind, Teams mithilfe der herkömmlichen Teamauswahl im Seitenkopf zu wechseln.

SDK.getWebContext() ist eine clientseitige API, die vom SDK bereitgestellt wird, die Informationen über die aktuelle Organisation, das Projekt und das Team bereitstellt, in denen 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"
    }
}

Wir empfehlen nicht, sich auf SDK.getWebContext().team zu verlassen. Befolgen Sie stattdessen die nachstehenden Anleitungen, basierend auf der Kategorie, unter der Ihre Erweiterung fällt.

Teamorientierte Huberweiterungen

Wenn Ihre Erweiterung Benutzern eine Möglichkeit zum Auswählen eines Teams bereitstellen muss, 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 aus Ihrer 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 Teamauswahl-Steuerelement bereitstellt, finden Sie unter "Teamkalender".

Pivot- und Panelerweiterungen

Ihre Erweiterung kann das Konfigurationsobjekt überprüfen, das an Ihren Beitrag übergeben wurde. Dieses Objekt weist je nach Beitragstyp unterschiedliche Eigenschaften auf und wo der Beitrag gehostet wird. Das Beispiel zeigt das Auslesen des Teams aus der Konfiguration und den Rückgriff auf das Auslesen des Teams aus dem webContext, um sowohl die neue vertikale als auch die ältere horizontale Navigation in On-Premise-Versionen 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

Ihre Erweiterung kann das actionContext-Objekt überprüfen, das an den Rückruf übergeben wird, wenn ein Benutzer das beigetragene Menüelement auswählt. Beispiel zeigt, wie das Team aus dem actionContext ausgelesen wird.

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 Objekt (z. B. ein .png oder .jpg) als Symbol für Ihren Hub festlegen. Dieses Symbol wird neben dem Hub in der vertikalen Navigationsleiste angezeigt. Es muss mit Ihrer Erweiterung verpackt werden.

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

1. Legen Sie die iconAsset-Eigenschaft des Hub-Beitrags auf die vollqualifizierte Asset-ID fest, die dem Muster folgt: {publisher-id}.{extension-id}/{asset-path}.

2. Fügen Sie einen Eintrag für diese Ressource in der includesData Beitragseigenschaft hinzu.

3. Packen Sie die Ressource mit Ihrer Erweiterung, indem Sie sie in der files Eigenschaft im Stammverzeichnis Ihres Manifests auflisten.

Beispiel 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 2:

Wenn Themen wie helle und dunkle angewendet werden, können Sie die Symbole im Erweiterungsmanifest folgendermaßen 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"
        }
    }
}