Compartilhar via

componente Pessoas no Microsoft Graph Toolkit

Cuidado

O Toolkit do Microsoft Graph foi preterido. O período de reforma começa a 1 de setembro de 2025, com a reforma completa prevista para 28 de agosto de 2026. Os programadores devem migrar para utilizar os SDKs do Microsoft Graph ou outras ferramentas suportadas do Microsoft Graph para criar experiências Web. Para obter mais informações, veja o anúncio de preterição.

Pode utilizar o mgt-people componente Web para apresentar um grupo de pessoas ou contactos através das respetivas fotografias ou iniciais. Por predefinição, apresenta os contactos mais frequentes para o utilizador com sessão iniciada.

Este componente utiliza vários controlos mgt-person , mas pode ser vinculado a um conjunto de descritores de pessoas. Se existirem mais pessoas a apresentar do que o show-max valor, é adicionado um número para indicar o número de outros contactos.

Exemplo

O exemplo seguinte mostra um grupo de pessoas apresentadas com o mgt-people componente . Pode utilizar o editor de código para ver como as propriedades alteram o comportamento do componente.

Propriedades

Por predefinição, o mgt-people componente obtém eventos do /me/people ponto final com o personType/class eq 'Person' filtro para apresentar utilizadores contactados com frequência. Pode utilizar várias propriedades para alterar este comportamento.

Atributo Propriedade Descrição
show-max showMax Indica o número máximo de pessoas a mostrar. O valor predefinido é 3.
people people Uma matriz de objetos de pessoa do Microsoft Graph. Utilize esta propriedade para aceder às pessoas carregadas pelo componente. Defina este valor para carregar as suas pessoas para o componente.
group-id groupId O ID de um grupo Microsoft Entra ID. Esta propriedade é utilizada para obter os membros diretos do grupo. Essa propriedade é opcional.
user-ids userIds Uma matriz de IDs de utilizador a apresentar. Essa propriedade é opcional.
people-queries peopleQueries Consultas do Microsoft Graph para personalizar a resposta da consulta de pessoas.
card pessoa personCardInteraction Define o comportamento para mostrar a pessoa card numa pessoa composta. O valor predefinido está definido para mostrar a pessoa card ao pairar o rato (PersonCardInteraction.hover).
mostrar presença showPresence Determina se um componente de pessoa deve compor o distintivo de presença. O valor padrão é falso.
recurso recurso O URL do recurso a obter do Microsoft Graph (por exemplo, /me/people).
escopos escopos Uma cadeia delimitada por vírgulas com permissões a conceder ao componente. Essa propriedade é opcional.
versão versão A versão da API a utilizar ao fazer o pedido. O valor padrão é v1.0.
fallback-details fallbackDetails Matriz de objetos de pessoa do Microsoft Graph que representam uma pessoa ou várias pessoas quando não é encontrado nenhum utilizador/pessoa/contacto no gráfico.

O exemplo seguinte define o número máximo de pessoas a mostrar.

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

Propriedades personalizadas do CSS

O mgt-people componente define as seguintes propriedades personalizadas do 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 saber mais, veja Componentes de estilo.

Modelos

O mgt-people suporta vários modelos que pode utilizar para substituir determinadas partes do componente. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina como data-type um dos seguintes valores.

Tipo de dados Contexto de dados Descrição
default people: lista de objetos de pessoa O modelo predefinido substitui todo o componente pelo seu próprio.
person person: objeto de pessoa O modelo utilizado para compor cada pessoa.
overflow people: lista de objetos de pessoa
max: número de pessoas mostradas
extra: número de pessoas adicionais		 O modelo utilizado para compor o número para além do máximo à direita da lista de pessoas.
no-data Não é transmitido nenhum contexto de dados O modelo utilizado quando não existem dados disponíveis.
loading Não é transmitido nenhum contexto de dados O modelo utilizado enquanto o componente carrega o estado.

Os exemplos seguintes mostram como utilizar o person modelo.

<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>

Permissões do Microsoft Graph

Este componente utiliza as seguintes APIs e permissões do Microsoft Graph. Para cada API chamada, o utilizador tem de ter, pelo menos, uma das permissões listadas.

Configuração Permissão API
configuração predefinida People.Read, People.Read.All /me/people
group-id definir GroupMember.Read.All, Group.Read.All, Directory.Read.All, GroupMember.ReadWrite.All, Group.ReadWrite.All /groups/${groupId}/members/microsoft.graph.user
user-ids definir User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All /users/$({userId}
people-queries definir People.Read, People.Read.All /me/people
resource definir Permissões especificadas em scopes Especificado em resource
show-presence definir Presence.Read.All /communications/getPresencesByUserId

Subcomponentes

O mgt-people componente é composto por um ou mais subcomponentes que podem exigir outras permissões do que as listadas anteriormente. Para obter mais informações, consulte a documentação para cada subcomponente: mgt-person.

Autenticação

O controlo utiliza o fornecedor de autenticação global descrito na documentação de autenticação.

Cache

Arquivo de objetos Dados em cache Comentários
people Informações sobre pessoas que correspondem à consulta Utilizado quando resource especificado
users Informações sobre utilizadores que correspondem à consulta Utilizado quando groupId, userIdspeopleQueries ou não foram especificadas propriedades
presence Presença para o conjunto especificado de pessoas Utilizado quando showPresence definido como true

Observação

Por predefinição, o mgt-people componente utiliza o mgt-person componente para apresentar informações sobre pessoas. O mgt-person componente transfere e coloca a fotografia em cache automaticamente para cada pessoa.

Para obter detalhes sobre como configurar a cache, veja Colocação em cache.

Expandir para obter mais controlo

Para cenários mais complexos ou um UX verdadeiramente personalizado, este componente expõe vários protected render* métodos de substituição em extensões de componentes.

Método Descrição
renderLoading Compõe o estado de carregamento.
renderNoData Compõe o estado de dados vazio.
renderPeople Compõe uma lista de pessoas, até ao show-max valor .
renderPerson Compõe uma pessoa individual.
renderOverflow Compõe uma representação das restantes pessoas para além do show-max valor.

Localização

O controlo não expõe variáveis de localização.

  • Last updated on