通过

Facepile Control（预览版）

  • 项目

[本文为预发布文档，可能会发生变化。]

用于显示图像和与图像交互的控件。

备注

GitHub 代码组件存储库中的完整文档和源代码。

Facepile 控件。

重要提示

  • 这是一项预览功能。
  • 预览功能不适合生产使用且功能可能受限。 这些功能在正式发布之前推出，以便客户可以提前使用并提供反馈。

说明

人脸标记 (Facepile) 显示角色列表。 每个圆圈代表一个人，包含他们的图像或姓名首字母。 在共享谁有权访问特定视图或文件时，或者在工作流中为某人分配任务时，通常使用此控件。

此代码组件提供了一个围绕绑定到按钮的 Fluent UI Facepile 控件的包装器，用于画布应用和自定义页面。

属性

键属性

属性 说明
Items 要呈现的操作项。 第一项将被视为根项。
PersonaSize 角色在屏幕上显示的大小
OverflowButtonType 选择要显示的溢出按钮类型以及是否显示
MaxDisplayablePersonas Facepille 要显示的最大角色数
五是默认的推荐编号
ImageShouldFadeIn 图像在显示时是否应具有淡入效果
ShowAddButton 添加按钮是否应出现在 Facepille 组件中
OverflowButtonLabel 溢出按钮的 Aria 标签
AddbuttonAriaLabel 添加按钮的 Aria 标签

Items 性能

Name 说明
ItemPersonaName 角色的显示名称
ItemPersonaKey 此键标识特定项目
此键必须是唯一的
ItemPersonaImage 包含 Persona Image(Profile Picture) 的 Dataverse 表的图像列
ItemPersonaImageInfo Persona Image(Profile Picture) 的 Url 或 Base64 内容
ItemPersonaPresence 可选 - 定义角色的状态
IsImage persona image(ItemPersonaImage) 是否是 Dataverse 表的图像列。
此属性允许组件基于类型（Url 或图像）呈现图像。 如果图像需要从 Dataverse 表引用，为 true；如果图像是从 ItemPersonaImageInfo 属性引用的 Url 或 Base64，则为 false
ItemPersonaClickable 角色是否可点击

Items 的 Power Fx 公式示例（使用 Office 365 用户连接器）

使用 Items 用户连接器使用照片生成 Office 365 集合

用户列表可以来自任何数据源，但必须向组件提供图像。 如果您的数据源没有用户的图像，您可以使用 AddColumns() Power Fx 函数将正确的属性添加到列表中，然后从映射到您的 Microsoft Entra 中的活动用户的用户 ID 或用户主体名称列表中检索用户的图像。

通过引用下面的示例代码，使用 Office 365 用户连接器生成名为 UserPersonas 的集合，然后将该集合传递到控件的 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 字段将设置为 false，因为 ItemPersonaImageInfo 来自图像 Url。 要呈现 Dataverse 图像字段，将 IsImage 字段设置为 true，改用 ItemPersonaImage 传递图像值。

用法

样式属性

属性 说明
Theme 接受使用 Fluent UI 主题设计器 (windows.net) 生成的 JSON 字符串。 将此属性留空将使用 Power Apps 定义的默认主题。 将此属性留空将使用 Power Apps 定义的默认主题。 有关如何配置的指导，请参阅主题化。
AccessibilityLabel 屏幕阅读器 aria 标签

事件属性

属性 说明
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");
  )

限制

此代码组件只能在画布应用和自定义页面中使用。