Facepile 控制 (預覽版)

[本文章是發行前版本文件，且隨時可能變更。]

用來顯示影像並與影像互動的控制項。

Note

完整文件和原始程式碼可在 GitHub 程式碼元件存放庫中找到。

重要

• 這是預覽功能。
• 預覽功能不供生產時使用，而且可能功能受限。 這些功能是在正式發行前先行推出，讓客戶能夠搶先體驗並提供意見反應。

描述

Face pile (Facepile) 會顯示角色清單。 每個圓圈代表一個人員，並包含其影像或姓名縮寫。 當共用有權存取特定檢視或檔案的人員，或在工作流程中為某人指派工作時，通常會使用此控制項。

此程式碼元件為繫結至按鈕的 Fluent UI Facepile 控制項提供了一個包裝函式，以便在畫布應用程式和自訂頁面中使用。

內容

索引鍵屬性

屬性	描述
Items	要呈現的動作項目。 第一個項目會視為根項目。
PersonaSize	要顯示在畫面上的角色大小
OverflowButtonType	選擇要顯示的溢位按鈕類型，以及是否要顯示
MaxDisplayablePersonas	要在 Facepile 中顯示的最大角色數 預設和建議的數量為 5 個
ImageShouldFadeIn	影像顯示時是否應具有淡入效果
ShowAddButton	新增按鈕是否應出現在 Facepile 元件中
OverflowButtonLabel	溢位按鈕的 Aria 標籤
AddbuttonAriaLabel	新增按鈕的 Aria 標籤

Items 性能

姓名	描述
ItemPersonaName	角色的顯示名稱
ItemPersonaKey	金鑰會識別特定項目 索引鍵必須是唯一的
ItemPersonaImage	包含角色影像 (設定檔圖片) 的 Dataverse 表格影像資料行
ItemPersonaImageInfo	角色影像 (設定檔圖片) 的 URL 或 Base64 內容
ItemPersonaPresence	選擇性 - 定義角色的存在
IsImage	角色影像 (ItemPersonaImage) 是否為 Dataverse 表格的影像資料行。 此屬性可讓元件根據類型 (URL 或影像) 來呈現影像。 如果影像需要從 Dataverse 表格中參考，則為 True；如果需要從 ItemPersonaImageInfo 屬性參考的 URL 或 Base64，則為 False
ItemPersonaClickable	角色是否應該可點擊

Items 的範例 Power Fx 公式 (使用 Office 365 使用者連接器)

使用 Office 365 使用者連接器產生包含相片的 Items 集合

使用者清單可以來自任何資料來源，但是必須將影像提供給元件。 如果資料來源沒有使用者的影像，您可以使用 AddColumns() Power Fx 函數，將正確的屬性新增至清單，並從對應至 Microsoft Entra 之使用中使用者的使用者識別碼或使用者主體名稱清單擷取使用者的影像。

參考下列範例程式碼，然後將集合傳遞至控制項的 Items 屬性中，以使用 Office 365 使用者連接器來產生名為 UserPersonas 的集合。

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

Note

由於 ItemPersonaImageInfo 來自影像 URL，因此將 IsImage 欄位設定為 False。 若要呈現 Dataverse 影像欄位，請將 IsImage 欄位設定為 True，並改用 ItemPersonaImage 以傳入影像值。

使用狀況

樣式屬性

屬性	描述
Theme	接受使用 Fluent UI Theme Designer (windows.net) 產生的 JSON 字串。 將此留空將使用 Power Apps 定義的預設主題。 將此留空將使用 Power Apps 定義的預設主題。 有關如何設定的指南，請參閱佈景主題。
AccessibilityLabel	螢幕助讀程式 aria-label

事件屬性

屬性	描述
InputEvent	要傳送到控制項的事件。 例如，SetFocus。

行為

支援將 SetFocus 視為 InputEvent。

設定「選取時」行為

使用組件的 OnSelect 屬性中的 Switch() 公式，透過參考控制項件選擇的 ItemPersonaKey 作為開關值，為每個項目設定特定的動作。

Facepile 的 OnSelect 屬性中的範例 Power Fx 公式：

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

限制

此程式碼元件只能在畫布應用程式和自訂頁面中使用。