Menggunakan Kartu Adaptif untuk menampilkan carousel

Kartu Adaptif dapat diformat untuk bertindak seperti carousel, di mana pengguna dapat menelusuri pesan secara interaktif. Pengguna berinteraksi dengan korsel dengan memilih panah, yang memungkinkan mereka menggulir beberapa pilihan.

Korsel sangat membantu dalam skenario di mana opsi menu panjang, memerlukan kalimat lengkap atau paragraf pendek agar pengguna dapat sepenuhnya memahami opsi yang tersedia.

Dalam contoh berikut, Anda membuat carousel untuk menyajikan produk Anda kepada pelanggan di situs web Contoso. Korsel membantu pelanggan memilih produk yang menurut mereka paling menarik, sebagai bagian dari alur percakapan.

Catatan

Ikon dan deskripsi untuk tujuan demonstrasi. Anda dapat menyalin dan merevisi sampel kode untuk skenario Anda sendiri.

Membuat carousel menggunakan Kartu Adaptif

Contoh ini menggunakan array data JSON input sebagai variabel string untuk menyederhanakan alur percakapan. Ini juga menggunakan contoh URL untuk menampilkan ikon produk dan representasi SVG untuk panah kiri dan kanan. Anda dapat mereferensikan kombinasi file SVG atau URL untuk media. Untuk hasil terbaik saat mereferensikan media, simpan media di lokasi statis yang tidak diautentikasi.

1. Dalam Copilot Studio, buat topik dan sebut saja "Buat Carousel", misalnya.

2. Gunakan kata "korsel" dan "buat korsel" untuk frasa pemicu.

   

3. Pilih ikon Tambahkan simpul di bawah simpul Pemicu , pilih Manajemen variabel, lalu pilih Tetapkan nilai variabel.

4. Buat variabel baru bernama DataJSON. Variabel ini adalah string, dan menyimpan representasi JSON dari Kartu Adaptif.

5. Salin dan tempel blok kode DataJSON ke bidang nilai To simpul baru.

   

   Untuk mengubah array JSON menjadi kartu adaptif, Anda harus mengurai blok kode.

6. Pilih ikon Tambahkan simpul di bawah simpul Atur nilai variabel, pilih Manajemen variabel, lalu uraikan nilai. Node ini untuk mengurai variabel dari node sebelumnya.

7. Untuk Mengurai nilai, pilih variabel dari simpul sebelumnya—DataJSON, dalam contoh ini.

8. Untuk Jenis data:

   1. Pilih Dari data sampel, lalu pilih Dapatkan skema dari JSON sampel.

   2. Di editor yang terbuka, tempel blok kode DataJSON, dan pilih Konfirmasi.

   Atau, jika Anda sudah memiliki skema yang diinginkan untuk tabel:

   1. Pilih Tabel , dan pilihEdit skema .

   2. Di editor yang terbuka, tempel skema Anda, dan pilih Konfirmasi.

      Dalam contoh ini, skema yang sesuai adalah:

      kind: Table
      properties:
        description: String
        icon: String
        linklabel: String
        linkurl: String
        name: String
      

9. Untuk Simpan sebagai, buat variabel kustom lain. Variabel ini adalah tabel bernama DataTable. Ini menyimpan hasil yang diurai sebagai catatan.

   

10. Buat tabel terindeks untuk digunakan oleh Kartu Adaptif:

    1. Pilih ikon Tambahkan simpul di bawah simpul Uraikan nilai , dan tambahkan simpul Atur nilai variabel lainnya .

    2. Buat variabel baru dan beri nama DataTableWithIndex.

    3. Untuk nilai Kepada, masukkan rumus berikut:

       ForAll(
         Sequence(
           CountRows(Topic.DataTable)
         ),
         { 
           ItemNumber: Value,
           Name: Index(Topic.DataTable, Value).name,
           Description: Index(Topic.DataTable, Value).description,
           ImageURL: Index(Topic.DataTable, Value).icon,
           URL: Index(Topic.DataTable, Value).linkurl,
           Label: Index(Topic.DataTable, Value).linklabel
         }
       )
       

       Rumus ini membuat array JSON untuk tampilan setiap jendela carousel. Fungsi Urutan menambahkan indeks untuk memberikan ID individual yang dapat diprediksi untuk setiap rekaman. Panah korsel sebelumnya dan berikutnya menunjukkan rekaman yang diinginkan, berdasarkan indeks ini.

       

