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.

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 eine Auswahl aus einer Auswahl auswählen, die sich oben links im Seitenkopf befindet. Diese Auswahl hat eine Liste der zuletzt verwendeten Teams und eine Möglichkeit zum Suchen nach allen Teams vorgestellt. 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"
    }
}

Es wird nicht empfohlen, auf die Verwendung zu SDK.getWebContext().teamvertrauen. Befolgen Sie stattdessen die nachstehenden Anleitungen, basierend auf der Kategorie, unter der Ihre Erweiterung fällt.

Huberweiterungen, die teamfähig sind

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".

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 weist je nach Beitragstyp unterschiedliche Eigenschaften auf und wo der Beitrag gehostet wird. Das Beispiel zeigt das Lesen von Team aus der Konfiguration und den Rückfall auf das Lesen von Team aus webContext , um sowohl neue vertikale Navigation als auch ältere horizontale Navigation in lokalen 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
  }
}

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

Ihre Erweiterung kann das an den Rückruf übergebene actionContext-Objekt überprüfen, wenn ein Benutzer das menüelement "beigetragen" auswählt. Beispiel zeigt das 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 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.

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 Objektbezeichner fest, der 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 Designs wie Hell und 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"
        }
    }
}