компонент Person-Card в наборе средств Microsoft Graph
Компонент Person-Card — это адаптивный компонент для просмотра дополнительных сведений, относящихся к пользователю. Он используется в качестве всплывающего элемента компонента mgt-person .
Дополнительные сведения о компоненте mgt-person см. в разделе mgt-person.
Пример использования mgt-person
В приведенном ниже примере показано использование компонента mgt-person-card с компонентом mgt-person. Наведите указатель мыши на пользователя или щелкните его, чтобы увидеть карточку пользователя.
Пример использования mgt-person-card в качестве отдельного компонента
В следующем примере показано использование mgt-person-card компонента . Используйте редактор кода, чтобы узнать, как свойства изменяют поведение компонента.
Настройка глобального компонента
Класс 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-query | String | Позволяет разработчикам предоставлять запрос пользователя для получения данных, отображаемых в компоненте карточки пользователя. |
| 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 |
Вы также можете локализовать следующие переменные в разделах карточки пользователя.
Контакт
| Имя строки | Значение по умолчанию |
|---|---|
| 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 |