แสดงข้อมูลจากอาร์เรย์ใน Adaptive Cards

การ์ดแบบปรับเปลี่ยนได้เป็นเครื่องมืออเนกประสงค์ที่ใช้สร้างการสนทนาเชิงโต้ตอบและมีส่วนร่วมได้ Copilot Studio ในเอกสารนี้ คุณจะได้เรียนรู้วิธีแสดงรายการอาร์เรย์ใน Adaptive Cards ใน Copilot Studio เราใช้ตัวอย่างแบบฮาร์ดโค้ดเพื่อความเรียบง่าย แต่ในสถานการณ์จริง คุณน่าจะได้รับข้อมูลจากแหล่งที่มาแบบไดนามิกมากกว่า เช่น SharePoint รายการ ฯลฯ โดยใช้ Power Automate

สมมติว่าคุณมีรายการงานในอาร์เรย์ และคุณต้องการแสดงรายการงานในบอท

เริ่มต้นตัวแปรกับรายการงาน

1. เลือก เพิ่มโหนด (+) เพื่อเพิ่มโหนด จากนั้นเลือก การจัดการตัวแปร ->ตั้งค่าตัวแปร

2. เลือกช่องด้านล่าง ตั้งค่าตัวแปร แล้วเลือก สร้างใหม่

3. เลือกตัวแปรใหม่ (เช่น Var1) เพื่อแสดงแผง คุณสมบัติตัวแปร

4. ตั้งชื่อตัวแปรของคุณให้มีความหมาย เช่น EmployeeTaskList

5. วาง JSON ต่อไปนี้ลงใน ถึงค่า

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

แยกวิเคราะห์ข้อมูล JSON ลงในตาราง

1. เลือก เพิ่มโหนด (+) และ การจัดการตัวแปร ->แยกวิเคราะห์ค่า ซึ่งใช้เพื่อแปลงสตริง JSON ให้เป็นตารางที่สามารถใช้ในการ์ดที่ปรับเปลี่ยนได้ในภายหลัง
2. ใต้ แยกวิเคราะห์ค่า ให้เลือกตัวแปรที่คุณสร้างไว้ด้านบน เช่น EmployeeTaskList
3. ใต้ ชนิดข้อมูล เลือก จากข้อมูลตัวอย่าง
4. เลือก </> รับสคีมาจากตัวอย่าง JSON และคัดลอกและวาง JSON เดียวกันลงในส่วน จากข้อมูลตัวอย่าง ของการตั้งค่า ชนิดข้อมูล ข้อมูลตัวอย่างจะสร้างสคีมาและประเภทข้อมูลโดยอัตโนมัติ เลือก ยืนยัน
5. ใต้ บันทึกเป็น เลือก สร้างตัวแปรใหม่ เลือกตัวแปรใหม่ และเปลี่ยน ชื่อตัวแปร เป็น TaskTable

แสดงข้อมูลในการ์ดอะแดปทีฟ

1. หากต้องการแสดงข้อมูลในการ์ดที่ปรับเปลี่ยนได้ ให้เพิ่มโหนด ส่งข้อความ

2. เลือก + เพิ่ม และเลือก การ์ดที่ปรับเปลี่ยนได้ จากเมนูดรอปดาวน์

3. เลือกส่วน สื่อ ที่จะแสดงแผง คุณสมบัติการ์ดที่ปรับเปลี่ยนได้

4. ในแผง คุณสมบัติการ์ดที่ปรับเปลี่ยนได้ ด้านขวา ให้เลือกดรอปดาวน์ </> แก้ไข JSON แล้วเปลี่ยนเป็น สูตร

5. วางโค้ดต่อไปนี้

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

   1. ตอนนี้เราสามารถอ้างอิงคุณสมบัติเรกคอร์ด JSON โดยใช้นิพจน์ เช่น Topic.TaskTable.employeeName

   2. หากต้องการแสดงรายการอาร์เรย์ใน Adaptive Card ให้ใช้องค์ประกอบ คอนเทนเนอร์ พร้อมกับคุณสมบัติ items

      คุณสมบัติรายการยอมรับอาร์เรย์ขององค์ประกอบเป็นค่าของมัน แต่ละองค์ประกอบในอาร์เรย์จะแสดงในการ์ดอะแดปทีฟ โดยใช้ฟังก์ชัน 'ForAll' อ้างอิงอาร์เรย์ Topic.TaskTable.employeeTasks เนื่องจากอนุญาตให้เข้าถึงคุณสมบัติแต่ละรายการได้

   หากคุณต้องการสร้างหัวข้อโดยไม่ทำตามคำแนะนำเหล่านี้ คุณสามารถเลือก เปิดตัวแก้ไขโค้ด จากแถบคำสั่งด้านบนขวา และวางโค้ด YAML ต่อไปนี้ในมุมมองตัวแก้ไขโค้ด

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

   เพิ่มคำติชมสำหรับทุกคำตอบ