Guide de navigation verticale
Azure DevOps Services
La navigation verticale apporte 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 dans 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 naviguer dans un projet (et non dans 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’organisation, le projet et l’équipe actuelles dans laquelle l’utilisateur fonctionne :
{
"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 nous 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 sont au courant de 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 Team Calendar.
Extensions de 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 vérifier l’objet de configuration transmis à 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 comment lire l’équipe de lecture de la configuration et revenir à l’équipe de lecture de webContext pour prendre en charge 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 prenant en charge l’équipe, tels que backlogs et tableau de bord
Votre extension peut vérifier l’objet actionContext passé au rappel appelé lorsqu’un utilisateur sélectionne l’élément de menu fourni. L’exemple montre la lecture de l’équipe à 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.
Remarque
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 propriété de la
iconAssetcontribution du 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
includesDatapropriété de contribution.Empaqueter la ressource avec votre extension en la listant dans la propriété à la
filesracine de votre manifeste.
Exemple 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 la lumière et l’obscurité sont appliqués, vous pouvez spécifier les icônes de 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"
}
}
}