Componente de lista de archivos en Microsoft Graph Toolkit
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.
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-ido 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-ido 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 |
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de