Componente da lista de arquivos no Microsoft Graph Toolkit
O componente Lista de Arquivos exibe uma lista de várias pastas e arquivos usando o nome do arquivo/pasta, um ícone e outras propriedades especificadas. Esse componente usa o componente mgt-file . Você pode especificar uma unidade ou site específico, exibir uma lista de arquivos com base no tipo de insights (tendência, usado ou compartilhado) ou fornecer consultas a uma lista personalizada de arquivos. O componente também fornece a opção de permitir que os usuários carreguem arquivos em um local especificado em Uma Unidade ou SharePoint.
Exemplo
O exemplo a seguir exibe um arquivo usando o mgt-file-list componente. Você pode usar o editor de código para ver como as propriedades alteram o comportamento do componente.
Propriedades
Você pode usar 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 arquivos a serem renderizados. |
| consultas de arquivo | fileQueries | Uma matriz de consultas de arquivo renderizadas pelo componente. |
| - | arquivos | Uma matriz de arquivos para obter ou definir a lista de arquivos renderizados pelo componente. Use essa propriedade para acessar os arquivos carregados pelo componente. Defina esse valor para carregar seus próprios arquivos. |
| insight-type | insightType | Defina para mostrar a tendência do usuário, os arquivos usados ou compartilhados. |
| drive-id | driveId | ID da unidade à qual a pasta pertence. Também deve fornecer ou item-iditem-path. |
| id de grupo | groupId | ID do grupo ao qual a pasta pertence. Também deve fornecer ou item-iditem-path. |
| site-id | siteId | ID do site ao qual a pasta pertence. Também deve fornecer ou item-iditem-path. Forneça list-id se você estiver fazendo referência a um arquivo de uma lista específica. |
| id do usuário | userId | ID do usuário ao qual os arquivos pertencem. Também deve fornecer ou item-iditem-path. Forneça list-id se você estiver fazendo referência a um arquivo de uma lista específica. |
| id de item | Itemid | ID da pasta. A consulta padrão é /me/drive/items. Forneça drive-id, group-id, site-idou user-id para consultar um local específico. |
| item-path | Itempath | Caminho do item da pasta (em relação à raiz). A consulta padrão é /me/drive/root. Forneça drive-id, group-id, site-idou user-id para consultar um local específico. |
| item-view | itemView | Define quais dados serão renderizados (somente ícone de arquivo, oneLine, twoLines threeLines). O padrão é 'threeLines' |
| tamanho da página | Pagesize | Um valor numérico para indicar o número máximo de arquivos a serem renderizados em cada página. Nota:page-size não há suporte com insight-type. |
| extensões de arquivo | fileExtensions | Uma matriz de extensões de arquivo usadas para filtrar arquivos a serem exibidos. |
| ocultar-mais-arquivos-botão | hideMoreFilesButton | Booliano para indicar se deve mostrar um botão para renderizar mais arquivos. |
| enable-file-upload | enableFileUpload | Booliano para habilitar ou desabilitar a funcionalidade de carregamento de arquivo. O valor padrão é false. |
| excludeed-file-extensions | excludeedFileExtensions | Matriz de cadeia de caracteres de extensões de arquivo a serem excluídas do upload de arquivo. Também deve definir o enable-file-upload atributo como true. |
| max-file-size | Maxfilesize | Um número que representa o tamanho máximo de carregamento de arquivo (KB). Também deve definir o enable-file-upload atributo como true. |
| max-upload-file | maxUploadFile | Um número que representa o número máximo de arquivos autorizados a serem carregados. O valor padrão são 10 arquivos. Também deve definir o enable-file-upload atributo como true. |
| disable-open-on-click | disableOpenOnClick | Booliano para habilitar ou desabilitar o comportamento padrão de abrir um arquivo na guia do navegador separado quando clicado. |
O exemplo a seguir altera o comportamento do componente para buscar uma lista de arquivos de uma consulta específica.
<mgt-file-list
file-list-query="/me/drive/items/01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY/children"
></mgt-file-list>
O exemplo a seguir altera o comportamento do componente para buscar uma lista de arquivos de uma pasta fornecendo a ID da pasta.
<mgt-file-list item-id="01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY"></mgt-file-list>
O exemplo a seguir altera o comportamento do componente para buscar a lista de arquivos de um grupo fornecendo a ID do grupo e o caminho da pasta.
<mgt-file-list
group-id="8090c93e-ba7c-433e-9f39-08c7ba07c0b3"
item-path="/Design"
></mgt-file-list>
O exemplo a seguir altera o comportamento do componente para buscar a lista de arquivos de um usuário fornecendo a ID do usuário e a ID da pasta.
<mgt-file-list
user-id="48d31887-5fad-4d73-a9f5-3c356e68a038"
item-id="01BYE5RZYFPM65IDVARFELFLNTXR4ZKABD"
></mgt-file-list>
O exemplo a seguir altera o comportamento do componente para buscar a lista de arquivos fornecendo o tipo de insights.
<mgt-file-list insight-type="shared"></mgt-file-list>
O exemplo a seguir habilita o recurso de carregamento de arquivo.
<mgt-file-list enable-file-upload></mgt-file-list>
O exemplo a seguir limita o número máximo de arquivos que podem ser carregados para 5.
<mgt-file-list max-upload-file="5" enable-file-upload></mgt-file-list>
O exemplo a seguir limita o tamanho máximo do arquivo que pode ser carregado para 10.000 KB.
<mgt-file-list max-file-size="10000" enable-file-upload></mgt-file-list>
O exemplo a seguir exclui o carregamento de arquivos com extensões de arquivo ".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, confira componentes de estilo.
Métodos
| Método | Descrição |
|---|---|
| reload(clearCache = false) | Chame o método para recarregar o componente com novos dados potenciais com base em suas propriedades. Passe true para limpar o cache antes de recarregar. |
Exemplo de recarga
Você pode usar o reload() método no mgt-file-list qual é exposto, obtendo a mgt-file-list referência do DOM e disparando o método em um botão usando 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 ele é emitido | Dados personalizados | Cancelável | Bolhas | Funciona com modelo personalizado |
|---|---|---|---|---|---|
itemClick |
Disparado quando o usuário seleciona um arquivo. | Arquivo selecionado | Não | Não | Sim, com um modelo de arquivo personalizado. |
Para obter mais informações sobre como lidar com eventos, consulte eventos.
Modelos
O mgt-file-list componente dá suporte a muitos modelos que permitem substituir determinadas partes do componente. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina o data-type valor como um dos tipos de dados listados na tabela a seguir.
| Tipo de dados | Contexto de dados | Descrição |
|---|---|---|
| Padrão. | files: lista de objetos de arquivo |
O modelo padrão substitui todo o componente por seu próprio. |
| file | file: objeto file |
O modelo usado para renderizar cada arquivo. |
| sem dados | Nenhum contexto de dados é passado | O modelo usado quando nenhum dado está disponível. |
| Carregar | Nenhum contexto de dados é passado | O modelo usado enquanto o componente carrega o estado. |
Exemplo de uso de 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
Esse componente usa as seguintes APIs do Microsoft Graph. Para cada chamada de API, uma das permissões listadas é necessária.
| Configuração | Permissões | API |
|---|---|---|
| Padrão (sem identificadores ou consulta fornecidas) | 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} 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}/children |
Fornecer {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}/children |
Fornecer SOMENTE {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} 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}/children |
Fornecer {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}/children |
Fornecer {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}:/children |
Fornecer {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}/root:/{item-path}:/children |
Fornecer {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}/root:/{item-path}:/children |
Fornecer {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}/root:/{item-path}:/children |
Fornecer somente {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 é definido como trending |
Sites.Read.All, Sites.ReadWrite.All | GET /me/insights/trending |
insight-type é definido como used |
Sites.Read.All, Sites.ReadWrite.All | GET /me/insights/used |
insight-type é definido como shared |
Sites.Read.All, Sites.ReadWrite.All | GET /me/insights/shared |
Fornecer enable-file-upload adicionalmente 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 consiste em um ou mais subcomponentes que podem exigir permissões diferentes das listadas anteriormente. Para obter mais informações, confira a documentação de cada subcomponente: mgt-file.
Autenticação
O controle usa o provedor de autenticação global descrito na documentação de autenticação para buscar os dados necessários.
Cache
| Repositório de objetos | Dados armazenados em cache | Comentários |
|---|---|---|
fileLists |
Lista de listas de arquivos | Lista de cache padrão para armazenar listas de arquivos. |
insightfileLists |
Lista de listas de arquivos insight | Usado quando insightType é fornecido. |
Observação
O mgt-file-list componente também usa o fileQueries repositório de objetos no mgt-file IndexedDB para armazenar arquivos em cache quando fileQueries for fornecido.
Para obter detalhes sobre como configurar o cache, consulte Cache.
Localização
O controle expõe as variáveis a seguir que podem ser localizadas. Para obter detalhes sobre como configurar a localização, confira Localizando componentes.
| Nome da cadeia de caracteres | 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