Compartilhar via


componente Person-Card no Microsoft Graph Toolkit

Um componente Person-Card é um componente reativo para apresentar mais informações relacionadas com uma pessoa. É utilizado como uma lista de opções no mgt-person componente.

Para obter mais informações sobre o mgt-person componente, consulte mgt-person.

Exemplo com mgt-person

O exemplo seguinte mostra a utilização do mgt-person-card componente com um mgt-person componente. Paire o cursor do rato ou clique na pessoa para ver o Cartão de Pessoa.

Exemplo de utilização de mgt-person-card como um componente autónomo

O exemplo seguinte mostra a utilização do mgt-person-card componente. Utilize o editor de código para ver como as propriedades alteram o comportamento do componente.

Configuração de componente global

A MgtPersonCardConfig classe expõe as propriedades de configuração estática que configuram todos os componentes do cartão de pessoa na aplicação. A classe configura as secções e que APIs são utilizadas pelo cartão de pessoa para obter detalhes sobre um utilizador a partir do Microsoft Graph.

Por predefinição, todas as secções e APIs estão ativadas. O exemplo seguinte mostra como utilizar as propriedades de classe para desativar secções ou APIs.

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

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

Estão disponíveis as seguintes propriedades.

Propriedade Descrição
useContactApis boolean - Indica se o componente do cartão de pessoa pode utilizar a API de Contacto do Microsoft Graph para procurar detalhes de contacto e fotografias. O valor padrão é true.
seções object - Configura as secções apresentadas no cartão de pessoa.
isSendMessageVisible boolean - Indica se o botão enviar mensagem está visível. O valor padrão é true.

Secções de cartões de pessoa

O cartão de pessoa contém várias secções configuráveis para apresentar os detalhes da pessoa:

  • Contacto – informações de contacto, como e-mail, telefone, posição, localização e muito mais.
  • Organização – organograma com gestores, relatórios diretos e pessoas relevantes.
  • Mensagens – mensagens de e-mail mais relevantes com o utilizador com sessão iniciada atual.
  • Ficheiros – os ficheiros partilhados mais relevantes com o utilizador com sessão iniciada atual.
  • Perfil – informações de perfil, como projetos, competências, idiomas e muito mais.

As secções são carregadas por predefinição, mas podem ser desativadas globalmente através da propriedade do MgtPersonCardConfig.sections objeto. Estão disponíveis as seguintes propriedades.

Propriedade Descrição
organization boolean - Indica se a secção organização do cartão de pessoa é apresentada. O valor padrão é true.
mailMessages boolean - Indica se a secção de mensagens de cartão de pessoa é apresentada. O valor padrão é true.
arquivos boolean - Indica se a secção ficheiros de cartão da pessoa é apresentada. O valor padrão é true.
perfil boolean - Indica se a secção perfil de cartão de pessoa é apresentada. O valor padrão é true.
navegação entre separadores de bloqueio boolean - Permite o bloqueio da navegação através de separadores para que não saia da secção do cartão. O valor padrão é false.

Para desativar uma secção, defina a propriedade como false no código de inicialização da aplicação:

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

MgtPersonCardConfig.sections.profile = false;

Configuração para integrações do Teams

O componente Person-Card permite que o utilizador contacte a pessoa de destino, incluindo através do chat do Teams. Se utilizar o componente dentro de uma aplicação de separador do Teams, pode garantir que o componente liga diretamente a uma conversa em vez de abrir uma janela do browser ao definir o microsoftTeamsLib em TeamsHelper.

Se o componente Person-Card não conseguir detetar a biblioteca do Teams, o componente tenta abrir o cliente Web do Teams.

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

TeamsHelper.microsoftTeamsLib = microsoftTeams;

Propriedades

Por predefinição, o mgt-person componente transmite os detalhes da pessoa ao mgt-person-card componente. No entanto, pode utilizar estes atributos para alterá-lo ao utilizar o mgt-person componente ou ao utilizar o mgt-person-card componente como um componente autónomo.

Atributo Tipo Descrição
detalhes da pessoa MicrosoftGraph.User
MicrosoftGraph.Person
MicrosoftGraph.Contact
Objeto pessoa conforme definido pelo Microsoft Graph, que contém detalhes relacionados com o utilizador.
pessoa-imagem Cadeia de caracteres URI da imagem relacionado com a pessoa apresentada no cartão.
herdar detalhes Nenhum Permite que o cartão de pessoa ande na árvore principal para mgt-person que o componente utilize os mesmos person-details dados e person-image .
user-id Cadeia de caracteres Permite que os programadores forneçam o ID de utilizador para obter os dados apresentados no componente de cartão de pessoa
person-query Cadeia de caracteres Permite que os programadores forneçam consultas pessoais para obter os dados apresentados no componente de cartão de pessoa
cartão de pessoa Cadeia de caracteres Especifica se o person-card componente pode ser apresentado como um cartão de pop-up quando paira o rato ou clica no mgt-person 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, veja Componentes de estilo.

