แชร์ผ่าน


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