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

Nello spostamento orizzontale tradizionale, gli utenti possono passare a un progetto o a un team selezionando una selezione che si trova in alto a sinistra nell'intestazione della pagina. Questa selezione ha presentato un elenco di team recenti e un modo per cercare 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 che sono in grado di essere consapevoli 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 selezione 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 la lettura del team dalla configurazione e il fallback alla lettura del team da webContext per supportare sia la nuova navigazione verticale che la navigazione orizzontale precedente nelle versioni locali.

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ò controllare l'oggetto actionContext passato al callback richiamato quando un utente seleziona la voce di menu con contributo. L'esempio mostra la lettura del team da 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 inserita in un pacchetto con l'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à del includesData 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"
        }
    }
}