Templat Kartu Adaptif
Kami sangat senang dapat berbagi pratinjau alat baru yang akan membantu Anda membuat, menggunakan kembali, dan berbagi Kartu Adaptif.
Penting
Memutus perubahan 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.
- Sintaks pengikatan berubah dari
{...}
ke${...}
.- Misalnya:
"text": "Hello {name}"
menjadi"text": "Hello ${name}"
- Misalnya:
- JAVAScript API tidak lagi berisi
EvaluationContext
objek. Cukup teruskan data Anda keexpand
fungsi . Silakan lihat halaman SDK untuk detail selengkapnya. - .NET API dirancang ulang agar lebih cocok dengan JavaScript API. Silakan lihat halaman SDK untuk detail selengkapnya.
Pembuatan templat memungkinkan pemisahan data dari tata letak dalam Kartu Adaptif.
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 satu kali dan tidak memudahkan untuk mengubah desain kartu nanti setelah Anda mengonversinya menjadi kode.
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.
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.
Dengan memisahkan data dari konten, itu membuka pintu untuk AI dan layanan lain untuk "alasan" atas data dalam kartu yang kita lihat dan meningkatkan produktivitas pengguna atau membantu kita menemukan hal-hal.
Ini terdiri dari 3 komponen utama:
- Bahasa Templat adalah sintaks yang digunakan untuk menulis templat. Perancang bahkan memungkinkan Anda mempratinjau templat Anda pada waktu desain dengan menyertakan "data sampel".
- Templating SDK akan ada di semua platform Kartu Adaptif yang didukung. SDK ini memungkinkan Anda mengisi templat dengan data nyata, di ujung belakang atau langsung pada klien.
- Template Service adalah layanan bukti konsep yang memungkinkan siapa pun untuk menemukan, berkontribusi, dan berbagi serangkaian templat terkenal.
Bahasa templat adalah sintaks yang digunakan untuk menulis templat Kartu Adaptif.
Catatan
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.
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 waktu proses 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
SDK Templat memungkinkan untuk mengisi templat dengan data nyata.
Catatan
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.
Platform | Paket | Instal | Dokumentasi |
---|---|---|---|
JavaScript | npm install adaptivecards-templating |
Dokumentasi | |
.NET | dotnet add package AdaptiveCards.Templating |
Dokumentasi |
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!
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 SDK templat
Layanan Templat Kartu Adaptif adalah layanan bukti konsep yang memungkinkan siapa pun menemukan, berkontribusi, dan berbagi serangkaian 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 lurus ke depan, tetapi layanan sebenarnya menawarkan lebih banyak, termasuk kemampuan untuk menganalisis data Anda dan menemukan templat yang mungkin berfungsi 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
Pembuatan templat dan pemisahan presentasi dari data membawa kita jauh lebih dekat ke misi kita: "pertukaran konten standar ekosistem antara aplikasi dan layanan". Kami punya banyak hal untuk dikirim di area ini, jadi tetaplah fokus dan beri tahu kami cara kerjanya untuk Anda di GitHub!