Compartilhar via

Pessoas componente no Microsoft Graph Toolkit

  • Artigo

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 para o 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
show-max showMax Indica o número máximo de pessoas a serem exibidas. O valor padrão é 3.
people people Uma matriz de objetos pessoa do Microsoft Graph. Use essa propriedade para acessar as pessoas carregadas pelo componente. Defina esse valor para carregar suas próprias pessoas no componente.
id de grupo groupId A ID de um grupo 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 de consulta de pessoas.
person-cartão personCardInteraction Define o comportamento para mostrar a pessoa cartão em uma pessoa renderizada. O valor padrão é definido para mostrar a pessoa cartão em hover(PersonCardInteraction.hover).
show-presence 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 obtido do Microsoft Graph (por exemplo, /me/people).
escopos escopos Uma cadeia de caracteres delimitada por vírgula 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.
fallback-details fallbackDetails Matriz de objetos pessoa do Microsoft Graph que representam uma pessoa ou várias pessoas quando nenhum usuário/pessoa/contato é encontrado no grafo.

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

<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, confira componentes de estilo.

Modelos

O mgt-people dá suporte a vários modelos que você pode usar para substituir determinadas partes do componente. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina o data-type como um dos valores a seguir.

Tipo de dados Contexto de dados Descrição
default people: lista de objetos pessoais O modelo padrão substitui todo o componente por seu próprio.
person person: objeto person O modelo usado para renderizar cada pessoa.
overflow people: lista de objetos pessoais
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 nenhum dado está disponível.
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

Esse 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 /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 consiste em um ou mais subcomponentes que podem exigir outras permissões do que as listadas anteriormente. Para obter mais informações, confira 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

Repositório de objetos Dados armazenados em cache Comentários
people Informações sobre pessoas que correspondem à consulta Usado quando resource especificado
users Informações sobre usuários que correspondem à consulta Usado quando groupId, userIdspeopleQueries ou nenhuma propriedade especificada
presence Presença para o conjunto especificado de pessoas Usado quando showPresence definido como true

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 e armazena automaticamente em cache a foto para cada pessoa.

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

Estender para obter mais controle

Para cenários mais complexos ou uma UX 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 de pessoas restantes além do show-max valor.

Localização

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