Baca dalam bahasa Inggris

Bagikan melalui


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.

Perubahan mencolok per Mei 2020

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

Bagaimana templat dapat membantu Anda

Pembuatan 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 satu kali 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 meningkatkan produktivitas pengguna atau membantu kita 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 Anda 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 ujung belakang atau langsung pada klien.
  3. Template Service adalah layanan bukti konsep yang memungkinkan siapa pun untuk menemukan, berkontribusi, dan berbagi serangkaian templat terkenal.

Bahasa Templat

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.

Designer screenshot

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

Dukungan SDK

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 npm install adaptivecards-templating Dokumentasi
.NET Nuget install 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 SDK templat

Layanan 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

Apa selanjutnya dan mengirim umpan balik

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!