Dikey gezinti kılavuzu

Azure DevOps Services

Dikey gezinti, bazı uzantıları etkileyen değişiklikleri de beraberinde getirir. Bu sonuçlar, takım 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 takımlara 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.

Ekibin farkında olan 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. Takım Takvimi.

Kapsamlar ve Pano gibi ekip kullanan hub'larda bulunan Pivots/Panel 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 ve webContext'ten okuma ekibine geri dönmeyi gösterir.

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 Hub katkı özelliğini tam varlık tanımlayıcısına ayarlayın ve şu desene uyar: {publisher-id}.{extension-id}/{asset-path}.

2. Katkı özelliğine includesata 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"
        }
    }
}