Aracılığıyla paylaş

Uyarlamalı Kartlar Şablonlama

Uyarlamalı Kartlar oluşturmanıza, yeniden kullanmanıza ve paylaşmanıza yardımcı olacak yeni araçların önizlemesini paylaşmak için heyecanlıyız.

Önemli

Mayıs 2020 Sürüm Adayındakapsamlı değişiklikler

Şablon oluşturma sürümü adayı, eski paketleri kullanıyorsanız bilmeniz gereken bazı küçük hataya neden olan değişiklikleri içerir. Ayrıntılar için aşağıya bakın.

Mayıs 2020 itibarıyla uyumsuzluk yaratan değişiklikler

  1. Bağlama söz dizimi {...}'dan ${...}'ye değiştirilmiştir.
    • Örneğin: "text": "Hello {name}" olur "text": "Hello ${name}"
  2. JavaScript API'sinde artık nesne EvaluationContext yok. Verilerinizi expand işlevine göndermeniz yeterlidir. Tüm ayrıntılar için lütfen SDK sayfasına bakın.
  3. .NET API'si, JavaScript API'sine daha yakın olacak şekilde yeniden tasarlandı. Tüm ayrıntılar için lütfen SDK sayfasına bakın.

Şablon oluşturma size nasıl yardımcı olabilir?

Şablon oluşturma, Verilerin Uyarlamalı Karttaki düzenden ayrılmasını sağlar.

Kartı bir kez tasarlamaya ve ardından gerçek verilerle doldurmaya yardımcı olur

Bugün Uyarlamalı Kart Tasarımcısı'nı kullanarak bir kart oluşturmak ve yükü dinamik içerikle doldurmak için bu JSON'u kullanmak mümkün değildir. Bunu başarmak için bir JSON dizesi oluşturmak için özel kod yazmanız veya Nesne Modeli SDK'larını kullanarak kartınızı temsil eden bir OM oluşturmanız ve JSON'a seri hale getirmeniz gerekir. Her iki durumda da Tasarımcı tek seferlik tek yönlü bir işlemdir ve daha sonra kart tasarımını koda dönüştürdükten sonra kolayca ayarlama yapmaz.

Kablo üzerinden iletimleri daha küçük hale getirir

Şablon ve verilerin doğrudan istemcide birleştirilebildiği bir dünya düşünün. Başka bir deyişle, aynı şablonu birden çok kez kullanıyorsanız veya yeni verilerle güncelleştirmek istiyorsanız cihaza yeni veriler göndermeniz yeterlidir ve aynı şablonu tekrar tekrar kullanabilir.

Yalnızca sağladığınız verilerden harika görünümlü bir kart oluşturmanıza yardımcı olur

Uyarlamalı Kartların harika olduğunu düşünüyoruz, ancak kullanıcıya göstermek istediğiniz her şey için Uyarlamalı Kart yazmanız gerekmiyorsa ne olur? Şablon hizmetiyle (aşağıda açıklanmıştır) herkesin her tür veri üzerinde şablonlara katkıda bulunabileceği, şablonları keşfedebileceği ve paylaşabileceği bir dünya oluşturabiliriz.

Kendi projelerinizde, kuruluşunuzda veya İnternet'in tamamıyla paylaşın.

Yapay zeka ve diğer hizmetler kullanıcı deneyimlerini geliştirebilir

Verileri içerikten ayırarak, yapay zekanın ve diğer hizmetlerin gördüğümüz kartlardaki veriler üzerinde "mantık yürütmesine" ve kullanıcı üretkenliğini artırmasına veya bir şeyler bulmamıza yardımcı olmasına olanak tanır.

Uyarlamalı Kartlar Şablon Oluşturma nedir?

3 ana bileşenden oluşur:

  1. Şablon Dili, şablon yazmak için kullanılan söz dizimidir. Tasarımcı, "örnek veriler" ekleyerek şablonlarınızı tasarım zamanında önizlemenize bile olanak tanır.
  2. Şablon Oluşturma SDK'ları desteklenen tüm Uyarlamalı Kart platformlarında bulunur. Bu SDK'lar, bir şablonu arka uçta veya doğrudan istemcide gerçek verilerle doldurmanıza olanak sağlar.
  3. Şablon Hizmeti, herkesin bir dizi iyi bilinen şablonu bulmasına, katkıda bulunmasına ve paylaşmasına olanak tanıyan bir kavram kanıtı hizmetidir.

Şablon Dili

Şablon dili, Uyarlamalı Kart şablonu yazmak için kullanılan söz dizimidir.

Uyarı

Örneği takip etmek için yeni bir sekme açarak aşağıdaki adımları izleyin.

https://adaptivecards.io/designer

Tasarım modu ile önizleme modu arasında geçiş yapmak için Önizleme Modu düğmesine tıklayın.

Tasarımcı ekran görüntüsü

