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

Статья
03/16/2023

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

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

Пример

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

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

Свойства

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

Атрибут	Свойство	Описание
show-max	showMax	Указывает максимальное количество пользователей для отображения. Значение по умолчанию: 3.
people	people	Массив людей для получения или настройки списка людей, отображаемых компонентом. Это свойство используется для доступа к людям, загружаемым компонентом. Настройте это значение, чтобы загружать своих людей.
group-id	groupId	Получает людей из определенного интерфейса Microsoft Graph по соответствующему идентификатору.
user-ids	userIds	При наличии массива пользовательских `ids` Microsoft Graph компонент отображает этих пользователей.
people-queries	peopleQueries	При наличии массива запросов пользователей (имена, UPN, адреса электронной почты) компонент отображает этих пользователей.
person-card	personCard	Перечисление для определения действия пользователя, необходимого для активации всплывающей панели — `hover`, `click`или `none`. Значение по умолчанию: `hover`.
show-presence	showPresence	Логическое значение, определяющее, следует ли отображать значок присутствия пользователя на изображении пользователя.
resource	resource	Ресурс, который требуется получить из Microsoft Graph (например, `/me/people`).
scopes	scopes	Необязательный массив строк, если используется свойство либо область с разделителями-запятыми, при использовании атрибута. Эти области используются компонентом (с поддерживаемым поставщиком), чтобы убедиться в том, что пользователь дал согласие на нужное разрешение.
version	version	Необязательная версия API, используемая при выполнении GET-запроса. Значение по умолчанию: `v1.0`.
сведения о резерве	fallbackDetails	Массив объектов IDynamicPerson, представляющих пользователя или нескольких людей, если в графе не найдено пользователя, пользователя или контакта.

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

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

Настраиваемые свойства CSS

Компонент mgt-people определяет следующие настраиваемые свойства CSS.

mgt-people {
  --list-margin: 8px 4px 8px 8px; /* Margin for component */
  --avatar-margin: 0 4px 0 0; /* Margin for each person */
  --color: #000000 /* Text color */
}

Шаблоны

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
`groupId` Установить	GroupMember.Read.All	/groups/${groupId}/members
`userIds` Установить	User.ReadBasic.All	/users/${userId}
`peopleQueries` Установить	People.Read	/me/people
`resource` Установить	Разрешения, указанные в `scopes`	Указано в `resource`
конфигурация по умолчанию	People.Read	/me/people
`showPresence` Установить	Presence.Read.All	/communications/getPresencesByUserId

Когда вы используете шаблоны по умолчанию, требуются дополнительные API и разрешения. Шаблон по умолчанию для этого компонента использует компонент 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`.