componente Person-Card en Microsoft Graph Toolkit

Artículo
11/07/2024

Un componente de Person-Card es un componente dinámico para mostrar más información relacionada con una persona. Se usa como control flotante en el mgt-person componente.

Para obtener más información sobre el mgt-person componente, consulte mgt-person.

Ejemplo de uso de mgt-person

En el ejemplo siguiente se muestra el uso del mgt-person-card componente con un mgt-person componente. Mantenga el puntero o haga clic en la persona para ver la tarjeta de persona.

HTML
React

Abra este ejemplo en mgt.dev.

Ejemplo de uso de mgt-person-card como componente independiente

En el ejemplo siguiente se muestra el uso del mgt-person-card componente. Use el editor de código para ver cómo cambian las propiedades el comportamiento del componente.

HTML
React

Abra este ejemplo en mgt.dev.

Configuración global de componentes

La MgtPersonCardConfig clase expone las propiedades de configuración estática que configuran todos los componentes de tarjeta de persona de la aplicación. La clase configura qué secciones y qué API usa la tarjeta de persona para capturar detalles sobre un usuario de Microsoft Graph.

De forma predeterminada, todas las secciones y API están habilitadas. En el ejemplo siguiente se muestra cómo usar las propiedades de clase para deshabilitar secciones o API.

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

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

Las siguientes propiedades están disponibles.

Propiedad	Descripción
useContactApis	`boolean` : indica si el componente de tarjeta de persona puede usar Microsoft Graph Contact API para buscar detalles de contacto y fotos. El valor predeterminado es `true`.
secciones	`object` - Configura qué secciones se muestran en la tarjeta de persona.
isSendMessageVisible	`boolean` : indica si el botón enviar mensaje está visible. El valor predeterminado es `true`.

Secciones de tarjeta de persona

La tarjeta de persona contiene varias secciones configurables para mostrar los detalles de la persona:

Contacto: información de contacto como correo electrónico, teléfono, posición, ubicación, etc.
Organización: gráfico organizativo con administradores, informes directos y personas relevantes.
Mensajes: mensajes de correo electrónico más relevantes con el usuario que inició sesión actual.
Archivos: archivos compartidos más relevantes con el usuario que inició sesión actual.
Perfil: información de perfil, como proyectos, aptitudes, idiomas, etc.

Las secciones se cargan de forma predeterminada, pero se pueden deshabilitar globalmente a través de la MgtPersonCardConfig.sections propiedad object. Las siguientes propiedades están disponibles.

Propiedad	Descripción
organización	`boolean` : indica si se muestra la sección organización de la tarjeta de persona. El valor predeterminado es `true`.
mailMessages	`boolean` : indica si se muestra la sección de mensajes de tarjeta de persona. El valor predeterminado es `true`.
archivos	`boolean` : indica si se muestra la sección de archivos de tarjeta de persona. El valor predeterminado es `true`.
perfil	`boolean` : indica si se muestra la sección de perfil de tarjeta de persona. El valor predeterminado es `true`.
lock-tab-navigation	`boolean` : permite el bloqueo de navegación mediante pestañas para que no fluya fuera de la sección de la tarjeta. El valor predeterminado es `false`.

Para deshabilitar una sección, establezca la propiedad false en en el código de inicialización de la aplicación:

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

MgtPersonCardConfig.sections.profile = false;

Configuración de integraciones de Teams

El componente Person-Card permite al usuario ponerse en contacto con la persona de destino, incluso a través del chat de Teams. Si usa el componente dentro de una aplicación de pestaña de Teams, puede asegurarse de que el componente se vincula directamente a un chat en lugar de abrir una ventana del explorador estableciendo en microsoftTeamsLibTeamsHelper.

Si el componente Person-Card no puede detectar la biblioteca de Teams, el componente intenta abrir el cliente web de Teams en su lugar.

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

TeamsHelper.microsoftTeamsLib = microsoftTeams;

