Componente selector en el kit de herramientas de Microsoft Graph

Article
02/14/2024

El componente Selector usa mgt-get para consultar microsoft Graph API, a continuación, representa un control desplegable que permite seleccionar un único recurso de una matriz de recursos.

Ejemplo

En el ejemplo siguiente se muestra el uso del mgt-picker componente para seleccionar una lista de tareas de las listas de tareas de un usuario. Puede usar el editor de código para ver cómo cambian las propiedades y los atributos el comportamiento del componente.

HTML
React

Abra este ejemplo en mgt.dev.

Propiedades y atributos

Puede usar varios atributos para cambiar el comportamiento del componente. El componente tiene atributos necesarios, como resource , por ejemplo, /users - y key-name , por ejemplo, displayName.

key-name también admite valores anidados. Por ejemplo, en la siguiente respuesta:

{
    "@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
        }
    }
}

el key-name valor del atributo podría ser web.homePageUrl o verifiedPublisher.displayName.

Atributo	Propiedad	Descripción
resource	resource	Recurso que se va a obtener de Microsoft Graph (por ejemplo, `/me` o `/users`).
Marcador	Marcador	Marcador de posición representado en el selector (por ejemplo, `Select a user` o `Select a task list`).
key-name	Keyname	Clave que se va a representar en el selector (por ejemplo, `displayName`).
selected-value	selectedValue	Opcional. Valor que se va a establecer como la opción seleccionada actualmente en el selector. Debe estar presente en las opciones proporcionadas desde la consulta de Microsoft Graph.
ámbitos	ámbitos	Matriz opcional de cadenas si se usa la propiedad o un ámbito delimitado por comas si se usa el atributo . El componente y un proveedor admitido garantizan que el usuario ha dado su consentimiento a al menos uno de los permisos proporcionados.
version	version	Versión de API opcional que se usará al realizar la `GET` solicitud. El valor predeterminado es `v1.0`.
max-pages	maxPages	Número opcional de páginas (para los recursos que admiten la paginación). El valor predeterminado es 3. Al establecer este valor en 0, se recuperan todas las páginas.
habilitado para caché	cacheEnabled	Boolean opcional. Cuando se establece, indica que la respuesta del recurso se almacena en caché. Invalide si `refresh()` se llama a o si `pollingRate` está en uso. El valor predeterminado es `false`.
cache-invalidation-period	cacheInvalidationPeriod	Número opcional de milisegundos. Cuando se establece en combinación con `cacheEnabled`, el retraso antes de que la memoria caché alcance su período de invalidación modifica este valor. El valor predeterminado es `0` y usa el período de invalidación predeterminado.
N/D	response	Respuesta de solo lectura de Microsoft Graph si la solicitud se realizó correctamente.
N/D	error	Error de solo lectura de Microsoft Graph si la solicitud no se realizó correctamente.

Propiedades personalizadas css

El mgt-picker componente define las siguientes propiedades personalizadas CSS con las que puede proporcionar invalidaciones.

<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 obtener más información, consulte Componentes de estilo.

Métodos

Método	Descripción
refresh(force?: boolean)	Llame al método para actualizar los datos. De forma predeterminada, la interfaz de usuario solo se actualiza si cambian los datos. Pase `true` para forzar la actualización del componente.

Eventos

Evento	Cuándo se emite	Datos personalizados	Cancelable	Burbujas	Funciona con una plantilla personalizada
`selectionChanged`	Se desencadena cuando hay un cambio en el recurso seleccionado en la lista desplegable.	`{ response: any, error: any }`. La `response` propiedad contiene la respuesta recuperada de Microsoft Graph. La `error` propiedad contiene información sobre el error si se produjo uno	No	Sí	Sí

Sugerencia

Para obtener más información sobre los datos devueltos en la response propiedad, consulte la referencia de API de la API que usó en la resource propiedad del componente Picker.

Para obtener más información sobre el control de eventos, vea eventos.

Plantillas

El mgt-picker componente admite varias plantillas que puede usar para definir la apariencia. Para especificar una plantilla, incluya un <template> elemento dentro de un componente y establezca en data-type uno de los siguientes valores.

Tipo de datos	Contexto de datos	Descripción
error	Error de Microsoft Graph.	Esta plantilla se usa si se produce un error al realizar la solicitud.
Carga	N/D	Esta plantilla se usa mientras se realiza la solicitud.
sin datos	N/D	Esta plantilla se usa cuando la solicitud no devuelve datos.

Uso de plantilla de ejemplo

<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>

Permisos de Microsoft Graph

Los permisos requeridos por este componente dependen de los datos que quiera recuperar con él de Microsoft Graph. Microsoft Graph Toolkit comprueba que el usuario actual ha dado su consentimiento a al menos uno de los proporcionados scopes. Para obtener más información sobre los permisos, consulte la referencia de permisos de Microsoft Graph.

Autenticación

El control usa el proveedor de autenticación global descrito en la documentación de autenticación para capturar los datos necesarios.

Caché

Para habilitar y configurar la memoria caché, use las cacheEnabled propiedades y cacheInvalidationPeriod . De forma predeterminada, el mgt-picker componente no almacena en caché ninguna respuesta.

Almacén de objetos	Datos almacenados en caché	Comentarios
`response`	Respuesta completa recuperada de Microsoft Graph para la consulta especificada en la `resource` propiedad de `mgt-picker`

Para obtener más información, consulte Almacenamiento en caché.

Localización

El control expone las siguientes variables que se pueden localizar. Para obtener más información sobre cómo configurar la localización, consulte Localización de componentes.

Nombre de cadena	Valor predeterminado
comboboxPlaceholder	`Select an item`

Comparteix a través de