компонент Person-Card в наборе средств Microsoft Graph

Предостережение

Набор средств Microsoft Graph не рекомендуется использовать. Период выхода на пенсию начинается 1 сентября 2025 года, а полный выход на пенсию запланирован на 28 августа 2026 года. Разработчикам следует перейти на использование пакетов SDK для Microsoft Graph или других поддерживаемых средств Microsoft Graph для создания веб-интерфейсов. Дополнительные сведения см. в объявлении об устаревании.

Компонент Person-Card — это адаптивный компонент для просмотра дополнительных сведений, относящихся к пользователю. Он используется в качестве всплывающего элемента компонента mgt-person .

Дополнительные сведения о компоненте mgt-person см. в разделе mgt-person.

Пример использования mgt-person

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

HTML
React;

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

Пример использования mgt-person-карта в качестве отдельного компонента

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

HTML
React;

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

Настройка глобального компонента

Класс MgtPersonCardConfig предоставляет свойства статической конфигурации, которые настраивают все компоненты пользователя карта в приложении. Класс настраивает, какие разделы и какие API используются пользователем карта для получения сведений о пользователе из Microsoft Graph.

По умолчанию все разделы и API-интерфейсы включены. В следующем примере показано, как использовать свойства класса для отключения разделов или API.

import { MgtPersonCardConfig } from '@microsoft/mgt-components';

MgtPersonCardConfig.useContactApis = false;
MgtPersonCardConfig.sections.profile = false;
MgtPersonCardConfig.sections.files = false;

Для редактирования доступны следующие свойства.

Свойство	Описание
useContactApis	`boolean` — Указывает, может ли компонент карточки контакта использовать API контактов Microsoft Graph для поиска контактных данных и фотографий. Значение по умолчанию: `true`.
sections	`object` — Настройка отображения разделов в карточке контакта.
isSendMessageVisible	`boolean` — Указывает, отображается ли кнопка отправки сообщения. Значение по умолчанию — `true`.

Разделы карточки контакта

Карточка контакта содержит несколько настраиваемых разделов, в которых отображаются сведения о пользователе:

Контакт — контактные данные, такие как электронная почта, номер телефона, должность, расположение и другие сведения.
Организация — организационная диаграмма с руководителями, подчиненными или важными пользователями.
Сообщения — наиболее релевантные сообщения электронной почты с текущим вошедшего пользователя.
Файлы — наиболее релевантные общие файлы с текущим вошедшего пользователя.
Профиль — информация о профиле, например проекты, навыки, языки и другие сведения.

Разделы загружаются по умолчанию, но их можно отключить глобально с помощью свойства объекта MgtPersonCardConfig.sections. Для редактирования доступны следующие свойства.

Свойство	Описание
organization;	`boolean` — указывает, отображается ли раздел организации карточки контакта. Значение по умолчанию: `true`.
mailMessages	`boolean` — указывает, отображается ли раздел сообщений карточки контакта. Значение по умолчанию: `true`.
files	`boolean` — указывает, отображается ли раздела файлов карточки контакта. Значение по умолчанию: `true`.
profile	`boolean` — указывает, отображается ли раздел профиля карточки контакта. Значение по умолчанию: `true`.
lock-tab-navigation	`boolean`— Позволяет блокировать навигацию с помощью вкладок, чтобы она не вытекала из раздела карта. Значение по умолчанию — `false`.

Чтобы отключить раздел, задайте свойству значение false в коде инициализации приложения:

import { MgtPersonCardConfig } from '@microsoft/mgt-components';

MgtPersonCardConfig.sections.profile = false;

Настройка интеграции с Teams

Компонент Person-Card позволяет связаться с целевым контактом, в том числе с помощью чата в Teams. При использовании компонента во вкладке приложения Teams можно сделать так, чтобы компонент не открывал окно браузера, а сразу переходил к чату, настроив microsoftTeamsLib в TeamsHelper.

Если компоненту Person-Card не удается обнаружить библиотеку Teams, компонент пытается открыть веб-клиент Teams.

