Componente seletor 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.

O componente Seletor é usado mgt-get para consultar a API do Graph Microsoft e, em seguida, renderiza um controle suspenso que permite a seleção de um único recurso de uma matriz de recursos.

Exemplo

O exemplo a seguir mostra o mgt-picker uso do componente para selecionar uma lista de tarefas nas listas de tarefas de um usuário. Você pode usar o editor de código para ver como as propriedades e os atributos alteram o comportamento do componente.

HTML
React

Abra este exemplo no mgt.dev.

Propriedades e atributos

Você pode usar vários atributos para alterar o comportamento do componente. O componente tem atributos necessários, como resource - por exemplo, /users - e key-name - por exemplo, displayName.

key-name Também dá suporte a valores aninhados. Por exemplo, na seguinte resposta:

{
    "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#applications/$entity",
    "id": "03ef14b0-ca33-4840-8f4f-d6e91916010e",
    "verifiedPublisher": {
            "displayName": "publisher_contoso",
            "verifiedPublisherId": "9999999",
             "addedDateTime": "2021-04-24T17:49:44Z"
    },
    "certification": {
           "isPublisherAttested": true,
           "isCertifiedByMicrosoft": true,
           "lastCertificationDateTime": "2021-05-11T23:26:20Z",
           "certificationExpirationDateTime": "2022-05-11T23:26:20Z",
           "certificationDetailsUrl": "https://learn.microsoft.com/microsoft-365-app-certification/forward/azure/631a96bc-a705-4eda-9f99-fdaf9f54f6a2"
    },
    "tags": [],
    "tokenEncryptionKeyId": null,
    "api": {
        "requestedAccessTokenVersion": 2,
        "acceptMappedClaims": null,
        "knownClientApplications": [],
        "oauth2PermissionScopes": [],
        "preAuthorizedApplications": []
    },
    "appRoles": [],
    "web": {
        "redirectUris": [],
        "homePageUrl": null,
        "logoutUrl": null,
        "implicitGrantSettings": {
            "enableIdTokenIssuance": false,
            "enableAccessTokenIssuance": false
        }
    }
}

O key-name valor do atributo pode ser web.homePageUrl ou verifiedPublisher.displayName.

Atributo	Propriedade	Descrição
recurso	recurso	O recurso a ser obtido do Microsoft Graph (por exemplo, `/me` ou `/users`).
espaço reservado	espaço reservado	O espaço reservado renderizado no seletor (por exemplo, `Select a user` ou `Select a task list`).
nome da chave	keyName	A chave a ser renderizada no seletor (por exemplo, `displayName`).
valor selecionado	selectedValue	Opcional. O valor a ser definido como a opção atualmente selecionada no seletor. Deve estar presente nas opções fornecidas na consulta do Microsoft Graph.
escopos	escopos	Matriz opcional de cadeias de caracteres, se usar a propriedade, ou um escopo delimitado por vírgula, se estiver usando o atributo. O componente e um provedor com suporte garantem que o usuário tenha consentido com pelo menos uma das permissões fornecidas.
versão	versão	Versão de API opcional a ser usada ao fazer a `GET` solicitação. O padrão é `v1.0`.
máx. de páginas	maxPages	Número opcional de páginas (para recursos compatíveis com paginação). O padrão é 3. Definir esse valor como 0 recupera todas as páginas.
habilitado para cache	cacheEnabled	Booleano opcional. Quando definido, indica que a resposta do recurso está armazenada em cache. Substitua se `refresh()` for chamado ou se `pollingRate` estiver em uso. O padrão é `false`.
período de invalidação de cache	cacheInvalidationPeriod	Número opcional de milissegundos. Quando definido em combinação com `cacheEnabled`, o atraso antes que o cache atinja seu período de invalidação modifica esse valor. O padrão é `0` e usa o período de invalidação padrão.
N/D	response	Resposta somente leitura do Microsoft Graph se a solicitação tiver sido bem-sucedida.
N/D	erro	Erro somente leitura do Microsoft Graph se a solicitação não tiver sido bem-sucedida.

Propriedades personalizadas CSS

O mgt-picker componente define as seguintes propriedades personalizadas CSS para você fornecer substituições.

<mgt-picker
  class="picker"
  resource="me/todo/lists"
  scopes="tasks.read, tasks.readwrite"
  key-name="displayName"
></mgt-picker>

.picker {
  --picker-background-color: grey;
  --picker-list-max-height: 200px;
}

Para saber mais, consulte Componentes de estilo.

Métodos

Método	Descrição
refresh(force?: boolean)	Chame o método para atualizar os dados. Por padrão, a interface do usuário só será atualizada se os dados forem alterados. Passe `true` para forçar a atualização do componente.

Eventos

Evento	Quando é emitido	Dados personalizados	Cancelável	Bolhas	Funciona com modelo personalizado
`selectionChanged`	Acionado quando há uma alteração no recurso selecionado na lista suspensa.	`{ response: any, error: any }`. A `response` propriedade contém a resposta recuperada do Microsoft Graph. A `error` propriedade contém informações sobre o erro, se ocorreu	Não	Sim	Sim

Dica

Para obter mais informações sobre os dados retornados na propriedade, response consulte a referência de API da API que você usou na resource propriedade do componente Seletor.

Para obter mais informações sobre como lidar com eventos, consulte eventos.

Modelos

O mgt-picker componente oferece suporte a vários modelos que você pode usar para definir a aparência. 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
erro	O erro do Microsoft Graph.	Esse modelo será usado se houver um erro ao fazer a solicitação.
carregando	N/D	Este modelo é usado enquanto a solicitação está sendo feita.
sem dados	N/D	Este modelo é usado quando a solicitação não retorna dados.

Exemplo de uso de modelo

<mgt-picker resource="me/todo/lists" scopes="tasks.read, tasks.readwrite" key-name="displayName">
  <div>Loading template</div>
    <template data-type="loading">
      Loading
    </template>
    <template data-type="no-data">
      <div>No data</div>
    </template>
    <template data-type="error">
      <div>Error</div>
    </template>
  </div>
</mgt-picker>

Permissões do Microsoft Graph

As permissões exigidas por este componente dependem dos dados que você deseja recuperar com ele do Microsoft Graph. O Microsoft Graph Toolkit verifica se o usuário atual consentiu com pelo menos um dos arquivos .scopes Para obter mais informações sobre permissões, consulte a referência de permissões do Microsoft Graph.

Autenticação

O controle usa o provedor de autenticação global descrito na documentação de autenticação para buscar os dados necessários.

Cache

Para habilitar e configurar o cache, use as cacheEnabled propriedades and cacheInvalidationPeriod . Por padrão, o mgt-picker componente não armazena nenhuma resposta em cache.

Loja de objetos	Dados armazenados em cache	Comentários
`response`	Resposta completa recuperada do Microsoft Graph para a consulta especificada na `resource` propriedade de `mgt-picker`

Para obter mais informações, consulte Cache.

Localização

O controle expõe as variáveis a seguir que podem ser localizadas. Para obter detalhes sobre como configurar a localização, consulte Localizando componentes.

Nome da cadeia de caracteres	Valor padrão
comboboxPlaceholder	`Select an item`

Comentários

Esta página foi útil?

Last updated on 2026-08-24