Pano pencere öğesi ekleme

  • Makale
  • Okumak için 24 dakika

Azure DevOps | Azure DevOps Server 2020 | Azure DevOps Server 2019

Panodaki pencere öğeleri, uzantı çerçevesindekatkı olarak uygulanır. Tek bir uzantının birden çok katkıya sahip olabilir. Birden çok pencere öğesi içeren bir uzantıyı katkı olarak oluşturmayı öğrenin.

Bu makale, her biri basit bir pencere öğesiyle ve kapsamlı bir pencere öğesiyle biten üç parçaya ayrılmıştır.

İpucu

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

Bu öğretici için hazırlık ve gerekli kurulum

Azure DevOps veya TFS uzantıları oluşturmak için, ihtiyacınız olan bazı önkoşul yazılımlar ve araçlar vardır:

Bilgi: Pencere öğesi geliştirme için JavaScript, HTML ve CSS hakkında bazı bilgiler gereklidir.

  • bir kuruluş , pencere öğesini yüklemek ve test etmek için Azure DevOps, burada daha fazla bilgi bulabilirsiniz
  • Bir metin düzenleyici. Birçok öğreticilerde, Visual Studio CodeVisual Studio Code indirilebilecek şekilde kullandık
  • Burada indirilebilecek en son nodesürümü
  • uzantılarınızı paketlemek için Azure DevOps platformlar arası clı (tfx-clı) .
    • TFX-CLI , çalıştıran bir Node.js bileşeni kullanılarak yüklenebilir. npm i -g tfx-cli
  • Projeniz için bir giriş dizini. Bu dizin öğretici genelinde olarak adlandırılır home .

Uzantı dosyası yapısı:

|--- README.md
|--- sdk    
    |--- node_modules           
    |--- scripts
        |--- VSS.SDK.min.js       
|--- img                        
    |--- logo.png                           
|--- scripts                        
|--- hello-world.html               // html page to be used for your widget  
|--- vss-extension.json             // extension's manifest

Öğreticide bulacağınız şeyler

  1. Bu kılavuzun ilk bölümünde, basit bir "Merhaba Dünya" iletisi yazdıran yeni bir pencere öğesinin nasıl oluşturulacağı gösterilmektedir.
  2. ikinci bölüm , bir Azure DevOps REST API çağrısı ekleyerek ilki üzerinde oluşturulur.
  3. Üçüncü bölüm , pencere öğesi için nasıl yapılandırma ekleneceğini açıklamaktadır.

Not

Bir aceleniz varsa ve kendi ellerinizi koda doğru bir şekilde almak istiyorsanız buradaki örnekleri buradanindirebilirsiniz. Karşıdan yüklendikten sonra, widgets farklı karmaşıklıklardan oluşan üç örnek pencere öğesine sahip örnek uzantıyı yayımlamak için, klasöre gidin ve ardından widgets 7 ' yi ve 7. adımı uygulayın.

Sizin için kutudan çıkan ve pencere öğesi yapısına yönelik bazı yönergeler sunduğumuz pencere öğeleri için bazı temel stilleri kullanmaya başlayın.

1. Bölüm: Merhaba Dünya

Bu bölüm, JavaScript kullanarak "Merhaba Dünya" yazdıran bir pencere öğesi gösterir.

Örnek pencere öğesi ile Genel Bakış Panosu

1. Adım: istemci SDK 'sını alın- VSS.SDK.min.js

core SDK betiği, VSS.SDK.min.js web uzantılarının konak Azure DevOps çerçevesiyle iletişim kurmasını sağlar. Betik başlatma, uzantıyı bildirme veya geçerli sayfa hakkında bağlam alma gibi işlemleri yapar. Istemci SDK dosyasını alın VSS.SDK.min.js ve Web uygulamanıza ekleyin. home/sdk/scriptsKlasöre yerleştirin.

SDK 'Yı almak için ' NPM install ' komutunu kullanın:

npm install vss-web-extension-sdk

SDK hakkında daha fazla bilgi edinmek için istemci SDK GitHub sayfasınıziyaret edin.

2. Adım: HTML sayfanız- hello-world.html

HTML sayfanız, düzeninizi birlikte tutan ve CSS ve JavaScript başvurularını içeren bir tutkalla. Bu dosyaya herhangi bir ad verebilirsiniz, yalnızca kullandığınız adla tüm başvuruları güncelleştirdiğinizden emin olun hello-world .

Pencere öğesi HTML tabanlıdır ve bir iframeiçinde barındırılır. İçindeki aşağıdaki HTML 'yi ekleyin hello-world.html . Dosyasına zorunlu başvuruyu ekler VSS.SDK.min.js ve ' a bir öğe ekleyerek, h2 yaklaşan adımda Merhaba Dünya dize ile güncelleştirilir.

    <!DOCTYPE html>
    <html>
        <head>          
            <script src="sdk/scripts/VSS.SDK.min.js"></script>              
        </head>
        <body>
            <div class="widget">
                <h2 class="title"></h2>
            </div>
        </body>
    </html>

Bir HTML dosyası kullandığımızda, komut dosyası ve bağlantı dışındaki HTML Head öğelerinin çoğu Framework tarafından yok sayılır.

3. Adım: JavaScript

Pencere öğesinde içerik işlemek için JavaScript kullanıyoruz. Bu makalede, JavaScript kodumuzu HTML dosyasındaki bir öğe içinde sarıyoruz <script> . Bu kodun ayrı bir JavaScript dosyasında bulunmasını seçebilir ve HTML dosyasında bu kodu yazabilirsiniz. Kod içeriği işler. Bu JavaScript kodu VSS SDK 'sını de başlatır, pencere öğesi için kodu pencere öğesi adınızla eşleştirir ve pencere öğesi başarıları veya hatalarının uzantı çerçevesini bilgilendirir. Bu durumda, pencere öğesinde "Merhaba Dünya" yazdırılacak kod aşağıda verilmiştir. Bu script ÖĞEYI head HTML 'nin içine ekleyin.

    <script type="text/javascript">
        VSS.init({                        
            explicitNotifyLoaded: true,
            usePlatformStyles: true
        });

        VSS.require("TFS/Dashboards/WidgetHelpers", function (WidgetHelpers) {
            WidgetHelpers.IncludeWidgetStyles();
            VSS.register("HelloWorldWidget", function () {                
                return {
                    load: function (widgetSettings) {
                        var $title = $('h2.title');
                        $title.text('Hello World');

                        return WidgetHelpers.WidgetStatusHelper.Success();
                    }
                }
            });
            VSS.notifyLoadSucceeded();
        });
    </script>

