Uyarlamalı Kartlar Şablon Dili

Şablon oluşturma, Uyarlamalı Kartınızdaki verilerindüzenden ayrılmasını sağlar. Şablon dili, şablon yazmak için kullanılan söz dizimidir.

Uyarlamalı Kart Şablonuna genel bakış için lütfen bunu okuyun

Önemli

Mayıs 2020 Sürüm AdayındakiUyumsuzluk Yaratan Değişiklikler

tr-TR: Şablon oluşturma süreci için çok çalıştık ve sonunda son aşamadayız! Sürümün sonuna yaklaşırken bazı ufak uyumsuzluk yaratan değişiklikler yapmak zorunda kaldık.

Mayıs 2020 itibarıyla büyük değişiklikler

Bağlama söz dizimi {...}'den ${...}'e değiştirildi.
- Örneğin: "text": "Hello {name}" olur "text": "Hello ${name}"

Verilere bağlama

Şablon yazmak, kartınızın "statik olmayan" içeriğini "bağlama ifadeleri" ile değiştirmek kadar basittir.

Statik kart yükü

{
   "type": "TextBlock",
   "text": "Matt"
}

Şablon veri yükü

{
   "type": "TextBlock",
   "text": "${firstName}"
}

Bağlama ifadeleri, statik içeriğin olabileceği hemen her yere yerleştirilebilir
Bağlama söz dizimi ${ ile başlar ve } ile biter. Örneğin, ${myProperty}
Nesne hiyerarşisinin alt nesnelerine erişmek için Nokta gösterimini kullanın. Örneğin, ${myParent.myChild}
Zarif null işleme, nesne grafiğinde null bir özelliğe eriştiğinizde istisna almazsınız sağlar.
Bir dizideki anahtara veya öğelere göre özellikleri almak için Dizin Oluşturucu söz dizimlerini kullanın. Örneğin, ${myArray[0]}

Verileri sağlama

Artık bir şablonunuz olduğuna göre, şablonu tamamlayan verileri sağlamak isteyeceksiniz. Bunu yapmak için iki seçeneğiniz vardır:

Seçenek A: Şablon yükü içinde satır içi yerleştirme. Verileri AdaptiveCard şablon yükü içerisinde satır içi olarak sağlayabilirsiniz. Bunu yapmak için kök $data nesneye bir AdaptiveCard öznitelik eklemeniz yeterlidir.
Seçenek B: Ayrı bir veri nesnesi olarak. Bu seçenekle, çalışma zamanında Şablon Oluşturma SDK'sına iki ayrı nesne sağlarsınız: template ve data. Genellikle bir şablon oluşturacağınız ve dinamik verileri daha sonra sağlamak isteyeceğiniz için bu daha yaygın bir yaklaşım olacaktır.

Seçenek A: Satır içi veriler

{
    "type": "AdaptiveCard",
    "$data": {
        "employee": {
            "name": "Matt",
            "manager": { "name": "Thomas" },
            "peers": [{
                "name": "Andrew" 
            }, { 
                "name": "Lei"
            }, { 
                "name": "Mary Anne"
            }, { 
                "name": "Adam"
            }]
        }
    },
    "body": [
        {
            "type": "TextBlock",
            "text": "Hi ${employee.name}! Here's a bit about your org..."
        },
        {
            "type": "TextBlock",
            "text": "Your manager is: ${employee.manager.name}"
        },
        {
            "type": "TextBlock",
            "text": "3 of your peers are: ${employee.peers[0].name}, ${employee.peers[1].name}, ${employee.peers[2].name}"
        }
    ]
}

B Seçeneği: Şablonu verilerden ayırma

Alternatif olarak (ve büyük olasılıkla) verileri eklemeden yeniden kullanılabilir bir kart şablonu oluşturacaksınız. Bu şablon dosya olarak depolanabilir ve kaynak denetimine eklenebilir.

EmployeeCardTemplate.json

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "text": "Hi ${employee.name}! Here's a bit about your org..."
        },
        {
            "type": "TextBlock",
            "text": "Your manager is: ${employee.manager.name}"
        },
        {
            "type": "TextBlock",
            "text": "3 of your peers are: ${employee.peers[0].name}, ${employee.peers[1].name}, ${employee.peers[2].name}"
        }
    ]
}

Ardından Şablonlama SDK'larını kullanarak verileri yükleyin ve çalışma zamanında sağlayın.

JavaScript örneği

Adaptivecards-templating paketini kullanma.

var template = new ACData.Template({ 
    // EmployeeCardTemplate goes here
});

// Specify data at runtime
var card = template.expand({
    $root: {
        "employee": {
            "name": "Matt",
            "manager": { "name": "Thomas" },
            "peers": [{
                "name": "Andrew" 
            }, { 
                "name": "Lei"
            }, { 
                "name": "Mary Anne"
            }, { 
                "name": "Adam"
            }]
        }
    }
});

// Now you have an AdaptiveCard ready to render!

Tasarımcı Desteği

Uyarlamalı Kart Tasarımcısı şablon oluşturma işlemini destekleyecek şekilde güncelleştirildi.

Şu konumda deneyin: https://adaptivecards.microsoft.com/designer

Örnek Veri Düzenleyicisi - "Önizleme Modu" içinde veriye bağlı kartı görüntülemek için burada örnek verileri belirtin. Bu bölmede, mevcut örnek verilerden Veri Yapısı'nı doldurmak için küçük bir düğme vardır.
Önizleme Modu - Düzenleme deneyimi ile sample-data-preview deneyimi arasında geçiş yapmak için araç çubuğu düğmesine basın
Örnek aç - Çeşitli örnek yükleri açmak için bu düğmeye tıklayın

