Baca dalam bahasa Inggris

Bagikan melalui


SDK Templat Kartu Adaptif

SDK Templat Kartu Adaptif memudahkan untuk mengisi templat kartu dengan data nyata di platform apa pun yang didukung.

Silakan baca ini untuk gambaran umum Templat Kartu Adaptif

Penting

Memutus perubahan dalam Kandidat Rilis Mei 2020

Kami telah bekerja keras untuk merilis templat, dan akhirnya kami berada di peregangan rumah! Kami harus membuat beberapa kecil melanggar perubahan saat kami menutup pada rilis.

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 di bawah ini untuk detail lengkapnya.

JavaScript

Pustaka templat kartu adaptif tersedia di npm dan melalui CDN. Lihat tautan paket untuk dokumentasi lengkap.

npm

npm install

npm install adaptivecards-templating

CDN

<script src="https://unpkg.com/adaptivecards-templating/dist/adaptivecards-templating.min.js"></script>

Penggunaan

Sampel di bawah ini mengasumsikan Anda juga telah menginstal pustaka kartu adaptif untuk merender kartu.

Jika Anda tidak berencana untuk merender kartu maka Anda dapat menghapus parse kode dan render .

import * as ACData from "adaptivecards-templating";
import * as AdaptiveCards from "adaptivecards";
 
// Define a template payload
var templatePayload = {
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Hello ${name}!"
        }
    ]
};
 
// Create a Template instance from the template payload
var template = new ACData.Template(templatePayload);
 
// Expand the template with your `$root` data object.
// This binds it to the data and produces the final Adaptive Card payload
var cardPayload = template.expand({
   $root: {
      name: "Matt Hidinger"
   }
});
 
// OPTIONAL: Render the card (requires that the adaptivecards library be loaded)
var adaptiveCard = new AdaptiveCards.AdaptiveCard();
adaptiveCard.parse(cardPayload);
document.getElementById('exampleDiv').appendChild(adaptiveCard.render());

.NET

Nuget install

dotnet add package AdaptiveCards.Templating

Penggunaan

// Import the library 
using AdaptiveCards.Templating;
var templateJson = @"
{
    ""type"": ""AdaptiveCard"",
    ""version"": ""1.2"",
    ""body"": [
        {
            ""type"": ""TextBlock"",
            ""text"": ""Hello ${name}!""
        }
    ]
}";

// Create a Template instance from the template payload
AdaptiveCardTemplate template = new AdaptiveCardTemplate(templateJson);

// You can use any serializable object as your data
var myData = new
{
    Name = "Matt Hidinger"
};

// "Expand" the template - this generates the final Adaptive Card payload
string cardJson = template.Expand(myData);

Fungsi Kustom

Fungsi kustom dapat ditambahkan ke Pustaka Ekspresi Adaptif selain fungsi bawaan.

Dalam contoh di bawah ini, fungsi kustom stringFormat ditambahkan, dan funtion digunakan untuk memformat string.

string jsonTemplate = @"{
    ""type"": ""AdaptiveCard"",
    ""version"": ""1.0"",
    ""body"": [{
        ""type"": ""TextBlock"",
        ""text"": ""${stringFormat(strings.myName, person.firstName, person.lastName)}""
    }]
}";

string jsonData = @"{
    ""strings"": {
        ""myName"": ""My name is {0} {1}""
    },
    ""person"": {
        ""firstName"": ""Andrew"",
        ""lastName"": ""Leader""
    }
}";

AdaptiveCardTemplate template = new AdaptiveCardTemplate(jsonTemplate);

var context = new EvaluationContext
{
    Root = jsonData
};

// a custom function is added
AdaptiveExpressions.Expression.Functions.Add("stringFormat", (args) =>
{
    string formattedString = "";

    // argument is packed in sequential order as defined in the template
    // For example, suppose we have "${stringFormat(strings.myName, person.firstName, person.lastName)}"
    // args will have following entries
    // args[0]: strings.myName
    // args[1]: person.firstName
    // args[2]: strings.lastName
    if (args[0] != null && args[1] != null && args[2] != null) 
    {
        string formatString = args[0];
        string[] stringArguments = {args[1], args[2] };
        formattedString = string.Format(formatString, stringArguments);
    }
    return formattedString;
});

string cardJson = template.Expand(context);

Pemecahan Masalah

T. Mengapa saya mengalami panggilan expand()AdaptiveTemplateException ?
J. Jika pesan kesalahan Anda terlihat seperti '<item> yang menyinggung' pada baris, '<nomor> baris' salah format untuk '$data : ' pair".
Pastikan bahwa nilai yang disediakan untuk "$data" adalah json yang valid seperti angka, boolean, objek, dan array, atau mengikuti sintaks yang benar untuk bahasa Templat Adaptif, dan entri ada dalam konteks data di nomor baris.

T. Mengapa saya mengalami panggilan expand()ArgumentNullException?
J. Jika pesan kesalahan Anda terlihat seperti" Periksa apakah konteks data induk diatur, atau masukkan nilai bukan null untuk '<item> yang menyinggung' pada baris, '<nomor> baris'".
Ini menunjukkan bahwa tidak ada konteks data untuk pengikatan data yang diminta. Pastikan bahwa konteks data akar diatur, jika ada, pastikan bahwa konteks data apa pun tersedia untuk pengikatan saat ini seperti yang ditunjukkan oleh nomor baris.

T. Mengapa tanggal/waktu dalam format RFC 3389 misalnya "2017-02-14T06:08:00Z" saat digunakan dengan templat tidak berfungsi dengan fungsi TIME/DATE?
J. .NET sdk nuget versi 1.0.0-rc.0 menunjukkan perilaku ini. perilaku ini dikoreksi dalam rilis berikutnya. json.Net perilaku default deserilizer mengubah string format tanggal/waktu, dan dinonaktifkan untuk rilis berikutnya. Gunakan fungsi formatDateTime() untuk memformat string tanggal/waktu ke RFC 3389 seperti yang terlihat dalam contoh ini, atau Anda dapat melewati fungsi TIME/DATE, dan cukup gunakan formatDateTime(). Untuk informasi lebih lanjut tentang formatDateTime(), silakan buka di sini.