VSS.init pencere öğesini ve konak çerçevesini barındıran iframe arasındaki el sıkışmasını başlatır. explicitNotifyLoaded: trueYüklemeyi tamamladıktan sonra pencere öğesinin Konağı açıkça bildirebilmesi için geçiririz. Bu denetim, bağımlı modüllerin yüklendiğinden emin olduktan sonra yükleme tamamlamayı bildirmemizi sağlar. usePlatformStyles: truehtml öğeleri için Azure DevOps çekirdek stillerinin (örn. gövde, div, vb.) pencere öğesi tarafından kullanılabilmesi için geçiririz. Pencere öğesi bu stilleri kullanmadan tercih ediyorsa, ' i geçirebilir usePlatformStyles: false .

VSS.require gerekli VSS betiği kitaplıklarını yüklemek için kullanılır. Bu yönteme yapılan bir çağrı, jQuery ve jQueryUIgibi genel kitaplıkları otomatik olarak yükler. Bizim durumumuzda, pencere öğesi durumunu pencere öğesi çerçevesine iletmek için kullanılan WidgetHelpers kitaplığına bağımlıdır. Bu nedenle, karşılık gelen modül adını TFS/Dashboards/WidgetHelpers ve geri çağırma işlemini geçiyoruz VSS.require . Modül yüklendikten sonra geri çağırma çağrılır. Geri çağırmada pencere öğesi için gereken JavaScript kodunun geri kalanı bulunur. Geri aramanın sonunda, VSS.notifyLoadSucceeded yükleme tamamlamayı bildirmek için çağrı yaptık.

WidgetHelpers.IncludeWidgetStyles , başlamanıza olanak sağlamak için bazı WidgetHelpers.IncludeWidgetStyles içeren bir stil sayfası içerir. Bu stillerden birini kullanmak için içeriğinizi bir HTML öğesi içine sartığınızdan emin olun widget .

VSS.register JavaScript 'teki bir işlevi eşlemek için kullanılır ve pencere öğesini uzantınızın farklı katkıları arasında benzersiz şekilde tanımlar. Ad, id katkılarınızı, idaçıklandığı gibi tanımlayan ile aynı olmalıdır. Pencere öğeleri için geçirilen işlev, VSS.register sözleşmeyi karşılayan bir nesne döndürmelidir IWidget . Örneğin, döndürülen nesne, değeri, pencere öğesini işlemek için çekirdek mantığına sahip başka bir işlev olan bir Load özelliğine sahip olmalıdır. Bizim örneğimizde, h2 öğenin metnini "Merhaba Dünya" olarak güncelleştirmemiz gerekir. Pencere öğesi çatısı pencere öğesini örnekleyen bu işlev çağrılır. WidgetStatusHelperBaşarılı olarak döndürmek için from WidgetHelpers kullanıyoruz WidgetStatus .

Uyarı

Pencere öğesini kaydetmek için kullanılan ad, bildirimdeki katkı KIMLIĞI ile eşleşmezse, pencere öğesi beklenmedik şekilde çalışır.

vss-extension.jsonHer zaman klasörün kökünde olmalıdır (Bu kılavuzda HelloWorld ). Diğer tüm dosyalar için, bunları klasörün içinde istediğiniz herhangi bir yapıya yerleştirebilirsiniz, ancak başvuruları HTML dosyalarında ve bildirimde uygun şekilde güncelleştirdiğinizden emin olun vss-extension.json .

4. Adım: uzantınızın logosu: logo.png

Logonuz Market 'te ve Kullanıcı uzantınızı yüklediğinde pencere öğesi kataloğunda görüntülenir.

98 px x 98-px Katalog simgesine ihtiyacınız vardır. Bir görüntü seçin, adlandırın logo.png ve img klasöre yerleştirin.

TFS 2015 güncelleştirme 3 ' ü desteklemek için, 330 px x 160 px ek bir görüntüye ihtiyacınız vardır. Bu önizleme görüntüsü bu katalogda gösterilmektedir. Bir görüntü seçin, adlandırın preview.png ve daha img önce olduğu gibi klasöre yerleştirin.

Bu görüntüleri, bir sonraki adımda yer aldığı uzantı bildirimi kullandığınız adlarla güncelleştirildiği sürece belirleyebilirsiniz.

5. Adım: uzantınızın bildirimi: vss-extension.json

vss-extension.jsonDizinde aşağıdaki içeriğe sahip bir JSON dosyası (örneğin,) oluşturun home :

    {
        "manifestVersion": 1,
        "id": "vsts-extensions-myExtensions",
        "version": "1.0.0",
        "name": "My First Set of Widgets",
        "description": "Samples containing different widgets extending dashboards",
        "publisher": "fabrikam",
        "categories": ["Azure Boards"],
        "targets": [
            {
                "id": "Microsoft.VisualStudio.Services"
            }
        ],
        "icons": {
            "default": "img/logo.png"
        },
        "contributions": [
            {
                "id": "HelloWorldWidget",
                "type": "ms.vss-dashboards-web.widget",
                "targets": [
                    "ms.vss-dashboards-web.widget-catalog"
                ],
                "properties": {
                    "name": "Hello World Widget",
                    "description": "My first widget",
                    "catalogIconUrl": "img/CatalogIcon.png",
                    "previewImageUrl": "img/preview.png",                            
                    "uri": "hello-world.html",
                    "supportedSizes": [
                         {
                                "rowSpan": 1,
                                "columnSpan": 2
                            }
                        ],
                    "supportedScopes": ["project_team"]
                }
            }
        ],
        "files": [
            {
                "path": "hello-world.html", "addressable": true
            },
            {
                "path": "sdk/scripts", "addressable": true
            },
            {
                "path": "img", "addressable": true
            }
        ]
    }

Gerekli öznitelikler hakkında daha fazla bilgi için bkz. Uzantı bildirim başvurusu

Not

Buradaki yayımcının yayımcının adı olarak değiştirilmesi gerekir. Şimdi bir yayımcı oluşturmak için Package/Publish/Installadresini ziyaret edin.

Simgeler

Stanza simgesi , bildiriminizde uzantınızın simgesine yönelik yolu belirtir.

Katkılar

Her katkı girişi özellikleritanımlar.

  • Katkılarınızı tanımlayacak kimlik . Bu KIMLIK bir uzantı içinde benzersiz olmalıdır. Bu KIMLIK, pencere öğesini kaydetmek için Adım 3 ' te kullandığınız adla eşleşmelidir.
  • Katkı türü . Tüm pencere öğeleri için tür olmalıdır ms.vss-dashboards-web.widget .
  • Katkısının katkıda bulunduğu hedef dizisi. Tüm pencere öğeleri için hedefin olması gerekir [ms.vss-dashboards-web.widget-catalog] .
  • Özellikler , katkı türü özelliklerini içeren nesnelerdir. Pencere öğeleri için aşağıdaki özellikler zorunludur.
