Person-Card componente de Microsoft Graph Toolkit

Un Person-Card es un componente dinámico para mostrar más información relacionada con una persona. Por lo general, se usa como un flyout en el mgt-person componente.

Para obtener más información acerca mgt-person del componente, vea mgt-person.

Ejemplo

En el ejemplo siguiente se muestra el uso del mgt-person-card componente con un mgt-person componente. Mantenga el mouse sobre la persona para ver la tarjeta de persona y use el editor de código para ver cómo cambian las propiedades el comportamiento del componente.

Abra este ejemplo en mgt.dev

Configuración global de componentes

La clase expone un objeto estático que configura todos los componentes MgtPersonCard de tarjeta de persona de la config aplicación. El objeto config configura qué secciones y qué API usa la tarjeta de persona para obtener 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 la API de contacto de Microsoft Graph para buscar detalles de contacto y fotos. El valor predeterminado es true.
secciones object - Configura las secciones que 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 y mucho más.
  • 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 ha iniciado sesión actual.
  • Archivos: archivos compartidos más relevantes con el usuario que ha iniciado sesión actual.
  • Perfil: información de perfil como proyectos, habilidades, idiomas y mucho más.

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

Propiedad Descripción
organización boolean - Indica si se muestra la sección organización de tarjetas 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.

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

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

MgtPersonCard.config.sections.profile = false;

Configuración para Teams integraciones

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

Si el Person-Card no puede detectar el Teams lib, el componente intentará abrir el Teams web en su lugar.

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

TeamsHelper.microsoftTeamsLib = microsoftTeams;

Para obtener más información acerca del TeamsProvider proveedor, vea Microsoft Teams provider.

Propiedades

De forma predeterminada, mgt-person el componente pasará los detalles de la persona al mgt-person-card componente. Sin embargo, puede usar estos atributos para cambiar esto al tentar el componente o al usar el componente mgt-person mgt-person-card como componente independiente.

Atributo Tipo Descripción
person-details MicrosoftGraph.User
MicrosoftGraph.Person
MicrosoftGraph.Contact
Objeto Person definido por Microsoft Graph, que contiene detalles relacionados con el usuario.
person-image string Uri de imagen relacionado con la persona que se muestra en la tarjeta.
inherit-details Ninguno. Permite a la persona-tarjeta recorrer el árbol primario mgt-person para que el componente use los mismos person-details person-image datos.
user-id string Permite a los desarrolladores proporcionar user-id para recuperar los datos que se muestran en el componente person-card
person-query string Permite a los programadores proporcionar una consulta de persona para recuperar los datos que se muestran en el componente de tarjeta de persona

Plantillas

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

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: el objeto de detalles de la persona
personImage: la dirección URL de la imagen
La plantilla predeterminada reemplaza todo el componente por el suyo propio.
person-details person: el objeto de detalles de la persona Plantilla usada para representar la parte superior de la tarjeta de persona.
detalles adicionales person: el 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 adjunto al componente y una plantilla para agregar mgt-person 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>

Events

Los siguientes eventos se desencadenan desde el componente.

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

Para obtener más información acerca del control de eventos, vea eventos.

Propiedades personalizadas css

El mgt-person-card componente define las siguientes propiedades personalizadas css.

mgt-person {
  --person-card-display-name-font-size: 40px;
  --person-card-display-name-color: #ffffff;
  --person-card-title-font-size: 20px;
  --person-card-title-color: #ffffff;
  --person-card-subtitle-font-size: 10px;
  --person-card-subtitle-color: #ffffff;
  --person-card-details-title-font-size: 10px;
  --person-card-details-title-color: #b3bf0a;
  --person-card-details-item-font-size: 20px;
  --person-card-details-item-color: #3abf0a;
  --person-card-background-color: #000000;
}

Para obtener más información, consulte styling components.

Permisos de Microsoft Graph

El control Person-Card usa los siguientes permisos y API Graph Microsoft.

Configuración Permiso API Sección
personDetailsestablecido con el usuario, pero sin correo electrónico, o id establecido userId en personQuery``me User.ReadBasic.All /users/{id}, /users/{id}/photo/$value Predeterminado
personQuery establecido en un valor diferente de me People.Read /me/people/?$search= Predeterminado
personQuery establecido en un valor diferente y me config.useContactApis establecido en true (valor predeterminado) Contacts.Read /me/contacts/* Predeterminado
showPresence establecido en true Presence.Read.All /users/{id}/presence Predeterminado
sections.organization habilitado (predeterminado) User.Read.All /users/{id}/manager Organización
sections.organization.showWorksWith set (predeterminado) People.Read.All /users/{id}/people Organización
sections.mailMessages habilitado (predeterminado) Mail.ReadBasic /me/messages Mensajes
sections.files habilitado (predeterminado) Sites.Read.All /me/insights/shared y /me/insights/used Archivos

La clase también expone un método estático que devuelve una matriz de ámbitos necesarios para que la tarjeta de persona funcione en función de la MgtPersonCard configuración global de la tarjeta de getScopes persona.

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

const neededScopes = MgtPersonCard.getScopes();

Autenticación

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

Caché

Importante

El componente recupera los datos de la persona mgt-person-card básica del componente primario sin llamar a Microsoft mgt-person Graph. Cuando mgt-person-card se usa por separado, recuperará los datos necesarios en sí 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 personQuery cuando se especifica y su valor es diferente de me
photos Foto de la persona
presence Presencia de la persona Se usa, showPresence cuando se establece en true
users Información de usuario de la persona Se usa userId cuando se especifica o se establece personQuery en me

Consulta Almacenamiento en caché para obtener más información sobre cómo configurar la memoria caché.