Share via

Pano pencere öğesi ekleme

  • Makale

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

Bir panodaki pencere öğeleri, uzantı çerçevesine katkı olarak uygulanır. Tek bir uzantının birden çok katkısı olabilir. Katkı olarak birden çok pencere öğesi içeren bir uzantı oluşturmayı öğrenin.

Bu makale, her biri basit bir pencere öğesiyle başlayıp kapsamlı bir pencere öğesiyle biten bir önceki derleme olmak üzere üç bölüme ayrılmıştır.

İpucu

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

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

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

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

  • Pencere öğenizi yüklemek ve test için Azure DevOps'ta bir kuruluş, daha fazla bilgiyi burada bulabilirsiniz
  • Metin düzenleyicisi. Öğreticilerin birçoğu için, buradan indirilebilen kullandıkVisual Studio Code.
  • Düğümün buradan indirilebilen en son sürümü
  • Uzantılarınızı paketlemek için Azure DevOps (tfx-cli) için platformlar arası CLI.
    • tfx-cli komutu çalıştırılarak Node.js'nin bir bileşeni kullanılarak npmyüklenebilir npm i -g tfx-cli
  • Projeniz için bir giriş dizini. Bu dizin, öğretici boyunca olarak home adlandırılır.

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 neler bulacaksınız?

  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. İkinci bölüm, Azure DevOps REST API'sine bir çağrı ekleyerek birinci bölüm üzerinde derlenir.
  3. Üçüncü bölümde pencere pencere öğelerinize yapılandırma ekleme açıklanmaktadır.

Not

Aceleniz varsa ve kodu hemen almak istiyorsanız örnekleri buradan indirebilirsiniz. İndirildikten sonra klasöre widgets gidin, ardından 6. Adım ve 7. Adım'ı izleyerek değişen karmaşıklıklara sahip üç örnek pencere öğesini içeren örnek uzantıyı doğrudan yayımlayın.

Sizin için hazırladığımız pencere öğeleri için bazı temel stilleri ve pencere öğesi yapısıyla ilgili bazı kılavuzları kullanmaya başlayın.

Bölüm 1: Merhaba Dünya

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

Overview dashboard with a sample widget

1. Adım: İstemci SDK'sını alma - VSS.SDK.min.js

çekirdek SDK betiği, VSS.SDK.min.jsweb uzantılarının konak Azure DevOps çerçevesiyle iletişim kurmasını sağlar. Betik başlatma, uzantının yüklendiğini bildirme veya geçerli sayfa hakkında bağlam alma gibi işlemler yapar. İstemci SDK'sı VSS.SDK.min.js dosyasını alın ve web uygulamanıza ekleyin. Klasörüne home/sdk/scripts yerleştirin.

SDK'yi almak için 'npm install' komutunu kullanın:

npm install vss-web-extension-sdk

SDK hakkında daha fazla bilgi edinmek için İstemci SDK GitHub Sayfasını ziyaret edin.

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

HTML sayfanız, düzeninizi bir arada tutan ve CSS ve JavaScript başvurularını içeren tutkaldır. Bu dosyayı herhangi bir adla adlandırabilirsiniz. Tüm başvuruları hello-world kullandığınız adla güncelleştirdiğinizden emin olun.

Pencere öğeniz HTML tabanlıdır ve bir iframe'de barındırılır. aşağıdaki HTML'yi içine hello-world.htmlekleyin. Dosyaya VSS.SDK.min.js zorunlu başvuruyu ekliyoruz ve öğesine, gelecek adımda Merhaba Dünya dizesiyle güncelleştirilen bir h2 öğe ekliyoruz.

    <!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ı kullanıyor olsak da, betik ve bağlantı dışındaki HTML baş öğelerinin çoğu çerçeve tarafından yoksayılır.

3. Adım: JavaScript'iniz