Özellik Açıklama
name Pencere öğesi kataloğunda görüntülenecek pencere öğesinin adı.
açıklama Pencere öğesi kataloğunda görüntülenecek pencere öğesinin açıklaması.
catalogIconUrl 'Si Adım 4 ' te eklediğiniz Katalog simgesinin, pencere öğesi kataloğunda görüntülenmesi için göreli yolu. Görüntü 98 px x 98 piksel olmalıdır. Farklı bir klasör yapısı veya farklı bir dosya adı kullandıysanız, uygun göreli yolu burada belirtin.
previewImageUrl 'Si Adım 4 ' te eklediğiniz önizleme GÖRÜNTÜSÜNÜN yalnızca TFS 2015 güncelleştirme 3 ' te pencere öğesi kataloğunda görüntülenmesi için göreli yolu. Görüntü 330 px x 160 piksel olmalıdır. Farklı bir klasör yapısı veya farklı bir dosya adı kullandıysanız, uygun göreli yolu burada belirtin.
kullanılmamışsa Adım 1' de eklediğiniz HTML dosyasının göreli yolu. Farklı bir klasör yapısı veya farklı bir dosya adı kullandıysanız, uygun göreli yolu burada belirtin.
Supportedboyutlar Pencere öğesi tarafından desteklenen boyut dizisi. Bir pencere öğesi birden çok boyutu desteklediğinde dizideki ilk boyut, pencere öğesinin varsayılan boyutudur. , widget size Pano kılavuzundaki pencere öğesi tarafından bulunan satırlar ve sütunlar için belirtilir. Bir satır/sütun 160 piksel 'e karşılık gelir. 1x1 ' den sonraki herhangi bir boyut, pencere öğeleri arasındaki cilt payını temsil eden 10 piksel alır. Örneğin, bir 3X2 pencere öğesi 160*3+10*2 geniş ve 160*2+10*1 yüksekliğinde. Desteklenen en büyük boyut 4x4 .
supportedScopes Şu anda yalnızca takım panolarını destekliyoruz. Değer olmalıdır project_team . Gelecekte, diğer Pano kapsamlarını destekliyoruz, buradan seçim yapabileceğiniz daha fazla seçenek olacaktır.

Dosyalar

Stanza, paketinize, HTML sayfanıza, komut dosyalarınıza, SDK betiğinizi ve logonuzu eklemek istediğiniz dosyaları belirtir . addressabletrue URL adreslenebilir olması gerekmeyen diğer dosyaları eklemediğiniz takdirde olarak ayarlayın.

Not

Uzantı bildirim dosyasıhakkında, özellikleri ve ne yaptıkları hakkında daha fazla bilgi için, Uzantı bildirim başvurusunuinceleyin.

6. Adım: paketleme, yayımlama ve paylaşma

Uzantınızı yazdıktan sonra, bunu Market 'e getirmeye yönelik bir sonraki adım, tüm dosyalarınızı birlikte paketlemenize olanak sağlar. Tüm uzantılar VSıX 2,0 uyumlu. vsix dosyaları olarak paketlenmiştir-Microsoft, uzantınızı paketlemek için platformlar arası bir komut satırı arabirimi (CLı) sağlar.

Paketleme aracını al

npmkomut satırınızdan bir npmbileşeni kullanarak Azure DevOps (tfx-clı) için platformlar arası clı 'yı yükleyebilir veya güncelleyebilirsiniz.

npm i -g tfx-cli

Uzantınızı paketleyin

Uzantınızın bir. vsix dosyasına paketlenmesi, TFX-CLI ile bir kez daha azdır. Uzantınızın giriş dizinine gidin ve aşağıdaki komutu çalıştırın.

tfx extension create --manifest-globs vss-extension.json

Not

Her güncelleştirmede bir uzantı/tümleştirme sürümü artırılamalıdır.
Mevcut bir uzantıyı güncelleştirirken, bildirimde sürümü güncelleştirin veya --rev-version komut satırı anahtarını geçirin. Bu, uzantınızın Düzeltme Eki sürüm numarasını artırır ve yeni sürümü bildiriminiz için kaydeder.

Paketlenmiş uzantınızı bir. vsix dosyasında aldıktan sonra, uzantınızı Market 'e yayımlamaya hazırsınız demektir.

Uzantı için yayımcı oluştur

Microsoft 'un uzantıları da dahil olmak üzere tüm uzantılar, bir yayımcı tarafından sağlanmakta olduğu şekilde tanımlanır. Zaten var olan bir yayımcının üyesi değilseniz, bir tane oluşturacaksınız.

  1. Visual Studio market yayımlama portalında oturum açın
  2. Zaten var olan bir yayımcının üyesi değilseniz, bir yayımcı oluşturmanız istenir. Bir yayımcı oluşturmanız istenmez, sayfanın en altına gidin ve uzantıları Ilgili siteleraltında Yayımla ' yı seçin.
    • Yayımcı için bir tanımlayıcı belirtin, örneğin: mycompany-myteam
      • Tanımlayıcı, publisher uzantılarınızın bildirim dosyanızdaki özniteliği için değer olarak kullanılır.
    • Yayımcı için bir görünen ad belirtin, örneğin: My Team
  3. market Publisher sözleşmesini gözden geçirin ve oluştur ' u seçin.

Artık Publisher tanımlı. Gelecekteki bir sürümde, yayımcının uzantılarını görüntüleme ve yönetme izinleri verebilirsiniz. Ekipler ve kuruluşların, uzantıları ortak bir yayımcı altında yayımlaması, ancak bir kullanıcı kümesi üzerinde bir kimlik bilgileri kümesi paylaşma gereksinimi olmadan daha kolay ve daha güvenlidir.

Örnek içindeki bildirim dosyasını, kukla yayımcı kimliğini yayımcı Kimliğinizle değiştirmek için güncelleştirin fabrikam .

Uzantıyı Yayımla ve paylaşma

Bir yayımcı oluşturduktan sonra, şimdi uzantınızı Market 'e yükleyebilirsiniz.

  1. Upload yeni uzantı düğmesini bulun, paketlenmiş. vsix dosyanıza gidin ve karşıya yükle' yi seçin.

Ayrıca, uzantınızı tfx extension publishtfx extension create tek bir adımda paketlemek ve yayımlamak için yerine komutunu kullanarak uzantınızı komut satırı aracılığıyla da yükleyebilirsiniz. İsterseniz, --share-with uzantınızı yayımlamadan sonra bir veya daha fazla hesapla paylaşmak için kullanabilirsiniz. Bir kişisel erişim belirtecine de ihtiyacınız olacak.

tfx extension publish --manifest-globs your-manifest.json --share-with yourOrganization

7. Adım: katalogdan pencere öğesi ekleme

  1. Azure DevOps, projenize gidin,http://dev.azure.com/{yourOrganization}/{yourProject}

  2. Genel bakış' ı seçin ve ardından panolar' ı seçin.

  3. Pencere öğesi Ekleöğesini seçin.

  4. Pencere öğesini vurgulayın ve ardından Ekle' yi seçin.

    Pencere öğesi panonuzda görünür.

2. bölüm: Azure DevOps REST API Merhaba Dünya