Propiedades

De forma predeterminada, el mgt-person componente pasa los detalles de la persona al mgt-person-card componente. Sin embargo, puede usar estos atributos para cambiarlo al crear plantillas del mgt-person componente o al usar el mgt-person-card componente como componente independiente.

Atributo	Tipo	Descripción
person-details	MicrosoftGraph.User MicrosoftGraph.Person MicrosoftGraph.Contact	Objeto Person tal como lo define Microsoft Graph, que contiene detalles relacionados con el usuario.
person-image	Cadena	Uri de imagen relacionado con la persona que se muestra en la tarjeta.
inherit-details	Ninguno	Permite que la tarjeta de persona recoste el árbol primario para `mgt-person` que el componente use los mismos `person-details` datos y `person-image` .
user-id	Cadena	Permite a los desarrolladores proporcionar el identificador de usuario para recuperar los datos que se muestran en el componente de tarjeta de persona
person-query	Cadena	Permite a los desarrolladores proporcionar consultas de persona para recuperar los datos que se muestran en el componente de tarjeta de persona
person-card	Cadena	Especifica si el `person-card` componente se puede mostrar como una tarjeta emergente al mantener el mouse o hacer clic en él `mgt-person` . Los valores permitidos son `hover` o `click`.

Propiedades personalizadas css

El mgt-person-card componente define las siguientes propiedades personalizadas 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 obtener más información, consulte Componentes de estilo.

Plantillas

El componente Person-Card usa plantillas que permiten agregar o reemplazar partes del componente. Para especificar una plantilla, incluya un <template> elemento dentro de un componente y establezca en data-type uno de los siguientes valores.

Tipo de datos	Contexto de datos	Descripción
sin datos	nulo	Plantilla que se usa cuando no hay datos disponibles.
Es el valor predeterminado.	`person`: objeto de detalles de la persona `personImage`: dirección URL de la imagen	La plantilla predeterminada reemplaza todo el componente por el suyo propio.
person-details	`person`: objeto de detalles de la persona	Plantilla usada para representar la parte superior de la tarjeta de persona.
detalles adicionales	`person`: objeto de detalles de la persona `personImage`: la dirección URL de la imagen	Plantilla usada para agregar contenido personalizado al contenedor de detalles adicionales.

Por ejemplo, puede usar una plantilla para personalizar el componente asociado al mgt-person componente y una plantilla para agregar detalles adicionales a la tarjeta.

<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

Los siguientes eventos se desencadenan desde el componente.

Evento	Cuándo se emite	Datos personalizados	Cancelable	Burbujas	Funciona con una plantilla personalizada
`expanded`	El usuario abrió la sección de detalles expandidos de la tarjeta.	Ninguno	No	Sí	Sí, a menos que invalide la plantilla predeterminada.

Para obtener más información sobre el control de eventos, vea eventos.

Permisos de Microsoft Graph

El control Person-Card usa las siguientes API y permisos de Microsoft Graph. Para cada API llamada, el usuario debe tener al menos uno de los permisos enumerados.

