componente Personas en Microsoft Graph Toolkit

Puede usar el mgt-people componente web para mostrar un grupo de personas o contactos mediante sus fotos o iniciales. De forma predeterminada, mostrará los contactos más frecuentes para el usuario que ha iniciado sesión.

Este componente usa varios controles mgt-person , pero se puede enlazar a un conjunto de descriptores de personas. Si hay más personas que mostrar que el show-max valor, se agregará un número para indicar el número de contactos adicionales.

Ejemplo:

En el ejemplo siguiente se muestra un grupo de personas que se muestran mediante el mgt-people componente . Puede usar el editor de código para ver cómo cambian las propiedades el comportamiento del componente.

Abra este ejemplo en mgt.dev

Propiedades

De forma predeterminada, el mgt-people componente captura eventos del punto de /me/people conexión con el personType/class eq 'Person' filtro para mostrar los usuarios con contacto frecuente. Puede usar varias propiedades para cambiar este comportamiento.

Atributo	Propiedad	Descripción
show-max	showMax	Indica el número máximo de personas que se van a mostrar. El valor predeterminado es 3.
people	people	Matriz de personas para obtener o establecer la lista de personas representadas por el componente. Use esta propiedad para acceder a las personas cargadas por el componente. Establezca este valor para cargar sus propias personas.
group-id	groupId	Recupera personas de un Microsoft Graph específico del identificador correspondiente.
user-ids	userIds	Dado una matriz de usuario idsde Microsoft Graph , el componente representará estos usuarios.
consultas de personas	peopleQueries	Dada una matriz de consultas de personas (nombres, upns, correos electrónicos), el componente representará a estos usuarios.
person-card	personCard	Enumeración para determinar la acción del usuario necesaria para activar el panel flotante: hover, clicko none. El valor predeterminado es hover.
show-presence	showPresence	Un valor booleano para determinar si se va a mostrar el distintivo de presencia de persona en la imagen de persona.
resource	resource	Recurso que se va a obtener de Microsoft Graph (por ejemplo, /me/people).
ámbitos	ámbitos	Matriz opcional de cadenas si se usa la propiedad o un ámbito delimitado por comas si se usa el atributo . El componente usará estos ámbitos (con un proveedor compatible) para asegurarse de que el usuario ha dado su consentimiento al permiso adecuado.
version	version	Versión de API opcional que se usará al realizar la solicitud GET. El valor predeterminado es v1.0.
fallback-details	fallbackDetails	Matriz de objetos IDynamicPerson que representan una persona o varias personas cuando no se encuentra ningún usuario, persona o contacto en el gráfico.

En el ejemplo siguiente se establece el número máximo de personas que se van a mostrar.

<mgt-people
  show-max="4">
</mgt-people>

Propiedades personalizadas css

El mgt-people componente define las siguientes propiedades personalizadas CSS.

mgt-people {
  --list-margin: 8px 4px 8px 8px; /* Margin for component */
  --avatar-margin: 0 4px 0 0; /* Margin for each person */
  --color: #000000 /* Text color */
}

Plantillas

mgt-people Admite varias plantillas que puede usar para reemplazar ciertas partes del componente. Para especificar una plantilla, incluya un <template> elemento dentro de un componente y establezca el data-type valor en uno de los siguientes.

Tipo de datos	Contexto de datos	Descripción
default	people: lista de objetos person	La plantilla predeterminada reemplaza todo el componente por el suyo propio.
person	person: objeto person	Plantilla usada para representar a cada persona.
overflow	people: lista de objetos person max: número de personas mostradas extra: número de personas adicionales	Plantilla usada para representar el número más allá del máximo a la derecha de la lista de personas.
no-data	No se pasa ningún contexto de datos	Plantilla que se usa cuando no hay datos disponibles.
loading	No se pasa ningún contexto de datos	Plantilla usada mientras el componente carga el estado.

En los ejemplos siguientes se muestra cómo usar la person plantilla.

<mgt-people>
  <template>
    <ul><li data-for="person in people">
      <mgt-person person-query="{{ person.userPrincipalName }}"></mgt-person>
      <h3>{{ person.displayName }}</h3>
      <p>{{ person.jobTitle }}</p>
      <p>{{ person.department }}</p>
    </li></ul>
  </template>
</mgt-people>

Permisos de Microsoft Graph

Este componente usa las siguientes API y permisos de Microsoft Graph:

Configuración	Permiso	API
groupId Establecer	GroupMember.Read.All	/groups/${groupId}/members
userIds Establecer	User.ReadBasic.All	/users/${userId}
peopleQueries Establecer	People.Read	/me/people
resource Establecer	Permisos especificados en scopes	Especificado en resource
configuración predeterminada	People.Read	/me/people
showPresence Establecer	Presence.Read.All	/communications/getPresencesByUserId

Cuando se usan las plantillas predeterminadas, se requieren API y permisos adicionales. La plantilla predeterminada para este componente usa un componente mgt-person . Consulte su documentación para obtener la lista de permisos necesarios.

Autenticación

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

Caché

Almacén de objetos	Datos almacenados en caché	Comentarios
people	Información sobre las personas que coinciden con la consulta	Se usa cuando resource se especifica
users	Información sobre los usuarios que coinciden con la consulta	Se usa cuando groupId, peopleQueriesuserIdso no se especifica ninguna propiedad
presence	Presencia para el conjunto de personas especificado	Se usa cuando showPresence se establece en true

Nota:

De forma predeterminada, el mgt-people componente usa el mgt-person componente para mostrar información sobre las personas. El mgt-person componente descarga y almacena en caché automáticamente la foto para cada persona.

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

Ampliar para obtener más control

Para escenarios más complejos o una experiencia de usuario realmente personalizada, este componente expone varios protected render* métodos para invalidar en extensiones de componente.

Método	Descripción
renderLoading	Representa el estado de carga.
renderNoData	Representa el estado de datos vacío.
renderPeople	Representa una lista de personas, hasta el show-max valor .
renderPerson	Representa una persona individual.
renderOverflow	Representa una representación de las personas restantes más allá del show-max valor.