pencere öğeleri, Azure DevOps kaynaklarla etkileşim kurmak için Azure DevOps REST apı 'lerinden herhangi birini çağırabilir. Bu örnekte, mevcut bir sorgu hakkında bilgi getirmek ve "Merhaba Dünya" metninin altındaki pencere öğesinde bazı sorgu bilgilerini göstermek için WorkItemTracking için REST API kullanırız.

WorkItemTracking için REST API kullanarak bir örnek pencere öğesiyle panoya genel bakış.

1. Adım: HTML

hello-world.htmlÖnceki örnekteki dosyayı kopyalayın ve kopyasını olarak yeniden adlandırın hello-world2.html . Klasörünüz artık aşağıdaki gibi görünür:

|--- README.md
|--- sdk    
    |--- node_modules           
    |--- scripts
        |--- VSS.SDK.min.js       
|--- img                        
    |--- logo.png                           
|--- scripts                        
|--- hello-world.html               // html page to be used for your widget  
|--- hello-world2.html              // renamed copy of hello-world.html
|--- vss-extension.json             // extension's manifest

divSorgu bilgilerini tutmak için hemen altına yeni bir öğe ekleyin h2 . Pencere öğesinin adını, HelloWorldWidget çağırdığınız satırdaki öğesine kadar güncelleştirin HelloWorldWidget2VSS.register . Bu, çerçevenin pencere öğesini uzantı içinde benzersiz şekilde tanımlamasına olanak sağlar. 
<!DOCTYPE html>
<html>
    <head>                          
        <script src="sdk/scripts/VSS.SDK.min.js"></script>              
        <script type="text/javascript">
            VSS.init({
                explicitNotifyLoaded: true,
                usePlatformStyles: true
            });

            VSS.require("TFS/Dashboards/WidgetHelpers", function (WidgetHelpers) {
                WidgetHelpers.IncludeWidgetStyles();
                VSS.register("HelloWorldWidget2", function () {                
                    return {
                        load: function (widgetSettings) {
                            var $title = $('h2.title');
                            $title.text('Hello World');

                            return WidgetHelpers.WidgetStatusHelper.Success();
                        }
                    }
                });
                VSS.notifyLoadSucceeded();
            });       
        </script>
    </head>
    <body>
        <div class="widget">
            <h2 class="title"></h2>
            <div id="query-info-container"></div>
        </div>
    </body>
</html>

2. adım: Azure DevOps kaynaklarına erişin

Azure DevOps kaynaklarına erişimi etkinleştirmek için, uzantı bildiriminde kapsam belirtilmesi gerekir. vso.workKapsamımız kapsamını ekliyoruz.
Bu kapsam, pencere öğesinin sorgulara ve iş öğelerine salt okuma erişiminin gerektiğini gösterir. Tüm kullanılabilir kapsamları buradangörebilirsiniz. Uzantı bildirimin sonuna aşağıda ekleyin.

{
    ...,
    "scopes":[
        "vso.work"
    ]
}

Uyarı

Uzantı yayımlandıktan sonra kapsam ekleme veya değiştirme işlemi şu anda desteklenmiyor. Uzantınızı zaten karşıya yükledikten sonra Market'te kaldırın. Market Visual Studio Portalı'na gidin,uzantınıza sağ tıklayın ve "Kaldır"ı seçin.

3. Adım: REST API Yapma

Sdk aracılığıyla erişilebilen birçok istemci tarafı kitaplığı vardır ve bu kitaplıklarda REST API çağrıları Azure DevOps. Bu kitaplıklar REST istemcileri olarak adlandırılan ve tüm kullanılabilir sunucu tarafı uç noktaları için Ajax çağrıları çevresindeki JavaScript sarmalayıcılarıdır. Ajax çağrılarını kendiniz yazmak yerine bu istemciler tarafından sağlanan yöntemleri kullanabilirsiniz. Bu yöntemler API yanıtlarını kodunuz tarafından tüketilebilir nesnelerle eşler.

Bu adımda, VSS.requireTFS/WorkItemTracking/RestClient WorkItemTracking REST istemcisini sağlayan yükleme çağrısını güncelleştirin. klasörünün altında adlı sorgu hakkında bilgi almak için bu REST Feedback istemcisini Shared Queries kullanabiliriz.

'a ileteceğimiz VSS.register işlevin içinde, geçerli proje kimliğini tutmak için bir değişken oluşturuz. Sorguyu getirmek için bu değişkene ihtiyacımız var. AYRıCA REST istemcisini kullanmak için getQueryInfo yeni bir yöntem de oluşturuz. Bu yöntem daha sonra load yönteminden çağrılır.

yöntemi, getClient ihtiyacımız olan REST istemcisinin bir örneğini verir. yöntemi, getQuery bir promise içinde sarmalanmış sorguyu döndürür. Güncelleştirilmiş VSS.require aşağıdaki gibi görünüyor:

VSS.require(["TFS/Dashboards/WidgetHelpers", "TFS/WorkItemTracking/RestClient"], 
    function (WidgetHelpers, TFS_Wit_WebApi) {
        WidgetHelpers.IncludeWidgetStyles();
        VSS.register("HelloWorldWidget2", function () { 
            var projectId = VSS.getWebContext().project.id;

            var getQueryInfo = function (widgetSettings) {
                // Get a WIT client to make REST calls to Azure DevOps Services
                return TFS_Wit_WebApi.getClient().getQuery(projectId, "Shared Queries/Feedback")
                    .then(function (query) {
                        // Do something with the query

                        return WidgetHelpers.WidgetStatusHelper.Success();
                    }, function (error) {                            
                        return WidgetHelpers.WidgetStatusHelper.Failure(error.message);
                    });
            }

            return {
                load: function (widgetSettings) {
                    // Set your title
                    var $title = $('h2.title');
                    $title.text('Hello World');

                    return getQueryInfo(widgetSettings);
                }
            }
        });
        VSS.notifyLoadSucceeded();
    });

'den Failure yönteminin kullanımına WidgetStatusHelper dikkatin. Pencere öğesi çerçevesine bir hatanın meydana geldiğine işaret ediyor ve tüm pencere öğelerine sağlanan standart hata deneyimi avantajını sağlıyor.

klasörünün altında sorgunuz yoksa, kodda yerine projenizin içinde var FeedbackShared Queries olan bir Shared Queries\Feedback sorgunun yolunu yazın.

4. Adım: Yanıtı Görüntüleme

Son adım, sorgu bilgilerini pencere öğesi içinde işlemek. işlevi getQuery promise içinde türünde bir nesne Contracts.QueryHierarchyItem döndürür. Bu örnekte, "sorgu oluşturma" metninin altında sorgu kimliğini, sorgu adını ve sorguyu oluşturanın Merhaba Dünya görüntülenir. açıklamayı // Do something with the query aşağıdakiyle değiştirin:

    // Create a list with query details                                
    var $list = $('<ul>');                                
    $list.append($('<li>').text("Query Id: " + query.id));
    $list.append($('<li>').text("Query Name: " + query.name));
    $list.append($('<li>').text("Created By: " + ( query.createdBy? query.createdBy.displayName: "<unknown>" ) ) );                                                            

    // Append the list to the query-info-container
    var $container = $('#query-info-container');
    $container.empty();
    $container.append($list);