11. Tambahkan simpul Pesan dengan Kartu Adaptif ke bagian bawah simpul topik:

    1. Pilih ikon Tambahkan simpul di bawah simpul terakhir dan pilih Kirim pesan.

    2. Di bilah menu simpul, pilih Tambahkan, lalu pilih Kartu adaptif.

    3. Di panel properti Kartu Adaptif, beralih ke Rumus, dan ganti konten default dengan rumus Kartu Adaptif.

       

12. Simpan topik Anda, dan uji.

    

Blok kode DataJSON

Dalam blok kode JSON berikut, ada kunci berulang: icon, name,, description, linkurl dan linklabel. Tombol ini mewakili titik navigasi di kartu.

• ikon: Tautkan ke ikon yang akan ditampilkan di sebelah kiri jendela korsel.
• name: Label untuk nama produk, tidak ditampilkan pada Kartu Adaptif.
• deskripsi: Deskripsi produk.
• linkurl: Hyperlink yang terkait dengan produk atau pilihan.
• linklabel: Teks yang akan ditampilkan di atas hyperlink.

Contoh kartu adalah korsel dari lima produk. Jika skenario Anda memerlukan carousel dengan lebih dari lima elemen (atau kurang dari lima), salin dan tempel (atau hapus) elemen dari blok kode ini sesuai kebutuhan.

[{
    "icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-14.jpg",
    "name": "Productum 1",
    "description": "Hard drive est dispositivum electromechanicum quod data retinet in forma magnetica vel optica. Haec data accessibilis est ad operandum systema computatorum.",
    "linkurl": "http://www.microsoft.com/",
    "linklabel": "Learn More"
  }, {
    "icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-13.jpg",
    "name": "Productum 2",
    "description": "Sellam infantium describere possumus quae te monere potest si infans in sella sedet et tu non es in proximo. Sellae haec est instructa sensoribus qui monent te per telephonum tuum mobilum si infans in sella manet et tu non es in loco.",
    "linkurl": "http://www.microsoft.com/",
    "linklabel": "Learn More"
  }, {
    "icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-12.jpg",
    "name": "Productum 3",
    "description": "Pluteus librorum est structura lignea vel metallica quae libros et alia volumina continet. Altitudine non amplius quam decem pedes, pluteus potest habere plures gradus vel tabulas ad libros exponendos. Hoc loco maximam aesthetiam et ordinem litterarum praestat.",
    "linkurl": "http://www.microsoft.com/",
    "linklabel": "Learn More"
  }, {
    "icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-11.jpg",
    "name": "Productum 4",
    "description": "Servitium conficiendi et transmittendi tortarum ad nuptias, quae formas et delicias unicas offert, sub vices quam viginti quinque verbis descriptum.",
    "linkurl": "http://www.microsoft.com/",
    "linklabel": "Learn More"
  }, {
    "icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-10.jpg",
    "name": "Productum 5",
    "description": "Bot GPT in correctione textus praecellit, grammaticam scrutans, errores corrigens, et textum meliorem reddens, sub vices quam viginti quinque verbis.",
    "linkurl": "http://www.microsoft.com/",
    "linklabel": "Learn More"
  }
]

Rumus Kartu Adaptif

Blok kode berikut mendefinisikan rumus untuk Kartu Adaptif bergaya carousel:

