componente Person-Card no Microsoft Graph Toolkit

Artigo
11/07/2024

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.

HTML
React

Abra este exemplo no mgt.dev.

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.

HTML
React

Abra este exemplo no mgt.dev.

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`

Partilhar via