Configuración	Permiso	API	Sección
En todas las configuraciones	User.Read, User.ReadWrite	/me	Predeterminada
`personDetails` establecer con el `id` del usuario, pero sin correo electrónico, o `userId` establecer	User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All	/users/{id}	Predeterminada
`personDetails` establecer con el `id` del usuario, pero sin correo electrónico, o `userId` establecer	User.ReadBasic.All, User.Read.All, User.ReadWrite.All	/users/{id}/photo/$value	Predeterminada
`personQuery` establecer en `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	Predeterminada
`personQuery` establecer en `me`	User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, User.ReadWrite.All	/me/photo/$value	Predeterminada
`personQuery` establecido en un valor diferente de `me`	People.Read, People.Read.All	/me/people/?$search=	Predeterminada
`personQuery` establecido en un valor distinto de `me` y `config.useContactApis` establecido en `true` (valor predeterminado)	Contacts.Read, Contacts.ReadWrite	/me/contacts/*	Predeterminada
`personQuery` establecido en un valor distinto de `me` y `config.useContactApis` establecido en `false`	User.ReadBasic.All, User.Read.All, User.ReadWrite.All	/users/{id}/photo/$value	Predeterminada
`showPresence` establecer en `true`	Presence.Read.All	/users/{id}/presence	Predeterminada
`sections.organization` enabled (valor predeterminado)	User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All	/users/{id}?$expand=manager($levels=max), /users/${id}/directReports	Organización
`sections.organization.showWorksWith` set (valor predeterminado)	People.Read.All	/users/{id}/people	Organización
`sections.mailMessages` enabled (valor predeterminado)	Mail.ReadBasic, Mail.Read, Mail.ReadWrite	/me/messages	Mensajes
`sections.files` enabled (valor predeterminado)	Sites.Read.All, Sites.ReadWrite.All	/me/insights/shared y /me/insights/used	Archivos
`sections.profile` enabled (valor predeterminado)	User.Read.All, User.ReadWrite.All	/users/{id}/profile	Perfil

La getMgtPersonCardScopes() función devuelve una matriz de ámbitos necesarios para que la tarjeta de persona funcione en función de la configuración global de la tarjeta de persona.

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

const neededScopes = getMgtPersonCardScopes();

Subcomponentes

El mgt-person-card componente consta de uno o varios subcomponentes que pueden requerir permisos distintos de los enumerados anteriormente. Para obtener más información, consulte la documentación de cada subcomponente:

Autenticación

El control Person-Card usa el proveedor de autenticación global descrito en la documentación de autenticación.

Caché

Importante

El mgt-person-card componente recupera los datos de persona básicos del componente primario mgt-person sin llamar a Microsoft Graph. Cuando mgt-person-card se usa por separado, recupera los datos necesarios y los almacena en caché. Los datos mostrados en las secciones de la tarjeta se recuperan por separado y no se almacenan en caché.

Almacén de objetos	Datos almacenados en caché	Comentarios
`people`	Información de la persona	Se usa cuando `personQuery` se especifica y su valor es diferente de `me`
`photos`	Foto de la persona
`presence`	Presencia de la persona	Se usa, cuando `showPresence` se establece en `true`
`users`	Información de usuario de la persona	Se usa cuando `userId` se especifica o se establece en `personQueryme`

Para obtener más información sobre cómo configurar la memoria caché, consulte Almacenamiento en caché.

Localización

El control expone las siguientes variables que se pueden localizar. Para obtener más información sobre cómo configurar la localización, consulte Localización de componentes.

Nombre de cadena	Valor predeterminado
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`

También puede localizar las siguientes variables en las secciones de tarjeta de persona.

Contacto

Nombre de cadena	Valor predeterminado
contactSectionTitle	`Contact`
emailTitle	`Email`
chatTitle	`Teams`
businessPhoneTitle	`Business Phone`
cellPhoneTitle	`Mobile Phone`
departmentTitle	`Department`
personTitle	`Email`
officeLocationTitle	`Office Location`
copyToClipboardButton	`Copy to clipboard`

Archivos

Nombre de cadena	Valor predeterminado
showMoreSubtitle	`Show more items`
filesSectionTitle	`Files`
sharedTextSubtitle	`Shared`

Mensajes

Nombre de cadena	Valor predeterminado
emailsSectionTitle	`Emails`

Organización

Nombre de cadena	Valor predeterminado
reportsToSectionTitle	`Reports to`
directReportsSectionTitle	`Direct reports`
organizationSectionTitle	`Organization`
youWorkWithSubSectionTitle	`You work with`
userWorksWithSubSectionTitle	`works with`

Perfil

Nombre de cadena	Valor predeterminado
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`

Compartir a través de