Componente de lista de archivos en Microsoft Graph Toolkit

  • Artículo
  • Tiempo de lectura: 7 minutos

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 a los usuarios cargar 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.

Abra este ejemplo en mgt.dev

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 que el componente va a representar.
ninguno archivos Matriz de archivos para obtener o establecer la lista de archivos representados por el componente. Use esta opción 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-id}{item-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.
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.

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

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.

Propiedades personalizadas css

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

mgt-file-list {
  --font-family: 'Segoe UI';
  --font-size: 14px;

  --file-list-background-color: #ffffff;
  --file-list-border: none;
  --file-list-box-shadow: none;
  --file-list-padding: 4px 0;
  --file-list-margin: 0;

  --file-item-background-color--hover: rgba(0, 0, 0, 0.1);
  --file-item-background-color--active: rgba(0, 0, 0, 0.05);
  --file-item-border-radius: 2px;
  --file-item-margin: 0 4px;

  --file-item-border-top: none;
  --file-item-border-left: none;
  --file-item-border-right: none;
  --file-item-border-bottom: none;

  --show-more-button-background-color: #f3f2f1;
  --show-more-button-background-color--hover: rgba(0, 0, 0, 0.1);
  --show-more-button-font-size: 12px;
  --show-more-button-padding: 6px;
  --show-more-button-border-bottom-right-radius: 4px;
  --show-more-button-border-bottom-left-radius: 4px;

  --file-upload-border: 4px dotted #ffbdc3;
  --file-upload-background-color: rgba(255, 0, 0, 0.1);
  --file-upload-button-float: left;
  --file-upload-button-color: #323130;
  --file-upload-button-background-color: #fef8dd;
  --file-upload-dialog-content-background-color: #ffe7c7;
  --file-upload-dialog-primarybutton-background-color: #ffe7c7;
  --file-upload-dialog-primarybutton-color: #323130;
}

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

API y permisos de Microsoft Graph

Configuración Permissions API
Valor predeterminado (no se proporcionan identificadores ni consultas) Files.Read, Files.Read.All, Sites.Read.All GET /me/drive/root/children
Proporcionar enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /me/drive/root/children
PUT /me/drive/root:/{filename}:/content
POST /me/drive/root:/{filename}:/createUploadSession
Proporcionar {drive-id} AND {item-id} Files.Read, Files.Read.All, Sites.Read.All GET /drives/{drive-id}/items/{item-id}/children
Proporcionar {drive-id} AND {item-id} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /drives/{drive-id}/items/{item-id}/children
PUT /drives/{drive-id}/items/{item-id}:/{filename}:/content
POST /drives/{drive-id}/items/{item-id}:/{filename}:/createUploadSession
Proporcionar {group-id} AND {item-id} Files.Read, Files.Read.All, Sites.Read.All GET /groups/{group-id}/drive/items/{item-id}/children
Proporcionar {group-id} AND {item-id} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /groups/{group-id}/drive/items/{item-id}/children
PUT /groups/{group-id}/drive/items/{item-id}:/{filename}:/content
POST /groups/{group-id}/drive/items/{item-id}:/{filename}:/createUploadSession
Proporcionar SOLO {item-id} Files.Read, Files.Read.All, Sites.Read.All GET /me/drive/items/{item-id}/children
Proporcionar SOLO {item-id} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /me/drive/items/{item-id}/children
PUT /me/drive/items/{item-id}:/{filename}:/content
POST /me/drive/items/{item-id}:/{filename}:/createUploadSession
Proporcionar {site-id} AND {item-id} Files.Read, Files.Read.All, Sites.Read.All GET /sites/{site-id}/drive/items/{item-id}/children
Proporcionar {site-id} AND {item-id} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /sites/{site-id}/drive/items/{item-id}/children
PUT /sites/{site-id}/drive/items/{item-id}:/{filename}:/content
POST /sites/{site-id}/drive/items/{item-id}:/{filename}:/createUploadSession
Proporcionar {user-id} AND {item-id} Files.Read, Files.Read.All, Sites.Read.All GET /users/{user-id}/drive/items/{item-id}/children
Proporcionar {user-id} AND {item-id} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /users/{user-id}/drive/items/{item-id}/children
PUT /users/{user-id}/drive/items/{item-id}:/{filename}:/content
POST /users/{user-id}/drive/items/{item-id}:/{filename}:/createUploadSession
Proporcionar {drive-id} AND {item-path} Files.Read, Files.Read.All, Sites.Read.All GET /drives/{drive-id}/root:/{item-path}:/children
Proporcionar {drive-id} AND {item-path} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /drives/{drive-id}/root:/{item-path}:/children
PUT /drives/{drive-id}/root:/{item-path}/{filename}:/content
POST /drives/{drive-id}/root:/{item-path}/{filename}:/createUploadSession
Proporcionar {group-id} AND {item-path} Files.Read, Files.Read.All, Sites.Read.All GET /groups/{group-id}/root:/{item-path}:/children
Proporcionar {group-id} AND {item-path} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /groups/{group-id}/root:/{item-path}:/children
PUT /groups/{group-id}/root:/{item-path}/{filename}:/content
POST /groups/{group-id}/root:/{item-path}/{filename}:/createUploadSession
Proporcionar {site-id} AND {item-path} Files.Read, Files.Read.All, Sites.Read.All GET /sites/{site-id}/root:/{item-path}:/children
Proporcionar {site-id} AND {item-path} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /sites/{site-id}/root:/{item-path}:/children
PUT /sites/{site-id}/root:/{item-path}/{filename}:/content
POST /sites/{site-id}/root:/{item-path}/{filename}:/createUploadSession
Proporcionar {user-id} AND {item-path} Files.Read, Files.Read.All, Sites.Read.All GET /users/{user-id}/root:/{item-path}:/children
Proporcionar {user-id} AND {item-path} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /users/{user-id}/root:/{item-path}:/children
PUT /users/{user-id}/root:/{item-path}/{filename}:/content
POST /users/{user-id}/root:/{item-path}/{filename}:/createUploadSession
Proporcionar solo {item-path} Files.Read, Files.Read.All, Sites.Read.All GET /me/drive/root:/{item-path}:/children
Proporcionar solo {item-path} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /me/drive/root:/{item-path}:/children
PUT /me/drive/root:/{item-path}/{filename}:/content
POST /me/drive/root:/{item-path}/{filename}:/createUploadSession
insight-type se establece en tendencias Sites.Read.All GET /me/insights/trending
Proporcionar {user-id or upn} AND insight-type está establecido en trending Sites.Read.All GET /users/{id or userPrincipalName}/insights/trending
insight-type se establece en used Sites.Read.All GET /me/insights/used
Proporcionar {user-id or upn} AND insight-type está establecido en used Sites.Read.All GET /users/{id or userPrincipalName}/insights/used
insight-type se establece en shared Sites.Read.All GET /me/insights/shared
Proporcionar {user-id or upn} AND insight-type está establecido en shared Sites.Read.All GET /users/{id or userPrincipalName}/insights/shared?$filter=((lastshared/sharedby/id eq '${user-id}') and (resourceReference/type eq 'microsoft.graph.driveItem'))

Eventos

Evento Cuándo se emite Datos personalizados Cancelable Burbujas Funciona con una plantilla personalizada
itemClick Se desencadena cuando el usuario hace clic en 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 varias 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.

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