Componente People no Microsoft Graph Toolkit

Cuidado

O Microsoft Graph Toolkit foi preterido. O período de aposentadoria começa em 1º de setembro de 2025, com aposentadoria total planejada para 28 de agosto de 2026. Os desenvolvedores devem migrar para o uso dos SDKs do Microsoft Graph ou outras ferramentas do Microsoft Graph com suporte para criar experiências na Web. Para obter mais informações, consulte o anúncio de substituição.

Você pode usar o mgt-people componente Web para exibir um grupo de pessoas ou contatos usando suas fotos ou iniciais. Por padrão, ele exibe os contatos mais frequentes do usuário conectado.

Esse componente usa vários controles mgt-person , mas pode ser associado a um conjunto de descritores de pessoas. Se houver mais pessoas a serem exibidas do que o show-max valor, um número será adicionado para indicar o número de outros contatos.

Exemplo

O exemplo a seguir mostra um grupo de pessoas exibidas usando o mgt-people componente. Você pode usar o editor de código para ver como as propriedades alteram o comportamento do componente.

Propriedades

Por padrão, o mgt-people componente busca eventos do /me/people ponto de extremidade com o personType/class eq 'Person' filtro para exibir usuários contatados com frequência. Você pode usar várias propriedades para alterar esse comportamento.

Atributo Propriedade Descrição
Mostrar máx. Mostrar Max Indica o número máximo de pessoas a serem mostradas. O valor padrão é 3.
people people Uma matriz de objetos person do Microsoft Graph. Use essa propriedade para acessar as pessoas carregadas pelo componente. Defina esse valor para carregar seu próprio pessoal no componente.
ID de grupo groupId A ID de um grupo do Microsoft Entra ID. Essa propriedade é usada para recuperar os membros diretos do grupo. Essa propriedade é opcional.
IDs de usuário userIds Uma matriz de IDs de usuário a ser exibida. Essa propriedade é opcional.
consultas de pessoas peopleQueries Consultas do Microsoft Graph para personalizar a resposta da consulta de pessoas.
person-card personCardInteraction Define o comportamento para mostrar o card de pessoa em uma pessoa renderizada. O valor padrão é definido para mostrar o card de pessoa ao hover(PersonCardInteraction.hover).
mostrar presença showPresence Determina se um componente de pessoa deve renderizar o selo de presença. O valor padrão é falso.
recurso recurso A URL do recurso a ser obtida do Microsoft Graph (por exemplo, /me/people).
escopos escopos Uma cadeia de caracteres delimitada por vírgulas com permissões a serem concedidas ao componente. Essa propriedade é opcional.
versão versão A versão da API a ser usada ao fazer a solicitação. O valor padrão é v1.0.
Detalhes de fallback Detalhes de fallback Matriz de objetos de pessoa do Microsoft Graph representando uma pessoa ou várias pessoas quando nenhum usuário/pessoa/contato é encontrado no gráfico.

O exemplo a seguir define o número máximo de pessoas a serem mostradas.

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

Propriedades personalizadas CSS

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

Modelos

O mgt-people suporta vários modelos que podem ser usados 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 padrão substitui todo o componente pelo seu.
person person: objeto pessoa O modelo usado para renderizar cada pessoa.
overflow people: lista de objetos de pessoa
max: número de pessoas mostradas
extra: número de pessoas extras		 O modelo usado para renderizar o número além do máximo à direita da lista de pessoas.
no-data Nenhum contexto de dados é passado O modelo usado quando não há dados disponíveis.
loading Nenhum contexto de dados é passado O modelo usado enquanto o componente carrega o estado.

Os exemplos a seguir mostram como usar 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 usa as seguintes APIs e permissões do Microsoft Graph. Para cada API chamada, o usuário deve ter pelo menos uma das permissões listadas.

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

Subcomponentes

O mgt-people componente consiste em um ou mais subcomponentes que podem exigir outras permissões além das listadas anteriormente. Para obter mais informações, consulte a documentação de cada subcomponente: mgt-person.

Autenticação

O controle usa o provedor de autenticação global descrito na documentação de autenticação.

Cache

Loja de objetos Dados armazenados em cache Comentários
people Informações sobre as pessoas que correspondem à consulta Usado quando resource especificado
users Informações sobre usuários que correspondem à consulta Usado quando groupId, userIds, peopleQueries ou nenhuma propriedade especificada
presence Presença para o conjunto especificado de pessoas Usado quando definido como showPresencetrue

Observação

Por padrão, o mgt-people componente usa o mgt-person componente para exibir informações sobre pessoas. O mgt-person componente baixa automaticamente e armazena em cache a foto para cada pessoa.

Para obter detalhes sobre como configurar o cache, consulte Cache.

Estenda para mais controle

Para cenários mais complexos ou uma experiência de usuário verdadeiramente personalizada, esse componente expõe vários protected render* métodos de substituição em extensões de componente.

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

Localização

O controle não expõe nenhuma variável de localização.

  • Last updated on