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

Projděte si nejnovější dokumentaci k vývoji rozšíření pomocí sady SDK rozšíření Azure DevOps.

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šilo celkové prostředí. 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. Následující příklad ukazuje, jak toto rozhraní API volat 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ář.

Pivots/Panels extensions that are in team aware hubs like Backlogs and Dashboard

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 čtení týmu z webContext , který podporuje novou vertikální navigaci i 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 centrech podporujících tým, jako jsou backlogy a řídicí panel

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 akceContext.

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 vaším rozšířením.

Poznámka:

Tyto ikony se nezobrazují ve vodorovné navigaci.

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

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 majetek ve vlastnosti příspěvku includesData .

3. Zabalte asset s rozšířením tak, že ho vypište do vlastnosti v files 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 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"
        }
    }
}