Componente de archivo en Microsoft Graph Toolkit

Artículo
11/07/2024

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.

HTML
React

Abra este ejemplo en mgt.dev.

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-id`o `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-id`o `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`, `used`o `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 icono `oneline` : 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`, `lastModifiedDateTime`y `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`

Compartir a través de