Son bölüm hello-world2.html şu şekildedir:

<!DOCTYPE html>
<html>
<head>    
    <script src="sdk/scripts/VSS.SDK.min.js"></script>
    <script type="text/javascript">
        VSS.init({
            explicitNotifyLoaded: true,
            usePlatformStyles: true
        });

        VSS.require(["TFS/Dashboards/WidgetHelpers", "TFS/WorkItemTracking/RestClient"], 
            function (WidgetHelpers, TFS_Wit_WebApi) {
                WidgetHelpers.IncludeWidgetStyles();
                VSS.register("HelloWorldWidget2", function () {                
                    var projectId = VSS.getWebContext().project.id;

                    var getQueryInfo = function (widgetSettings) {
                        // Get a WIT client to make REST calls to Azure DevOps Services
                        return TFS_Wit_WebApi.getClient().getQuery(projectId, "Shared Queries/Feedback")
                            .then(function (query) {
                                // Create a list with query details                                
                                var $list = $('<ul>');
                                $list.append($('<li>').text("Query ID: " + query.id));
                                $list.append($('<li>').text("Query Name: " + query.name));
                                $list.append($('<li>').text("Created By: " + (query.createdBy ? query.createdBy.displayName: "<unknown>") ));

                                // Append the list to the query-info-container
                                var $container = $('#query-info-container');
                                $container.empty();
                                $container.append($list);

                                // Use the widget helper and return success as Widget Status
                                return WidgetHelpers.WidgetStatusHelper.Success();
                            }, function (error) {
                                // Use the widget helper and return failure as Widget Status
                                return WidgetHelpers.WidgetStatusHelper.Failure(error.message);
                            });
                    }

                    return {
                        load: function (widgetSettings) {
                            // Set your title
                            var $title = $('h2.title');
                            $title.text('Hello World');

                            return getQueryInfo(widgetSettings);
                        }
                    }
                });
            VSS.notifyLoadSucceeded();
        });       
    </script>

</head>
<body>
    <div class="widget">
        <h2 class="title"></h2>
        <div id="query-info-container"></div>
    </div>
</body>
</html>

5. Adım: Uzantı Bildirimi Güncelleştirmeleri

Bu adımda, uzantı bildirimini ikinci pencere öğesi için bir giriş içerecek şekilde güncelleştirin. özelliğinde dizisine yeni bir katkı ekleyin ve yeni dosyayı files contributionshello-world2.html özelliğinde dizisine ekleyin. İkinci pencere öğesi için başka bir önizleme görüntüsü gerekir. Bu adı preview2.png girin ve klasörüne img girin.

 {
     ...,
     "contributions":[
         ...,
        {
             "id": "HelloWorldWidget2",
             "type": "ms.vss-dashboards-web.widget",
             "targets": [
                 "ms.vss-dashboards-web.widget-catalog"
             ],
             "properties": {
                 "name": "Hello World Widget 2 (with API)",
                 "description": "My second widget",
                 "previewImageUrl": "img/preview2.png",                            
                 "uri": "hello-world2.html",
                 "supportedSizes": [
                      {
                             "rowSpan": 1,
                             "columnSpan": 2
                         }
                     ],
                 "supportedScopes": ["project_team"]
             }
         }

     ],
     "files": [
         {
             "path": "hello-world.html", "addressable": true
         },
         {
             "path": "hello-world2.html", "addressable": true
         },      
         {
             "path": "sdk/scripts", "addressable": true
         },
         {
             "path": "img", "addressable": true
         }
     ],
     "scopes":[
         "vso.work"
     ]
 }

6. Adım: Paketle, Yayımla ve Paylaş

Uzantınızı paketlayın, yayımlayın ve paylaşın. Uzantıyı zaten yayımladıysanız, uzantıyı burada açıklandığı gibi yeniden paketleyebilirsinizve doğrudan Market'e güncelleştirebilirsiniz.

7. Adım: Katalogdan Pencere Öğesi Ekleme

Şimdi, 'de takım panonıza https:\//dev.azure.com/{yourOrganization}/{yourProject} gidin. Bu sayfa zaten açıksa yenileyin. Sağ alttaki Düzenle düğmesinin üzerine gelin ve Ekle düğmesini seçin. Pencere öğesi kataloğu, yüklemiş olduğunuz pencere öğesiyle birlikte açılır. Pencere öğesinizi seçin ve panoya eklemek için 'Ekle' düğmesini seçin.

Bölüm 3: Merhaba Dünya ile yapılandırma

Bu kılavuzun 2. Bölümünde, sabit kodlu bir sorgu için sorgu bilgilerini gösteren bir pencere öğesi oluşturma hakkında bilgi edindiniz. Bu bölümde, sabit kodlu sorgu yerine kullanılacak sorguyu yapılandırma olanağını ekleyebilirsiniz. Yapılandırma modundayken kullanıcı, değişikliklerine göre pencere öğesi için canlı önizlemeyi görebilir. Kullanıcı Kaydet'i seçerek panoda pencere öğesinde bu değişiklikler kaydedilir.

Değişikliklere göre pencere öğesinde genel bakış panosu canlı önizlemesi.

1. Adım: HTML

Pencere Öğeleri ve Pencere Öğesi Yapılandırmaları uygulamaları çok benzerdir. Her ikisi de uzantı çerçevesine katkı olarak uygulanır. Her ikisi de aynı SDK dosyasını VSS.SDK.min.js kullanır. Her ikisi de HTML, JavaScript ve CSS tabanlıdır.

Önceki örnekteki html-world2.html dosyayı kopyalayın ve kopyayı olarak yeniden adlandırır. hello-world3.html adlı başka bir HTML dosyası configuration.html ekleyin. Klasörünüz artık aşağıdaki örnekteki gibi görünür:

|--- README.md
|--- sdk    
    |--- node_modules           
    |--- scripts
        |--- VSS.SDK.min.js       
|--- img                        
    |--- logo.png                           
|--- scripts          
|--- configuration.html                          
|--- hello-world.html               // html page to be used for your widget  
|--- hello-world2.html              // renamed copy of hello-world.html
|--- hello-world3.html              // renamed copy of hello-world2.html
|--- vss-extension.json             // extension's manifest

