Freigeben über

Daten aus Arrays in adaptiven Karten anzeigen

Adaptive Karten sind ein vielseitiges Tool, mit dem Sie interaktive und ansprechende Unterhaltungen in Copilot Studio Power Virtual Agents erstellen und eine Reihe von Elementen anzeigen können. In diesem Artikel erstellen wir der Einfachheit halber das Szenario in einem neuen Thema und verwenden ein hartcodiertes Beispiel. Sie würden die Daten jedoch wahrscheinlich aus einer dynamischeren Quelle abrufen, z. B. aus einer SharePoint Liste, indem Sie Power Automate verwenden.

Eine Variable mit der Aufgabenliste initialisieren

In diesem Szenario haben Sie eine Liste von Aufgaben in einem Array, und Sie möchten, dass Ihr Agent diese Aufgaben anzeigt.

  1. Erstellen Sie ein Thema in Copilot Studio und nennen Sie es z. B. „Aufgaben anzeigen“.

  2. Verwenden Sie im Trigger-Knoten die Wörter „Meine Aufgaben“ und „Aufgaben anzeigen“ für die Triggerausdrücke.

  3. Wählen Sie das Symbol Knoten hinzufügen unter dem Trigger-Knoten, Variablenverwaltung und dann Variablenwert festlegen aus.

  4. Aktivieren Sie das Kontrollkästchen unter Variable festlegen und wählen Sie dann Neu erstellen aus.

  5. Wählen Sie die neue Variable (beispielsweise Var1) aus, um den Bereich mit den Variableneigenschaften anzuzeigen.

  6. Geben Sie Ihrer Variablen einen aussagekräftigen Namen, z. B. EmployeeTaskList.

  7. Fügen Sie das folgende JSON-Literal in das Feld Bis-Wert ein:

    {
    "employeeName": "Alice",
    "employeeID": "E12345",
    "employeeDepartment": "HR",
    "employeeTasks": [
        {
            "taskID": "T001",
            "taskDescription": "Review employee benefits",
            "dueDate": "2025-10-15"
        },
        {
            "taskID": "T002",
            "taskDescription": "Conduct new hire orientation",
            "dueDate": "2025-09-30"
        },
        {
            "taskID": "T003",
            "taskDescription": "Update HR policies",
            "dueDate": "2025-11-05"
        }
    ]
}

JSON-Literal in eine Tabelle parsen

Um die JSON-Zeichenfolge in eine Tabelle zu konvertieren, die später in der adaptiven Karte verwendet werden kann, müssen Sie sie parsen.

  1. 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.

  2. Wählen Sie für Wert parsen die Variable aus dem vorherigen Knoten aus (in diesem Beispiel EmployeeTaskList).

  3. 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, dieselbe JSON-Zeichenfolge ein und wählen Sie Bestätigen aus. Aus den Beispieldaten werden automatisch das Schema und der Datentyp generiert.

  4. Wählen Sie bei Speichern unter die Option Neue Variable erstellen aus.

  5. Wählen Sie die neue Variable aus und benennen Sie sie in TaskTable um.

    Screenshot des Knotens Parsen-Wert.

Die Daten in einer adaptiven Karte anzeigen

