componente Person-Card en Microsoft Graph Toolkit

  • Artículo

Un componente de Person-Card es un componente dinámico para mostrar más información relacionada con una persona. Por lo general, 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.

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.

Configuración global de componentes

La MgtPersonCard clase expone un objeto estático config que configura todos los componentes de tarjeta de persona de la aplicación. El objeto config 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 el objeto config para deshabilitar secciones o API.

import { MgtPersonCard } from `@microsoft/mgt`;

MgtPersonCard.config.useContactApis = false;
MgtPersonCard.config.sections.profile = false;

Las siguientes propiedades están disponibles en el objeto config.

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.

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 MgtPersonCard.config.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, simplemente establezca la propiedad false en en el código de inicialización de la aplicación:

import { MgtPersonCard } from `@microsoft/mgt`;

MgtPersonCard.config.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 intentará 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 cambiar esto 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 en 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 ha abierto 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, recuperará los datos necesarios y los almacenará 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