import * as microsoftTeams from "@microsoft/teams-js";
import { TeamsHelper } from "@microsoft/mgt-element";

TeamsHelper.microsoftTeamsLib = microsoftTeams;

Свойства

По умолчанию mgt-person компонент передает сведения о пользователе компоненту mgt-person-card . Однако эти атрибуты можно использовать, чтобы изменить его при создании mgt-person шаблона компонента или при использовании компонента в mgt-person-card качестве автономного компонента.

Атрибут	Тип	Описание
person-details	MicrosoftGraph.User MicrosoftGraph.Person MicrosoftGraph.Contact	Объект пользователя, определенный в Microsoft Graph и содержащий подробные сведения о пользователе.
person-image	String	Универсальный код ресурса (URI) изображения, связанный с человеком, который отображается в карточке.
inherit-details	Нет	Разрешает проработку дерева родителей для компонента `mgt-person` для использования одинаковых данных `person-details` и `person-image`.
user-id	String	Позволяет разработчикам предоставлять идентификатор пользователя для получения данных, отображаемых в компоненте person-карта
person-query	String	Позволяет разработчикам предоставлять запрос пользователя для получения данных, отображаемых в компоненте person-карта
person-card	String	Указывает, может ли `person-card` компонент отображаться в виде всплывающего карта при наведении указателя мыши или щелчке `mgt-person` на компонент. Допустимые значения: `hover` или `click`.

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

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

<mgt-person-card class="person-card" person-query="me"></mgt-person-card>

.person-card {
  --person-card-nav-back-arrow-hover-color: green;
  --person-card-icon-color: red;
  --person-card-line1-font-size: 30px;
  --person-card-line1-font-weight: 800;
  --person-card-line1-line-height: 38px;
  --person-card-line2-font-size: 24px;
  --person-card-line2-font-weight: 600;
  --person-card-line2-line-height: 30px;
  --person-card-line3-font-size: 24px;
  --person-card-line3-font-weight: 300;
  --person-card-line3-line-height: 29px;
  --person-card-avatar-size: 85px;
  --person-card-details-left-spacing: 25px;
  --person-card-avatar-top-spacing: 25px;
  --person-card-details-bottom-spacing: 20px;
  --person-card-background-color: pink;
  --person-card-expanded-background-color-hover: blue;
  --person-card-icon-hover-color: magenta;
  --person-card-show-more-color: blue;
  --person-card-show-more-hover-color: green;
  --person-card-fluent-background-color: yellow;
  --person-card-line1-text-color: purple;
  --person-card-line2-text-color: blue;
  --person-card-line3-text-color: green;
  --person-card-fluent-background-color-hover: orange;
  --person-card-base-icons-left-spacing: 110px;

  /** person-card sections tokens */

  /** Organization */
  --organization-active-org-member-target-background-color: blue;
  --organization-title-color: green;
  --organization-sub-title-color: yellow;
  --organization-hover-color: grey;
  --organization-coworker-hover-color: grey;
  --organization-coworker-border-color: purple;
  --organization-active-org-member-border-color: red;
  --organization-coworker-person-avatar-size: 50px;
  --organization-member-person-avatar-size: 60px;
  --organization-direct-report-person-avatar-size: 80px;

  /** Style for the avatar-size in the person-card sections */
  --organization-member-person-avatar-size: 60px;
  --coworker-person-avatar-size: 50px;
  --direct-report-person-avatar-size: 40px;

  /** Files: Uses custom css properties for mgt-file-list and mgt-file */

  /** Messages */

  --message-subject-color: purple;
  --message-from-color: blue;
  --message-color: black;
  --message-hover-color: grey;
  --message-subject-font-size: 18px;
  --message-subject-font-weight: 600;
  --message-subject-line-height: 25px;
  --message-from-font-size: 40px;
  --message-from-font-weight: 800;
  --message-date-color: purple;
  --message-from-line-height: 25px;

  /** Contact */

  --contact-title-color: blue;
  --contact-value-color: green;
  --contact-link-color: red;
  --contact-link-hover-color: purple;
  --contact-background-color: grey;
  --contact-copy-icon-color: yellow;

  /** Profile */

  --profile-title-color: blue;
  --profile-background-color: grey;
  --profile-token-item-color: blue;
  --profile-token-overflow-color: purple;
  --profile-section-title-color: black;
  --profile-token-item-background-color: yellow;
}