Um die Daten in einer adaptiven Karte anzuzeigen, verwenden Sie einen Nachrichtenknoten.

  1. Wählen Sie Hinzufügen und Adaptive Karte aus der Dropdownliste.

  2. Wählen Sie den Abschnitt Medien aus, um den Bereich Eigenschaften der adaptiven Karte anzeigen zu lassen.

  3. Wählen Sie rechts im Bereich Eigenschaften der adaptiven Karte die Dropdownliste </> JSON bearbeiten und ändern Sie sie auf Formel.

  4. Fügen Sie den folgenden Code ein.

    {
  type: "AdaptiveCard",
  version: "1.5",
  body: [
    {
      type: "TextBlock",
      text: "Employee Information",
      weight: "bolder",
      size: "large"
    },
    {
      type: "TextBlock",
      text: "Employee Name: " & Topic.TaskTable.employeeName,
      separator: true
    },
    {
      type: "TextBlock",
      text: "Employee ID: " & Topic.TaskTable.employeeID,
      separator: true
    },
    {
      type: "TextBlock",
      text: "Department: " & Topic.TaskTable.employeeDepartment,
      separator: true
    },
    {
      type: "TextBlock",
      text: "Tasks",
      weight: "bolder",
      size: "medium",
      separator: true
    },
    {
      type: "Container",
      items: 
        ForAll(Topic.TaskTable.employeeTasks,
          {
            type: "TextBlock",
            text: "- Task ID: " & taskID & ", Description: " & taskDescription & ", Due Date: " & dueDate ,
            wrap: true
          }
      )
    }
  ]
}

    Beachten Sie, wie die Formel mithilfe von Ausdrücken wie Topic.TaskTable.employeeName auf die Datensatzattribute verweist. Beachten Sie auch, dass das Container-Element mit der items-Eigenschaft verwendet wird, um Arrayelemente auf der adaptiven Karte anzuzeigen. Die items-Eigenschaft akzeptiert ein Array von Elementen als Wert. Jedes Element im Array wird mithilfe der ForAll-Funktion auf der adaptiven Karte angezeigt. Der Verweis auf das Topic.TaskTable.employeeTasks-Array ermöglicht den Zugriff auf jede seiner Eigenschaften.

Erstellen Sie dasselbe Beispielszenario aus YAML-Code

Wenn Sie dieses Beispielthema lieber schnell erstellen möchten, können Sie ein leeres Thema erstellen, den Code-Editor öffnen und den YAML-Standardcode durch den folgenden ersetzen.

kind: AdaptiveDialog
beginDialog:
  kind: OnRecognizedIntent
  id: main
  intent:
    displayName: Untitled
    triggerQueries:
      - array

  actions:
    - kind: SetVariable
      id: setVariable_uFs69M
      variable: Topic.EmployeeTaskList
      value: "{ \"employeeName\": \"Alice\", \"employeeID\": \"E12345\", \"employeeDepartment\": \"HR\", \"employeeTasks\": [ { \"taskID\": \"T001\", \"taskDescription\": \"Review employee benefits\", \"dueDate\": \"2023-10-15\" }, { \"taskID\": \"T002\", \"taskDescription\": \"Conduct new hire orientation\", \"dueDate\": \"2023-09-30\" }, { \"taskID\": \"T003\", \"taskDescription\": \"Update HR policies\", \"dueDate\": \"2023-11-05\" } ] }"

    - kind: ParseValue
      id: 58zKdp
      variable: Topic.TaskTable
      valueType:
        kind: Record
        properties:
          employeeDepartment: String
          employeeID: String
          employeeName: String
          employeeTasks:
            type:
              kind: Table
              properties:
                dueDate: String
                taskDescription: String
                taskID: String

      value: =Topic.EmployeeTaskList

    - kind: SendActivity
      id: sendActivity_oNXY1r
      activity:
        attachments:
          - kind: AdaptiveCardTemplate
            cardContent: |-
              ={
                type: "AdaptiveCard",
                version: "1.5",
                body: [
                  {
                    type: "TextBlock",
                    text: "Employee Information",
                    weight: "bolder",
                    size: "large"
                  },
                  {
                    type: "TextBlock",
                    text: "Employee Name: " & Topic.TaskTable.employeeName,
                    separator: true
                  },
                  {
                    type: "TextBlock",
                    text: "Employee ID: " & Topic.TaskTable.employeeID,
                    separator: true
                  },
                  {
                    type: "TextBlock",
                    text: "Department: " & Topic.TaskTable.employeeDepartment,
                    separator: true
                  },
                  {
                    type: "TextBlock",
                    text: "Tasks",
                    weight: "bolder",
                    size: "medium",
                    separator: true
                  },
                  {
                    type: "Container",
                    items: 
                      ForAll(Topic.TaskTable.employeeTasks,
                        {
                          type: "TextBlock",
                          text: "- Task ID: " & taskID & ", Description: " & taskDescription & ", Due Date: " & dueDate ,
                          wrap: true
                        }
                    )
                  }
                ]
              }