Bagikan melalui

Templat Kartu Adaptif

Kami sangat senang berbagi pratinjau alat baru yang akan membantu Anda membuat, menggunakan kembali, dan berbagi Kartu Adaptif.

Penting

Perubahan yang Memutus dalam Kandidat Rilis Mei 2020

Kandidat rilis templat mencakup beberapa perubahan kecil yang harus Anda ketahui jika Anda telah menggunakan paket yang lebih lama. Lihat di bawah untuk detailnya.

Perubahan mencolok per Mei 2020

  1. Sintaks pengikatan diubah dari {...} ke ${...}.
    • Misalnya: "text": "Hello {name}" menjadi "text": "Hello ${name}"
  2. API JavaScript tidak lagi berisi EvaluationContext objek. Cukup teruskan data Anda ke fungsi expand. Silakan lihat halaman SDK untuk detail selengkapnya.
  3. API .NET didesain ulang agar lebih cocok dengan API JavaScript. Silakan lihat halaman SDK untuk detail selengkapnya.

Bagaimana templat dapat membantu Anda

Templat memungkinkan pemisahan data dari tata letak dalam Kartu Adaptif.

Ini membantu merancang kartu sekali, dan kemudian mengisinya dengan data nyata

Saat ini tidak mungkin untuk membuat kartu menggunakan Perancang Kartu Adaptif dan menggunakan JSON tersebut untuk mengisi payload dengan konten dinamis. Untuk mencapai hal ini, Anda harus menulis kode kustom untuk membangun string JSON, atau menggunakan Object Model SDK untuk membangun OM yang mewakili kartu Anda dan menserialisasikannya ke JSON. Dalam kedua kasus, Perancang adalah operasi satu arah yang dilakukan hanya sekali dan tidak memudahkan untuk mengubah desain kartu nanti setelah Anda mengonversinya menjadi kode.

Itu membuat transmisi melalui kawat lebih kecil

Bayangkan dunia di mana templat dan data dapat digabungkan langsung pada klien. Ini berarti jika Anda menggunakan templat yang sama beberapa kali, atau ingin memperbaruinya dengan data baru, Anda hanya perlu mengirim data baru ke perangkat dan dapat menggunakan kembali templat yang sama berulang-ulang.

Ini membantu Anda membuat kartu yang terlihat hebat hanya dari data yang Anda berikan

Kami pikir Kartu Adaptif sangat bagus, tetapi bagaimana jika Anda tidak perlu menulis Kartu Adaptif untuk semua yang ingin Anda tampilkan kepada pengguna? Dengan layanan templat (dijelaskan di bawah) kita dapat membuat dunia di mana semua orang dapat berkontribusi, menemukan, dan berbagi templat melalui semua jenis data.

Bagikan dalam proyek Anda sendiri, organisasi Anda, atau dengan seluruh internet.

AI dan layanan lainnya dapat meningkatkan pengalaman pengguna

Dengan memisahkan data dari konten, itu membuka pintu untuk AI dan layanan lain untuk "alasan" atas data dalam kartu yang kita lihat dan tingkatkan produktivitas pengguna atau bantu kami menemukan hal-hal.

Apa itu Templat Kartu Adaptif?

Ini terdiri dari 3 komponen utama:

  1. Bahasa Templat adalah sintaks yang digunakan untuk menulis templat. Perancang bahkan memungkinkan Anda mempratinjau templat pada waktu desain dengan menyertakan "data sampel".
  2. Templating SDK akan ada di semua platform Kartu Adaptif yang didukung. SDK ini memungkinkan Anda mengisi templat dengan data nyata, di back-end atau langsung pada klien.
  3. Layanan Templat adalah layanan bukti konsep yang memungkinkan siapa pun untuk menemukan, berkontribusi, dan berbagi sekumpulan templat terkenal.

Bahasa Templat

Bahasa templat adalah sintaks yang digunakan untuk menulis templat Kartu Adaptif.

Nota

Ikuti contoh di bawah ini dengan membuka tab baru ke

https://adaptivecards.io/designer

Klik tombol Mode Pratinjau untuk beralih antara mode desain dan mode pratinjau.

Cuplikan layar perancang

Perancang yang baru diperbarui menambahkan dukungan untuk menulis templat dan menyediakan Data Sampel untuk mempratinjau kartu pada waktu desain.

Tempelkan contoh di bawah ini ke panel Editor Payload Kartu :

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}"
                }
            ]
        }
    ]
}

Kemudian tempelkan data JSON di bawah ini ke Editor Data Sampel.

Data Sampel membantu Anda melihat dengan tepat bagaimana kartu Anda akan muncul pada runtime saat meneruskan data aktual.

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"
        }
    ]
}

Klik tombol Mode Pratinjau . Anda akan melihat render kartu sesuai dengan data sampel yang disediakan di atas. Jangan ragu untuk membuat perubahan pada data sampel dan menonton pembaruan kartu secara realtime.

Selamat, Anda baru saja menulis Templat Kartu Adaptif pertama Anda! Selanjutnya mari kita pelajari cara mengisi templat dengan data nyata.

Pelajari selengkapnya tentang bahasa templat

Dukungan SDK

SDK Templat memungkinkan untuk mengisi templat dengan data nyata.

Nota

Saat ini templat SDK tersedia untuk .NET dan NodeJS. Seiring waktu kami akan merilis templat SDK untuk semua platform Kartu Adaptif yang tersisa, seperti iOS, Android, UWP, dll.

Plattform Paket Instalasi Dokumentasi
JavaScript penginstalan npm npm install adaptivecards-templating Dokumentasi
.NET Penginstalan Nuget dotnet add package AdaptiveCards.Templating Dokumentasi

Contoh JavaScript

JavaScript di bawah ini menunjukkan pola umum yang akan digunakan untuk mengisi templat dengan data.

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

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

// Now you have an AdaptiveCard ready to render!

Contoh C#

C# di bawah ini menunjukkan pola umum yang akan digunakan untuk mengisi templat dengan data.

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

// Now you have an AdaptiveCard ready to render!

Pelajari selengkapnya tentang templating SDK

Layanan Templat

Layanan Templat Kartu Adaptif adalah layanan bukti konsep yang memungkinkan siapa pun menemukan, berkontribusi, dan berbagi sekumpulan templat terkenal.

Ini berguna jika Anda ingin menampilkan beberapa data tetapi tidak ingin repot-repot menulis Kartu Adaptif kustom untuk itu.

API untuk mendapatkan templat cukup langsung, tetapi layanan sebenarnya menawarkan lebih banyak, termasuk kemampuan untuk menganalisis data Anda dan menemukan templat yang cocok untuk Anda.

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

Semua templat adalah file JSON datar yang disimpan dalam repositori GitHub sehingga siapa pun dapat berkontribusi kepada mereka seperti kode sumber terbuka lainnya.

Pelajari selengkapnya tentang Layanan templat kartu

Apa selanjutnya dan mengirim umpan balik

Templat dan pemisahan presentasi dari data membawa kami jauh lebih dekat ke misi kami: "pertukaran konten standar ekosistem antara aplikasi dan layanan". Kami punya banyak yang bisa kami sampaikan dalam bidang ini, jadi tetap pantau kami dan beri tahu kami cara kerjanya untuk Anda di GitHub!

  • Last updated on