Дополнительные сведения см. в статье Компоненты стиля.

Шаблоны

В компоненте Person-Card используются шаблоны, позволяющие добавлять и заменять части компонента. Чтобы указать шаблон, добавьте <template> элемент в компонент и задайте для data-type одного из следующих значений.

Тип данных	Контекст данных	Описание
no-data	null	Шаблон, используемый, если данные недоступны.
default	`person`: объект сведений о пользователе `personImage`: URL-адрес изображения.	Шаблон по умолчанию заменяет весь компонент вашим собственным компонентом.
person-details	`person`: объект сведений о пользователе	Шаблон, используемый для отображения верхней части карточки пользователя.
additional-details	`person`: объект сведений о пользователе `personImage`: URL-адрес изображения	Шаблон, который используется для добавления настраиваемого контента в контейнер дополнительных сведений.

Например, можно использовать шаблон для настройки компонента, присоединенного к компонентуmgt-person, и шаблон для добавления дополнительных сведений в карта.

<mgt-person person-query="me" view="twolines" person-card="hover">
  <template data-type="person-card">
    <mgt-person-card inherit-details>
      <template data-type="additional-details">
        <h3>Stuffed Animal Friends:</h3>
        <ul>
          <li>Giraffe</li>
          <li>lion</li>
          <li>Rabbit</li>
        </ul>
      </template>
    </mgt-person-card>
  </template>
</mgt-person>

События

Из компонента инициируются следующие события.

Событие	Когда он генерируется	Пользовательские данные	Отменяемым	Пузыри	Работает с пользовательским шаблоном
`expanded`	Пользователь открыл развернутый раздел сведений карта	Нет	Нет	Да	Да, если вы не переопределяете шаблон по умолчанию

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

Разрешения Microsoft Graph

Этот элемент управления Person-Card использует следующие API и разрешения Microsoft Graph. Для каждого вызываемого API пользователь должен иметь по крайней мере одно из указанных разрешений.

