Brug adaptive kort til at vise karruseller i

2025-05-14

Tilpassede kort kan formateres til at fungere som en karrusel, hvor brugere kan gennemgå meddelelser interaktivt. Brugere interagerer med en karrusel ved at vælge pile, som giver dem mulighed for at rulle gennem flere valgmuligheder.

Karruseller er nyttige i scenarier, hvor menupunkterne er lange og kræver en hel sætning eller et kort afsnit, for at brugeren fuldt ud kan forstå de tilgængelige indstillinger.

I følgende eksempel skal du oprette en karrusel for at præsentere dine produkter for kunderne på webstedet Contoso. Karrusellen hjælper kunderne med at vælge det produkt, de finder mest effektive, som en del af samtaleforløbet.

Bemærk

Ikonerne og beskrivelserne er til demonstrationsformål. Du kan kopiere og revidere kodeeksemplerne til dit eget scenarie.

Byg en karrusel ved hjælp af et adaptivt kort

I dette eksempel bruges en input-JSON-datamatrix som en strengvariabel for at forenkle samtaleforløbet. Det bruger også eksempler på URL'er til at vise produktikonerne og SVG-repræsentationerne for venstre og højre pil. Du kan referere til enhver kombination af SVG-filer eller URL'er til medier. Du opnår de bedste resultater, når der henvises til et medie, ved at gemme mediet på en statisk, usymmetrisk placering.

I Copilot Studio opret f.eks. et emne, og kald det "Opret karrusel".
Brug ordet "Karrusel" og "Opret karrusel" for udløsersætninger.
Vælg ikonet Tilføj node under noden Udløser, vælg Variabelstyring, og vælg derefter Angiv en variabelværdi.
Opret en ny variabel med navnet DataJSON. Denne variabel er en streng og indeholder JSON-repræsentationen af det adaptive kort.
Kopiér og indsæt DataJSON-kodeblok i Til værdi-feltet i den nye node.

Hvis du vil omdanne JSON-matrixen til et adaptivt kort, skal du fortolke kodeblokken.
Vælg ikonet Tilføj node under noden Angiv variabel værdi, vælg Variabelstyring, og vælg derefter Opdel værdi. Denne node bruges til at fortolke variablen fra den forrige node.
For Opdel værdi skal du vælge variablen fra den forrige node – DataJSON i dette eksempel.
For Datatype:
1. Vælg Fra eksempeldata, og vælg derefter Hent skema fra JSON-eksempel.
2. I editoren, der åbnes, indsættes DataJSON-kodeblok, og vælg Bekræft.
Alternativt, hvis du allerede har det ønskede skema til tabellen:
1. Vælg Tabel, og vælg Rediger skema.
2. I editoren, der åbnes, indsættes dit skema, og vælg Bekræft.
  
  I dette eksempel vil det relevante skema være:
```
kind: Table
properties:
  description: String
  icon: String
  linklabel: String
  linkurl: String
  name: String
```
For Gem somskal du oprette en ny tilpasset variabel. Denne variabel er en tabel med navnet DataTable. Den indeholder de analyserede resultater som en post.
Opret en indekseret tabel, der skal bruges af det adaptive kort:
1. Vælg ikonet Tilføj node under noden Opdel værdi, og tilføj derefter Angiv en variabel værdi-noden.
2. Opret en ny variabel, og navngiv den DataTableWithIndex.
3. Angiv følgende formel for Til værdi:
```
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
  }
)
```
  Denne formel opretter en JSON-matrix til visning af hvert karruselvindue. Funktionen Sequence tilføjer et indeks for at give forudsigelige, individuelle id'er for hver post. Forrige og næste pil i karrusellen viser den ønskede post baseret på dette indeks.
Tilføj en meddelelsesnode med et adaptivt kort nederst i emnenoderne:
1. Vælg ikonet Tilføj node under den sidste node, og vælg Send en meddelelse.
2. I nodens menulinje skal du vælge Tilføj, og vælg derefter Adaptivt kort.
3. I egenskabspanelet Adaptivt kort, skift til Formel, og erstat standardindholdet med formlen for adaptive kort.
Gem dit emne, og test det.

DataJSON-kodeblok

I følgende JSON-kodeblok er der gentagne nøgler: icon, name, description, linkurl, og linklabel. Disse taster repræsenterer navigationspunkter på kortet.

ikon: Link til ikonet, der skal vises til venstre for karruselvinduet.
navn: Etiket til produktnavnet, der ikke vises på det adaptive kort.
beskrivelse: Beskrivelse af produktet.
linkurl: Hyperlink, der er knyttet til produktet eller valget.
linklabel: Tekst, der skal vises over hyperlinket.

Eksempelkortet er en karrusel med fem produkter. Hvis dit scenarie kræver en karrusel med mere end fem elementer (eller mindre end fem), skal du kopiere og indsætte (eller slette) elementer fra denne kodeblok efter behov.

[{
    "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"
  }
]

Adaptive kortformel

Følgende kodeblok definerer formlen for et adaptivt kort i karruselformat:

{
  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)
    }
  )
}

Del via

Brug adaptive kort til at vise karruseller i

Byg en karrusel ved hjælp af et adaptivt kort

DataJSON-kodeblok

Adaptive kortformel

Relateret indhold

Feedback

Yderligere ressourcer