Thành phần kiểm soát Facepile (bản xem trước)

[Bài viết này là tài liệu trước khi phát hành và có thể thay đổi.]

Một thành phần kiểm soát được dùng để hiển thị và tương tác với hình ảnh.

Lưu ý

Toàn bộ tài liệu và mã nguồn có trong kho lưu trữ thành phần mã GitHub.

Quan trọng

• Đây là một tính năng xem trước.
• Các tính năng xem trước không được dùng cho sản xuất và có thể có chức năng bị hạn chế. Những tính năng này khả dụng trước khi có bản phát hành chính thức để khách hàng có thể truy cập sớm và cung cấp phản hồi.

Description

Phần tổng hợp khuôn mặt (Facepile) hiển thị danh sách cá nhân. Mỗi vòng tròn đại diện cho một người và chứa hình ảnh hoặc tên viết tắt của người đó. Thông thường, thành phần kiểm soát này được sử dụng khi chia sẻ đối tượng có quyền truy cập vào một dạng xem/tệp cụ thể hoặc khi giao nhiệm vụ cho ai đó trong quy trình làm việc.

Thành phần mã này cung cấp một trình bao bọc quanh thành phần kiểm soát Facepile trong Fluent UI được liên kết với một nút để sử dụng trong các ứng dụng canvas và trang tùy chỉnh.

Thuộc tính

Thuộc tính khóa

Thuộc tính	Description
Items	Các mục hành động sẽ hiển thị. Mục đầu tiên được xem là mục gốc.
PersonaSize	Kích thước chân dung sẽ hiển thị trên màn hình
OverflowButtonType	Để chọn loại nút Mục bổ sung sẽ hiển thị và xem có hiển thị hay không
MaxDisplayablePersonas	Số lượng Cá nhân tối đa sẽ hiển thị trong Phần tổng hợp khuôn mặt Số lượng mặc định và được khuyến nghị là 5
ImageShouldFadeIn	Liệu hình ảnh có cần có hiệu ứng Mờ dần khi hiển thị hay không
ShowAddButton	Liệu nút Thêm có cần hiển thị trong thành phần Facepile hay không
OverflowButtonLabel	Nhãn Aria cho nút Mục bổ sung
AddbuttonAriaLabel	Nhãn Aria cho nút Thêm

Thuộc tính Items

Tên	Description
ItemPersonaName	Tên hiển thị của Cá nhân
ItemPersonaKey	Khóa xác định mục cụ thể Khóa phải là duy nhất
ItemPersonaImage	Cột Hình ảnh của bảng Dataverse chứa Hình ảnh cá nhân (Ảnh hồ sơ)
ItemPersonaImageInfo	URL hoặc nội dung Base64 của Hình ảnh cá nhân (Ảnh hồ sơ)
ItemPersonaPresence	Không bắt buộc – Để xác định Sự hiện diện của cá nhân
IsImage	Liệu hình ảnh cá nhân (ItemPersonaImage) có phải là Cột Hình ảnh của Dataverse bảng hay không. Thuộc tính này cho phép thành phần hiển thị hình ảnh dựa trên loại (URL hoặc Hình ảnh). Đúng trong trường hợp Hình ảnh cần được tham chiếu từ Dataverse bảng & sai, trong trường hợp đó là Url hoặc Base64 được tham chiếu từ thuộc tính ItemPersonaImageInfo
ItemPersonaClickable	Liệu cá nhân có cần có thể nhấp hay không

Công thức Power Fx mẫu cho Items (sử dụng trình kết nối Người dùng Office 365)

Tạo tập hợp Items có ảnh bằng trình kết nối Người dùng Office 365

Danh sách người dùng có thể đến từ bất kỳ nguồn dữ liệu nào, nhưng hình ảnh phải được cung cấp cho thành phần. Nếu nguồn dữ liệu của bạn không có hình ảnh cho người dùng, bạn có thể sử dụng hàm AddColumns() Power Fx để thêm thuộc tính chính xác vào danh sách và truy xuất hình ảnh của người dùng, từ danh sách Id người dùng hoặc người dùng tên chính ánh xạ tới người dùng đang hoạt động trong của bạn Microsoft Entra.

Tham khảo mã mẫu bên dưới, sau đó tạo một tập hợp tên là UserPersonas bằng trình kết nối Người dùng Office 365 rồi truyền tập hợp đó vào thuộc tính Items của thành phần kiểm soát.

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
    )
);

Lưu ý

Trường IsImage được đặt thành false vì ItemPersonaImageInfo đến từ một URL hình ảnh. Để hiển thị các trường hình ảnh Dataverse, hãy đặt trường IsImage thành true và sử dụng ItemPersonaImage để truyền dữ liệu hình ảnh vào.

Mức sử dụng

Thuộc tính kiểu

Thuộc tính	Description
Theme	Chấp nhận chuỗi JSON được tạo bằng cách sử dụng Fluent UI Theme Designer (windows.net). Để trống phần này sẽ sử dụng chủ đề mặc định được xác định bởi Power Apps. Để trống phần này sẽ sử dụng chủ đề mặc định được xác định bởi Power Apps. Xem chủ đề để biết hướng dẫn về cách đặt cấu hình.
AccessibilityLabel	Nhãn aria cho trình đọc màn hình

Thuộc tính sự kiện

Thuộc tính	Description
InputEvent	Một sự kiện sẽ gửi vào điều khiển. Ví dụ: SetFocus.

Hành vi

Hỗ trợ SetFocus dưới dạng InputEvent.

Đặt cấu hình hành vi "Khi chọn"

Sử dụng công thức Switch() trong thuộc tính OnSelect của thành phần để đặt cấu hình hành động cụ thể cho mỗi mục bằng cách tham chiếu đến ItemPersonaKey đã chọn của thành phần kiểm soát dưới dạng giá trị chuyển đổi.

Công thức Power Fx mẫu trong thuộc tính OnSelect của 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");
  )

Giới hạn

Chỉ có thể sử dụng thành phần mã này trong ứng dụng canvas và trang tùy chỉnh.