Componente de lista de ficheiros no Microsoft Graph Toolkit
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.
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-idou 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-idou 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
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de