JavaScript'i pencere öğesindeki içeriği işlemek için kullanırız. Bu makalede, tüm JavaScript kodumuzu HTML dosyasındaki bir &lt;script&gt; öğenin içine sarmalıyoruz. Bu kodun ayrı bir JavaScript dosyasında olmasını seçebilir ve HTML dosyasına başvurabilirsiniz. Kod içeriği işler. Bu JavaScript kodu ayrıca VSS SDK'sını başlatır, pencere öğesinizin kodunu pencere öğesi adınız ile eşler ve pencere öğesi başarılarının veya başarısızlıklarının uzantı çerçevesini bildirir. Bizim örneğimizde, pencere öğesinde "Merhaba Dünya" yazdıracak kod aşağıdadır. 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 barındıran iframe ile konak çerçevesi arasındaki el sıkışmasını başlatır. Yükleme tamamlandığında pencere öğesinin konağa açıkça bildirimde bulunabilmesi için geçiş explicitNotifyLoaded: true yapıyoruz. Bu denetim, bağımlı modüllerin yüklendiğinden emin olduktan sonra yüklemenin tamamlandığını bildirmemize olanak tanır. Html öğeleri (gövde, div vb.) için Azure DevOps çekirdek stillerinin Pencere Öğesi tarafından kullanılabilmesi için geçiş usePlatformStyles: true yapıyoruz. Pencere öğesi bu stilleri kullanmamak isterse, öğesini geçirebilir usePlatformStyles: false.

VSS.require gerekli VSS betik kitaplıklarını yüklemek için kullanılır. Bu yönteme yapılan bir çağrı, JQuery ve JQueryUI gibi genel kitaplıkları otomatik olarak yükler. Bizim örneğimizde pencere öğesi durumunu pencere öğesi çerçevesine iletmek için kullanılan WidgetHelpers kitaplığına bağımlıyız. Bu nedenle, ilgili modül adını TFS/Dashboards/WidgetHelpers ve geri çağırmayı öğesine VSS.requiregeçiririz. Geri çağırma, modül yüklendikten sonra çağrılır. Geri çağırma, pencere öğesi için gereken JavaScript kodunun geri kalanına sahiptir. Geri aramanın sonunda, yüklemenin tamamlanmasını bildirmek için çağırırız VSS.notifyLoadSucceeded .

WidgetHelpers.IncludeWidgetStyles kullanmaya başlamanız için bazı temel css içeren bir stil sayfası içerir. Bu stillerden yararlanmak için içeriğinizi sınıfıyla widget bir HTML öğesinin içine sarmalayı unutmayın.

VSS.register JavaScript'te bir işlevi eşlemek için kullanılır. Bu işlev, uzantınızdaki farklı katkılar arasında pencere öğesini benzersiz olarak tanımlar. Ad, 5. Adımda açıklandığı gibi katkınızı tanımlayan adla eşleşmelidirid. Pencere öğeleri için, geçirilen işlevin sözleşmeyi VSS.register karşılayan IWidget bir nesne döndürmesi gerekir; örneğin, döndürülen nesnenin değeri pencere öğesini işlemek için çekirdek mantığı olan başka bir işlev olan bir yük özelliğine sahip olmalıdır. Bizim örneğimizde, öğesinin metnini h2 "Merhaba Dünya" olarak güncelleştirmektir. Bu işlev, pencere öğesi çerçevesi pencere öğesi örneğinizi oluşturduğunda çağrılır. Öğesini başarılı olarak döndürmek için WidgetHelpers'dan WidgetStatus öğesini kullanırızWidgetStatusHelper.

Uyarı

Pencere öğesini kaydetmek için kullanılan ad bildirimdeki katkının kimliğiyle eşleşmiyorsa, pencere öğesi beklenmedik bir şekilde çalışır.

vss-extension.json her 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çine istediğiniz yapıya yerleştirebilirsiniz, yalnızca başvuruları HTML dosyalarında ve bildirimde uygun şekilde güncelleştirdiğinizden vss-extension.json emin olun.

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

Logonuz Market'te ve kullanıcı uzantınızı yükledikten sonra pencere öğesi kataloğunda görüntülenir.

98 piksel x 98 piksellik katalog simgesi gerekir. Bir resim seçin, adını verin logo.pngve klasörüne img yerleştirin.

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

