Dikey gezinti kılavuzu

Azure DevOps Services

Dikey gezinti, bazı uzantıları etkileyen değişiklikleri de beraberinde getirir. Bu sonuçlar, ekip bağlamında yapılan değişikliklerin yanı sıra uzantı simgeleri için destek içerir.

İpucu

Azure DevOps Uzantı SDK'sını kullanarak uzantı geliştirmeyle ilgili en yeni belgelerimize göz atın.

Ekip bağlamı

Geleneksel yatay gezintide kullanıcılar, sayfa üst bilgisinin sol üst kısmındaki seçiciden seçim yaparak bir projeye veya takıma gidebilir. Bu seçici, son ekiplerin listesini ve tüm ekiplere göz atma yolunu sundu. Yeni dikey gezintide, kullanıcı yalnızca projeye gidebilir (ekipte gezinemez). Bu değişiklik, genel deneyimi basitleştirmek için yapılmıştır. Ancak, kullanıcıların sayfa üst bilgisindeki geleneksel ekip seçiciyi kullanarak ekip değiştirme yeteneğinden yararlanan web uzantıları için bir zorluk ortaya çıkmıştır.

SDK.getWebContext() , SDK tarafından sağlanan ve kullanıcının faaliyette bulunduğu geçerli kuruluş, proje ve ekip hakkında bilgi sağlayan bir istemci tarafı API'dir:

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

'a güvenmenizi SDK.getWebContext().teamönermiyoruz. Bunun yerine, uzantınızın altında yer alan kategoriye göre aşağıdaki yönergeleri izleyin.

Ekip tarafından algılayan hub uzantıları

Uzantınızın kullanıcılara bir ekip seçme yolu sağlaması gerekiyorsa Teams REST API'sini kullanarak geçerli proje için ekiplerin listesini alabilirsiniz. Aşağıdaki örnekte bu API'nin uzantınızdan nasıl çağrılacakları gösterilmektedir.

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

Ekip seçici denetimi sağlayan bir uzantı örneği için bkz . Ekip Takvimi.

Kapsamlar ve Pano gibi ekip kullanan hub'larda bulunan Özetler/Paneller uzantıları

Uzantınız, katkınıza geçirilen yapılandırma nesnesini denetleyebiliyor. Bu nesne, katkı türüne ve katkının barındırıldığı yere bağlı olarak farklı özelliklere sahiptir. Örnek, hem yeni dikey gezintiyi hem de şirket içi sürümlerde daha eski yatay gezintiyi desteklemek için yapılandırmadan okuma ekibini gösterir ve webContext'ten okuma ekibine geri döner.

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

Kapsamlar ve Pano gibi ekip kullanan hub'larda bulunan eylemler uzantıları

Uzantınız, kullanıcı katkıda bulunan menü öğesini seçtiğinde çağrılan geri çağırmaya geçirilen actionContext nesnesini denetleyebiliyor. Örnek, actionContext'ten okuma ekibini gösterir.

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

Hub simgesi

İsteğe bağlı olarak bir varlığı (.png veya .jpg gibi) hub'ınızın simgesi olarak ayarlayabilirsiniz. Bu simge dikey gezinti çubuğunda hub'ın yanında görünür. Uzantınızla birlikte paketlenmelidir.

Not

Bu simgeler yatay gezintide görünmez.

Hub'ınız için bir simge ayarlamak için aşağıdaki adımları tamamlayın.

1. iconAsset Tam varlık tanımlayıcısına hub katkı özelliğini ayarlayın. Bu özellik şu deseni izler: {publisher-id}.{extension-id}/{asset-path}.

2. Katkı özelliğine includesData bu varlık için bir giriş ekleyin.

3. Varlığı uzantınızla birlikte paketleyerek bildiriminizin kökündeki files özelliğinde listeleyebilirsiniz.

Örnek 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
     }
 ]
}

Örnek 2:

Açık ve koyu gibi temalar uygulandığında, uzantı bildiriminizdeki simgeleri aşağıdaki gibi belirtebilirsiniz.

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