Facepile 控件（预览版）

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

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

注释

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

Facepile 控件。

Important

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

Description

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

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

属性

关键属性

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

Items 属性

名称 Description
ItemPersonaName 角色的显示名称
ItemPersonaKey 此键标识特定项目
此键必须是唯一的
ItemPersonaImage 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 用户连接器）

使用 Office 365 用户连接器生成包含照片的集合

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

通过使用 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 传递图像值。

使用情况

样式属性

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

事件属性

财产 Description
InputEvent 要发送到控件的事件。 例如，SetFocus。

Behavior

支持 SetFocus 作为 InputEvent。

配置“选择时”行为

在组件的属性中使用Switch()公式，通过引用控件的OnSelect选择作为切换值，为每个项目配置特定操作。

OnSelect 的 Facepile 属性中的 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");
  )

Limitations

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

  • Last updated on