{
  type: "AdaptiveCard",
  '$schema': "http://adaptivecards.io/schemas/adaptive-card.json",
  version: "1.5",
  body: ForAll(Topic.DataTableWithIndex,
    {
      type: "Container",
      items: [
        {      
        type: "ColumnSet",
        columns: [
          {
            type: "Column",
            width: "auto",
            items: [
              {
                type: "Image",
                url: "data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M12.2801%2016.5307L12.3527%2016.4466C12.5706%2016.153%2012.5464%2015.7363%2012.2801%2015.47L9.56078%2012.7507L16.2505%2012.7504L16.3523%2012.7435C16.7183%2012.6939%2017.0005%2012.3801%2017.0005%2012.0004L16.9936%2011.8986C16.944%2011.5325%2016.6302%2011.2504%2016.2505%2011.2504L9.55878%2011.2507L12.2807%208.52997L12.3534%208.44587C12.5713%208.1523%2012.5471%207.73563%2012.2809%207.46931C11.9881%207.17637%2011.5132%207.17628%2011.2203%207.46911L7.21873%2011.4691L7.14609%2011.5532C6.92816%2011.8468%206.95233%2012.2636%207.21863%2012.5299L11.2195%2016.5307L11.3036%2016.6033C11.5972%2016.8212%2012.0138%2016.797%2012.2801%2016.5307ZM12%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202ZM12%2020.5C7.30558%2020.5%203.5%2016.6944%203.5%2012C3.5%207.30558%207.30558%203.5%2012%203.5C16.6944%203.5%2020.5%207.30558%2020.5%2012C20.5%2016.6944%2016.6944%2020.5%2012%2020.5Z%22%20fill%3D%22%23212121%22%20%2F%3E%0A%3C%2Fsvg%3E"
              }
            ],
            selectAction: {
              type: "Action.ToggleVisibility",
              title: "Preview",
              targetElements: [
                "card" & If(ItemNumber = 1, Last(Topic.DataTableWithIndex).ItemNumber, ItemNumber - 1),
                "card" & ItemNumber
              ]
            }
          },
          {
            type: "Column",
            width: "stretch",
            items: [
              {
                type: "Container",
                items: [
                  {
                    type: "ColumnSet",
                    columns: [
                      {
                        type: "Column",
                        width: "auto",
                        items: [
                          {
                            type: "Image",
                            url: ImageURL,
                            size: "Small"
                          }
                        ]
                      },
                      {
                        type: "Column",
                        width: "stretch",
                        items: [
                          {
                            type: "TextBlock",
                            text: Description,
                            wrap: true,
                            size: "Small"
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                type: "ActionSet",
                actions: [
                  {
                    type: "Action.OpenUrl",
                    title: Label,
                    url: URL
                  }
                ]
              }
            ]
          },
          {
            type: "Column",
            width: "auto",
            items: [
              {
                type: "Image",
                url: "data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M12.001%202C17.5238%202%2022.001%206.47715%2022.001%2012C22.001%2017.5228%2017.5238%2022%2012.001%2022C6.47813%2022%202.00098%2017.5228%202.00098%2012C2.00098%206.47715%206.47813%202%2012.001%202ZM12.001%203.5C7.30656%203.5%203.50098%207.30558%203.50098%2012C3.50098%2016.6944%207.30656%2020.5%2012.001%2020.5C16.6954%2020.5%2020.501%2016.6944%2020.501%2012C20.501%207.30558%2016.6954%203.5%2012.001%203.5ZM11.648%207.55308L11.7206%207.46897C11.9869%207.2027%2012.4036%207.17849%2012.6972%207.39635L12.7813%207.46897L16.7821%2011.4698C17.0484%2011.7361%2017.0726%2012.1528%2016.8547%2012.4464L16.782%2012.5306L12.7805%2016.5306C12.4876%2016.8234%2012.0127%2016.8233%2011.7198%2016.5303C11.4536%2016.264%2011.4295%2015.8474%2011.6474%2015.5538L11.72%2015.4697L14.442%2012.749L7.75027%2012.7493C7.37058%2012.7493%207.05678%2012.4671%207.00712%2012.1011L7.00027%2011.9993C7.00027%2011.6196%207.28243%2011.3058%207.6485%2011.2561L7.75027%2011.2493L14.44%2011.249L11.7206%208.52963C11.4544%208.26336%2011.4302%207.8467%2011.648%207.55308L11.7206%207.46897L11.648%207.55308Z%22%20fill%3D%22%23212121%22%20%2F%3E%0A%3C%2Fsvg%3E"
              }
            ],
            selectAction: {
              type: "Action.ToggleVisibility",
              title: "Next",
              targetElements: [
                "card" & ItemNumber,
                "card" & If(ItemNumber = Last(Topic.DataTableWithIndex).ItemNumber, 1, ItemNumber + 1)
              ]
            }
          }
        ]
      }
    ],
    minHeight: "1px",
    spacing: "None",
    id: "card" & ItemNumber,
    bleed: true,
    isVisible: If(ItemNumber = 1, true, false)
    }
  )
}

Konten terkait

• Tanyakan dengan Kartu Adaptif
• Membuat ekspresi menggunakan Power Fx
• Bekerja dengan variabel
• AdaptiveCards contoh file YAML untuk contoh topik