แสดงข้อมูลจากอาร์เรย์ใน 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 ลงในตาราง

โหนดการจัดการตัวแปรนี้ใช้เพื่อแปลงสตริง JSON เป็นตารางที่สามารถใช้ในภายหลังใน Adaptive Card

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

2. ใต้ แยกวิเคราะห์ค่า ให้เลือกตัวแปร EmployeeTaskList ที่คุณสร้างไว้ในส่วนก่อนหน้า

3. ใต้ ชนิดข้อมูล เลือก จากข้อมูลตัวอย่าง

4. เลือก </> รับสคีมาจาก JSON ตัวอย่าง จากนั้นคัดลอกและวาง JSON เดียวกันลงในส่วน จากข้อมูลตัวอย่าง ของการตั้งค่า ชนิดข้อมูล ข้อมูลตัวอย่างจะสร้างสคีมาและประเภทข้อมูลโดยอัตโนมัติ เลือก ยืนยัน

5. ใต้ บันทึกเป็น เลือก สร้างตัวแปรใหม่

6. เลือกตัวแปรใหม่ และเปลี่ยนชื่อตัวแปรเป็น TaskTable

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

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

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

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

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

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

   {
     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. ตอนนี้เราสามารถอ้างอิงคุณสมบัติเรกคอร์ด JSON โดยใช้นิพจน์ เช่น Topic.TaskTable.employeeName

6. หากต้องการแสดงรายการอาร์เรย์ใน 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
                        }
                    )
                  }
                ]
              }  

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