Pokyny pro svislou navigaci

Azure DevOps Services

Svislá navigace přináší změny, které mají vliv na některá rozšíření. Mezi tyto výsledky patří podpora ikon rozšíření spolu se změnami kontextu týmu.

Tip

Podívejte se na naši nejnovější dokumentaci k vývoji rozšíření pomocí sady Azure DevOps Extension SDK.

Kontext týmu

V tradiční vodorovné navigaci můžou uživatelé přejít na projekt nebo tým tak, že vyberou výběr, který je v levém horním rohu záhlaví stránky. Tento výběr představil seznam nedávných týmů a způsob, jak procházet všechny týmy. V nové svislé navigaci může uživatel přejít pouze do projektu (a ne do týmu). Tato změna byla provedena kvůli zjednodušení celkového prostředí. Zavedla ale výzvu pro webová rozšíření, která spoléhají na možnost uživatelů přepínat týmy pomocí tradičního nástroje pro výběr týmu v záhlaví stránky.

SDK.getWebContext() je rozhraní API na straně klienta poskytované sadou SDK, které poskytuje informace o aktuální organizaci, projektu a týmu, ve které uživatel pracuje:

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

Nedoporučujeme spoléhat se na SDK.getWebContext().team. Místo toho postupujte podle následujících pokynů v závislosti na kategorii, do které vaše rozšíření spadá.

Rozšíření centra, která pracují s týmem

Pokud vaše rozšíření potřebuje uživatelům poskytnout způsob, jak vybrat tým, můžete pomocí rozhraní Teams REST API získat seznam týmů pro aktuální projekt. Následující příklad ukazuje, jak volat toto rozhraní API z vašeho rozšíření.

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

Příklad rozšíření, které poskytuje ovládací prvek pro výběr týmu, najdete v tématu Týmový kalendář.

Rozšíření kontingenčních panelů nebo kontingenčních panelů, která jsou v týmových centrech, jako jsou backlogy a řídicí panel

Vaše rozšíření může zkontrolovat objekt konfigurace předaný vašemu příspěvku. Tento objekt má různé vlastnosti v závislosti na typu příspěvku a na tom, kde je příspěvek hostovaný. Příklad ukazuje čtení týmu z konfigurace a návrat do týmu čtení z webContextu , který podporuje jak novou vertikální navigaci, tak starší vodorovnou navigaci v místních verzích.

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

Rozšíření akcí, která jsou v týmových centrech, jako jsou backlogy a řídicí panel

Vaše rozšíření může zkontrolovat objekt actionContext předaný zpětnému volání, které se vyvolá, když uživatel vybere položku nabídky přispívá. Příklad ukazuje čtení týmu z 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}`);
                }
            }
        };
    }());

Ikona centra

Volitelně můžete jako ikonu centra nastavit prostředek (například .png nebo .jpg). Tato ikona se zobrazí vedle centra na svislém navigačním panelu. Musí být zabalená s rozšířením.

Poznámka

Tyto ikony se nezobrazují v vodorovné navigaci.

Podle následujících kroků nastavte ikonu centra.

1. iconAsset Nastavte vlastnost příspěvku centra na plně kvalifikovaný identifikátor prostředku, který se řídí vzorem: {publisher-id}.{extension-id}/{asset-path}.

2. Přidejte položku pro tento prostředek do vlastnosti příspěvku includesata .

3. Zabalte prostředek s rozšířením tak, že ho zapište do files vlastnosti v kořenovém adresáři manifestu.

Příklad č. 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
     }
 ]
}

Příklad č. 2:

Když se použijí motivy jako světlé a tmavé, můžete ikony v manifestu rozšíření zadat následujícím způsobem.

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