Конфигурация	Разрешение	API	Раздел
Во всех конфигурациях	User.Read, User.ReadWrite	/me	По умолчанию
`personDetails` set с пользователем `id` , но без электронной почты, или `userId` set	User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All	/users/{id}	По умолчанию
`personDetails` set с пользователем `id` , но без электронной почты, или `userId` set	User.ReadBasic.All, User.Read.All, User.ReadWrite.All	/users/{id}/photo/$value	По умолчанию
`personQuery` установите значение `me`	User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All	/me, /users/{id}/photo/$value	По умолчанию
`personQuery` установите значение `me`	User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, User.ReadWrite.All	/me/photo/$value	По умолчанию
`personQuery` значение, отличное от `me`	People.Read, People.Read.All	/me/people/?$search=	По умолчанию
`personQuery` задайте значение, отличное от `me` и `config.useContactApis` задайте значение `true` (по умолчанию)	Contacts.Read, Contacts.ReadWrite	/me/contacts/*	По умолчанию
`personQuery` задайте значение, отличное от `me` и `config.useContactApis` задайте значение `false`	User.ReadBasic.All, User.Read.All, User.ReadWrite.All	/users/{id}/photo/$value	По умолчанию
`showPresence` установите значение `true`	Presence.Read.All	/users/{id}/presence	По умолчанию
`sections.organization` включено (по умолчанию)	User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All	/users/{id}?$expand=manager($levels=max), /users/${id}/directReports	Организация
`sections.organization.showWorksWith` set (по умолчанию)	People.Read.All	/users/{id}/people	Организация
`sections.mailMessages` включено (по умолчанию)	Mail.ReadBasic, Mail.Read, Mail.ReadWrite	/me/messages	Сообщения
`sections.files` включено (по умолчанию)	Sites.Read.All, Sites.ReadWrite.All	/me/insights/shared and /me/insights/used	Файлы
`sections.profile` включено (по умолчанию)	User.Read.All, User.ReadWrite.All	/users/{id}/profile	Профиль

Функция getMgtPersonCardScopes() возвращает массив областей, необходимых для работы карта пользователя на основе глобальной конфигурации пользователя карта.

import { getMgtPersonCardScopes } from `@microsoft/mgt-components`;

const neededScopes = getMgtPersonCardScopes();

Подкомпоненты

Компонент mgt-person-card состоит из одного или нескольких подкомпонентов, для которых могут потребоваться другие разрешения, отличные от перечисленных ранее. Дополнительные сведения см. в документации по каждому подкомпоненту:

Проверка подлинности

В элементе управления Person-Card используется глобальный поставщик проверки подлинности, описанный в документации по проверке подлинности.

Кэш

Важно!

Компонент mgt-person-card получает базовые данные о пользователях из родительского mgt-person компонента без вызова Microsoft Graph. Если mgt-person-card используется отдельно, он извлекает сами необходимые данные и кэширует их. Данные, отображаемые в разделах карта, извлекаются отдельно и не кэшируются.

Хранилище объектов	Кэшированные данные	Замечания
`people`	Сведения о человеке	Используется, если `personQuery` задано значение , а его значение отличается от `me`
`photos`	Фотография человека
`presence`	Присутствие пользователя	Используется, если `showPresence` задано значение `true`
`users`	Сведения о пользователе пользователя	Используется, если `userId` задано значение или `personQuery` задано значение `me`

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

Локализация

Элемент управления предоставляет следующие переменные, которые можно локализовать. Дополнительные сведения о настройке локализации см. в разделе Локализация компонентов.

Имя строки	Значение по умолчанию
endOfCard	`End of the card`
quickMessage	`Send a quick message`
expandDetailsLabel	`Expand details`
renderOverviewSectionLabel	`Render overview section`
sendMessageLabel	`Send message`
emailButtonLabel	`Email`
callButtonLabel	`Call`
chatButtonLabel	`Chat`
videoButtonLabel	`Video`
closeCardLabel	`Close card`

Вы также можете локализовать следующие переменные в разделах person-карта.

Контакт

Имя строки	Значение по умолчанию
contactSectionTitle	`Contact`
emailTitle	`Email`
chatTitle	`Teams`
businessPhoneTitle	`Business Phone`
cellPhoneTitle	`Mobile Phone`
departmentTitle	`Department`
personTitle	`Email`
officeLocationTitle	`Office Location`
copyToClipboardButton	`Copy to clipboard`

Файлы

Имя строки	Значение по умолчанию
showMoreSubtitle	`Show more items`
filesSectionTitle	`Files`
sharedTextSubtitle	`Shared`

Сообщения

Имя строки	Значение по умолчанию
emailsSectionTitle	`Emails`

Организация

Имя строки	Значение по умолчанию
reportsToSectionTitle	`Reports to`
directReportsSectionTitle	`Direct reports`
organizationSectionTitle	`Organization`
youWorkWithSubSectionTitle	`You work with`
userWorksWithSubSectionTitle	`works with`

Профиль

Имя строки	Значение по умолчанию
SkillsAndExperienceSectionTitle	`Skills & Experience`
AboutCompactSectionTitle	`About`
SkillsSubSectionTitle	`Skills`
LanguagesSubSectionTitle	`Languages`
WorkExperienceSubSectionTitle	`Work Experience`
EducationSubSectionTitle	`Education`
professionalInterestsSubSectionTitle	`Professional Interests`
personalInterestsSubSectionTitle	`Personal Interests`
birthdaySubSectionTitle	`Birthday`
currentYearSubtitle	`Current`
socialMediaSubSectionTitle	`Social Media`

Кері байланыс

Бет пайдалы болды ма?

Last updated on 2024-11-07