Modelos

O componente Person-Card utiliza modelos que lhe permitem adicionar ou substituir partes do componente. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina como data-type um dos seguintes valores.

Tipo de dados Contexto de dados Descrição
sem dados null O modelo utilizado quando não existem dados disponíveis.
Padrão. person: o objeto de detalhes da pessoa
personImage: o URL da imagem
O modelo predefinido substitui todo o componente pelo seu próprio.
detalhes da pessoa person: o objeto de detalhes da pessoa O modelo utilizado para compor a parte superior do cartão de pessoa.
detalhes adicionais person: o objeto de detalhes da pessoa
personImage: o URL da imagem
O modelo utilizado para adicionar conteúdo personalizado ao contentor de detalhes adicionais.

Por exemplo, pode utilizar um modelo para personalizar o componente anexado ao mgt-person componente e um modelo para adicionar detalhes adicionais ao 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 seguintes eventos são acionados a partir do componente.

Evento Quando é emitido Dados personalizados Cancelável Bolhas Funciona com um modelo personalizado
expanded O utilizador abriu a secção de detalhes expandidos do cartão Nenhum Não Sim Sim, a menos que substitua o modelo predefinido

Para obter mais informações sobre o processamento de eventos, veja eventos.

Permissões do Microsoft Graph

O controlo Person-Card utiliza as seguintes APIs e permissões do Microsoft Graph. Para cada API chamada, o utilizador tem de 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 definir com o utilizador id , mas sem correio eletrónico, ou userId definido User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All /users/{id} Padrão
personDetails definir com o utilizador id , mas sem correio eletrónico, ou userId definido User.ReadBasic.All, User.Read.All, User.ReadWrite.All /users/{id}/photo/$value Padrão
personQuery definir 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 definir como me User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, User.ReadWrite.All /me/photo/$value Padrão
personQuery definir para um valor diferente de me People.Read, People.Read.All /me/people/?$search= Padrão
personQuery definido como um valor diferente de me e config.useContactApis definido como true (predefinição) Contacts.Read, Contacts.ReadWrite /me/contacts/* Padrão
personQuery definir para um valor diferente de me e config.useContactApis definido como false User.ReadBasic.All, User.Read.All, User.ReadWrite.All /users/{id}/photo/$value Padrão
showPresence definir como true Presence.Read.All /users/{id}/presence Padrão
sections.organization ativado (predefiniçã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 (predefinição) People.Read.All /users/{id}/people Organização
sections.mailMessages ativado (predefinição) Mail.ReadBasic, Mail.Read, Mail.ReadWrite /me/messages Mensagens
sections.files ativado (predefinição) Sites.Read.All, Sites.ReadWrite.All /me/insights/shared e /me/insights/used Arquivos
sections.profile ativado (predefinição) User.Read.All, User.ReadWrite.All /users/{id}/profile Perfil

A getMgtPersonCardScopes() função devolve uma matriz de âmbitos necessários para que o cartão de pessoa funcione com base na configuração do cartão de pessoa global.

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

const neededScopes = getMgtPersonCardScopes();

Subcomponentes

O mgt-person-card componente é composto por um ou mais subcomponentes que podem exigir outras permissões do que as listadas anteriormente. Para obter mais informações, veja a documentação de cada subcomponente:

Autenticação

O controlo Person-Card utiliza o fornecedor de autenticação global descrito na documentação de autenticação.

Cache

Importante

O mgt-person-card componente obtém os dados básicos da pessoa do componente principal mgt-person sem chamar o Microsoft Graph. Quando mgt-person-card é utilizado separadamente, obtém os dados necessários e coloca-os em cache. Os dados apresentados nas secções do cartão são obtidos separadamente e não são colocados em cache.

Arquivo de objetos Dados em cache Comentários
people Informações da pessoa Utilizado quando personQuery é especificado e o respetivo valor é diferente de me
photos Fotografia da pessoa
presence Presença da pessoa Utilizado, quando showPresence está definido como true
users Informações de utilizador da pessoa Utilizado quando userId é especificado ou está personQuery definido como me

Para obter mais informações sobre como configurar a cache, veja Colocação em cache.

Localização

O controlo expõe as seguintes variáveis que podem ser localizadas. Para obter detalhes sobre como configurar a localização, veja Localizar componentes.

Nome da cadeia 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

Também pode localizar as seguintes variáveis nas secções person-card.

Contato

Nome da cadeia 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 Valor padrão
showMoreSubtitle Show more items
filesSectionTitle Files
sharedTextSubtitle Shared

Mensagens

Nome da cadeia Valor padrão
emailsSectionTitle Emails

Organização

Nome da cadeia Valor padrão
reportsToSectionTitle Reports to
directReportsSectionTitle Direct reports
organizationSectionTitle Organization
youWorkWithSubSectionTitle You work with
userWorksWithSubSectionTitle works with

Perfil

Nome da cadeia 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