Linee guida per lo spostamento verticale

Azure DevOps Services

Lo spostamento verticale comporta modifiche che influiscono su alcune estensioni. Questi risultati includono il supporto per le icone di 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 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 struttura di spostamento 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, sul progetto e sul 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 conoscere il 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 di pivot/pannelli che si trovano 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 in pacchetto con l'estensione.

Nota

Queste icone non vengono visualizzate nel riquadro di 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 includesata proprietà del contributo.

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

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

Esempio n. 2:

Quando si applicano temi come chiaro 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"
        }
    }
}