Développement d’extensions pour la navigation web verticale - Azure DevOps

Article
07/20/2023

Azure DevOps Services

La navigation verticale apporte avec elle des modifications qui affectent certaines extensions. Ces résultats incluent la prise en charge des icônes d’extension ainsi que les modifications apportées au contexte d’équipe.

Conseil

Consultez notre documentation la plus récente sur le développement d’extensions à l’aide du Kit de développement logiciel (SDK) d’extension Azure DevOps.

Contexte d’équipe

Dans la navigation horizontale traditionnelle, les utilisateurs peuvent accéder à un projet ou à une équipe en sélectionnant à partir d’un sélecteur situé en haut à gauche de l’en-tête de page. Ce sélecteur a présenté une liste des équipes récentes et un moyen de rechercher toutes les équipes. Dans la nouvelle navigation verticale, un utilisateur peut uniquement accéder à un projet (et non à une équipe). Cette modification a été apportée pour simplifier l’expérience globale. Toutefois, il a introduit un défi pour les extensions web qui s’appuient sur la capacité des utilisateurs à changer d’équipe à l’aide du sélecteur d’équipe traditionnel dans l’en-tête de page.

SDK.getWebContext()est une API côté client fournie par le Kit de développement logiciel (SDK) qui fournit des informations sur l’organization, le projet et l’équipe actuelle dans laquelle l’utilisateur opère :

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

Nous vous déconseillons de s’appuyer sur SDK.getWebContext().team. Au lieu de cela, suivez les instructions ci-dessous, en fonction de la catégorie sous laquelle votre extension se trouve.

Extensions hub qui prennent en charge l’équipe

Si votre extension doit fournir aux utilisateurs un moyen de sélectionner une équipe, vous pouvez utiliser l’API REST Teams pour obtenir la liste des équipes pour le projet actuel. L’exemple suivant montre comment appeler cette API à partir de votre extension.

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

Pour obtenir un exemple d’extension qui fournit un contrôle sélecteur d’équipe, consultez Calendrier d’équipe.

Tableaux croisés dynamiques/panneaux qui se trouvent dans des hubs prenant en charge l’équipe, tels que Backlogs et Tableau de bord

Votre extension peut case activée l’objet de configuration passé à votre contribution. Cet objet a des propriétés différentes en fonction du type de contribution et de l’emplacement où la contribution est hébergée. L’exemple montre la lecture de l’équipe à partir de la configuration et le retour à l’équipe de lecture à partir de webContext pour prendre en charge à la fois la nouvelle navigation verticale et la navigation horizontale plus ancienne dans les versions locales.

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

Extensions d’actions qui se trouvent dans des hubs compatibles avec l’équipe, tels que Backlogs et Tableau de bord

Votre extension peut case activée l’objet actionContext passé au rappel appelé lorsqu’un utilisateur sélectionne l’élément de menu fourni. Exemple montrant l’équipe de lecture à partir de l’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}`);
                }
            }
        };
    }());

Icône Hub

Vous pouvez éventuellement définir une ressource (par exemple, un .png ou un .jpg) comme icône pour votre hub. Cette icône apparaît en regard du hub dans la barre de navigation verticale. Il doit être empaqueté avec votre extension.

Notes

Ces icônes n’apparaissent pas dans la navigation horizontale.

Effectuez les étapes suivantes pour définir une icône pour votre hub.

Définissez la iconAsset propriété de la contribution hub à l’identificateur de ressource complet, qui suit le modèle : {publisher-id}.{extension-id}/{asset-path}.
Ajoutez une entrée pour cette ressource dans la propriété de includesata contribution.
Empaquetez la ressource avec votre extension en la listant dans la files propriété à la racine de votre manifeste.

Exemple n°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
     }
 ]
}

Exemple 2 :

Lorsque des thèmes tels que clair ou foncé sont appliqués, vous pouvez spécifier les icônes dans votre manifeste d’extension comme suit.


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

Share via

Guide de navigation verticale