içinde aşağıdaki HTML'yi configuration.html ekleyin. Temel olarak dosyaya zorunlu başvuruyu ve önceden ayarlanmış listeden bir sorgu seçmek için açılan VSS.SDK.min.js liste için bir öğe select ekleriz. 
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>                          
            <script src="sdk/scripts/VSS.SDK.min.js"></script>              
        </head>
        <body>
            <div class="container">
                <fieldset>
                    <label class="label">Query: </label>
                    <select id="query-path-dropdown" style="margin-top:10px">
                        <option value="" selected disabled hidden>Please select a query</option>
                        <option value="Shared Queries/Feedback">Shared Queries/Feedback</option>
                        <option value="Shared Queries/My Bugs">Shared Queries/My Bugs</option>
                        <option value="Shared Queries/My Tasks">Shared Queries/My Tasks</option>                        
                    </select>
                </fieldset>             
            </div>
        </body>
    </html>

2. Adım: JavaScript - Yapılandırma

Bu kılavuzda 1. Bölüm'de 3. Adım'da pencere öğesi için olduğu gibi pencere öğesi yapılandırmasında içerik işlemek için JavaScript kullanın. Bu JavaScript kodu içeriği işler, VSS SDK'sı başlatılır, pencere öğesi yapılandırmanız için kodu yapılandırma adıyla eşler ve yapılandırma ayarlarını çerçeveye iletir. Bizim örneğimizde, pencere öğesi yapılandırmasını yüken kod aşağıda verilmiştir. dosyasını ve configuration.html aşağıdaki öğesini <script><head> açın.

    <script type="text/javascript">
        VSS.init({                        
            explicitNotifyLoaded: true,
            usePlatformStyles: true
        });

        VSS.require("TFS/Dashboards/WidgetHelpers", function (WidgetHelpers) {
            VSS.register("HelloWorldWidget.Configuration", function () {   
                var $queryDropdown = $("#query-path-dropdown"); 

                return {
                    load: function (widgetSettings, widgetConfigurationContext) {
                        var settings = JSON.parse(widgetSettings.customSettings.data);
                        if (settings && settings.queryPath) {
                             $queryDropdown.val(settings.queryPath);
                         }

                        return WidgetHelpers.WidgetStatusHelper.Success();
                    },
                    onSave: function() {
                        var customSettings = {
                            data: JSON.stringify({
                                    queryPath: $queryDropdown.val()
                                })
                        };
                        return WidgetHelpers.WidgetConfigurationSave.Valid(customSettings); 
                    }
                }
            });
            VSS.notifyLoadSucceeded();
        });
    </script>

VSS.init, VSS.require ve VSS.register , VSS.initBölüm'de açıklandığı gibi pencere öğesi için oynamış olduğu rolü oynar. Tek fark, pencere öğesi yapılandırmaları için geçirilen işlevin sözleşmeyi VSS.register yerine getiren bir nesne iade etmiş IWidgetConfiguration olmasıdır.

Sözleşmenin loadIWidgetConfiguration özelliği, değeri olarak bir işleve sahip olması gerekir. Bu işlev, pencere öğesi yapılandırmasını işlemek için bir dizi adım içerir. Bizim durumumuz, açılan öğenin seçili değerini varsa mevcut ayarlarla güncelleştirmektir. Çerçeve, widget configuration

Sözleşmenin onSaveIWidgetConfiguration özelliği, değeri olarak bir işleve sahip olması gerekir. Kullanıcı yapılandırma bölmesinde Kaydet'i seçerek çerçeve tarafından çağrılır. Kullanıcı girişi kaydetmeye hazırsa, bunu bir dize olarak seri hale getirme, nesnesini oluşturma ve custom settings kullanıcı girişini kaydetmek için WidgetConfigurationSave.Valid() kullanma.

Bu kılavuzda, kullanıcı girişini bir dizede seri hale getirmesi için JSON kullanıyoruz. Kullanıcı girişini dizeye seri hale getirmenin başka bir yolunu seçebilirsiniz. Pencere öğesine nesnenin customSettings özelliği aracılığıyla WidgetSettings erişilebilir. Pencere öğesi, 4. Adım'da ele alan bu durumdan, bunu deserialize etmek zorunda.

3. Adım: JavaScript - Canlı Önizlemeyi Etkinleştirme

Kullanıcı açılan listeden bir sorguyu seçerken canlı önizleme güncelleştirmesini etkinleştirmek için düğmeye bir değişiklik olayı işleyicisi eklemiz gerekir. Bu işleyici, çerçeveye yapılandırmanın değiştiğini belirtir. Ayrıca önizlemeyi customSettings güncelleştirmek için kullanılacak olan geçişlerini de iletir. Çerçeveyi bildirmek için notifywidgetConfigurationContext yönteminin çağrıl olması gerekir. Bu, olay adı (bu durumda ) ve yardımcı yöntemi yardımıyla 'den oluşturulan olay için bir nesnesi olmak için iki WidgetHelpers.WidgetEvent.ConfigurationChangeEventArgs parametre customSettingsWidgetEvent.Args alır.

özelliğine atanan işleve aşağıdakini load ekleyin.

 $queryDropdown.on("change", function () {
     var customSettings = {
        data: JSON.stringify({
                queryPath: $queryDropdown.val()
            })
     };
     var eventName = WidgetHelpers.WidgetEvent.ConfigurationChange;
     var eventArgs = WidgetHelpers.WidgetEvent.Args(customSettings);
     widgetConfigurationContext.notify(eventName, eventArgs);
 });

"Kaydet" düğmesinin etkinleştirilmesi için yapılandırma değişikliği çerçevesini en az bir kez bilgilendirmelisiniz.

Sonunda, şu configuration.html şekilde görünüyor:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>                          
            <script src="sdk/scripts/VSS.SDK.min.js"></script>      
            <script type="text/javascript">
                VSS.init({                        
                    explicitNotifyLoaded: true,
                    usePlatformStyles: true
                });

                VSS.require("TFS/Dashboards/WidgetHelpers", function (WidgetHelpers) {
                    VSS.register("HelloWorldWidget.Configuration", function () {   
                        var $queryDropdown = $("#query-path-dropdown");

                        return {
                            load: function (widgetSettings, widgetConfigurationContext) {
                                var settings = JSON.parse(widgetSettings.customSettings.data);
                                if (settings && settings.queryPath) {
                                     $queryDropdown.val(settings.queryPath);
                                 }

                                 $queryDropdown.on("change", function () {
                                     var customSettings = {data: JSON.stringify({queryPath: $queryDropdown.val()})};
                                     var eventName = WidgetHelpers.WidgetEvent.ConfigurationChange;
                                     var eventArgs = WidgetHelpers.WidgetEvent.Args(customSettings);
                                     widgetConfigurationContext.notify(eventName, eventArgs);
                                 });

                                return WidgetHelpers.WidgetStatusHelper.Success();
                            },
                            onSave: function() {
                                var customSettings = {data: JSON.stringify({queryPath: $queryDropdown.val()})};
                                return WidgetHelpers.WidgetConfigurationSave.Valid(customSettings); 
                            }
                        }
                    });
                    VSS.notifyLoadSucceeded();
                });
            </script>       
        </head>
        <body>
            <div class="container">
                <fieldset>
                    <label class="label">Query: </label>
                    <select id="query-path-dropdown" style="margin-top:10px">
                        <option value="" selected disabled hidden>Please select a query</option>
                        <option value="Shared Queries/Feedback">Shared Queries/Feedback</option>
                        <option value="Shared Queries/My Bugs">Shared Queries/My Bugs</option>
                        <option value="Shared Queries/My Tasks">Shared Queries/My Tasks</option>                        
                    </select>
                </fieldset>     
            </div>
        </body>
    </html>