Yeni güncelleştirilen Tasarımcı, şablon yazma ve kartın tasarım zamanında önizlemesini görüntülemek için Örnek Veriler sağlama desteği ekler.

Aşağıdaki örneği Kart Yükü Düzenleyicisi bölmesine yapıştırın:

EmployeeCardTemplate.json

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "ColumnSet",
            "style": "accent",
            "bleed": true,
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${photo}",
                            "altText": "Profile picture",
                            "size": "Small",
                            "style": "Person"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Hi ${name}!",
                            "size": "Medium"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Here's a bit about your org...",
                            "spacing": "None"
                        }
                    ]
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "Your manager is: **${manager.name}**"
        },
        {
            "type": "TextBlock",
            "text": "Your peers are:"
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "$data": "${peers}",
                    "title": "${name}",
                    "value": "${title}"
                }
            ]
        }
    ]
}

Ardından aşağıdaki JSON verilerini Örnek Veri Düzenleyicisi'ne yapıştırın.

Örnek Veriler , gerçek veriler geçirildiğinde kartınızın çalışma zamanında tam olarak nasıl görüneceğini görmenize yardımcı olur.

EmployeeData

{
    "name": "Matt",
    "photo": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
    "manager": {
        "name": "Thomas",
        "title": "PM Lead"
    },
    "peers": [
        {
            "name": "Lei",
            "title": "Sr Program Manager"
        },
        {
            "name": "Andrew",
            "title": "Program Manager II"
        },
        {
            "name": "Mary Anne",
            "title": "Program Manager"
        }
    ]
}

Önizleme Modu düğmesine tıklayın. Kartın yukarıda sağlanan örnek verilere göre işlendiğini görmelisiniz. Örnek verilerde değişiklik yapmak ve kart güncelleştirmesini gerçek zamanlı olarak izlemekte çekinmeyin.

Tebrikler, ilk Uyarlamalı Kart Şablonunuzu yeni yazmışsınız! Şimdi şablonu gerçek verilerle doldurmayı öğrenelim.

Şablon dili hakkında daha fazla bilgi edinin

SDK desteği

Şablon oluşturma SDK'ları, bir şablonu gerçek verilerle doldurmayı mümkün hale getirir.

Uyarı

Şu anda .NET ve NodeJS için şablon OLUŞTURMA SDK'ları kullanılabilir. Zamanla iOS, Android, UWP vb. kalan tüm Uyarlamalı Kartlar platformu için şablon oluşturma SDK'larını kullanıma sunacağız.

Platforma Paket Yükleme Dokümantasyon
JavaScript npm yükleme npm install adaptivecards-templating Dokümantasyon
.NET Nuget yüklemesi dotnet add package AdaptiveCards.Templating Dokümantasyon

JavaScript Örneği

Aşağıdaki JavaScript, bir şablonu verilerle doldurmak için kullanılacak genel düzeni gösterir.

var template = new ACData.Template({ 
    // Card Template JSON
});

var card = template.expand({
    $root: {
        // Data Fields
    }
});

// Now you have an AdaptiveCard ready to render!

C# Örneği

Aşağıdaki C# dosyasında bir şablonu verilerle doldurmak için kullanılacak genel desen gösterilmektedir.

var template = new AdaptiveCards.Templating.AdaptiveCardTemplate(cardJson);
   
var card = template.Expand(new {Key="Value"});

// Now you have an AdaptiveCard ready to render!

Şablon oluşturma SDK'ları hakkında daha fazla bilgi edinin

Şablon Hizmeti

Uyarlamalı Kartlar Şablon Hizmeti, herkesin bir dizi iyi bilinen şablonu bulmasına, katkıda bulunmasına ve paylaşmasına olanak tanıyan bir kavram kanıtı hizmetidir.

Bazı verileri görüntülemek ancak bunun için özel uyarlamalı kart yazmak istemiyorsanız kullanışlıdır.

Şablon alma API'si yeterince ileriye yöneliktir, ancak hizmet aslında verilerinizi analiz etme ve işinize yarayabilecek bir şablon bulma da dahil olmak üzere çok daha fazlasını sunar.

HTTP GET https://templates.adaptivecards.io/graph.microsoft.com/Profile.json

Tüm şablonlar GitHub deposunda depolanan düz JSON dosyalarıdır, böylece herkes diğer açık kaynak kodlarında olduğu gibi bunlara katkıda bulunabilir.

Kart şablonu Hizmeti hakkında daha fazla bilgi edinin

Sonraki adımlar ve geri bildirim gönderme

Sununun verilerden ayrılması ve şablon oluşturma, "uygulamalar ve hizmetler arasında ekosistem standartlaştırılmış içerik alışverişi" misyonumuza çok daha yakın hale geliyor. Bu alanda teslim edecek çok şeyimiz var, bu nedenle bizi izlemeye devam edin ve GitHub'da sizin için nasıl çalıştığını bize bildirin!

  • Last updated on