Componente De personas en microsoft Graph Toolkit

Puede usar el componente web para mostrar un grupo de personas o mgt-people 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 valor, se agregará un número show-max para indicar el número de contactos adicionales.

Ejemplo

En el ejemplo siguiente se muestra un grupo de personas que se muestran con 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 componente captura eventos del punto de conexión con mgt-people el filtro para mostrar usuarios con contacto /me/people personType/class eq 'Person' 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 mostrarán. El valor predeterminado es 3.
people people Una matriz de personas para obtener o establecer la lista de personas que representa el componente. Use esta propiedad para obtener acceso a las personas cargadas por el componente. Establezca este valor para cargar sus propios usuarios.
group-id groupId Recupera a las personas de un grupo de Microsoft Graph del identificador correspondiente.
user-ids userIds Dado una matriz de microsoft Graph ids usuario, 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 desplegable - hover o click . El valor predeterminado es none.
show-presence showPresence Boolean para determinar si se va a mostrar el distintivo de presencia de la persona en la imagen de la persona.
resource resource El recurso que se obtiene 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 correcto.
version version Versión de API opcional que se usará al realizar la solicitud GET. El valor predeterminado es v1.0.

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

<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

Admite mgt-people varias plantillas que puede usar para reemplazar determinadas 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
default people: lista de objetos person La plantilla predeterminada reemplaza todo el componente por el suyo propio.
person person: person (objeto) Plantilla que se usa 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 los siguientes permisos y API de Microsoft Graph:

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

Al usar 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 resource cuando se especifica
users Información sobre los usuarios que coinciden con la consulta Se usa groupId cuando , o ninguna propiedad userIds peopleQueries especificada
presence Presencia para el conjunto de personas especificado Se usa cuando showPresence se establece en true

Nota

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

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

Ampliar para obtener más control

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

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.