componente Personas en Microsoft Graph Toolkit

  • Artículo

Puede usar el mgt-people componente web para mostrar un grupo de personas o contactos mediante sus fotos o iniciales. De forma predeterminada, muestra 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 agrega un número para indicar el número de otros contactos.

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.

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 objetos de persona de Microsoft Graph. Use esta propiedad para acceder a las personas cargadas por el componente. Establezca este valor para cargar sus propias personas en el componente.
group-id groupId Identificador de un grupo de Microsoft Entra ID. Esta propiedad se usa para recuperar los miembros directos del grupo. Esta propiedad es opcional.
user-ids userIds Matriz de identificadores de usuario que se van a mostrar. Esta propiedad es opcional.
consultas de personas peopleQueries Consultas de Microsoft Graph para personalizar la respuesta de consulta de personas.
person-card personCardInteraction Establece el comportamiento para mostrar la tarjeta de persona en una persona representada. El valor predeterminado se establece para mostrar la tarjeta de persona al mantener el mouse (PersonCardInteraction.hover).
show-presence showPresence Determina si un componente de persona debe representar la notificación de presencia. El valor predeterminado es false.
resource resource Dirección URL del recurso que se va a obtener de Microsoft Graph (por ejemplo, /me/people).
ámbitos ámbitos Cadena delimitada por comas con permisos que se concederán al componente. Esta propiedad es opcional.
version version Versión de API que se va a usar al realizar la solicitud. El valor predeterminado es v1.0.
fallback-details fallbackDetails Matriz de objetos de persona de Microsoft Graph que representan a una persona o a 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 class="people"></mgt-people>

.people {
  --people-list-margin: 12px;
  --people-avatar-gap: 8px;
  --people-overflow-font-color: orange;
  --people-overflow-font-size: 16px;
  --people-overflow-font-weight: 600;
  --people-person-avatar-size: 70px;
}

Para obtener más información, consulte Componentes de estilo.

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 en data-type uno de los siguientes valores.

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. Para cada API llamada, el usuario debe tener al menos uno de los permisos enumerados.

Configuración Permiso API
configuración predeterminada People.Read, People.Read.All /me/people
group-id Establecer GroupMember.Read.All, Group.Read.All, Directory.Read.All, GroupMember.ReadWrite.All, Group.ReadWrite.All /groups/${groupId}/members/microsoft.graph.user
user-ids Establecer User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All /users/$({userId}
people-queries Establecer People.Read, People.Read.All /me/people
resource Establecer Permisos especificados en scopes Especificado en resource
show-presence Establecer Presence.Read.All /communications/getPresencesByUserId

Subcomponentes

El mgt-people 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: mgt-person.

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.

Localización

El control no expone ninguna variable de localización.