Pokyny pro svislou navigaci

Služby Azure DevOps

Svislá navigace přináší změny, které ovlivňují 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í Azure DevOps Extension SDK.

Kontext týmu

V tradiční vodorovné navigaci můžou uživatelé přejít do projektu nebo týmu tak, že vyberou nástroj pro výběr, který je v levém horním rohu záhlaví stránky. Tento výběr představil seznam posledních týmů a způsob, jak vyhledat všechny týmy. V nové svislé navigaci může uživatel přejít jenom do projektu (a ne do týmu). Tato změna byla provedena, aby se zjednodušil celkový zážitek. Zavedla ale výzvu pro webová rozšíření, která spoléhají na schopnost uživatelů přepínat týmy pomocí tradičního výběru 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íže uvedených pokynů na základě kategorie, do které vaše rozšíření spadá.

Rozšíření centra, která jsou s podporou týmu

Pokud vaše rozšíření potřebuje uživatelům poskytnout způsob, jak vybrat tým, můžete pomocí rozhraní Rest API teams získat seznam týmů pro aktuální projekt. Příklad níže ukazuje, jak volat toto 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í pro otočné / panelové zobrazení, která se nacházejí v týmech vědomých centrech jako Návraty a Nástěnka.

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 přechod na čtení týmu z webContext, aby byla podporována jak nová vertikální navigace, tak starší vodorovná navigace 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 centrech zaměřených na tým, jako jsou backlogy a dashboardy

Vaše rozšíření může zkontrolovat objekt actionContext předaný zpětnému volání vyvolaný, když uživatel vybere položku nabídky. 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 nastavit soubor (například .png nebo .jpg) jako ikonu pro vaše centrum. Tato ikona se zobrazí vedle centra na svislém navigačním panelu. Musí být zabalené spolu s vaším rozšířením.

Poznámka:

Tyto ikony se nezobrazují ve vodorovné navigaci.

Provedením následujících kroků nastavte ikonu pro své centrum.

1. iconAsset Nastavte vlastnost příspěvku centra k plně kvalifikovanému identifikátoru assetu, který se řídí vzorem: {publisher-id}.{extension-id}/{asset-path}.

2. Přidejte položku pro tento zdroj ve vlastnosti includesData příspěvku.

3. Zabalte prvek spolu s vaším rozšířením tím, že ho uvedete ve vlastnosti files v kořenové části 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 jsou světlé nebo 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"
        }
    }
}