Componente de lista de ficheiros no Microsoft Graph Toolkit

Artigo
11/07/2024

O componente Lista de Ficheiros apresenta uma lista de várias pastas e ficheiros com o nome do ficheiro/pasta, um ícone e outras propriedades que especificar. Este componente utiliza o componente mgt-file . Pode especificar uma unidade ou site específico, apresentar uma lista de ficheiros com base no tipo de informações (tendência, utilizado ou partilhado) ou fornecer consultas a uma lista personalizada de ficheiros. O componente também fornece a opção de permitir que os utilizadores carreguem ficheiros para uma localização especificada no One Drive ou no SharePoint.

Exemplo

O exemplo seguinte apresenta um ficheiro com o mgt-file-list componente . Pode utilizar o editor de código para ver como as propriedades alteram o comportamento do componente.

HTML
React

[Abra este exemplo no mgt.dev] (https://mgt.dev/?path=/story/components-mgt-file-list-html--file-list&source=docs).

Propriedades

Pode utilizar várias propriedades para personalizar o componente.

Atributo	Propriedade	Descrição
file-list-query	fileListQuery	A consulta completa ou o caminho para a unidade ou site que contém a lista de ficheiros a compor.
file-queries	fileQueries	Uma matriz de consultas de ficheiros compostas pelo componente.
-	arquivos	Uma matriz de ficheiros para obter ou definir a lista de ficheiros compostos pelo componente. Utilize esta propriedade para aceder aos ficheiros carregados pelo componente. Defina este valor para carregar os seus próprios ficheiros.
insight-type	insightType	Defina para mostrar os ficheiros populares, utilizados ou partilhados do utilizador.
drive-id	driveId	ID da unidade à que pertence a pasta. Também tem de fornecer ou `item-iditem-path`.
group-id	groupId	ID do grupo ao qual pertence a pasta. Também tem de fornecer ou `item-iditem-path`.
site-id	siteId	ID do site a que pertence a pasta. Também tem de fornecer ou `item-iditem-path`. Indique `list-id` se está a referenciar um ficheiro a partir de uma lista específica.
user-id	userId	ID do utilizador ao qual os ficheiros pertencem. Também tem de fornecer ou `item-iditem-path`. Indique `list-id` se está a referenciar um ficheiro a partir de uma lista específica.
item-id	itemId	ID da pasta . A consulta predefinida é `/me/drive/items`. Indique `drive-id`, `group-id`, `site-id`ou `user-id` para consultar uma localização específica.
caminho do item	itemPath	Caminho do item da pasta (relativo à raiz). A consulta predefinida é `/me/drive/root`. Indique `drive-id`, `group-id`, `site-id`ou `user-id` para consultar uma localização específica.
vista de item	itemView	Define os dados a serem compostos (apenas o ícone de ficheiro, oneLine, twoLines threeLines). A predefinição é "threeLines"
tamanho da página	pageSize	Um valor numérico para indicar o número máximo de ficheiros a compor em cada página. Nota:`page-size` não é suportado com `insight-type`.
extensões de ficheiro	fileExtensions	Uma matriz de extensões de ficheiro utilizada para filtrar ficheiros a mostrar.
hide-more-files-button	hideMoreFilesButton	Booleano para indicar se pretende mostrar um botão para compor mais ficheiros.
enable-file-upload	enableFileUpload	Booleano para ativar ou desativar a funcionalidade de carregamento de ficheiros. O valor padrão é `false`.
excluded-file-extensions	excludedFileExtensions	Matriz de cadeia de extensões de ficheiro a excluir do carregamento de ficheiros. Também tem de definir o `enable-file-upload` atributo como `true`.
max-file-size	maxFileSize	Um número que representa o tamanho máximo de carregamento de ficheiros (KB). Também tem de definir o `enable-file-upload` atributo como `true`.
max-upload-file	maxUploadFile	Um número que representa o número máximo de ficheiros autorizados a serem carregados. O valor predefinido são `10` ficheiros. Também tem de definir o `enable-file-upload` atributo como `true`.
disable-open-on-click	disableOpenOnClick	Booleano para ativar ou desativar o comportamento predefinido de abrir um ficheiro num separador do browser separado quando clicado.

O exemplo seguinte altera o comportamento do componente para obter uma lista de ficheiros de uma consulta específica.

<mgt-file-list
  file-list-query="/me/drive/items/01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY/children"
></mgt-file-list>

O exemplo seguinte altera o comportamento do componente para obter uma lista de ficheiros de uma pasta ao fornecer o ID da pasta.

<mgt-file-list item-id="01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY"></mgt-file-list>

O exemplo seguinte altera o comportamento do componente para obter a lista de ficheiros de um grupo ao fornecer o ID de grupo e o caminho da pasta.

<mgt-file-list
  group-id="8090c93e-ba7c-433e-9f39-08c7ba07c0b3"
  item-path="/Design"
></mgt-file-list>

O exemplo seguinte altera o comportamento do componente para obter a lista de ficheiros de um utilizador ao fornecer o ID de utilizador e o ID da pasta.

<mgt-file-list
  user-id="48d31887-5fad-4d73-a9f5-3c356e68a038"
  item-id="01BYE5RZYFPM65IDVARFELFLNTXR4ZKABD"
></mgt-file-list>

O exemplo seguinte altera o comportamento do componente para obter a lista de ficheiros ao fornecer o tipo de informações.

<mgt-file-list insight-type="shared"></mgt-file-list>

O exemplo seguinte ativa a funcionalidade de carregamento de ficheiros.

<mgt-file-list enable-file-upload></mgt-file-list>

O exemplo seguinte limita o número máximo de ficheiros que podem ser carregados para 5.

<mgt-file-list max-upload-file="5" enable-file-upload></mgt-file-list>

O exemplo seguinte limita o tamanho máximo de ficheiro que pode ser carregado para 10 000 KB.

<mgt-file-list max-file-size="10000" enable-file-upload></mgt-file-list>

O exemplo seguinte exclui o carregamento de ficheiros com extensões de ficheiro ".doc, .pdf".

<mgt-file-list
  excluded-file-extensions=".doc,.pdf"
  enable-file-upload
></mgt-file-list>

Propriedades personalizadas do CSS

O mgt-file-list componente define as seguintes propriedades personalizadas do 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 saber mais, veja Componentes de estilo.

Métodos

Método	Descrição
reload(clearCache = false)	Chame o método para recarregar o componente com potenciais novos dados com base nas respetivas propriedades. Passe `true` para limpar a cache antes de recarregar.

Exemplo de recarregamento

Pode utilizar o reload() método que está exposto mgt-file-list ao obter a mgt-file-list referência do DOM e ao acionar o método num botão com o 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	Quando é emitido	Dados personalizados	Cancelável	Bolhas	Funciona com um modelo personalizado
`itemClick`	Acionado quando o utilizador seleciona um ficheiro.	Ficheiro selecionado	Não	Não	Sim, com um modelo de ficheiro personalizado.

Para obter mais informações sobre o processamento de eventos, veja eventos.

Modelos

O mgt-file-list componente suporta muitos modelos que lhe permitem substituir determinadas partes do componente. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina o data-type valor para um dos tipos de dados listados na tabela seguinte.

Tipo de dados	Contexto de dados	Descrição
Padrão.	`files`: lista de objetos de ficheiro	O modelo predefinido substitui todo o componente pelo seu próprio.
file	`file`: objeto de ficheiro	O modelo utilizado para compor cada ficheiro.
sem dados	Não é transmitido nenhum contexto de dados	O modelo utilizado quando não existem dados disponíveis.
a carregar	Não é transmitido nenhum contexto de dados	O modelo utilizado enquanto o componente carrega o estado.

Exemplo de utilização do modelo

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

Permissões do Microsoft Graph

Este componente utiliza as seguintes APIs do Microsoft Graph. Para cada chamada à API, é necessária uma das permissões listadas.

Configuração	Permissões	API
Predefinição (não são fornecidos identificadores ou 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`
Fornecer `{drive-id}` E `{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`
Fornecer `{group-id}` E `{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`
Fornecer APENAS `{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`
Fornecer `{site-id}` E `{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`
Fornecer `{user-id}` E `{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`
Fornecer `{drive-id}` E `{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`
Fornecer `{group-id}` E `{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`
Fornecer `{site-id}` E `{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`
Fornecer `{user-id}` E `{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`
Fornecer apenas `{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` está definido como `trending`	Sites.Read.All, Sites.ReadWrite.All	`GET /me/insights/trending`
`insight-type` está definido como `used`	Sites.Read.All, Sites.ReadWrite.All	`GET /me/insights/used`
`insight-type` está definido como `shared`	Sites.Read.All, Sites.ReadWrite.All	`GET /me/insights/shared`
A disponibilização `enable-file-upload` de requisitos adicionais requer	Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All	`PUT /me/drive/root:/{filename}:/content` `POST /me/drive/root:/{filename}:/createUploadSession`

Subcomponentes

O mgt-file-list componente é composto por um ou mais subcomponentes que podem necessitar de permissões diferentes das listadas anteriormente. Para obter mais informações, veja a documentação para cada subcomponente: mgt-file.

Autenticação

O controlo utiliza o fornecedor de autenticação global descrito na documentação de autenticação para obter os dados necessários.

Cache

Arquivo de objetos	Dados em cache	Comentários
`fileLists`	Lista de listas de ficheiros	Lista de cache predefinida para armazenar listas de ficheiros.
`insightfileLists`	Lista de listas de ficheiros de informações	Utilizado quando `insightType` é fornecido.

Observação

O mgt-file-list componente também utiliza o fileQueries arquivo de objetos no IndexedDB para colocar ficheiros em mgt-file cache quando fileQueries for fornecido.

Para obter detalhes sobre como configurar a cache, veja Colocação em cache.

Localização

O controlo expõe as seguintes variáveis que podem ser localizadas. Para obter detalhes sobre como configurar a localização, veja Localizar componentes.

Nome da cadeia	Valor padrão
showMoreSubtitle	`Show more items`
filesSectionTitle	`Files`
sharedTextSubtitle	`Shared`

Partilhar via