Pano pencere öğesi ekleme
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ık
Visual 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
npm
yüklenebilirnpm i -g tfx-cli
- tfx-cli komutu çalıştırılarak Node.js'nin bir bileşeni kullanılarak
- 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?
- 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.
- İkinci bölüm, Azure DevOps REST API'sine bir çağrı ekleyerek birinci bölüm üzerinde derlenir.
- Üçü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.
1. Adım: İstemci SDK'sını alma - VSS.SDK.min.js
çekirdek 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ı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.html
ekleyin. 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 <script>
öğ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.require
geç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.png
ve 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.png
ve 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
- Her uzantının bir uzantı bildirim dosyası olmalıdır
- Uzantı bildirimi başvuruyu okuyun
- Genişletilebilirlik noktalarındaki katkı noktaları hakkında daha fazla bilgi edinin
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 npm
Azure 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.
- Visual Studio Market Yayımlama Portalı'nda oturum açma
- 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.
- Tanımlayıcı, uzantılarınızın bildirim dosyasında özniteliğin
- Yayımcınız için bir görünen ad belirtin, örneğin:
My Team
- Yayımcınız için bir tanımlayıcı belirtin, örneğin:
- 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.
- 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
Azure DevOps'ta projenize gidin,
http://dev.azure.com/{yourOrganization}/{yourProject}
Genel Bakış'ı ve ardından Panolar'ı seçin.
Pencere öğesi ekle'yi seçin.
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.
1. Adım: HTML
Önceki örnekteki dosyayı hello-world.html
kopyalayın ve kopyayı olarak hello-world2.html
yeniden 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 gidin, 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/RestClient
için çağrıyı güncelleştireceğizVSS.require
.
klasörünün Shared Queries
altında adlı Feedback
bir sorgu hakkında bilgi almak için bu REST istemcisini kullanabiliriz.
'a VSS.register
geç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 WidgetStatusHelper
kullanı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ındaShared 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.
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.html
yeniden adlandırın. adlı configuration.html
baş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.require
seç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 notify
widgetConfigurationContext
çağrılması gerekir. bu örnekte WidgetHelpers.WidgetEvent.ConfigurationChange
olayı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.register
satırdaki pencere öğesinin HelloWorldWidget2
HelloWorldWidget3
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 HelloWorldWidget3
IWidget
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 dereload
ö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ğineload
karşılık gelen işlevinreload
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.
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 paketleyip gü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.
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.
Geri Bildirim
https://aka.ms/ContentUserFeedback.
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz.Gönderin ve geri bildirimi görüntüleyin