Componente de seletor no Microsoft Graph Toolkit

O componente Seletor utiliza mgt-get para consultar o microsoft API do Graph e, em seguida, compõe um controlo de lista pendente que permite a seleção de um único recurso a partir de uma matriz de recursos.

Exemplo

O exemplo seguinte mostra a utilização do mgt-picker componente para selecionar uma lista de tarefas a partir das listas de tarefas de um utilizador. Pode utilizar o editor de código para ver como as propriedades e os atributos alteram o comportamento do componente.

Propriedades e atributos

Pode utilizar vários atributos para alterar o comportamento do componente. O componente tem atributos necessários, tais como resource , por exemplo, /users e key-name , por exemplo, displayName.

key-name também suporta 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://v4.hkg1.meaqua.org/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 valor do key-name atributo pode ser web.homePageUrl ou verifiedPublisher.displayName.

Propriedades personalizadas do CSS

O mgt-picker componente define as seguintes propriedades personalizadas do CSS para 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, veja Componentes de estilo.

Métodos

Eventos

Para obter mais informações sobre o processamento de eventos, veja eventos.

Modelos

O mgt-picker componente suporta vários modelos que pode utilizar para definir o aspeto e funcionalidade. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina como data-type um dos seguintes valores.

Utilização de modelos de exemplo

<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 pretende obter com o mesmo a partir do Microsoft Graph. O Microsoft Graph Toolkit verifica se o utilizador atual deu consentimento a, pelo menos, um dos fornecidos scopes. Para obter mais informações sobre permissões, consulte a referência de permissões do Microsoft Graph.

Autenticação

O controlo utiliza o fornecedor de autenticação global descrito na documentação de autenticação para obter os dados necessários.

Cache

Para ativar e configurar a cache, utilize as cacheEnabled propriedades e cacheInvalidationPeriod . Por predefinição, o mgt-picker componente não coloca em cache quaisquer respostas.

Para obter mais informações, veja Colocação em cache.

Localização

O controlo expõe as seguintes variáveis que podem ser localizadas. Para obter detalhes sobre como configurar a localização, veja Localizar componentes.