แชร์ผ่าน

ตัวควบคุม (พรีวิว) Facepile

  • บทความ

[บทความนี้เป็นคู่มือรุ่นก่อนวางจำหน่าย และอาจจะมีการเปลี่ยนแปลงในอนาคต]

ตัวควบคุมที่ใช้เพื่อแสดงและโต้ตอบกับรูปภาพ

หมายเหตุ

รหัสแหล่งที่มาของส่วนประกอบและข้อมูลเพิ่มเติมใน ที่เก็บส่วนประกอบของโค้ด GitHub

ตัวควบคุม Facepile

สำคัญ

  • นี่คือคุณลักษณะพรีวิว
  • คุณลักษณะการแสดงตัวอย่างไม่ได้มีไว้สำหรับการนำไปใช้งานจริง และอาจมีการจำกัดฟังก์ชันการทำงาน คุณลักษณะเหล่านี้สามารถใช้ได้ก่อนการเปิดตัวอย่างเป็นทางการ เพื่อให้ลูกค้าสามารถเข้าใช้งานได้ก่อนเวลาและให้ข้อคิดเห็น

Description

กองใบหน้า (Facepile) แสดงรายชื่อบุคคล แต่ละวงกลมเป็นตัวแทนของบุคคลและมีภาพหรือชื่อย่อของพวกเขา ตัวควบคุมนี้มักใช้เมื่อมีการแชร์ว่าใครสามารถเข้าถึงมุมมองหรือไฟล์เฉพาะ หรือเมื่อมอบหมายงานให้ผู้อื่นภายในเวิร์กโฟลว์

ส่วนประกอบของโค้ดนี้จัดเตรียมแรปเปอร์รอบตัวควบคุม Fluent UI Facepile ที่ผูกกับปุ่มเพื่อใช้ในแอปพื้นที่ทำงานและหน้าแบบกำหนดเอง

คุณสมบัติ

คุณสมบัติที่สำคัญ

คุณสมบัติ Description
Items รายการการดำเนินการที่จะแสดง รายการแรกถือเป็นรายการราก
PersonaSize ขนาดของบุคคลที่จะปรากฏบนหน้าจอ
OverflowButtonType เพื่อเลือกชนิดปุ่ม Overflow ที่จะแสดงและว่าจะแสดงหรือไม่
MaxDisplayablePersonas จำนวนบุคคลสูงสุดที่จะปรากฏบน Facepile
ห้าเป็นค่าเริ่มต้นและจำนวนที่แนะนำ
ImageShouldFadeIn ว่ารูปภาพควรมีเอฟเฟกต์เฟดอินขณะปรากฏหรือไม่
ShowAddButton ว่าปุ่มเพิ่มควรปรากฏในองค์ประกอบ Facepile หรือไม่
OverflowButtonLabel ป้ายกำกับ Aria สำหรับปุ่ม Overflow
AddbuttonAriaLabel ป้ายกำกับ Aria สำหรับปุ่มเพิ่ม

Items คุณสมบัติ

Name Description
ItemPersonaName ชื่อที่แสดงของบุคคล
ItemPersonaKey คีย์ระบุรายการเฉพาะ
คีย์ต้องไม่ซ้ำกัน
ItemPersonaImage คอลัมน์รูปภาพของตาราง Dataverse ที่มีรูปภาพบุคคล (รูปโปรไฟล์)
ItemPersonaImageInfo เนื้อหา Url หรือ Base64 ของภาพบุคคล (รูปโปรไฟล์)
ItemPersonaPresence ไม่บังคับ - เพื่อกำหนดสถานะการแสดงตนของบุคคล
IsImage รูปภาพบุคคล (ItemPersonaImage) เป็นคอลัมน์รูปภาพของตาราง Dataverse หรือไม่
คุณสมบัตินี้อนุญาตให้องค์ประกอบแสดงรูปภาพตามชนิด (Url หรือ Image) จริงในกรณีที่ Image ต้องอ้างอิงจากตาราง Dataverse และเท็จในกรณีที่เป็น URL หรือ Base64 ที่จะอ้างอิงจากคุณสมบัติ ItemPersonaImageInfo
ItemPersonaClickable ว่าบุคคลนั้นจะคลิกได้หรือไม่

ตัวอย่างสูตร Power Fx สำหรับ Items (ใช้ตัวเชื่อมต่อ ผู้ใช้ Office 365)

