компонент Люди в наборе средств Microsoft Graph

Статья
11/07/2024

Вы можете использовать веб-компонент mgt-people, чтобы отображать группу людей или контактов с помощью фотографий и инициалов. По умолчанию отображаются наиболее частые контакты для вошедшего пользователя.

Этот компонент использует несколько элементов управления mgt-person, но его можно связать с набором дескрипторов людей. Если отображается больше людей, чем show-max значение, добавляется число, указывающее количество других контактов.

Пример

В следующем примере показана группа людей, отображенная с помощью компонента mgt-people. Вы можете использовать редактор кода, чтобы узнать, как свойства изменяют поведение компонента.

HTML
React;

Откройте этот пример в mgt.dev.

Свойства

По умолчанию компонент mgt-people извлекает события из конечной точки /me/people с помощью фильтра personType/class eq 'Person', чтобы отобразить пользователей, часто выступающих в роли контактов. Это поведение можно изменить с помощью нескольких свойств.

Атрибут	Свойство	Описание
show-max	showMax	Указывает максимальное количество пользователей для отображения. Значение по умолчанию: 3.
people	people	Массив объектов-пользователей Microsoft Graph. Это свойство используется для доступа к людям, загружаемым компонентом. Задайте это значение, чтобы загрузить собственных пользователей в компонент.
group-id	groupId	Идентификатор группы Microsoft Entra ID. Это свойство используется для получения прямых членов группы. Это необязательное свойство.
user-ids	userIds	Массив идентификаторов пользователей для отображения. Это необязательное свойство.
people-queries	peopleQueries	Запросы Microsoft Graph для настройки ответа на запросы людей.
person-card	personCardInteraction	Задает поведение для отображения пользователя, карта на отрисованном человеке. Значение по умолчанию задается для отображения пользователя, карта при наведении указателя мыши(PersonCardInteraction.hover).
show-presence	showPresence	Определяет, должен ли компонент пользователя отображать значок присутствия. Значение по умолчанию − ложь.
resource	resource	URL-адрес ресурса для получения из Microsoft Graph (например, `/me/people`).
scopes	scopes	Строка с разделителями-запятыми с разрешениями, предоставляемыми компоненту. Это необязательное свойство.
version	version	Версия API, используемая при выполнении запроса. Значение по умолчанию — `v1.0`.
сведения о резерве	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`: объект пользователя	Шаблон, используемый для отображения каждого пользователя.
`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

Этот компонент использует следующие API и разрешения Microsoft Graph. Для каждого вызываемого 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`	Сведения о пользователях, соответствующих запросу	Используется, если `groupId`свойства `userIds`, `peopleQueries` или не указаны
`presence`	Присутствие для указанного набора людей	Используется, если `showPresence` задано значение `true`

Примечание.

По умолчанию mgt-people компонент использует компонент для отображения сведений mgt-person о людях. Компонент mgt-person автоматически скачивает и кэширует фотографию для каждого пользователя.

Дополнительные сведения о настройке кэша см. в разделе Кэширование.

Расширение для дополнительного управления

В более сложных сценариях или настраиваемых пользовательских интерфейсах этот компонент предоставляет несколько методов protected render* для переопределения в расширениях компонента.

Метод	Описание
renderLoading	Отображает состояние загрузки.
renderNoData	Отображает пустое состояние данных.
renderPeople	Отображает список людей до значения `show-max`.
renderPerson	Отображает отдельного пользователя.
renderOverflow	Отображает представление оставшегося количества людей, превышающего значение `show-max`.

Локализация

Элемент управления не предоставляет переменные локализации.

Поделиться через