Componente de archivo en Microsoft Graph Toolkit
El componente Archivo se usa para representar un archivo o carpeta individuales de OneDrive o SharePoint. El componente muestra información como el nombre del archivo o carpeta, el icono de tipo de archivo y la fecha de autor y última modificación. Puede proporcionar los identificadores de un archivo y el componente genera la consulta para recuperar el archivo en función de los identificadores proporcionados. Este componente se puede usar por sí mismo o como parte de los componentes mgt-file-list .
Ejemplo
En el ejemplo siguiente se muestra un archivo con el mgt-file 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-query | fileQuery | Consulta completa o ruta de acceso al archivo que se va a recuperar. |
| user-id | userId | Identificador del usuario. Esta propiedad se usa para obtener el archivo de un usuario especificado. También debe proporcionar item-id, item-pathinsight-type o insight-id. |
| drive-id | driveId | Identificador de la unidad a la que pertenece el archivo. También debe proporcionar o item-iditem-path. |
| group-id | groupId | Identificador del grupo al que pertenece el archivo. También debe proporcionar o item-iditem-path. |
| site-id | siteId | Identificador del sitio al que pertenece el archivo. También debe proporcionar o item-iditem-path. Proporcione también list-id si hace referencia a un archivo de una lista específica. |
| list-id | listId | Identificador de la lista a la que pertenece el archivo. También debe proporcionar site-id y item-id. |
| item-id | Itemid | Identificador del archivo. 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 del archivo. La consulta predeterminada es /me/drive/root. Proporcione drive-id, group-id, site-ido user-id para consultar una ubicación específica. |
| insight-type | insightType | Tipo de información de la que se recupera el archivo. Puede ser trending, usedo shared. |
| insight-id | insightId | Identificador del recurso de información. |
| detalles del archivo | fileDetails | Establecer en un objeto que representa un archivo |
| icono de archivo | fileIcon | Ruta de acceso url donde se almacena el icono. |
| - | driveItem | Objeto que contiene detalles de Graph en el elemento. |
| - | fileDetails | Objeto que contiene el objeto DriveItem. |
| vista | vista | Establézcalo para controlar cómo se representa el archivo. El valor predeterminado es oneline. image - mostrar solo el iconooneline : muestra el icono y una línea de texto (el valor predeterminado es el archivo name)twolines - mostrar el icono y dos líneas de texto (name y lastModifiedDateTime de forma predeterminada)threelines : muestra el icono y tres líneas de texto (name, lastModifiedDateTimey displayName del autor de forma predeterminada) |
| line1-property | line1Property | Establece la propiedad de fileDetails que se va a usar para la primera línea de texto. El valor predeterminado es name del archivo. |
| line2-property | line2Property | Establece la propiedad de fileDetails que se va a usar para la segunda línea de texto. El valor predeterminado es lastModifiedDateTime. |
| line3-property | line3Property | Establece la propiedad de fileDetails que se va a usar para la tercera línea de texto. El valor predeterminado es size del archivo. |
En el ejemplo siguiente se cambia el comportamiento del componente para capturar datos de una consulta específica.
<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2">
</mgt-file>
En el ejemplo siguiente se cambia el comportamiento del componente para capturar datos de una consulta específica, mostrar tres líneas de información (nombre de archivo, fecha y hora de última modificación y tamaño de archivo de forma predeterminada) y establecer el icono de archivo.
<mgt-file
file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"
view="threeLines"
file-icon="ICON_PATH"
></mgt-file>
En el ejemplo siguiente se cambia el comportamiento del componente para capturar datos de una unidad específica.
<mgt-file
drive-id="b!-RIj2DuyvEyV1T4NlOaMHk8XkS_I8MdFlUCq1BlcjgmhRfAj3-Z8RY2VpuvV_tpd"
item-id="01BYE5RZ5MYLM2SMX75ZBIPQZIHT6OAYPB"
></mgt-file>
En el ejemplo siguiente se cambia el comportamiento del componente para capturar datos de un sitio y una ruta de acceso de SharePoint.
<mgt-file
site-id="m365x214355.sharepoint.com,5a58bb09-1fba-41c1-8125-69da264370a0,9f2ec1da-0be4-4a74-9254-973f0add78fd"
item-Path="/DemoDocs/AdminDemo"
></mgt-file>
En el ejemplo siguiente se cambia el comportamiento del componente para capturar datos por tipo de información.
<mgt-file
insight-type="shared"
insight-id="AW1GxMvkOztMkJX-SCppUSRPF5EvyPDHRZVAqtQZXI4JoUXwI9_mfEWNlabr1f7aXRBWDMt2C2FDop4fP1vsUw9tRsTL5Ds7TJCV_kgqaVEkBA"
></mgt-file>
Propiedades personalizadas css
El mgt-file componente define las siguientes propiedades personalizadas CSS.
<mgt-file class="file" file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"></mgt-file>
.file {
--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;
}
Para obtener más información, consulte Componentes de estilo.
API y permisos de Microsoft Graph
Este control usa las siguientes API y permisos de Microsoft Graph. Para cada llamada API, se requiere uno de los permisos enumerados.
| Configuración | Ámbitos de permisos | API |
|---|---|---|
El desarrollador proporciona {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} |
El desarrollador proporciona {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} |
El desarrollador proporciona {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} |
El desarrollador proporciona {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}/drive/root:/{item-path} |
El desarrollador proporciona 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} |
El desarrollador proporciona 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} |
El desarrollador proporciona {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} |
El desarrollador proporciona {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}/drive/root:/{item-path} |
El desarrollador proporciona {site-id} AND {list-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}/lists/{list-id}/items/{item-id}/driveItem |
El desarrollador proporciona {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} |
El desarrollador proporciona {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}/drive/root:/{item-path} |
insight-type está establecido en trending AND developer proporciona {insight-id} |
Sites.Read.All, Sites.ReadWrite.All | GET /me/insights/trending/{insight-id}/resource |
insight-type está establecido en used AND developer proporciona {insight-id} |
Sites.Read.All, Sites.ReadWrite.All | GET /me/insights/used/{id}/resource |
insight-type is shared AND developer proporciona {insight-id} |
Sites.Read.All, Sites.ReadWrite.All | GET /me/insights/shared/{id}/resource |
Plantillas
El mgt-file 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 en data-type uno de los valores siguientes:
| Tipo de datos | Contexto de datos | Descripción |
|---|---|---|
| Carga | ninguno | Plantilla que se va a representar mientras el componente está en estado de carga. |
| sin datos | ninguno | Plantilla que se va a representar cuando no hay datos de archivo disponibles. |
| Es el valor predeterminado. | file: el objeto de detalles del archivo | La plantilla predeterminada reemplaza todo el componente por el suyo propio. |
Ejemplo de uso de plantilla
<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2">
<template data-type="default">
<p>File name: {{file.name}}.</p>
<p>File ID: {{file.id}}.</p>
</template>
<template data-type="loading">
<p>Getting the file data...</p>
</template>
<template data-type="no-data">
<p>No file data was found</p>
</template>
</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 |
|---|---|---|
driveFiles |
Lista de archivos por identificador de unidad | Se usa cuando driveId se proporciona |
groupFiles |
Lista de archivos por identificador de grupo | Se usa cuando groupId se proporciona |
siteFiles |
Lista de archivos por identificador de sitio | Se usa cuando siteId se proporciona |
userFiles |
Lista de archivos por identificador de usuario | Se usa cuando userId se proporciona |
insightFiles |
Lista de archivos por información | Se usa cuando insightType y insightId se proporcionan |
fileQueries |
Lista de archivos por consultas | Se usa cuando fileQuery 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 |
|---|---|
| modifiedSubtitle | Modified |
| sizeSubtitle | Size |
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