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

  • Статья

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

Этот компонент использует несколько элементов управления 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. Это свойство используется для получения прямых членов группы. Это необязательное свойство.
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.

Локализация

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