Person-Card componente no Microsoft Graph Toolkit
Um componente Person-Card é um componente responsivo para exibir mais informações relacionadas a uma pessoa. Geralmente, ele é usado como um flyout no mgt-person componente.
Para obter mais informações sobre o mgt-person componente, consulte mgt-person.
Exemplo usando mgt-person
O exemplo a seguir mostra o uso do mgt-person-card componente com um mgt-person componente. Passe o mouse ou clique na pessoa para ver o Cartão de Pessoa.
Exemplo usando mgt-person-cartão como um componente autônomo
O exemplo a seguir mostra o uso do mgt-person-card componente. Use o editor de código para ver como as propriedades alteram o comportamento do componente.
Configuração de componente global
A MgtPersonCard classe expõe um objeto estático config que configura todas as pessoas cartão componentes no aplicativo. O objeto config configura quais seções e quais APIs são usadas pela pessoa cartão buscar detalhes sobre um usuário do Microsoft Graph.
Por padrão, todas as seções e APIs estão habilitadas. O exemplo a seguir mostra como usar o objeto config para desabilitar seções ou APIs.
import { MgtPersonCard } from `@microsoft/mgt`;
MgtPersonCard.config.useContactApis = false;
MgtPersonCard.config.sections.profile = false;
As propriedades a seguir estão disponíveis no objeto config.
| Propriedade | Descrição |
|---|---|
| useContactApis | boolean- Indica se a pessoa cartão componente pode usar a API de Contato do Microsoft Graph para pesquisar detalhes e fotos de contato. O valor padrão é true. |
| seções | object- Configura quais seções são mostradas na pessoa cartão. |
Seções de cartão pessoa
A pessoa cartão contém várias seções configuráveis para exibir detalhes da pessoa:
- Contato – Entre em contato com informações como email, telefone, posição, localização e muito mais.
- Organização – grafo organizacional com gerentes, relatórios diretos e pessoas relevantes.
- Mensagens – Mensagens de email mais relevantes com o usuário conectado atual.
- Arquivos – Arquivos compartilhados mais relevantes com o usuário conectado atual.
- Perfil – Informações de perfil, como projetos, habilidades, idiomas e muito mais.
As seções são carregadas por padrão, mas podem ser desabilitadas globalmente por meio da propriedade do MgtPersonCard.config.sections objeto. As propriedades a seguir estão disponíveis.
| Propriedade | Descrição |
|---|---|
| organization | boolean- Indica se a pessoa cartão seção da organização é mostrada. O valor padrão é true. |
| mailMessages | boolean- Indica se a pessoa cartão seção mensagens é mostrada. O valor padrão é true. |
| arquivos | boolean- Indica se a pessoa cartão seção arquivos é mostrada. O valor padrão é true. |
| perfil | boolean- Indica se a pessoa cartão seção de perfil é mostrada. O valor padrão é true. |
| lock-tab-navigation | boolean- Permite o bloqueio da navegação usando guias para que ela não flua da seção cartão. O valor padrão é false. |
Para desabilitar uma seção, basta definir a propriedade como false no código de inicialização do aplicativo:
import { MgtPersonCard } from `@microsoft/mgt`;
MgtPersonCard.config.sections.profile = false;
Configuração para integrações do Teams
O componente Person-Card permite que o usuário entre em contato com a pessoa de destino, inclusive por meio do chat do Teams. Se estiver usando o componente dentro de um aplicativo de guia do Teams, você poderá garantir que o componente se conecte diretamente a um chat em vez de abrir uma janela do navegador definindo o microsoftTeamsLib em TeamsHelper.
Se o componente Person-Card não conseguir detectar o lib do Teams, o componente tentará abrir o cliente Web do Teams.
import * as microsoftTeams from "@microsoft/teams-js";
import { TeamsHelper } from "@microsoft/mgt-element";
TeamsHelper.microsoftTeamsLib = microsoftTeams;
Propriedades
Por padrão, o mgt-person componente passa os detalhes da pessoa para o mgt-person-card componente. No entanto, você pode usar esses atributos para alterá-lo ao templating o mgt-person componente ou ao usar o mgt-person-card componente como um componente autônomo.
| Atributo | Tipo | Descrição |
|---|---|---|
| detalhes da pessoa | MicrosoftGraph.User MicrosoftGraph.Person MicrosoftGraph.Contact |
Objeto person conforme definido pelo Microsoft Graph, contendo detalhes relacionados ao usuário. |
| imagem de pessoa | Cadeia de caracteres | Uri de imagem relacionado à pessoa exibida no cartão. |
| herdado-detalhes | Nenhum | Permite que cartão pessoa ande na árvore pai para mgt-person que o componente use os mesmos person-details dados eperson-image. |
| id do usuário | Cadeia de caracteres | Permite que os desenvolvedores forneçam id do usuário para recuperar dados mostrados no componente cartão pessoa |
| consulta de pessoa | Cadeia de caracteres | Permite que os desenvolvedores forneçam consultas pessoais para recuperar dados mostrados no componente cartão pessoa |
| person-cartão | Cadeia de caracteres | Especifica o wheter que o person-card componente pode ser mostrado como um pop-up cartão quando você passa o mgt-person mouse ou clica no componente. Os valores permitidos são hover ou click. |
Propriedades personalizadas do CSS
O mgt-person-card componente define as seguintes propriedades personalizadas do 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;
}
Para saber mais, confira componentes de estilo.
Modelos
O componente Person-Card usa modelos que permitem adicionar ou substituir partes do componente. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina o data-type como um dos valores a seguir.
| Tipo de dados | Contexto de dados | Descrição |
|---|---|---|
| sem dados | null | O modelo usado quando nenhum dado está disponível. |
| Padrão. | person: o objeto detalhes da pessoapersonImage: a URL da imagem |
O modelo padrão substitui todo o componente por seu próprio. |
| detalhes da pessoa | person: o objeto detalhes da pessoa |
O modelo usado para renderizar a parte superior da pessoa cartão. |
| detalhes adicionais | person: o objeto detalhes da pessoapersonImage: a URL da imagem |
O modelo usado para adicionar conteúdo personalizado ao contêiner de detalhes adicionais. |
Por exemplo, você pode usar um modelo para personalizar o componente anexado ao mgt-person componente e um modelo para adicionar detalhes adicionais no cartão.
<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>
Eventos
Os eventos a seguir são disparados do componente.
| Evento | Quando ele é emitido | Dados personalizados | Cancelável | Bolhas | Funciona com modelo personalizado |
|---|---|---|---|---|---|
expanded |
O usuário abriu a seção de detalhes expandidos do cartão | Nenhum | Não | Sim | Sim, a menos que você substitua o modelo padrão |
Para obter mais informações sobre como lidar com eventos, consulte eventos.
Permissões do Microsoft Graph
O controle Person-Card usa as seguintes APIs e permissões do Microsoft Graph. Para cada API chamada, o usuário deve ter pelo menos uma das permissões listadas.
| Configuração | Permissão | API | Seção |
|---|---|---|---|
| Em todas as configurações | User.Read, User.ReadWrite | /Me | Padrão |
personDetails definido com o do id usuário, mas sem email ou userId definido |
User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All | /users/{id} | Padrão |
personDetails definido com o do id usuário, mas sem email ou userId definido |
User.ReadBasic.All, User.Read.All, User.ReadWrite.All | /users/{id}/photo/$value | Padrão |
personQuery definido como 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 | Padrão |
personQuery definido como me |
User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, User.ReadWrite.All | /me/photo/$value | Padrão |
personQuery definido como um valor diferente do me |
People.Read, People.Read.All | /me/people/?$search= | Padrão |
personQuery definido como um valor diferente me e config.useContactApis definido como true (padrão) |
Contacts.Read, Contacts.ReadWrite | /me/contacts/* | Padrão |
personQuery definido como um valor diferente me e config.useContactApis definido como false |
User.ReadBasic.All, User.Read.All, User.ReadWrite.All | /users/{id}/photo/$value | Padrão |
showPresence definido como true |
Presence.Read.All | /users/{id}/presence | Padrão |
sections.organization habilitado (padrão) |
User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All | /users/{id}?$expand=manager($levels=max), /users/${id}/directReports | Organização |
sections.organization.showWorksWith set (padrão) |
People.Read.All | /users/{id}/people | Organização |
sections.mailMessages habilitado (padrão) |
Mail.ReadBasic, Mail.Read, Mail.ReadWrite | /me/mensagens | Mensagens |
sections.files habilitado (padrão) |
Sites.Read.All, Sites.ReadWrite.All | /me/insights/shared e /me/insights/used | Arquivos |
sections.profile habilitado (padrão) |
User.Read.All, User.ReadWrite.All | /users/{id}/profile | Perfil |
A getMgtPersonCardScopes() função retorna uma matriz de escopos necessários para que a pessoa cartão funcione com base na configuração de cartão de pessoa global.
import { getMgtPersonCardScopes } from `@microsoft/mgt-components`;
const neededScopes = getMgtPersonCardScopes();
Subcomponentes
O mgt-person-card componente consiste em um ou mais subcomponentes que podem exigir outras permissões do que as listadas anteriormente. Para obter mais informações, confira a documentação de cada subcomponente:
Autenticação
O controle Person-Card usa o provedor de autenticação global descrito na documentação de autenticação.
Cache
Importante
O mgt-person-card componente recupera os dados básicos de pessoa do componente pai mgt-person sem chamar o Microsoft Graph. Quando mgt-person-card for usado separadamente, ele recuperará os dados necessários e os armazenará em cache. Os dados exibidos nas seções do cartão são recuperados separadamente e não são armazenados em cache.
| Repositório de objetos | Dados armazenados em cache | Comentários |
|---|---|---|
people |
Informações da pessoa | Usado quando personQuery é especificado e seu valor é diferente de me |
photos |
Foto da pessoa | |
presence |
Presença da pessoa | Usado, quando showPresence é definido como true |
users |
Informações do usuário da pessoa | Usado quando userId é especificado ou o personQuery é definido como me |
Para obter mais informações sobre como configurar o cache, consulte Cache.
Localização
O controle expõe as variáveis a seguir que podem ser localizadas. Para obter detalhes sobre como configurar a localização, confira Localizando componentes.
| Nome da cadeia de caracteres | Valor padrão |
|---|---|
| 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 |
Você também pode localizar as seguintes variáveis nas seções cartão pessoa.
Contato
| Nome da cadeia de caracteres | Valor padrão |
|---|---|
| contactSectionTitle | Contact |
| emailTitle | Email |
| chatTitle | Teams |
| businessPhoneTitle | Business Phone |
| cellPhoneTitle | Mobile Phone |
| departmentTitle | Department |
| personTitle | Email |
| officeLocationTitle | Office Location |
| copyToClipboardButton | Copy to clipboard |
Arquivos
| Nome da cadeia de caracteres | Valor padrão |
|---|---|
| showMoreSubtitle | Show more items |
| filesSectionTitle | Files |
| sharedTextSubtitle | Shared |
Mensagens
| Nome da cadeia de caracteres | Valor padrão |
|---|---|
| emailsSectionTitle | Emails |
Organização
| Nome da cadeia de caracteres | Valor padrão |
|---|---|
| reportsToSectionTitle | Reports to |
| directReportsSectionTitle | Direct reports |
| organizationSectionTitle | Organization |
| youWorkWithSubSectionTitle | You work with |
| userWorksWithSubSectionTitle | works with |
Perfil
| Nome da cadeia de caracteres | Valor padrão |
|---|---|
| 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 |
Comentários
Brevemente: Ao longo de 2024, vamos descontinuar progressivamente o GitHub Issues como mecanismo de feedback para conteúdos e substituí-lo por um novo sistema de feedback. Para obter mais informações, veja: https://aka.ms/ContentUserFeedback.
Submeter e ver comentários