Componente de archivo en microsoft Graph Toolkit

El componente Archivo se usa para representar un archivo o carpeta individual de OneDrive o SharePoint mostrando información como el nombre del archivo o carpeta, un icono que indica el tipo de archivo y otras propiedades como el autor, la fecha de última modificación u otros detalles. Puede proporcionar los identificadores de un archivo y el componente generará 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.

Abra este ejemplo en mgt.dev

Propiedades

Puede usar varias propiedades para personalizar el componente.

Atributo Propiedad Descripción
file-query fileQuery La consulta completa o la ruta de acceso al archivo que se va a recuperar.
drive-id driveId El identificador de la unidad a la que pertenece el archivo. También debe proporcionar o item-id item-path .
group-id groupId Id. del grupo al que pertenece el archivo. También debe proporcionar o item-id item-path .
site-id siteId Id. del sitio al que pertenece el archivo. También debe proporcionar o {item-id} {item-path} . Proporcione también {list-id} si hace referencia a un archivo de una lista específica.
list-id listId Id. de la lista a la que pertenece el archivo. También debe proporcionar {site-id} y {item-id} .
item-id itemId Id. del archivo. La consulta predeterminada es /me/drive/items . Proporcione {drive-id} , , o para consultar una ubicación {group-id} {site-id} {user-id} específica.
item-path itemPath Ruta de acceso del elemento del archivo. La consulta predeterminada es /me/drive/root . Proporcione {drive-id} , , o para consultar una ubicación {group-id} {site-id} {user-id} 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 Id. del recurso insight.
file-details fileDetails Se establece en un objeto que representa un archivo
icono de archivo fileIcon Establecer en un icono para mostrar para el archivo
vista vista Se establece para controlar cómo se representa el archivo. El valor predeterminado es oneline.
image - mostrar solo el icono
oneline - mostrar el icono y una línea de texto (el valor predeterminado es archivo name )
twolines - mostrar el icono y dos líneas de texto ( name lastModifiedDateTime y de forma predeterminada)
threelines - mostrar el icono y tres líneas de texto ( name , , y del autor de forma lastModifiedDateTime displayName predeterminada)
line1-property line1Property Establece la propiedad de fileDetails que se usará para la primera línea de texto. El valor name predeterminado es del archivo.
line2-property line2Property Establece la propiedad de fileDetails que se usará para la segunda línea de texto. El valor predeterminado es lastModifiedDateTime.
line3-property line3Property Establece la propiedad de fileDetails que se usará para la tercera línea de texto. El valor size predeterminado es del archivo.

En el siguiente ejemplo 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 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 behabior del componente para capturar datos de un SharePoint y ruta de acceso.

  <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 {
  --file-type-icon-size: 28px;
  --file-border: none;
  --file-box-shadow: none;
  --file-background-color: #ffffff;

  --font-family: 'Segoe UI';
  --font-size: 14px;
  --font-weight: 400;
  --text-transform: none;
  --color: #323130;

  --line2-font-size: 12px;
  --line2-font-weight: 400;
  --line2-color: #797775;
  --line2-text-transform: none;

  --line3-font-size: 12px;
  --line3-font-weight: 400;
  --line3-color: #797775;
  --line3-text-transform: none;
}

Para obtener más información, consulte styling components.

Microsoft Graph API y permisos

Este control usa los siguientes permisos y API Graph Microsoft.

Configuración Ámbitos de permisos API
El desarrollador proporciona {drive-id} AND {item-id} Files.Read, Files.Read.All, Sites.Read.All GET /drives/{drive-id}/items/{item-id}
El desarrollador proporciona {drive-id} AND {item-path} Files.Read, Files.Read.All, Sites.Read.All GET /drives/{drive-id}/root:/{item-path}
El desarrollador proporciona {group-id} AND {item-id} Files.Read, Files.Read.All, Sites.Read.All GET /groups/{group-id}/drive/items/{item-id}
El desarrollador proporciona {group-id} AND {item-path} Files.Read, Files.Read.All, Sites.Read.All GET /groups/{group-id}/drive/root:/{item-path}
El programador proporciona SOLO {item-id} Files.Read, Files.Read.All, Sites.Read.All GET /me/drive/items/{item-id}
El programador proporciona SOLO {item-path} Files.Read, Files.Read.All, Sites.Read.All GET /me/drive/root:/{item-path}
El desarrollador proporciona {site-id} AND {item-id} Files.Read, Files.Read.All, Sites.Read.All GET /sites/{site-id}/drive/items/{item-id}
El desarrollador proporciona {site-id} AND {item-path} Files.Read, Files.Read.All, Sites.Read.All GET /sites/{site-id}/drive/root:/{item-path}
El desarrollador proporciona {site-id} AND {list-id} AND {item-id} Files.Read, Files.Read.All, Sites.Read.All GET /sites/{site-id}/lists/{list-id}/items/{item-id}/driveItem
El desarrollador proporciona {user-id} AND {item-id} Files.Read, Files.Read.All, Sites.Read.All GET /users/{user-id}/drive/items/{item-id}
El desarrollador proporciona {user-id} AND {item-path} Files.Read, Files.Read.All, Sites.Read.All GET /users/{user-id}/drive/root:/{item-path}
insight-type se establece en trending and developer provides {insight-id} Sites.Read.All GET /me/insights/trending/{insight-id}/resource
El programador {user-id or upn} proporciona AND Y está establecido {insight-id} insight-type en trending Sites.Read.All GET /users/{id or userPrincipalName}/insights/trending/{insight-id}/resource
insight-type se establece en used and developer provides {insight-id} Sites.Read.All GET /me/insights/used/{id}/resource
El programador {user-id or upn} proporciona AND Y está establecido {insight-id} insight-type en used Sites.Read.All GET /users/{id or userPrincipalName}/insights/used/{id}/resource
insight-type is shared AND developer provides {insight-id} Sites.Read.All GET /me/insights/shared/{id}/resource
El programador {user-id or upn} proporciona AND Y está establecido {insight-id} insight-type en shared Sites.Read.All GET /users/{id or userPrincipalName}/insights/shared/{id}/resource

Plantillas

El mgt-file componente admite varias plantillas que permiten reemplazar determinadas partes del componente. Para especificar una plantilla, incluya un elemento dentro de un componente y <template> establezca el valor en uno de los siguientes data-type elementos:

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 representa cuando no hay datos de archivo disponibles.
Es el valor predeterminado. archivo: el objeto de detalles del archivo La plantilla predeterminada reemplaza todo el componente por el suyo propio.

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 id. de grupo Se usa cuando groupId se proporciona
siteFiles Lista de archivos por id. de sitio Se usa cuando siteId se proporciona
userFiles Lista de archivos por id. de usuario Se usa cuando userId se proporciona
insightFiles Lista de archivos por insights Se usa cuando insightType y insightId se proporciona
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é, vea Caching.