Componente seletor no Microsoft Graph Toolkit

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.

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.

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

Eventos

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.

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.

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.