Componente de lista de ficheiros no Microsoft Graph Toolkit

Cuidado

O Toolkit do Microsoft Graph foi preterido. O período de reforma começa a 1 de setembro de 2025, com a reforma completa prevista para 28 de agosto de 2026. Os programadores devem migrar para utilizar os SDKs do Microsoft Graph ou outras ferramentas suportadas do Microsoft Graph para criar experiências Web. Para obter mais informações, veja o anúncio de preterição.

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 OneDrive ou 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`

Comentários

Esta página foi útil?

Last updated on 2024-11-07