Linee guida per lo spostamento verticale

Servizi di Azure DevOps

Lo spostamento verticale comporta modifiche che influiscono su alcune estensioni. Questi risultati includono il supporto per le icone dell'estensione insieme alle modifiche apportate al contesto del team.

Suggerimento

Vedere la documentazione più recente sullo sviluppo di estensioni con Azure DevOps Extension SDK.

Contesto del team

Nella navigazione orizzontale tradizionale, gli utenti potrebbero passare a un progetto o a un team selezionando da un menu situato in alto a sinistra nell'intestazione della pagina. Questa selezione ha presentato un elenco di team recenti e un modo per sfogliare tutti i team. Nella nuova navigazione verticale, un utente può spostarsi solo in un progetto (e non in un team). Questa modifica è stata apportata per semplificare l'esperienza complessiva. Tuttavia, ha introdotto una sfida per le estensioni Web che si basano sulla capacità degli utenti di cambiare team usando la selezione team tradizionale nell'intestazione della pagina.

SDK.getWebContext() è un'API lato client fornita dall'SDK che fornisce informazioni sull'organizzazione, il progetto e il team corrente in cui opera l'utente:

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

Non è consigliabile basarsi su SDK.getWebContext().team. Seguire invece le indicazioni riportate di seguito, in base alla categoria in cui rientra l'estensione.

Estensioni dell'hub con capacità di consapevolezza del team

Se l'estensione deve fornire agli utenti un modo per selezionare un team, è possibile usare l'API REST di Teams per ottenere un elenco di team per il progetto corrente. L'esempio seguente illustra come chiamare questa API dall'estensione.

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

Per un esempio di estensione che fornisce un controllo di selezione del team, vedere Calendario del Team.

Estensioni pivot/pannelli presenti in hub con riconoscimento del team, ad esempio backlog e dashboard

L'estensione può controllare l'oggetto di configurazione passato al contributo. Questo oggetto ha proprietà diverse a seconda del tipo di contributo e della posizione in cui è ospitato il contributo. L'esempio mostra come leggere il team dalla configurazione e come fare il fallback alla lettura del team da webContext per supportare sia la nuova navigazione verticale che la precedente navigazione orizzontale nei rilasci on-premise.

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

Estensioni delle azioni presenti in hub con riconoscimento del team, ad esempio backlog e dashboard

L'estensione può verificare l'oggetto actionContext passato al callback invocato quando un utente seleziona la voce di menu contribuita. L'esempio mostra la lettura del team dall'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}`);
                }
            }
        };
    }());

Icona hub

Facoltativamente, è possibile impostare un asset (ad esempio un .png o un .jpg) come icona per l'hub. Questa icona viene visualizzata accanto all'hub nella barra di spostamento verticale. Deve essere impacchettata insieme alla tua estensione.

Nota

Queste icone non vengono visualizzate nello spostamento orizzontale.

Completare i passaggi seguenti per impostare un'icona per l'hub.

1. Impostare la iconAsset proprietà del contributo dell'hub sull'identificatore completo dell'asset, che segue il modello : {publisher-id}.{extension-id}/{asset-path}.

2. Aggiungere una voce per questo asset nella proprietà includesData di contributo.

3. Creare un pacchetto dell'asset con l'estensione elencandolo nella files proprietà nella radice del manifesto.

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

Esempio n. 2:

Quando si applicano temi come luce e scuro, è possibile specificare le icone nel manifesto dell'estensione come indicato di seguito.

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