Person-Card componente no Microsoft Graph Toolkit

  • Artigo

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 pessoa
personImage: 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 pessoa
personImage: 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