Facepile การควบคุม (ดูตัวอย่าง)

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

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

รายละเอียด

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

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

คุณสมบัติ

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

Items คุณสมบัติ

ตัวอย่างสูตร 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
    )
);

การใช้

คุณสมบัติการจัดสไตล์

คุณสมบัติของเหตุการณ์

พฤติกรรม

รองรับ 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");
  )

Limitations

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