Sonraki adımda uzantı bildirimi kullandığınız adlarla güncelleştirildiği sürece bu görüntüleri istediğiniz şekilde adlandırabilirsiniz.

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

Dizinde home aşağıdaki içeriklere sahip bir json dosyası (vss-extension.jsonörneğin) oluşturun:

    {
        "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ı bildirimi başvurusu

Not

Buradaki yayımcının, yayımcınızın adıyla değiştirilmesi gerekir. Şimdi yayımcı oluşturmak için Paketle/Yayımla/Yükle'yi ziyaret edin.

Simgeler

Simgeler stanza, bildiriminizde uzantınızın simgesinin yolunu belirtir.

Katkılar

Her katkı girdisi özellikleri tanımlar.

  • Katkınızı tanımlamak için kimlik. Bu kimlik bir uzantı içinde benzersiz olmalıdır. Bu kimlik, pencere öğesinizi kaydetmek için 3. Adımda 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ının katkıda bulunduğu hedefler dizisi. Tüm pencere öğeleri için hedef olmalıdır [ms.vss-dashboards-web.widget-catalog].
  • Özellikler, katkı türü için özellikler içeren nesnelerdir. Pencere öğeleri için aşağıdaki özellikler zorunlu olarak bulunur.
Özellik Açıklama
Adı 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 Pencere öğesi kataloğunda görüntülemek için 4. Adımda eklediğiniz katalog simgesinin göreli yolu. Görüntü 98 piksel x 98 piksel olmalıdır. Farklı bir klasör yapısı veya farklı bir dosya adı kullandıysanız, burada uygun göreli yolu belirtin.
previewImageUrl Yalnızca TFS 2015 Güncelleştirme 3 pencere öğesi kataloğunda görüntülemek üzere 4. Adımda eklediğiniz önizleme görüntüsünün göreli yolu. Görüntü 330 piksel x 160 piksel olmalıdır. Farklı bir klasör yapısı veya farklı bir dosya adı kullandıysanız, burada uygun göreli yolu belirtin.
uri 1. Adımda eklediğiniz HTML dosyasının göreli yolu. Farklı bir klasör yapısı veya farklı bir dosya adı kullandıysanız, burada uygun göreli yolu belirtin.
supportedSizes Pencere öğeniz tarafından desteklenen boyut dizisi. Pencere öğesi birden çok boyutu desteklediğinde, dizideki ilk boyut pencere öğesinin varsayılan boyutudur. widget size, pano kılavuzundaki pencere öğesi tarafından kaplanan satırlar ve sütunlar için belirtilir. Bir satır/sütun 160 piksele karşılık gelir. 1x1'in üzerindeki herhangi bir boyut, pencere öğeleri arasındaki oluğu temsil eden ek 10 piksel alır. Örneğin, 3x2 pencere öğesi geniş ve 160*2+10*1 uzundur160*3+10*2. Desteklenen boyut üst sınırıdır 4x4.
supportedScopes Şu anda yalnızca ekip panolarını destekliyoruz. Değeri olmalıdır project_team. Gelecekte, diğer pano kapsamlarını desteklediğimizde, buradan seçebileceğiniz daha fazla seçenek olacaktır.

Files

Dosyalar stanza, paketinize eklemek istediğiniz dosyaları (HTML sayfanız, betikleriniz, SDK betiği ve logonuz) belirtir. true URL adreslenebilir olması gerekmeyen başka dosyalar eklemediğiniz sürece olarak ayarlayınaddressable.

Not

Özellikleri ve yaptıkları gibi uzantı bildirim dosyası hakkında daha fazla bilgi için uzantı bildirimi başvurusuna göz atın.

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

Uzantınızı yazdıktan sonra Market'e eklemenin bir sonraki adımı tüm dosyalarınızı bir araya getirmektir. Tüm uzantılar VSIX 2.0 uyumlu .vsix dosyaları olarak paketlenir - Microsoft, uzantınızı paketlemek için platformlar arası bir komut satırı arabirimi (CLI) sağlar.

Paketleme aracını alma

Komut satırınızdan Node.js bileşenini kullanarak npmAzure DevOps (tfx-cli) için Platformlar Arası CLI'yı yükleyebilir veya güncelleştirebilirsiniz.

npm i -g tfx-cli

Uzantınızı paketleme

Uzantınızı bir .vsix dosyasında paketlemek, tfx-cli'ye sahip olduğunuzda zahmetsizdir. 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

Uzantı/tümleştirmenin sürümü her güncelleştirmede artırılmalıdır.
Mevcut bir uzantıyı güncelleştirirken bildirimdeki sürümü güncelleştirin veya komut satırı anahtarını geçirin --rev-version . Bu, uzantınızın düzeltme eki sürüm numarasını artırır ve yeni sürümü bildiriminize kaydeder.

Paketlenmiş uzantınızı bir .vsix dosyasına ekledikten sonra, uzantınızı Market'te yayımlamaya hazır olursunuz.

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

Microsoft'un uzantıları da dahil olmak üzere tüm uzantıların bir yayımcı tarafından sağlandığı tanımlanır. Henüz mevcut bir yayımcının üyesi değilseniz, bir yayımcı oluşturursunuz.

  1. Visual Studio Market Yayımlama Portalı'nda oturum açma
  2. Henüz mevcut bir yayımcının üyesi değilseniz, bir yayımcı oluşturmanız istenir. Yayımcı oluşturmanız istenmezse sayfanın en altına kadar aşağı kaydırın ve İlgili Siteler'in altında Uzantıları Yayımla'yı seçin.
    • Yayımcınız için bir tanımlayıcı belirtin, örneğin: mycompany-myteam
      • Tanımlayıcı, uzantılarınızın bildirim dosyasında özniteliğin publisher değeri olarak kullanılır.
    • Yayımcınız için bir görünen ad belirtin, örneğin: My Team
  3. Market Yayımcı Sözleşmesi'ni gözden geçirin ve Oluştur'u seçin

Artık yayımcınız tanımlanmıştır. Gelecek bir sürümde, yayımcınızın uzantılarını görüntüleme ve yönetme izinleri verilmektedir. Ekiplerin ve kuruluşların uzantıları ortak bir yayımcı altında yayımlaması kolay ve daha güvenlidir, ancak bir kullanıcı kümesi arasında bir dizi kimlik bilgisi paylaşmaya gerek kalmaz.

vss-extension.json Sahte yayımcı kimliğini yayımcı kimliğinizle fabrikam değiştirmek için örneklerdeki bildirim dosyasını güncelleştirin.

Uzantıyı yayımlama ve paylaşma

Yayımcı oluşturduktan sonra artık uzantınızı Market'e yükleyebilirsiniz.

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

Uzantınızı tek adımda paketlemek ve yayımlamak yerine tfx extension create komutunu kullanarak tfx extension publish komut satırı aracılığıyla da uzantınızı karşıya yükleyebilirsiniz. İsteğe bağlı olarak, uzantınızı yayımladıktan sonra bir veya daha fazla hesapla paylaşmak için kullanabilirsiniz --share-with . Kişisel erişim belirtecinin de olması gerekir.

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

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

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

  2. Genel Bakış'ı ve ardından Panolar'ı seçin.

  3. Pencere öğesi ekle'yi seçin.

  4. Pencere öğesinizi vurgulayın ve Ekle'yi seçin.

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

Bölüm 2: Azure DevOps REST API ile Merhaba Dünya

Pencere öğeleri, Azure DevOps kaynaklarıyla etkileşime geçmek için Azure DevOps'taki REST API'lerden herhangi birini çağırabilir. Bu örnekte, var olan bir sorgu hakkındaki bilgileri getirmek ve "Merhaba Dünya" metninin hemen altındaki pencere öğesinde bazı sorgu bilgilerini görüntülemek için WorkItemTracking için REST API'sini kullanacağız.

Overview dashboard with a sample widget using the REST API for WorkItemTracking.

1. Adım: HTML

Önceki örnekteki dosyayı hello-world.html kopyalayın ve kopyayı olarak hello-world2.htmlyeniden adlandırın. 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

Sorgu bilgilerini tutmak için 'h2' öğesinin hemen altına yeni bir 'div' öğesi ekleyin. 'HelloWorldWidget' olan pencere öğesinin adını, 'VSS.register' olarak adlandırdığınız satırdaki 'HelloWorldWidget2' olarak güncelleştirin. Bu, çerçevenin uzantı içindeki pencere öğesini benzersiz olarak tanımlamasına olanak tanır. 
<!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şme

Azure DevOps kaynaklarına erişimi etkinleştirmek için uzantı bildiriminde kapsamların belirtilmesi gerekir. Kapsamı bildirimimize ekleriz vso.work .
Bu kapsam, pencere öğesinin sorgulara ve iş öğelerine salt okunur erişime ihtiyacı olduğunu gösterir. Tüm kullanılabilir kapsamları burada görebilirsiniz. Uzantı bildiriminizin sonuna aşağıdakini ekleyin.

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

Uyarı

Uzantı yayımladıktan sonra kapsam ekleme veya değiştirme şu anda desteklenmiyor. Uzantınızı zaten yüklediyseniz Market'ten kaldırın. adresine Visual Studio Marketplace Publishing Portalgidin, uzantınıza sağ tıklayın ve "Kaldır"ı seçin.

3. Adım: REST API Çağrısı Yapma

Azure DevOps'ta REST API çağrıları yapmak için SDK aracılığıyla erişilebilen birçok istemci tarafı kitaplığı vardır. Bu kitaplıklar REST istemcileri olarak adlandırılır ve kullanılabilir tüm sunucu tarafı uç noktaları için Ajax çağrıları çevresinde 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 kullanılabilecek nesnelerle eşler.

Bu adımda, WorkItemTracking REST istemcisini sağlayan öğesini yüklemek TFS/WorkItemTracking/RestClientiçin çağrıyı güncelleştireceğizVSS.require. klasörünün Shared Queriesaltında adlı Feedback bir sorgu hakkında bilgi almak için bu REST istemcisini kullanabiliriz.

'a VSS.registergeçirdiğiniz işlevin içinde, geçerli proje kimliğini tutmak için bir değişken oluştururuz. Sorguyu getirmek için bu değişkene ihtiyacımız var. REST istemcisini kullanmak için yeni bir yöntem getQueryInfo de oluşturuyoruz. Daha sonra load yönteminden çağrılan bu yöntem.

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ştirme VSS.require aşağıdaki gibi görünür:

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

hata yönteminin WidgetStatusHelperkullanımına dikkat edin. Pencere öğesi çerçevesine bir hata oluştuğuna dair bilgi vermenizi ve tüm pencere öğelerine sağlanan standart hata deneyiminden yararlanmanızı sağlar.

Feedback Klasörün altında Shared Queries sorgu yoksa, kodu projenizde var olan bir sorgunun yoluyla değiştirinShared Queries\Feedback.

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

Son adım, sorgu bilgilerini pencere öğesi içinde işlemektir. İşlev, getQuery bir promise içinde türünde Contracts.QueryHierarchyItem bir nesne döndürür. Bu örnekte sorgu kimliğini, sorgu adını ve sorgu oluşturucusunun adını "Merhaba Dünya" metni altında görüntüleyeceğiz. Açıklamayı // Do something with the query aşağıdakiyle değiştirin:

    // Create a list with query details                                
    var $list = $('<ul>');                                
    $list.append($('- ').text("Query Id: " + query.id));
    $list.append($('- ').text("Query Name: " + query.name));
    $list.append($('- ').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);

Finaliniz hello-world2.html aşağıdaki gibidir:

<!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($('- ').text("Query ID: " + query.id));
                                $list.append($('- ').text("Query Name: " + query.name));
                                $list.append($('- ').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ştirmeler

Bu adımda, uzantı bildirimini ikinci pencere öğemiz için bir girdi içerecek şekilde güncelleştireceğiz. özelliğindeki contributions diziye yeni bir katkı ekleyin ve files özelliğindeki diziye yeni dosyayı hello-world2.html ekleyin. İkinci pencere öğesi için başka bir önizleme görüntüsüne ihtiyacınız vardır. Bunu preview2.png adlandırın ve klasörüne img yerleştirin.

 {
     ...,
     "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ı paketleyip yayımlayın ve paylaşın. Uzantıyı zaten yayımladıysanız uzantıyı yeniden paketleyebilir ve doğrudan Market'e güncelleştirebilirsiniz.

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

Şimdi adresinden ekip panonuza https:\//dev.azure.com/{yourOrganization}/{yourProject}gidin. Bu sayfa zaten açıksa sayfayı yenileyin. Sağ alttaki Düzenle düğmesinin üzerine gelin ve Ekle düğmesini seçin. Yüklediğiniz pencere öğesini bulabileceğiniz pencere öğesi kataloğu açılır. Pencere öğesinizi seçin ve panonuza eklemek için 'Ekle' düğmesini seçin.

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

Bu kılavuzun 2. Bölümünde, sabit kodlanmış bir sorgu için sorgu bilgilerini gösteren bir pencere öğesinin nasıl oluşturulacağını gördünüz. Bu bölümde, sabit kodlanmış sorgu yerine kullanılacak sorguyu yapılandırma özelliğini ekleyeceğiz. Yapılandırma modundayken, kullanıcı değişikliklerine göre pencere öğesinin canlı önizlemesini görebilir. Kullanıcı Kaydet'i seçtiğinde bu değişiklikler panodaki pencere öğesine kaydedilir.

Overview dashboard live preview of the widget based on changes.

1. Adım: HTML

Pencere Öğelerinin ve Pencere Öğesi Yapılandırmalarının uygulamaları birbirine çok benzer. Her ikisi de uzantı çerçevesinde katkı olarak uygulanır. Her ikisi de aynı SDK dosyasını kullanır. VSS.SDK.min.js Her ikisi de HTML, JavaScript ve CSS'yi temel alır.

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

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

'configuration.html' dosyasına aşağıdaki HTML'yi ekleyin. Temel olarak 'VSS'ye zorunlu başvuruyu ekliyoruz. Sdk.min.js' dosyası ve önceden ayarlanmış bir listeden sorgu seçmek için açılan menü için bir 'select' öğesi. 
    <!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ılavuzdaki 1. Bölümün 3. Adımında pencere öğesi için yaptığımız 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ını başlatır, pencere öğesi yapılandırmanızın kodunu yapılandırma adına eşler ve yapılandırma ayarlarını çerçeveye geçirir. Bizim örneğimizde, pencere öğesi yapılandırmasını yükleyen kod aşağıdadır. dosyasını configuration.html ve aşağıdaki <script> öğesini için <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ögesini VSS.requireseçin ve VSS.register 1. Bölüm'de açıklandığı gibi pencere öğesi için oynadıkları rolü oynayın. Tek fark, pencere öğesi yapılandırmaları için geçirilen işlevin sözleşmeyi VSS.register karşılayan bir nesne döndürmesi IWidgetConfiguration gerektiğidir.

load Sözleşmenin IWidgetConfiguration özelliği, değeri olarak bir işleve sahip olmalıdır. Bu işlev, pencere öğesi yapılandırmasını işlemek için bir dizi adıma sahiptir. Bizim örneğimizde, varsa açılan öğenin seçili değerini mevcut ayarlarla güncelleştirmektir. Çerçeve örneğinizi oluşturduğunda bu işlev çağrılır widget configuration

onSave Sözleşmenin IWidgetConfiguration özelliği, değeri olarak bir işleve sahip olmalıdır. Kullanıcı yapılandırma bölmesinde Kaydet'i seçtiğinde bu işlev çerçeve tarafından çağrılır. Kullanıcı girişi kaydetmeye hazırsa, bunu bir dizeye seri hale getirin, nesneyi oluşturun custom settings ve kullanıcı girişini kaydetmek için kullanın WidgetConfigurationSave.Valid() .

Bu kılavuzda, kullanıcı girişini bir dizeye seri hale getirmek için JSON kullanacağız. Dizeye kullanıcı girişini seri hale getirmek için başka bir yol seçebilirsiniz. Nesnenin özel Ayarlar özelliği aracılığıyla pencere öğesi tarafından WidgetSettings erişilebilir. Pencere öğesinin, 4. Adım'da ele alınan bunu seri durumdan çıkarması gerekir.

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

Kullanıcı açılan listeden bir sorgu seçtiğinde canlı önizleme güncelleştirmesini etkinleştirmek için düğmeye bir değişiklik olay işleyicisi ekleriz. Bu işleyici, yapılandırmanın değiştiğini çerçeveye bildirir. Ayrıca önizlemeyi customSettings güncelleştirmek için kullanılacak öğesini geçirir. Çerçeveyi bilgilendirmek için üzerindeki yönteminin notifywidgetConfigurationContext çağrılması gerekir. bu örnekte WidgetHelpers.WidgetEvent.ConfigurationChangeolayın adı olan iki parametre ve yardımcı yöntemi yardımıyla WidgetEvent.Args öğesinden customSettings oluşturulan olay için bir EventArgs nesne 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ştirilebilmesi için yapılandırma değişikliği çerçevesini en az bir kez bilgilendirmeniz gerekir.

Sonunda, aşağıdaki configuration.html gibi görünür:

    <!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üklemeyi uygulama

Kullanıcı tarafından seçilen sorgu yolunu depolamak için pencere öğesi yapılandırmasını ayarladık. Şimdi önceki örnekten sabit kodlanmış Shared Queries/Feedback yerine bu depolanmış yapılandırmayı kullanmak için pencere öğesindeki kodu güncelleştirmemiz gerekiyor.

dosyasını hello-world3.html açın ve öğesini çağırdığınız VSS.registersatırdaki pencere öğesinin HelloWorldWidget2HelloWorldWidget3 adını olarak güncelleştirin. Bu, çerçevenin uzantı içindeki pencere öğesini benzersiz olarak tanımlamasına olanak tanır.

ile VSS.register eşlenen işlev şu anda sözleşmeyi HelloWorldWidget3IWidget karşılayan bir nesne döndürür. Pencere öğemizin yapılandırılması gerektiğinden, bu işlevin sözleşmeyi karşılayan IConfigurableWidget bir nesne döndürecek şekilde güncelleştirilmesi gerekir. Bunu yapmak için return deyimini aşağıdaki gibi reload adlı bir özellik içerecek şekilde güncelleştirin. Bu özelliğin değeri, yöntemini bir kez daha çağıran getQueryInfo bir işlevdir. Bu yeniden yükleme yöntemi, kullanıcı canlı önizlemeyi gösterecek şekilde her değiştiğinde çerçeve tarafından çağrılır. Bu, yapılandırma kaydedildiğinde 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);
    }
}

