Afficher des données provenant de tableaux dans des cartes adaptatives
Cartes adaptatives est un outil polyvalent utilisé pour créer des conversations interactives et engageantes dans Copilot Studio, et peut être utilisé pour afficher un éventail d’éléments. Dans cet article, pour plus de simplicité, nous utilisons un exemple codé en dur. Cependant, vous obtiendrez probablement les données à partir d’une source plus dynamique, comme une liste, en utilisant SharePoint . Power Automate
Initialiser une variable avec la liste des tâches
Dans ce scénario, vous avez une liste de tâches dans un tableau et vous souhaitez afficher la liste des tâches dans le agent.
Sélectionner Ajouter un nœud (+) pour ajouter un nœud, puis Sélectionner Gestion des variables>Définir une valeur de variable.
Cochez la case sous Définir la variable, puis sélectionnez Créer nouveau.
Sélectionner la nouvelle variable (par exemple,
Var1) pour afficher le panneau Propriétés de la variable .Nommez votre variable de manière significative, par exemple
EmployeeTaskList.Collez le JSON suivant dans le champ À la valeur :
{ "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" } ] }
Remplir une table avec les données JSON
Ce nœud de gestion des variables est utilisé pour convertir la chaîne JSON en une table qui peut être utilisée ultérieurement dans l’Adaptive carte.
Sélectionner Ajouter un nœud (+) et Gestion des variables>Analyser la valeur.
Sous Analyser la valeur, Sélectionner la
EmployeeTaskListvariable que vous avez créée dans la section précédente.Sous Type de données, sélectionnez À partir de l’exemple de données.
Sélectionner </> Obtenez le schéma à partir d’un exemple JSON, puis copiez et collez le même JSON dans la section À partir de données d’exemple des paramètres Type de données . Les exemples de données génèrent automatiquement le schéma et le type de données. Sélectionnez Confirmer.
Sous Enregistrer sous, Sélectionner Créer une nouvelle variable.
Sélectionner la nouvelle variable et changez le nom de la variable en
TaskTable.
Afficher les données dans une carte adaptative
Pour afficher les données dans un carte adaptatif, utilisez un nœud de message.
Sélectionnez + Ajouter et sélectionnez Carte adaptative dans la liste déroulante.
Sélectionnez la section Média pour afficher le volet Propriétés de la carte adaptative.
Dans le volet Propriétés de la carte adaptative à droite, sélectionnez la liste déroulante </> Modifier JSON et modifiez-le en Formule.
Collez le code suivant.
{ 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 } ) } ] }Nous pouvons désormais faire référence aux propriétés de l’enregistrement JSON à l’aide d’expressions telles que
Topic.TaskTable.employeeName.Pour afficher les éléments du tableau dans une carte adaptative, utilisez l’élément Container avec la propriété items.
La propriété items accepte un tableau d’éléments comme valeur. Chaque élément du tableau est affiché dans la carte adaptative, à l’aide de la fonction ForAll . Référencez le tableau Topic.TaskTable.employeeTasks, car il permet d’accéder à chacune de ses propriétés.
Si vous souhaitez créer la rubrique sans suivre ces instructions, vous pouvez sélectionner Ouvrir l’éditeur de code dans la barre de commande en haut à droite et coller le code YAML suivant dans la vue de l’éditeur de code.
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
}
)
}
]
}