4. Adım: JavaScript - Pencere öğesinde yeniden yükleme uygulama

Kullanıcı tarafından seçilen sorgu yolunu depolamak için pencere öğesi yapılandırması ayarlarınız var. Şimdi önceki örnekten sabit kodlanmış olan kod yerine bu depolanan yapılandırmayı kullanmak için pencere öğesinde Shared Queries/Feedback kodu güncelleştirmemiz gerekiyor.

dosyasını açın hello-world3.html ve çağrısında bulunduğu satırda öğesinden HelloWorldWidget2HelloWorldWidget3 öğesinden pencere öğesi adını olarak güncelleştirin. VSS.register Bu, çerçevenin uzantı içindeki pencere öğelerini benzersiz bir şekilde tanımlamanıza olanak sağlar.

ile eşlenen işlev HelloWorldWidget3 şu VSS.register anda sözleşmeyi yerine getiren bir nesne IWidget döndürür. Pencere öğesimizin artık yapılandırmaya ihtiyacı olduğu için, bu işlevin sözleşmeye uygun bir nesne iade etmek için güncelleştirilmiş olması IConfigurableWidget gerekir. Bunu yapmak için return deyimini aşağıda olduğu gibi reload adlı bir özelliği içerecek şekilde güncelleştirin. Bu özelliğin değeri, yöntemini bir kez daha getQueryInfo çağıran bir işlevdir. Bu yeniden yükleme yöntemi, kullanıcı girişi canlı önizlemeyi göstermek için her değişiklikte çerçeve tarafından çağrılır. Bu, yapılandırma kaydediken de çağrılır.

return {
    load: function (widgetSettings) {
        // Set your title
        var $title = $('h2.title');
        $title.text('Hello World');

        return getQueryInfo(widgetSettings);
    },
    reload: function (widgetSettings) {
        return getQueryInfo(widgetSettings);
    }
}

içinde sabit kodlanan sorgu yolu, yöntemine geçirilen parametreden ayıklandırılan yapılandırılan getQueryInfo sorgu yolu ile değiştir değiştir widgetSettings gerekir. yönteminin en başına aşağıdakini getQueryInfo ekleyin ve sabit kodlu sorgu yolu'nı ile settings.queryPath değiştirin. 
var settings = JSON.parse(widgetSettings.customSettings.data);
if (!settings || !settings.queryPath) {
    var $container = $('#query-info-container');
    $container.empty();
    $container.text("Sorry nothing to show, please configure a query path.");

    return WidgetHelpers.WidgetStatusHelper.Success();
}

Bu noktada, pencere pencere pencereniz yapılandırılmış ayarlarla işlemeye hazırdır.

Hem hem load de özellikleri benzer bir reload işleve sahiptir. Çoğu basit pencere öğesi için bu durum böyledir. Karmaşık pencere öğeleri için, yapılandırmanın kaç kez değiştiklerinde bile yalnızca bir kez çalıştırmak istediğiniz bazı işlemler olabilir. Veya birden fazla çalıştırması gereken ağır işlemler de olabilir. Bu gibi işlemler özelliği değil, özelliğine karşılık gelen işlevin bir parçası olur loadreload .

5. Adım: Uzantı bildirim güncelleştirmeleri

vss-extension.jsonÖzelliğindeki diziye iki yeni giriş eklemek için dosyayı açın contributions . Biri HelloWorldWidget3 pencere öğesi ve diğeri yapılandırması için. Üçüncü pencere öğesi için başka bir önizleme görüntüsüne ihtiyacınız vardır. Bunu adlandırın preview3.png ve img klasöre yerleştirin. Özelliğindeki diziyi, files Bu örneğe eklediğimiz iki yenı HTML dosyasını içerecek şekilde güncelleştirin.

{
    ...
    "contributions": [
        ... , 
        {
             "id": "HelloWorldWidget3",
             "type": "ms.vss-dashboards-web.widget",
             "targets": [
                 "ms.vss-dashboards-web.widget-catalog",
                 "fabrikam.vsts-extensions-myExtensions.HelloWorldWidget.Configuration"
             ],
             "properties": {
                 "name": "Hello World Widget 3 (with config)",
                 "description": "My third widget",
                 "previewImageUrl": "img/preview3.png",                       
                 "uri": "hello-world3.html",
                 "supportedSizes": [
                      {
                             "rowSpan": 1,
                             "columnSpan": 2
                         }
                     ],
                 "supportedScopes": ["project_team"]
             }
         },
         {
             "id": "HelloWorldWidget.Configuration",
             "type": "ms.vss-dashboards-web.widget-configuration",
             "targets": [ "ms.vss-dashboards-web.widget-configuration" ],
             "properties": {
                 "name": "HelloWorldWidget Configuration",
                 "description": "Configures HelloWorldWidget",
                 "uri": "configuration.html"
             }
         }
    ],
    "files": [
            {
                "path": "hello-world.html", "addressable": true
            },
             {
                "path": "hello-world2.html", "addressable": true
            },
            {
                "path": "hello-world3.html", "addressable": true
            },
            {
                "path": "configuration.html", "addressable": true
            },
            {
                "path": "sdk/scripts", "addressable": true
            },
            {
                "path": "img", "addressable": true
            }
        ],
        ...     
}

Pencere öğesi yapılandırmasına yönelik katkı, pencere öğesinin kendisinden daha az farklı bir model izler. Pencere öğesi yapılandırması için bir katkı girişi:
  • Katkılarınızı tanımlayacak kimlik . Bu, bir uzantı içinde benzersiz olmalıdır.
  • Katkı türü . Tüm pencere öğesi yapılandırmalarında, bu olmalıdır ms.vss-dashboards-web.widget-configuration
  • Katkısının katkıda bulunduğu hedef dizisi. Tüm pencere öğesi yapılandırmalarında, bunun tek bir girişi vardır: ms.vss-dashboards-web.widget-configuration .
  • Ad, açıklama ve yapılandırma için kullanılan HTML dosyasının URI 'sini içeren özellikler kümesi içeren Özellikler .

Yapılandırmayı desteklemek için pencere öğesi katkısının de değiştirilmesi gerekir. Pencere öğesi için hedef dizisinin, yapılandırmanın kimliğini publisher> . <id for the extension> . <id for the configuration contribution> Bu örnekte fabrikam.vsts-extensions-myExtensions.HelloWorldWidget.Configuration olduğu biçimde güncelleştirilmesi gerekir.

Uyarı

