Componente de lista de archivos en Microsoft Graph Toolkit

Artículo
11/07/2024

El componente Lista de archivos muestra una lista de varias carpetas y archivos mediante el nombre de archivo o carpeta, un icono y otras propiedades que especifique. Este componente usa el componente mgt-file . Puede especificar una unidad o sitio específico, mostrar una lista de archivos en función del tipo de información (tendencias, usados o compartidos) o proporcionar consultas a una lista personalizada de archivos. El componente también proporciona la opción de permitir que los usuarios carguen archivos en una ubicación especificada en One Drive o SharePoint.

Ejemplo

En el ejemplo siguiente se muestra un archivo con el mgt-file-list componente . Puede usar el editor de código para ver cómo cambian las propiedades el comportamiento del componente.

HTML
React

[Abra este ejemplo en mgt.dev] (https://mgt.dev/?path=/story/components-mgt-file-list-html--file-list&source=docs).

Propiedades

Puede usar varias propiedades para personalizar el componente.

Atributo	Propiedad	Descripción
file-list-query	fileListQuery	Consulta completa o ruta de acceso a la unidad o sitio que contiene la lista de archivos que se van a representar.
consultas de archivos	fileQueries	Matriz de consultas de archivos representadas por el componente.
-	archivos	Matriz de archivos para obtener o establecer la lista de archivos representados por el componente. Use esta propiedad para acceder a los archivos cargados por el componente. Establezca este valor para cargar sus propios archivos.
insight-type	insightType	Establézcalo para mostrar los archivos de tendencia, usados o compartidos del usuario.
drive-id	driveId	Identificador de la unidad a la que pertenece la carpeta. También debe proporcionar o `item-iditem-path`.
group-id	groupId	Identificador del grupo al que pertenece la carpeta. También debe proporcionar o `item-iditem-path`.
site-id	siteId	Identificador del sitio al que pertenece la carpeta. También debe proporcionar o `item-iditem-path`. Proporcione `list-id` si hace referencia a un archivo de una lista específica.
user-id	userId	Identificador del usuario al que pertenecen los archivos. También debe proporcionar o `item-iditem-path`. Proporcione `list-id` si hace referencia a un archivo de una lista específica.
item-id	itemId	Identificador de la carpeta. La consulta predeterminada es `/me/drive/items`. Proporcione `drive-id`, `group-id`, `site-id`o `user-id` para consultar una ubicación específica.
item-path	itemPath	Ruta de acceso del elemento de la carpeta (relativa a la raíz). La consulta predeterminada es `/me/drive/root`. Proporcione `drive-id`, `group-id`, `site-id`o `user-id` para consultar una ubicación específica.
item-view	itemView	Establece los datos que se van a representar (solo icono de archivo, oneLine, twoLines threeLines). El valor predeterminado es 'threeLines'
tamaño de página	Pagesize	Valor numérico que indica el número máximo de archivos que se van a representar en cada página. Nota:`page-size` no se admite con `insight-type`.
extensiones de archivo	fileExtensions	Matriz de extensiones de archivo que se usan para filtrar los archivos que se van a mostrar.
hide-more-files-button	hideMoreFilesButton	Boolean para indicar si se va a mostrar un botón para representar más archivos.
enable-file-upload	enableFileUpload	Boolean para habilitar o deshabilitar la funcionalidad de carga de archivos. El valor predeterminado es `false`.
excluded-file-extensions	excludedFileExtensions	Matriz de cadenas de extensiones de archivo que se van a excluir de la carga de archivos. También debe establecer el `enable-file-upload` atributo en `true`.
max-file-size	maxFileSize	Número que representa el tamaño máximo de carga de archivos (KB). También debe establecer el `enable-file-upload` atributo en `true`.
max-upload-file	maxUploadFile	Número que representa el número máximo de archivos permitidos para cargarse. El valor predeterminado son los `10` archivos. También debe establecer el `enable-file-upload` atributo en `true`.
disable-open-on-click	disableOpenOnClick	Boolean para habilitar o deshabilitar el comportamiento predeterminado de abrir un archivo en una pestaña del explorador independiente cuando se hace clic en él.

En el ejemplo siguiente se cambia el comportamiento del componente para capturar una lista de archivos de una consulta específica.

<mgt-file-list
  file-list-query="/me/drive/items/01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY/children"
></mgt-file-list>

En el ejemplo siguiente se cambia el comportamiento del componente para capturar una lista de archivos de una carpeta proporcionando el identificador de carpeta.

<mgt-file-list item-id="01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY"></mgt-file-list>

En el ejemplo siguiente se cambia el comportamiento del componente para capturar la lista de archivos de un grupo proporcionando el identificador de grupo y la ruta de acceso de la carpeta.

<mgt-file-list
  group-id="8090c93e-ba7c-433e-9f39-08c7ba07c0b3"
  item-path="/Design"
></mgt-file-list>

En el ejemplo siguiente se cambia el comportamiento del componente para capturar la lista de archivos de un usuario proporcionando el identificador de usuario y el identificador de carpeta.

<mgt-file-list
  user-id="48d31887-5fad-4d73-a9f5-3c356e68a038"
  item-id="01BYE5RZYFPM65IDVARFELFLNTXR4ZKABD"
></mgt-file-list>

En el ejemplo siguiente se cambia el comportamiento del componente para capturar la lista de archivos proporcionando el tipo de información.

<mgt-file-list insight-type="shared"></mgt-file-list>

En el ejemplo siguiente se habilita la característica de carga de archivos.

<mgt-file-list enable-file-upload></mgt-file-list>

En el ejemplo siguiente se limita el número máximo de archivos que se pueden cargar a 5.

<mgt-file-list max-upload-file="5" enable-file-upload></mgt-file-list>

En el ejemplo siguiente se limita el tamaño máximo de archivo que se puede cargar a 10 000 KB.

<mgt-file-list max-file-size="10000" enable-file-upload></mgt-file-list>

En el ejemplo siguiente se excluye la carga de archivos con extensiones de archivo ".doc, .pdf".

<mgt-file-list
  excluded-file-extensions=".doc,.pdf"
  enable-file-upload
></mgt-file-list>

Propiedades personalizadas css

El mgt-file-list componente define las siguientes propiedades personalizadas CSS.

<mgt-file-list class="file-list" insight-type="shared"></mgt-file-list>

.file-list {
  /** mgt-file-upload custom styling */
  --file-upload-background-color-drag: rgb(255, 0, 0, 0.5);
  --file-upload-border-drag: 2px groove black;
  --file-upload-button-background-color: orange;
  --file-upload-button-background-color-hover: green;
  --file-upload-button-text-color: whitesmoke;
  --file-upload-dialog-background-color: azure;
  --file-upload-dialog-text-color: yellow;
  --file-upload-dialog-replace-button-background-color: white;
  --file-upload-dialog-replace-button-background-color-hover: gray;
  --file-upload-dialog-replace-button-text-color: black;
  --file-upload-dialog-keep-both-button-background-color: black;
  --file-upload-dialog-keep-both-button-background-color-hover: gray;
  --file-upload-dialog-keep-both-button-text-color: white;
  --file-upload-button-border: 2px dotted yellow;
  --file-upload-dialog-replace-button-border: 2px dotted;
  --file-upload-dialog-keep-both-button-border: 2px dashed;
  --file-upload-dialog-border: 2px solid blue;
  --file-upload-dialog-width: 300px;
  --file-upload-dialog-height: 100px;
  --file-upload-dialog-padding: 36px;

  /** mgt-file custom styling */
  --file-type-icon-height: 30px;
  --file-border: 4px dotted #ffbdc3;
  --file-border-radius: 8px;
  --file-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  --file-background-color: #e0f8db;
  --file-background-color-focus: yellow;
  --file-background-color-hover: green;
  --file-padding: 8px;
  --file-padding-inline-start: 12px;
  --file-margin: 3px 4px;
  --file-line1-font-size: 15px;
  --file-line1-font-weight: 500;
  --file-line1-color: gray;
  --file-line1-text-transform: capitalize;
  --file-line2-font-size: 14px;
  --file-line2-font-weight: 300;
  --file-line2-color: #e50000;
  --file-line2-text-transform: lowercase;
  --file-line3-font-size: 13px;
  --file-line3-font-weight: 500;
  --file-line3-color: purple;
  --file-line3-text-transform: capitalize;

  /** mgt-file-list CSS tokens */
  --file-list-background-color: #e0f8db;
  --file-list-box-shadow: none;
  --file-list-border: 4px dotted #ffbdc3;
  --file-list-border-radius: 10px;
  --file-list-padding: 0;
  --file-list-margin: 0;
  --show-more-button-background-color: #fef8dd;
  --show-more-button-background-color--hover: #ffe7c7;
  --show-more-button-font-size: 14px;
  --show-more-button-padding: 16px;
  --show-more-button-border-bottom-right-radius: 12px;
  --show-more-button-border-bottom-left-radius: 12px;
}

Para obtener más información, consulte Componentes de estilo.

Métodos

Método	Descripción
reload(clearCache = false)	Llame al método para volver a cargar el componente con posibles datos nuevos en función de sus propiedades. Pase `true` para borrar la memoria caché antes de volver a cargar.

Ejemplo de recarga

Para usar el método en mgt-file-list el reload() que se expone, obtenga la mgt-file-list referencia del DOM y desencadene el método en un botón mediante el click evento .

<mgt-file-list insight-type="shared"></mgt-file-list>

<button id="reload-btn">Reload Files</button>

const fileList = document.querySelector("mgt-file-list");
document.getElementById("reload-btn").addEventListener("click", () => {
  // passing true will clear file cache before reloading
  fileList.reload(true);
});

Eventos

Evento	Cuándo se emite	Datos personalizados	Cancelable	Burbujas	Funciona con una plantilla personalizada
`itemClick`	Se desencadena cuando el usuario selecciona un archivo.	Archivo seleccionado	No	No	Sí, con una plantilla de archivo personalizada.

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

Plantillas

El mgt-file-list componente admite muchas plantillas que permiten reemplazar ciertas partes del componente. Para especificar una plantilla, incluya un <template> elemento dentro de un componente y establezca el data-type valor en uno de los tipos de datos enumerados en la tabla siguiente.

Tipo de datos	Contexto de datos	Descripción
Es el valor predeterminado.	`files`: lista de objetos de archivo	La plantilla predeterminada reemplaza todo el componente por el suyo propio.
archivo	`file`: objeto de archivo	Plantilla que se usa para representar cada archivo.
sin datos	No se pasa ningún contexto de datos	Plantilla que se usa cuando no hay datos disponibles.
carga	No se pasa ningún contexto de datos	Plantilla usada mientras el componente carga el estado.

Ejemplo de uso de plantilla

<mgt-file-list insight-type="shared">
  <template data-type="loading">
    <p>Getting files</p>
  </template>
  <template data-type="no-data">
    <p>No files found</p>
  </template>
  <template data-type="file">
    <p>File name{{file.name}}</p>
  </template>
</mgt-file-list>

Permisos de Microsoft Graph

Este componente usa las siguientes API de Microsoft Graph. Para cada llamada API, se requiere uno de los permisos enumerados.

Configuración	Permissions	API
Valor predeterminado (no se proporcionan identificadores ni consultas)	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /me/drive/root/children`
Proporcionar `{drive-id}` AND `{item-id}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /drives/{drive-id}/items/{item-id}/children`
Proporcionar `{group-id}` AND `{item-id}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /groups/{group-id}/drive/items/{item-id}/children`
Proporcionar SOLO `{item-id}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /me/drive/items/{item-id}/children`
Proporcionar `{site-id}` AND `{item-id}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /sites/{site-id}/drive/items/{item-id}/children`
Proporcionar `{user-id}` AND `{item-id}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /users/{user-id}/drive/items/{item-id}/children`
Proporcionar `{drive-id}` AND `{item-path}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /drives/{drive-id}/root:/{item-path}:/children`
Proporcionar `{group-id}` AND `{item-path}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /groups/{group-id}/root:/{item-path}:/children`
Proporcionar `{site-id}` AND `{item-path}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /sites/{site-id}/root:/{item-path}:/children`
Proporcionar `{user-id}` AND `{item-path}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /users/{user-id}/root:/{item-path}:/children`
Proporcionar solo `{item-path}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /me/drive/root:/{item-path}:/children`
`insight-type` se establece en `trending`	Sites.Read.All, Sites.ReadWrite.All	`GET /me/insights/trending`
`insight-type` se establece en `used`	Sites.Read.All, Sites.ReadWrite.All	`GET /me/insights/used`
`insight-type` se establece en `shared`	Sites.Read.All, Sites.ReadWrite.All	`GET /me/insights/shared`
Proporcionar `enable-file-upload` , además, requiere	Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All	`PUT /me/drive/root:/{filename}:/content` `POST /me/drive/root:/{filename}:/createUploadSession`

Subcomponentes

El mgt-file-list componente consta de uno o varios subcomponentes que pueden requerir permisos distintos de los enumerados anteriormente. Para obtener más información, consulte la documentación de cada subcomponente: mgt-file.

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é

Almacén de objetos	Datos almacenados en caché	Comentarios
`fileLists`	Lista de listas de archivos	Lista de caché predeterminada para almacenar listas de archivos.
`insightfileLists`	Lista de listas de archivos de información	Se usa cuando `insightType` se proporciona.

Nota:

El mgt-file-list componente también usa el almacén de fileQueries objetos de IndexedDB para almacenar en mgt-file caché los archivos cuando fileQueries se proporciona.

Para obtener más información sobre cómo configurar la memoria caché, 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
showMoreSubtitle	`Show more items`
filesSectionTitle	`Files`
sharedTextSubtitle	`Shared`

Compartir a través de