Componente pessoas no Microsoft Graph ToolkitPeople component in the Microsoft Graph Toolkit

Você pode usar o mgt-people componente da Web para exibir um grupo de pessoas ou contatos usando suas fotos ou iniciais.You can use the mgt-people web component to display a group of people or contacts by using their photos or initials. Por padrão, ele exibirá os contatos mais frequentes para o usuário conectado.By default, it will display the most frequent contacts for the signed in user.

Este componente usa vários controles de pessoal de gerenciamento , mas pode ser vinculado a um conjunto de descritores de pessoas.This component uses multiple mgt-person controls, but it can be bound to a set of people descriptors. Se houver mais pessoas para exibir o show-max valor, um número será adicionado para indicar o número de contatos adicionais.If there are more people to display than the show-max value, a number will be added to indicate the number of additional contacts.

ExemploExample

O exemplo a seguir mostra um grupo de pessoas exibidas usando o mgt-people componente.The following example shows a group of people displayed using the mgt-people component. Você pode usar o editor de código para ver como as propriedades alteram o comportamento do componente.You can use the code editor to see how properties change the behavior of the component.

Abra este exemplo em gerenciamento de. devOpen this example in mgt.dev

PropriedadesProperties

Por padrão, o mgt-people componente busca eventos do ponto de /me/people extremidade com o personType/class eq 'Person' filtro para exibir os usuários contatados com frequência.By default, the mgt-people component fetches events from the /me/people endpoint with the personType/class eq 'Person' filter to display frequently contacted users. Você pode usar várias propriedades para alterar esse comportamento.You can use several properties to change this behavior.

AtributoAttribute PropriedadeProperty DescriçãoDescription
show-Maxshow-max showMaxshowMax Indica o número máximo de pessoas a serem mostradas.Indicates the maximum number of people to show. O valor padrão é 3.Default value is 3.
peoplepeople peoplepeople Uma matriz de pessoas para obter ou definir a lista de pessoas renderizadas pelo componente.An array of people to get or set the list of people rendered by the component. Use essa propriedade para acessar as pessoas carregadas pelo componente.Use this property to access the people loaded by the component. Defina esse valor para carregar suas próprias pessoas.Set this value to load your own people.
ID de grupogroup-id groupIdgroupId Recupera pessoas de um Microsoft Graph específico da respectiva ID.Retrieves people from a specific Microsoft Graph from the respective ID.
User-IDsuser-ids userIdsuserIds Dada uma matriz de usuário do Microsoft Graph ids , o componente renderizará esses usuários.Given an array of Microsoft Graph user ids, the component will render these users.
pessoas – consultaspeople-queries peopleQueriespeopleQueries Dada uma matriz de consultas de pessoa (nomes, UPNs, emails), o componente renderiza esses usuários.Given an array of person queries (names, upns, emails), the component will render these users.
cartão de pessoaperson-card personCardpersonCard Uma enumeração para determinar a ação do usuário necessária para ativar o painel ou o menu suspenso hover click .An enumeration to determine user action necessary to activate flyout panel - hover or click. O valor padrão é none.Default value is none.
show-Presenceshow-presence a presençashowPresence Um booliano para determinar se deve mostrar o crachá de presença de pessoa na imagem de pessoa.A boolean to determine whether to show person presence badge on person image.

O exemplo a seguir define o número máximo de pessoas a serem mostradas.The following example sets the maximum number of people to show.

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

Propriedades personalizadas de CSSCSS custom properties

O mgt-people componente define as seguintes propriedades personalizadas de CSS.The mgt-people component defines the following CSS custom properties.

mgt-people {
  --list-margin: 8px 4px 8px 8px; /* Margin for component */
  --avatar-margin: 0 4px 0 0; /* Margin for each person */
}

ModelosTemplates

O mgt-people dá suporte a vários modelos que você pode usar para substituir determinadas partes do componente.The mgt-people supports several templates that you can use to replace certain parts of the component. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina o data-type valor como um dos seguintes.To specify a template, include a <template> element inside a component and set the data-type value to one of the following.

Tipo de dadosData type Contexto de dadosData context DescriçãoDescription
default people: lista de objetos Personpeople: list of person objects O modelo padrão substitui todo o componente pelo seu.The default template replaces the entire component with your own.
person person: objeto Personperson: person object O modelo usado para renderizar cada pessoa.The template used to render each person.
overflow people: lista de objetos Personpeople: list of person objects
max: número de pessoas mostradasmax: number of shown people
extra: número de pessoas extrasextra: number of extra people
O modelo usado para renderizar o número além do máximo à direita da lista de pessoas.The template used to render the number beyond the max to the right of the list of people.
no-data Nenhum contexto de dados é passadoNo data context is passed O modelo usado quando não há dados disponíveis.The template used when no data is available.
loading Nenhum contexto de dados é passadoNo data context is passed O modelo usado enquanto o componente carrega o estado.The template used while the component loads state.

Os exemplos a seguir mostram como usar o person modelo.The following examples shows how to use the person template.

<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 GraphMicrosoft Graph permissions

Este componente usa as seguintes APIs e permissões do Microsoft Graph:This component uses the following Microsoft Graph APIs and permissions:

RecursoResource PermissãoPermission
/me/people/me/people People.Read

Ao usar os modelos padrão, são necessárias APIs e permissões adicionais.When using the default templates, additional APIs and permissions are required. O modelo padrão para este componente usa um componente de pessoa de gerenciamento , que requer o seguinte.The default template for this component uses a mgt-person component, which requires the following.

RecursoResource PermissãoPermission
/Users/users User.ReadBasic.AllUser.ReadBasic.All

AutenticaçãoAuthentication

O controle usa o provedor de autenticação global descrito na documentação de autenticação.The control uses the global authentication provider described in the authentication documentation.

Estender para mais controleExtend for more control

Para cenários mais complexos ou uma UX verdadeiramente personalizada, esse componente expõe vários protected render* métodos para substituir em extensões de componente.For more complex scenarios or a truly custom UX, this component exposes several protected render* methods for override in component extensions.

MétodoMethod DescriçãoDescription
renderLoadingrenderLoading Renderiza o estado de carregamento.Renders the loading state.
renderNoDatarenderNoData Renderiza o estado de dados vazio.Renders the empty data state.
renderPeoplerenderPeople Renderiza uma lista de pessoas, até o show-max valor.Renders a list of people, up to the show-max value.
renderPersonrenderPerson Renderiza uma pessoa individual.Renders an individual person.
renderOverflowrenderOverflow Renderiza uma representação de pessoas restantes além do show-max valor.Renders a representation of remaining people beyond the show-max value.