Yapılandırılabilir pencere öğesi için katkı girişi, daha önce açıklandığı gibi doğru Yayımcı ve uzantı adını kullanarak yapılandırmayı hedeflemiyor, Yapılandır düğmesi pencere öğesi için gösterilmez.

Bu bölümün sonunda, bildirim dosyası üç pencere öğesi ve bir yapılandırma içermelidir. Buradakiörnekten tüm bildirimi alabilirsiniz.

6. Adım: paketleme, yayımlama ve paylaşma

Uzantınızı henüz yayımlamadıysanız, uzantınızı paketlemek, yayımlamak ve paylaşmak için Bu bölümü okuyun. Bu noktadan önce uzantıyı zaten yayımladıysanız, uzantıyı burada açıklandığı gibi yeniden paketleyebilir ve doğrudan Market 'e güncelleştirebilirsiniz .

7. Adım: katalogdan pencere öğesi ekleme

Şimdi takım panonuza gidin https://dev.azure.com/{yourOrganization}/{yourProject}. Bu sayfa zaten açıksa, yenileyin. Sağ alt köşedeki Düzenle düğmesine gelin ve Ekle düğmesini seçin. Bu, yüklediğiniz pencere öğesini bulduğunuz pencere öğesi kataloğunu açmanız gerekir. Pencere öğesini seçin ve panonuza eklemek için ' Ekle ' düğmesini seçin.

Pencere öğesini yapılandırmanızı isteyen bir ileti görürsünüz.

Katalogdan bir örnek pencere öğesi içeren panoya genel bakış.

Pencere öğelerini yapılandırmanın iki yolu vardır. Bunlardan biri pencere öğesi üzerine geldiğinizde, sağ üst köşede görüntülenen üç noktayı seçin ve ardından Yapılandır ' ı seçin. Diğeri ise panonun sağ alt kısmındaki Düzenle düğmesini seçip pencere öğesinin sağ üst köşesinde görüntülenen Yapılandır düğmesini seçer. Yapılandırma deneyimini sağ tarafta, ve pencere öğesinin merkezinde önizlemede açar. Devam edin ve açılan listeden bir sorgu seçin. Canlı önizleme güncelleştirilmiş sonuçları gösterir. "Kaydet" i seçin ve pencere öğesi güncelleştirilmiş sonuçları görüntüler.

8. Adım: daha fazlasını yapılandırma (isteğe bağlı)

Ek yapılandırma için, ihtiyacınız olan sayıda HTML form öğesi ekleyebilirsiniz configuration.html . Kullanıma hazır olan iki yapılandırılabilir özellik vardır: pencere öğesi adı ve pencere öğesi boyutu.

Varsayılan olarak, uzantı bildiriminde pencere öğesi için sağladığınız ad, bir panoya eklenen pencere öğesinin her örneği için pencere öğesi adı olarak depolanır. Kullanıcıların pencere öğesi örneğine istedikleri adı ekleyebilmeleri için bunu yapılandırmasına izin verebilirsiniz. Bu tür yapılandırmaya izin vermek için isNameConfigurable:true uzantı bildiriminde pencere öğesi Özellikler bölümüne ekleyin.

Uzantı bildirimindeki dizide pencere öğesi için birden fazla giriş sağlarsanız supportedSizes , kullanıcılar pencere öğesinin boyutunu da yapılandırabilir.

Bu kılavuzdaki üçüncü örnek için uzantı bildirimi, pencere öğesi adının ve boyut yapılandırmasının etkinleştirilmesi halinde aşağıdaki gibi görünür:

{
    ...
    "contributions": [
        ... , 
        {
             "id": "HelloWorldWidget3",
             "type": "ms.vss-dashboards-web.widget",
             "targets": [
                 "ms.vss-dashboards-web.widget-catalog",  "fabrikam.vsts-extensions-myExtensions.HelloWorldWidget.Configuration"
             ],
             "properties": {
                 "name": "Hello World Widget 3 (with config)",
                 "description": "My third widget",
                 "previewImageUrl": "img/preview3.png",                       
                 "uri": "hello-world3.html",
                 "isNameConfigurable": true,
                 "supportedSizes": [
                    {
                        "rowSpan": 1,
                        "columnSpan": 2
                    },
                    {
                        "rowSpan": 2,
                        "columnSpan": 2
                    }
                 ],
                 "supportedScopes": ["project_team"]
             }
         },
         ...
}

Önceki değişiklik ile uzantınızı yeniden paketleyin ve güncelleştirin . Bu pencere öğesini (Merhaba Dünya pencere öğesi 3 ' ü (yapılandırma ile) içeren panoyu yenileyin. Pencere öğesi için yapılandırma modunu açın, artık pencere öğesi adını ve boyutunu değiştirme seçeneğini görebilmeniz gerekir.

Ad ve boyutun yapılandırılabileceği pencere öğesi

Devam edin ve açılan listeden farklı bir boyut seçin. Canlı Önizlemeyi yeniden boyutlandırılacağını görürsünüz. Değişikliği kaydetme, panodaki pencere öğesi de yeniden boyutlandırıldı.

Uyarı

Zaten desteklenen bir boyutu kaldırırsanız pencere öğesi düzgün şekilde yüklenemez. Gelecekteki bir sürüm için bir çözüm üzerinde çalışıyoruz.

Pencere öğesinin adını değiştirmek pencere öğesinde görünür hiçbir değişikliğe neden olmaz. Bunun nedeni, örnek Pencere öğelerinin pencere öğesi adını her yerde görüntülememimizin bir örneğidir. Örnek kodu, sabit kodlanmış "Merhaba Dünya" metni yerine pencere öğesi adını görüntüleyecek şekilde değiştirmemize izin verin.

Bunu yapmak için, sabit kodlanmış "Merhaba Dünya" metnini widgetSettings.name öğenin metnini belirlediğimiz satırdaki ile değiştirin h2 . Bu, pencere öğesi adının sayfa yenilemesinde her yüklendiğinde pencere öğesi adının görüntülenmesini sağlar. Yapılandırma her değiştiğinde canlı önizlemenin güncelleştirilmesini istediğimizden, kodunuzun bölümünde de aynı kodu eklememiz gerekir reload . İçindeki son Return deyimleri hello-world3.html aşağıdaki gibidir:

return {
    load: function (widgetSettings) {
        // Set your title
        var $title = $('h2.title');
        $title.text(widgetSettings.name);

        return getQueryInfo(widgetSettings);
    },
    reload: function (widgetSettings) {
        // Set your title
        var $title = $('h2.title');
        $title.text(widgetSettings.name);

        return getQueryInfo(widgetSettings);
    }
}

Uzantınızı yeniden paketleyin ve güncelleştirin . Bu pencere öğesinin bulunduğu panoyu yenileyin. Pencere öğesi adında yapılan tüm değişiklikler, yapılandırma modunda, pencere öğesi başlığını şimdi güncelleştirin.