Bagikan melalui

Layanan Templat Kartu Adaptif

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

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

Silakan baca ini untuk gambaran umum Templat Kartu Adaptif

Penting

Syarat dan perjanjian

Layanan tingkat alfa ini disediakan "apa adanya", dengan semua kesalahan dan tidak didukung dengan cara apa pun. Pengumpulan data apa pun dari layanan tunduk pada pernyataan privasi Microsoft.

Fitur-fitur ini dalam pratinjau dan dapat berubah. Umpan balik Anda tidak hanya diterima, tetapi penting untuk memastikan kami memberikan fitur yang Anda butuhkan.

Bagaimana layanan membantu saya?

Katakanlah saya baru saja mendapatkan sepotong data, mungkin itu data keuangan, data Microsoft Graph, data schema.org, atau data kustom dari dalam organisasi saya.

Sekarang saya ingin menampilkan data kepada pengguna.

Secara tradisional itu berarti menulis kode UI kustom di semua tumpukan front-end yang saya berikan kepada pengguna akhir.

Tetapi bagaimana jika ada dunia di mana aplikasi saya dapat "mempelajari" templat UI baru berdasarkan jenis data? Dunia di mana siapa pun dapat berkontribusi, meningkatkan, dan berbagi templat UI umum, dalam proyek mereka sendiri, dalam organisasi, atau untuk seluruh internet.

Apa itu layanan templat kartu?

Layanan templat kartu adalah titik akhir REST sederhana yang membantu:

  • Menemukan templat dengan menganalisis struktur data Anda
  • Dapatkan templat sehingga Anda dapat mengikatnya langsung pada klien, tanpa mengirim data Anda ke server atau pernah meninggalkan perangkat
  • Mengisi templat di server, saat pengikatan data sisi klien tidak sesuai atau mungkin

Di balik itu semua, adalah:

  • Repositori templat sumber terbuka bersama yang didukung oleh GitHub. (Repositori saat ini bersifat privat tetapi akan di publik segera setelah kami mengikat beberapa ujung yang longgar)
  • Semua templat adalah file JSON datar dalam repositori, yang membuat pengeditan, berkontribusi, dan berbagi bagian alami dari alur kerja pengembang.
  • Kode untuk layanan akan tersedia sehingga Anda dapat menghosting di mana pun paling masuk akal bagi Anda.

Menggunakan layanan

Mendapatkan semua templat

Titik akhir ini mengembalikan daftar semua templat yang diketahui.

HTTP GET https://templates.adaptivecards.io/list

Kutipan respons

{
  "graph.microsoft.com": {
    "templates": [
      {
        "file": "Files.json",
        "fullPath": "graph.microsoft.com/Files.json"
      },
      {
        "file": "Profile.json",
        "fullPath": "graph.microsoft.com/Profile.json"
      }
   ]
}

Menemukan templat

Titik akhir ini mencoba menemukan templat dengan menganalisis struktur data Anda.

HTTP POST https://templates.adaptivecards.io/find

Contoh

Katakanlah saya mengakses titik akhir Microsoft Graph untuk mendapatkan data organisasi tentang saya.

HTTP GET https://graph.microsoft.com/v1.0/me/

Graph Explorer screenshot

API tersebut mengembalikan data JSON, tetapi bagaimana cara menampilkannya kepada pengguna menggunakan Kartu Adaptif?

Pertama saya ingin melihat apakah templat ada untuk jenis data ini, jadi saya membuat permintaan HTTP ke /find titik akhir dengan data saya di POST body.

HTTP POST https://templates.adaptivecards.io/find

{
    "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#users/$entity",
    "businessPhones": [
        "+1 412 555 0109"
    ],
    "displayName": "Megan Bowen",
    "givenName": "Megan",
    "jobTitle": "Auditor",
    "mail": "MeganB@M365x214355.onmicrosoft.com",
    "mobilePhone": null,
    "officeLocation": "12/1110",
    "preferredLanguage": "en-US",
    "surname": "Bowen",
    "userPrincipalName": "MeganB@M365x214355.onmicrosoft.com",
    "id": "48d31887-5fad-4d73-a9f5-3c356e68a038"
}

Respons:

[
  {
    "templateUrl": "graph.microsoft.com/Profile.json",
    "confidence": 1
  }
]

Layanan mengembalikan daftar templat yang cocok, bersama dengan yang confidence menunjukkan seberapa dekat kecocokan. Sekarang saya dapat menggunakan URL templat tersebut untuk mendapatkan templat, atau mengisinya di sisi server.

Mendapatkan templat

Templat yang diambil dari titik akhir ini dapat diisi dengan data saat runtime menggunakan SDK templat.

HTTP GET https://templates.adaptivecards.io/[TEMPLATE-PATH]

Anda juga dapat menyertakan "data sampel" dengan templat, yang membuat pengeditan di perancang lebih ramah:

HTTP GET https://templates.adaptivecards.io/[TEMPLATE-PATH]?sampleData=true

Contoh

Mari kita dapatkan templat profil Microsoft Graph yang dikembalikan dari /find atas.

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

Kutipan respons

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "size": "Medium",
      "weight": "Bolder",
      "text": "{name}"
    },
    {
        // ...snip
    }
  ]
}

