Dikey gezinti kılavuzu

Azure DevOps Hizmetleri

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.

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

Pivot ve 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 kurum içi sürümlerdeki eski yatay gezintiyi desteklemek için yapılandırmadan okuma ekibini ve webContext'ten okuma ekibini geri çağırmayı 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
  }
}

Eylem uzantıları

Uzantınız, bir kullanıcı katkıda bulunan menü öğesini seçtiğinde çağrılan geri çağırmaya aktarılan actionContext nesnesini kontrol edebilir. Ö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.

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