Adaptive Karten verwenden, um Karussells anzuzeigen

2025-05-14

Adaptive Karten können so formatiert werden, dass sie wie ein Karussell funktionieren, in dem Benutzende interaktiv durch die Nachrichten blättern können. Benutzer interagieren mit einem Karussell, indem sie Pfeile auswählen, mit denen sie durch mehrere Auswahlmöglichkeiten scrollen können.

Karussells sind in Szenarien hilfreich, in denen die Menüoptionen lang sind und einen ganzen Satz oder kurzen Absatz erfordern, damit der Benutzer die verfügbaren Optionen vollständig versteht.

Im folgenden Beispiel erstellen Sie ein Karussell, um Ihre Produkte Kunden auf der Contoso-Website zu präsentieren. Das Karussell hilft der Kundschaft dabei, im Rahmen des Gesprächs-Flows das Produkt auszuwählen, das sie am interessantesten findet.

Anmerkung

Die Symbole und Beschreibungen dienen zu Demonstrationszwecken. Sie können die Codebeispiele für Ihr eigenes Szenario kopieren und überarbeiten.

Ein Karussell mithilfe einer adaptiven Karte erstellen

In diesem Beispiel wird ein JSON-Datenarray als Zeichenfolgenvariable verwendet, um den Konversations-Flow zu vereinfachen. Außerdem werden Beispiel-URLs verwendet, um die Produktsymbole und SVG-Darstellungen für die Pfeile nach links und rechts anzuzeigen. Sie können auf eine beliebige Kombination von SVG-Dateien oder URLs für Medien verweisen. Um beim Referenzieren von Medien optimale Ergebnisse zu erzielen, speichern Sie die Medien an einem statischen, nicht authentifizierten Ort.

Erstellen Sie ein Thema in Copilot Studio und nennen Sie es z. B. „Karussell erstellen“.
Verwenden Sie als Triggerausdrücke die Wörter „Karussell“ und „Karussell erstellen“.
Wählen Sie das Symbol Knoten hinzufügen unter dem Trigger-Knoten, Variablenverwaltung und dann Variablenwert festlegen aus.
Erstellen Sie eine Variable namens DataJSON. Diese Variable ist eine Zeichenfolge und enthält die JSON-Darstellung der adaptiven Karte.
Kopieren Sie den DataJSON-Code-Block und fügen Sie ihn in das Feld Bis-Wert des neuen Codes ein.

Um das JSON-Array in eine adaptive Karte zu transformieren, müssen Sie den Codeblock analysieren.
Wählen Sie das Symbol Knoten hinzufügen unter dem Knoten Variablenwert festlegen, Variablenverwaltung und dann Wert parsen aus. Dieser Knoten dient zum Analysieren der Variablen aus dem vorherigen Knoten.
Wählen Sie für Wert parsen die Variable aus dem vorherigen Knoten aus (in diesem Beispiel DataJSON).
Für Datentyp:
1. Wählen Sie Aus Beispieldaten, dann Schema aus Beispiel-JSON abrufen aus.
2. Fügen Sie im Editor, der sich öffnet, den DataJSON-Code-Block ein und wählen Sie Bestätigen aus.
Alternativ, wenn Sie bereits über das gewünschte Schema für die Tabelle verfügen:
1. Wählen Sie Tabelle und dann Schema bearbeiten aus.
2. Fügen Sie im Editor, der sich öffnet, Ihr Schema ein und wählen Sie Bestätigen aus.
  
  In diesem Beispiel lautet das passende Schema:
```
kind: Table
properties:
  description: String
  icon: String
  linklabel: String
  linkurl: String
  name: String
```
Erstellen Sie bei Speichern unter eine weitere benutzerdefinierte Variable. Diese Variable ist eine Tabelle namens DataTable. Es enthält die analysierten Ergebnisse als Datensatz.
Erstellen Sie eine indizierte Tabelle zur Verwendung durch die adaptive Karte:
1. Wählen Sie das Symbol Knoten hinzufügen unter dem Knoten Wert parsen und fügen Sie einen weiteren Knoten Variablenwert festlegen hinzu.
2. Erstellen Sie eine neue Variable und nennen Sie sie DataTableWithIndex.
3. Geben Sie die folgende Formel als Bis-Wert ein:
```
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
  }
)
```
  Diese Formel erstellt ein JSON-Array für die Anzeige jedes Karussell-Fensters. Die Sequence-Funktion fügt einen Index hinzu, um vorhersagbare, individuelle IDs für jeden Datensatz bereitzustellen. Der vorherige und der nächste Pfeil des Karussells zeigen den gewünschten Datensatz basierend auf diesem Index an.
Fügen Sie am Ende des Themenknotens einen Knoten Nachricht mit einer adaptiven Karte hinzu.
1. Wählen Sie das Symbol Knoten hinzufügen unter den letzten Knoten und dann Nachricht senden aus.
2. Wählen Sie in der Menüleiste des Knotens Hinzufügen und dann Adaptive Karte aus.
3. Wechseln Sie im Bereich Eigenschaften der adaptiven Karte zu Formel und ersetzen Sie den Standardinhalt durch die Formel der adaptiven Karte.
Speichern und testen Sie Ihr Thema.

DataJSON-Codeblock

Im folgenden JSON-Codeblock gibt es wiederholte Zeichen: icon, name, description, linkurl und linklabel. Diese Zeichen stellen Navigationspunkte auf der Karteikarte dar.

icon: Link zu dem Symbol, das links im Karussellfenster angezeigt werden soll.
name: Beschriftung für den Produktnamen, der nicht auf der adaptiven Karteikarte angezeigt wird.
description: Beschreibung des Produkts.
linkurl: Hyperlink, der mit dem Produkt oder der Auswahl verknüpft ist.
linklabel: Text zur Anzeige über dem Hyperlink.

Die Beispielkarteikarte ist ein Karussell mit fünf Produkten. Wenn Ihr Szenario ein Karussell mit mehr als fünf Elementen (oder weniger als fünf) erfordert, kopieren Sie Elemente aus diesem Codeblock, und fügen Sie sie nach Bedarf ein (oder löschen).

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

Formel der adaptiven Karte

Der folgende Codeblock definiert die Formel für eine adaptive Karte im Karussellstil:

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

Freigeben über

Adaptive Karten verwenden, um Karussells anzuzeigen

Ein Karussell mithilfe einer adaptiven Karte erstellen

DataJSON-Codeblock

Formel der adaptiven Karte

Zugehöriger Inhalt

Feedback

Zusätzliche Ressourcen