Sekarang gunakan templat ini dengan SDK templat untuk membuat Kartu Adaptif yang siap dirender.

Mengisi sisi server templat

Dalam beberapa kasus, mungkin tidak masuk akal untuk mengisi templat pada klien. Untuk kasus penggunaan ini, Anda dapat meminta layanan mengembalikan Kartu Adaptif yang terisi penuh, siap untuk diteruskan ke Perender Kartu Adaptif apa pun.

HTTP POST https://templates.adaptivecards.io/[TEMPLATE-PATH]

Contoh

Mari kita isi templat profil Microsoft Graph yang dikembalikan dari /find menggunakan data di atas.

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

{
    "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#users/$entity",
    "businessPhones": [
        "+1 412 555 0109"
    ],
    "displayName": "Megan Bowen",
    "givenName": "Megan",
    "jobTitle": "Auditor",
    "mail": "MeganB@M365x214355.onmicrosoft.com",
    "mobilePhone": null,
    "officeLocation": "12/1110",
    "preferredLanguage": "en-US",
    "surname": "Bowen",
    "userPrincipalName": "MeganB@M365x214355.onmicrosoft.com",
    "id": "48d31887-5fad-4d73-a9f5-3c356e68a038"
}

Kutipan respons

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "size": "Medium",
      "weight": "Bolder",
      "text": "Megan Bowen"
    },
    {
        // ...snip
    }
  ]
}

Perhatikan bagaimana respons mengganti teks yang pertama TextBlock dengan "Megan Bowen" bukan "{name}", seperti dalam GET permintaan. AdaptiveCard ini sekarang dapat diteruskan ke perender Kartu Adaptif apa pun tanpa melalui templat sisi klien.

Templat yang berkontribusi

Templat dihosting di GitHub di repositori adaptivecards-templates .

Harapan kami adalah bahwa dengan menggunakan GitHub sebagai toko cadangan untuk templat, kami dapat "mendemokratisasikan" proses penulisan, peningkatan, dan berbagi templat. Siapa pun dapat mengirimkan Permintaan Pull yang menyertakan templat yang sama sekali baru, atau membuat penyempurnaan untuk yang sudah ada... semua dalam pengalaman GitHub yang ramah pengembang.

Hosting mandiri layanan

Tidak semua jenis data sesuai untuk layanan templat Kartu Adaptif "pusat" yang dihosting di https://templates.adaptivecards.io.

Kami ingin memastikan siapa pun dapat menghosting layanan templat dalam organisasi Anda, sehingga kode sumber tersedia di GitHub dan dapat dengan mudah disebarkan ke Fungsi Azure Anda sendiri.

Mulai di sini ➡ kartu adaptif-templat

  • Last updated on