Exibir dados de matrizes em Cartões Adaptáveis

Os Cartões Adaptáveis são uma ferramenta versátil usada para criar conversas interativas e interessantes no Copilot Studio e podem ser usadas para exibir uma variedade de itens. Neste artigo, para simplificar, usamos um exemplo codificado diretamente. No entanto, você provavelmente obteria os dados de uma fonte mais dinâmica, como uma lista do SharePoint, usando o Power Automate.

Inicializar uma variável com a lista de tarefas

Nesse cenário, você tem uma lista de tarefas em um array e quer mostrar a lista de tarefas no agente.

1. Selecione Adicionar nó (+) para adicionar um nó e depois escolha Gerenciamento de variável>Definir um valor de variável.

2. Marque a caixa em Definir variável e, em seguida, selecione Criar novo.

3. Selecione a nova variável (por exemplo, Var1) para exibir o painel Propriedades da Variável.

4. Nomeie sua variável como algo significativo, como EmployeeTaskList.

5. Cole o seguinte JSON no campo Valor de destino:

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

Analisar os dados JSON em uma tabela

Esse nó de geranciamento de variáveis é usado para converter a cadeia de caracteres JSON em uma tabela que pode ser usada posteriormente no Adaptive Card.

1. Selecione Adicionar nó (+) e Gerenciamento de variável>Analisar valor.

2. Em Analisar valor, selecione a variável EmployeeTaskList criada na seção anterior.

3. Em Tipo de dados selecione Dados de exemplo - De.

4. Selecione </> Obter esquema do JSON de exemplo, em seguida, copie e cole o mesmo JSON na seção A partir de dados de exemplo das configurações do Tipo de dados. Os dados de exemplo geram automaticamente o esquema e o tipo de dados. Selecione Confirmar.

5. Em Salvar como, selecione Criar uma nova variável.

6. Selecione a nova variável e altere o Nome da variável para TaskTable.

Exibir os dados em um Cartão Adaptável

Para exibir os dados em um Cartão Adaptável, use um Nó de mensagem.

1. Selecione Adicionar e escolha Cartão Adaptável no menu suspenso.

2. Selecione a seção Mídia para mostrar o painel de Propriedades do Cartão Adaptável.

3. No painel de Propriedades do Cartão Adaptável à direita, selecione o menu suspenso </> Editar JSON e altere-o para Fórmula.

4. Cole o seguinte código.

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

5. Agora podemos consultar as propriedades de registro JSON usando expressões como Topic.TaskTable.employeeName.

6. Para exibir itens de matriz em um Cartão Adaptável, use o elemento Container com a propriedade items.

A propriedade items aceita uma matriz de elementos como o valor. Cada elemento da matriz é exibido no Cartão Adaptável usando a função 'ForAll'. Referencie a matriz Topic.TaskTable.employeeTasks, pois ela permite acesso a cada uma de suas propriedades.

Se quiser criar o tópico sem seguir essas instruções, você pode selecionar Abrir editor de código na barra de comandos superior direita e colar o seguinte código YAML na exibição do editor de código.

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

Adicionar comentários para cada resposta