'getQueryInfo' içindeki sabit kodlanmış sorgu yolu, yöntemine geçirilen 'widget Ayarlar' parametresinden ayıklanabilen yapılandırılmış sorgu yolu ile değiştirilmelidir. 'getQueryInfo' yönteminin en başına aşağıdakini ekleyin ve sabit kodlanmış sorguyolunu 'settings.queryPath' ile 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 öğeleriniz yapılandırılan ayarlarla işlenmeye hazırdır.

load hem hem de reload özellikleri benzer bir işleve sahiptir. Çoğu basit pencere öğesi için bu durum söz konusudur. Karmaşık pencere öğeleri için, yapılandırma kaç kez değişirse değişsin yalnızca bir kez çalıştırmak istediğiniz bazı işlemler olabilir. Ya da birden çok kez çalıştırılmayan bazı ağır operasyonlar olabilir. Bu tür işlemler özelliğine değil özelliğine load karşılık gelen işlevin reload bir parçası olur.

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

özelliğindeki vss-extension.json diziye contributions iki yeni girdi eklemek için dosyasını açın. Pencere öğesi için HelloWorldWidget3 bir pencere öğesi, diğeri de yapılandırması için. Üçüncü pencere öğesi için başka bir önizleme görüntüsüne ihtiyacınız var. Bunu preview3.png adlandırın ve klasörüne img yerleştirin. özelliğindeki diziyi files , bu örnekte eklediğimiz iki yeni 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 yapılan katkının pencere öğesinin kendisinden biraz farklı bir model izlediğini unutmayın. Pencere öğesi yapılandırmasına yönelik bir katkı girişi şunları içerir:
  • Katkınızı tanımlamak için kimlik. Bu, bir uzantı içinde benzersiz olmalıdır.
  • Katkı türü . Tüm pencere öğesi yapılandırmaları için bu, ms.vss-dashboards-web.widget-configuration
  • Katkının katkıda bulunduğu hedefler dizisi. Tüm pencere öğesi yapılandırmaları için bunun tek bir girişi vardır: ms.vss-dashboards-web.widget-configuration.
  • Yapılandırma için kullanılan HTML dosyasının adını, açıklamasını ve URI'sini içeren bir özellik kümesi içeren özellikler.

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