Gelişmiş bağlama

Bağlama kapsamları

Çeşitli bağlama kapsamlarına erişmek için birkaç ayrılmış anahtar sözcük vardır.

{
    "${<property>}": "Implicitly binds to `$data.<property>`",
    "$data": "The current data object",
    "$root": "The root data object. Useful when iterating to escape to parent object",
    "$index": "The current index when iterating"
}

Öğelere veri bağlamı atama

Herhangi bir öğeye "veri bağlamı" atamak için öğesine bir $data öznitelik ekleyin.

{
    "type": "Container",
    "$data": "${mySubObject}",
    "items": [
        {
            "type": "TextBlock",
            "text": "This TextBlock is now scoped directly to 'mySubObject': ${mySubObjectProperty}"
        },
        {
            "type": "TextBlock",
            "text": "To break-out and access the root data, use: ${$root}"
        }
    ]
}

Dizideki öğeleri yineleme

Uyarlamalı Kart öğesinin $data özelliği bir diziye bağlıysa, öğenin kendisi dizideki her öğe için yinelenir.
Özellik değerlerinde kullanılan tüm bağlama ifadelerinin (${myProperty}) kapsamı dizideki tek tek öğeye göre belirlenmiştir.
Bir dize dizisine bağlanıyorsanız, tek tek dize öğesine erişmek için kullanın ${$data} . Örneğin, "text": "${$data}"

Örneğin, TextBlock bir dizi olduğundan $data aşağıdakiler 3 kez yinelenir. özelliğinin text dizideki tek bir nesnenin name özelliğine nasıl bağlı olduğuna dikkat edin.

{
    "type": "Container",
    "items": [
        {
            "type": "TextBlock",
            "$data": [
                { "name": "Matt" }, 
                { "name": "David" }, 
                { "name": "Thomas" }
            ],
            "text": "${name}"
        }
    ]
}

Sonuç olarak:

{
    "type": "Container",
    "items": [ 
        {
            "type": "TextBlock",
            "text": "Matt"
        },
        {
            "type": "TextBlock",
            "text": "David"
        }
        {
            "type": "TextBlock",
            "text": "Thomas"
        }
    ]
}

Yerleşik işlevler

Zengin bir yardımcı işlev paketi olmadan şablon oluşturma dili tamamlanmaz. Uyarlamalı Kart Şablon Oluşturma, birçok farklı platformda değerlendirilebilecek ifadeleri bildirmeye yönelik açık bir standart olan Uyarlamalı İfade Dili'nin (AEL) üzerine kurulmuştur. Bu, "Logic Apps"in tam bir üst kümesidir, bu nedenle Power Automate gibi benzer söz dizimini kullanabilirsiniz.

Bu, yerleşik işlevlerin yalnızca küçük bir örneklemesidir.

Uyarlamalı İfade Dili Önceden oluşturulmuş işlevlerin tam listesine göz atın.

Koşullu değerlendirme

if(expression, trueValue, falseValue)

if Örnek

{
    "type": "TextBlock",
    "color": "${if(priceChange >= 0, 'good', 'attention')}"
}

JSON Ayrıştırma

json(jsonString) - JSON dizesini ayrıştırma

json Örnek

Bu, message özelliğinin JSON-serileştirilmiş bir dize olduğu bir Azure DevOps yanıtıdır. Dizedeki değerlere erişmek için şablonumuzda işlevini kullanmamız json gerekir.

veri

{
    "id": "1291525457129548",
    "status": 4,
    "author": "Matt Hidinger",
    "message": "{\"type\":\"Deployment\",\"buildId\":\"9542982\",\"releaseId\":\"129\",\"buildNumber\":\"20180504.3\",\"releaseName\":\"Release-104\",\"repoProvider\":\"GitHub\"}",
    "start_time": "2018-05-04T18:05:33.3087147Z",
    "end_time": "2018-05-04T18:05:33.3087147Z"
}

Kullanım

{
    "type": "TextBlock",
    "text": "${json(message).releaseName}"
}

Sonuç olarak

{
    "type": "TextBlock",
    "text": "Release-104"
}

Özel işlevler

Özel işlevler , Şablon OLUŞTURMA SDK'larındaki API'ler aracılığıyla desteklenir.

Koşullu düzen `$when` ile

Bir koşul karşılanırsa, bir öğeyi tamamen bırakmak için $when özelliğini kullanın. Eğer $whenfalse olarak değerlendirilirse, öğe kullanıcıya gösterilmeyecektir.

{
    "type": "AdaptiveCard",
    "$data": {
        "price": "35"
    },
    "body": [
        {
            "type": "TextBlock",
            "$when": "${price > 30}",
            "text": "This thing is pricy!",
            "color": "attention",
        },
         {
            "type": "TextBlock",
            "$when": "${price <= 30}",
            "text": "Dang, this thing is cheap!",
            "color": "good"
        }
    ]
}

Şablon oluşturma

Şu anda "parça" şablonlarını birleştirmek için destek yoktur. Ancak seçenekleri araştırıyoruz ve yakında daha fazlasını paylaşmayı umuyoruz. Buradaki her türlü düşünce memnuniyetle karşılanır.

Örnekler

Her türlü yeni şablonlu kartı keşfetmek için güncelleştirilmiş Örnekler sayfasına göz atın.

Last updated on 2025-12-18

Aracılığıyla paylaş