Microsoft Graph 工具包中的人员组件

  • 项目

可以使用 mgt-people Web 组件通过照片或姓名缩写显示一组人员或联系人。 默认情况下，它显示已登录用户的最常见联系人。

此组件使用多个 mgt-person 控件，但它可以绑定到一组人员描述符。 如果要显示的人员数超过 show-max 该值，则会添加一个数字来指示其他联系人的数量。

示例

以下示例显示了使用 mgt-people 组件显示的一组人员。 可以使用代码编辑器来查看 属性 如何更改组件的行为。

属性

默认情况下， mgt-people 组件使用筛选器从 /me/people 终结点提取事件， personType/class eq 'Person' 以显示经常联系的用户。 可以使用多个属性来更改此行为。

属性 属性 说明
show-max showMax 指示要显示的最大人数。 默认值为 3。
people people Microsoft Graph 人员对象的数组。 使用此属性访问组件加载的人员。 设置此值以将自己的人员加载到组件上。
group-id groupId Microsoft Entra ID组的 ID。 此属性用于检索组的直接成员。 此属性可选。
user-ids userIds 要显示的用户 ID 的数组。 此属性可选。
people-queries peopleQueries 用于自定义人员查询响应的 Microsoft Graph 查询。
person-卡 personCardInteraction 设置行为以显示呈现的人员卡。 默认值设置为显示将鼠标悬停 (PersonCardInteraction.hover) 卡的人员。
show-presence showPresence 确定人员组件是否应呈现状态锁屏提醒。 默认值为 false。
resource resource 要从 Microsoft Graph 获取的资源 URL (例如 /me/people ，) 。
scopes scopes 一个逗号分隔的字符串，该字符串具有要授予组件的权限。 此属性可选。
version version 发出请求时要使用的 API 版本。 默认值为 v1.0。
fallback-details fallbackDetails 当图形中找不到用户/人员/联系人时，表示一个或多个人的 Microsoft Graph 人员对象数组。

以下示例设置要显示的最大人数。

<mgt-people show-max="4"> </mgt-people>

CSS 自定义属性

组件 mgt-people 定义以下 CSS 自定义属性。

<mgt-people class="people"></mgt-people>

.people {
  --people-list-margin: 12px;
  --people-avatar-gap: 8px;
  --people-overflow-font-color: orange;
  --people-overflow-font-size: 16px;
  --people-overflow-font-weight: 600;
  --people-person-avatar-size: 70px;
}

若要了解详细信息，请参阅 设置组件样式。

模板

mgt-people支持多个模板，可用于替换组件的某些部分。 若要指定模板，请在组件中包含元素 <template> ，并将 设置为 data-type 以下值之一。

数据类型 数据上下文 说明
default people：人员对象列表 默认模板将整个组件替换为你自己的组件。
person person：person 对象 用于呈现每个人的模板。
overflow people：人员对象列表
max：显示的人员数
extra：额外人数		 用于在人员列表右侧呈现超出最大值的数字的模板。
no-data 未传递任何数据上下文 在没有可用数据时使用的模板。
loading 未传递任何数据上下文 组件加载状态时使用的模板。

以下示例演示如何使用 person 模板。

<mgt-people>
  <template>
    <ul>
      <li data-for="person in people">
        <mgt-person person-query="{{ person.userPrincipalName }}"></mgt-person>
        <h3>{{ person.displayName }}</h3>
        <p>{{ person.jobTitle }}</p>
        <p>{{ person.department }}</p>
      </li>
    </ul>
  </template>
</mgt-people>

Microsoft Graph 权限

此组件使用以下 Microsoft Graph API 和权限。 对于每个调用的 API，用户必须至少具有列出的权限之一。

配置 权限 API
默认配置 People.Read、People.Read.All /me/people
group-id 设置 GroupMember.Read.All、Group.Read.All、Directory.Read.All、GroupMember.ReadWrite.All、Group.ReadWrite.All /groups/${groupId}/members/microsoft.graph.user
user-ids 设置 User.ReadBasic.All、User.Read.All、Directory.Read.All、User.ReadWrite.All、Directory.ReadWrite.All /users/$ ({userId}
people-queries 设置 People.Read、People.Read.All /me/people
resource 设置 中指定的权限 scopes 在 中指定 resource
show-presence 设置 Presence.Read.All /communications/getPresencesByUserId

子组件

组件 mgt-people 由一个或多个子组件组成，这些子组件可能需要除前面列出的权限以外的其他权限。 有关详细信息，请参阅每个子组件的文档： mgt-person。

身份验证

控件使用身份验证文档中所述的全局 身份验证提供程序。

缓存

对象存储 缓存的数据 备注
people 有关与查询匹配的人员的信息 在指定时 resource 使用
users 有关与查询匹配的用户的信息 在 、 userIdspeopleQueries 或未指定任何属性时groupId使用
presence 指定人员集的状态 设置为 时 showPresence 使用 true

注意

默认情况下， mgt-people 组件使用 mgt-person 组件来显示有关人员的信息。 该 mgt-person 组件会自动下载并缓存每个人的照片。

有关如何配置缓存的详细信息，请参阅 缓存。

扩展以获得更多控制

对于更复杂的方案或真正自定义的 UX，此组件公开了组件扩展中的多种 protected render* 替代方法。

方法 说明
renderLoading 呈现加载状态。
renderNoData 呈现空数据状态。
renderPeople 呈现人员列表，最高为 show-max 值。
renderPerson 呈现单个人员。
renderOverflow 呈现值之外的 show-max 剩余人员的表示形式。

本地化

控件不公开任何本地化变量。