Uyarı

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

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

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

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. Uzantıyı bu noktadan önce zaten yayımladıysanız uzantıyı yeniden paketleyebilir ve doğrudan Market'e güncelleştirebilirsiniz.

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

Şimdi şu konumdan ekip panonuza gidin: https://dev.azure.com/{yourOrganization}/{yourProject}. Bu sayfa zaten açıksa sayfayı yenileyin. Sağ alttaki Düzenle düğmesinin üzerine gelin ve Ekle düğmesini seçin. Bu, yüklediğiniz pencere öğesini bulabileceğiniz pencere öğesi kataloğunu açmalıdır. Pencere öğesinizi 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.

Overview dashboard with a sample widget from the catalog.

Pencere öğelerini yapılandırmanın iki yolu vardır. Pencere öğesinin üzerine gelin, 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 ve ardından pencere öğesinin sağ üst köşesinde görünen yapılandır düğmesini seçmektir. Sağ tarafta yapılandırma deneyimini ve ortada pencere öğesinizin önizlemesini açar. Devam edin ve açılan listeden bir sorgu seçin. Canlı önizleme, güncelleştirilmiş sonuçları gösterir. "Kaydet" seçeneğini belirlediğinizde pencere öğesi güncelleştirilmiş sonuçları görüntüler.

