Memulai

  • Artikel

Kartu Adaptif adalah model objek kartu berseri JSON.

Struktur Kartu Adaptif

Struktur dasar kartu adalah sebagai berikut:

  • AdaptiveCard - Objek akar menggambarkan AdaptiveCard itu sendiri, termasuk makeup elemennya, tindakannya, bagaimana seharusnya diucapkan, dan versi skema yang diperlukan untuk merendernya.
  • body - Tubuh kartu terdiri dari blok bangunan yang dikenal sebagai elements. Elemen dapat disusun dalam pengaturan yang hampir tak terbatas untuk membuat banyak jenis kartu.
  • actions - Banyak kartu memiliki serangkaian tindakan yang mungkin dilakukan pengguna padanya. Properti ini menjelaskan tindakan yang biasanya dirender di "bilah tindakan" di bagian bawah.

Contoh Kartu

Kartu sampel ini yang menyertakan satu baris teks diikuti oleh gambar.

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Here is a ninja cat"
        },
        {
            "type": "Image",
            "url": "http://adaptivecards.io/content/cats/1.png"
        }
    ]
}

Properti Type.

Setiap elemen memiliki type properti yang mengidentifikasi jenis objek itu. Melihat kartu di atas, Anda dapat melihat kita memiliki dua elemen, a TextBlock dan Image.

Semua elemen Kartu Adaptif menumpuk secara vertikal dan memperluas ke lebar induknya (pikirkan display: block dalam HTML). Namun, Anda dapat menggunakan ColumnSet untuk membuat kolom kontainer berdampingan.

Elemen Adaptif

Elemen yang paling mendasar adalah:

  • TextBlock - menambahkan blok teks dengan properti untuk mengontrol tampilan teks
  • Gambar - menambahkan gambar dengan properti untuk mengontrol seperti apa gambar tersebut

Elemen kontainer

Kartu juga dapat memiliki kontainer, yang mengatur kumpulan elemen anak.

  • Kontainer - Mendefinisikan kumpulan elemen
  • ColumnSet/Column - Menentukan kumpulan kolom, setiap kolom adalah kontainer
  • FactSet - Kontainer Fakta
  • ImageSet - Kontainer Gambar sehingga UI dapat menampilkan pengalaman galeri foto yang sesuai untuk koleksi gambar.

Elemen input

Elemen input memungkinkan Anda meminta antarmuka pengguna asli untuk membangun formulir sederhana:

  • Input.Text - mendapatkan konten teks dari pengguna
  • Input.Date - mendapatkan Tanggal dari pengguna
  • Input.Time - dapatkan Waktu dari pengguna
  • Input.Number - mendapatkan Nomor dari pengguna
  • Input.ChoiceSet - Memberi pengguna serangkaian pilihan dan meminta mereka memilih
  • Input.Toggle - Memberi pengguna satu pilihan antara dua item dan minta mereka memilih

Tindakan

Tindakan menambahkan tombol ke kartu. Ini dapat melakukan berbagai tindakan, seperti membuka URL atau mengirimkan beberapa data.

  • Action.OpenUrl - tombol membuka URL eksternal untuk ditampilkan
  • Action.ShowCard - Meminta sub-kartu untuk ditampilkan kepada pengguna.
  • Action.Submit - Minta semua elemen input dikumpulkan ke dalam objek yang kemudian dikirimkan kepada Anda melalui beberapa metode yang ditentukan oleh aplikasi host.

Contoh Action.Submit: Dengan Skype, Action.Submit akan mengirim aktivitas bot Bot Framework kembali ke bot dengan properti Nilai yang berisi objek dengan semua data input di dalamnya.

Selengkapnya