สร้างคอลเลกชัน Items ที่มีรูปถ่ายโดยใช้ตัวเชื่อมต่อผู้ใช้ Office 365

รายชื่อผู้ใช้อาจมาจากแหล่งข้อมูลใดก็ได้ แต่ต้องระบุรูปภาพในคอมโพเนนต์ หากแหล่งข้อมูลของคุณไม่มีรูปภาพสำหรับผู้ใช้ คุณสามารถใช้ฟังก์ชัน AddColumns() Power Fx เพื่อเพิ่มแอตทริบิวต์ที่ถูกต้องลงในรายการและดึงภาพของผู้ใช้จากรายการรหัสผู้ใช้หรือชื่อผู้ใช้หลักที่แมปกับผู้ใช้ที่ใช้งานอยู่ใน Microsoft Entra

สร้างคอลเลกชันที่เรียกว่า UserPersonas โดยใช้ ตัวเชื่อมต่อผู้ใช้ Office 365 โดยอ้างอิงโค้ดตัวอย่างด้านล่าง จากนั้นส่งคอลเลกชันไปที่คุณสมบัติ Items ของตัวควบคุม

ClearCollect(
    UserPersonas,
    AddColumns(
       // Get first 10 users who have email ID - optional
        Filter(
            Office365Users.SearchUser({top: 10}),
            Mail <> Blank()
        ),
        "ItemPersonaKey",
        Mail,
        "ItemPersonaName",
        DisplayName,
        "IsImage",
        false,
        "ItemPersonaImageInfo",
        //Get base64 image data
        Substitute(
            JSON(
                Office365Users.UserPhotoV2(Id),
                JSONFormat.IncludeBinaryData
            ),
            """",
            ""
        ),
        "ItemPersonaPresence",
        "Away",
        "ItemPersonaClickable",
        true
    )
);

หมายเหตุ

ฟิลด์ IsImage ตั้งค่าเป็นเท็จ เนื่องจาก ItemPersonaImageInfo ที่มาจาก URL รูปภาพ หากต้องการแสดงฟิลด์รูปภาพ Dataverse ให้ตั้งค่าฟิลด์ IsImage เป็นจริง และใช้ ItemPersonaImage เพื่อส่งผ่านค่ารูปภาพแทน

การใช้

คุณสมบัติ Style

คุณสมบัติ Description
Theme ยอมรับสตริง JSON ที่สร้างขึ้นโดยใช้ ตัวออกแบบธีม Fluent UI (windows.net) การเว้นว่างไว้จะใช้ธีมเริ่มต้นที่กำหนดโดย Power Apps การเว้นว่างไว้จะใช้ธีมเริ่มต้นที่กำหนดโดย Power Apps ดูที่ ชุดรูปแบบ สำหรับความช่วยเหลือเกี่ยวกับวิธีกำหนดค่า
AccessibilityLabel ป้ายชื่อ aria สำหรับโปรแกรมอ่านหน้าจอ

คุณสมบัติ Event

คุณสมบัติ Description
InputEvent เหตุการณ์ที่ส่งตัวควบคุม ตัวอย่างเช่น SetFocus

พฤติกรรม

รองรับ SetFocus เป็น InputEvent

กำหนดค่าลักษณะ เมื่อเลือก

ใช้สูตร Switch() ในคุณสมบัติ OnSelect ของส่วนประกอบ เพื่อกำหนดค่าการดำเนินการเฉพาะสำหรับแต่ละรายการโดยอ้างถึง ItemPersonaKey ที่เลือกของตัวควบคุมเป็นค่าสวิตช์

ตัวอย่าง สูตร Power Fx ในคุณสมบัติ OnSelect ของ Facepile:

  Switch( Self.EventName,
    /* Define action when persona clicked */
    "PersonaEvent", 
    Notify("Persona clicked: " & Self.Selected.ItemPersonaKey);
    ,
    
    /* Define logic when the add button clicked */
    "AddButtonEvent", 
    Notify("Add button was clicked");
    ,
  
    /* Define logic when overflow button clicked*/
    "OverFlowButtonEvent",
    Notify("Overflow button clicked");
  )

ข้อจำกัด

ส่วนประกอบโค้ดนี้ใช้ได้เฉพาะในแอปพื้นที่ทำงานและหน้าที่กำหนดเองเท่านั้น