8. Adım: Daha Fazlasını Yapılandır (isteğe bağlı)

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

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

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

Pencere öğesi adı ve boyut yapılandırmasını etkinleştirirsek, bu kılavuzdaki üçüncü örneğin uzantı bildirimi aşağıdakine benzer olacaktı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şiklikle uzantınızı yeniden paketleyipgüncelleştirin . Bu pencere öğesini içeren panoyu yenileyin (Merhaba Dünya Pencere Öğesi 3 (yapılandırma ile)). Pencere öğesiniz için yapılandırma modunu açın, artık pencere öğesinin adını ve boyutunu değiştirme seçeneğini görebilmeniz gerekir.

Widget where name and size can be configured

Devam edin ve açılan listeden farklı bir boyut seçin. Canlı önizlemenin yeniden boyutlandırıldığını görürsünüz. Değişikliği kaydettiğinizde panodaki pencere öğesi de yeniden boyutlandırılır.

Uyarı

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

Pencere öğesinin adını değiştirmek, pencere öğesinde görünür bir değişiklikle sonuçlanır. Bunun nedeni, örnek pencere öğelerimizin pencere öğesi adını hiçbir yerde görüntülemediğinden kaynaklanır. Örnek kodu değiştirerek sabit kodlanmış "Merhaba Dünya" metni yerine pencere öğesi adını görüntülememize izin verin.

Bunu yapmak için sabit kodlanmış "Merhaba Dünya" widgetSettings.name metnini öğenin metnini h2 ayarladığımız satırla değiştirin. Bu, pencere öğesinin sayfa yenilemeye her yüklendiğinde pencere öğesinin adının görüntülenmesini sağlar. Canlı önizlemenin yapılandırma her değiştiğinde güncelleştirilmesini istediğimizden, kodumuzun parçasına reload da aynı kodu eklemeliyiz. içindeki hello-world3.html son return deyimi 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 öğesini içeren 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.