Componente de arquivo no Microsoft Graph Toolkit
O componente Arquivo é usado para representar um arquivo/pasta individual do OneDrive ou do SharePoint. O componente exibe informações como o nome do arquivo ou da pasta, o ícone de tipo de arquivo e o autor e a última data modificada. Você pode fornecer os identificadores para um arquivo e o componente gera a consulta para recuperar o arquivo com base nos identificadores fornecidos. Esse componente pode ser usado por conta própria ou como parte dos componentes mgt-file-list .
Exemplo
O exemplo a seguir exibe um arquivo usando o mgt-file 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-query | fileQuery | A consulta completa ou o caminho para o arquivo a ser recuperado. |
| id do usuário | userId | ID do usuário. Essa propriedade é usada para obter o arquivo de um usuário especificado. Também deve fornecer item-id, item-pathou insight-typeinsight-id. |
| drive-id | driveId | A ID da unidade à qual o arquivo pertence. Também deve fornecer ou item-iditem-path. |
| id de grupo | groupId | ID do grupo ao qual o arquivo pertence. Também deve fornecer ou item-iditem-path. |
| site-id | siteId | ID do site ao qual o arquivo pertence. Também deve fornecer ou item-iditem-path. Forneça o list-id também se você estiver fazendo referência a um arquivo de uma lista específica. |
| list-id | listId | ID da lista à qual o arquivo pertence. Também deve fornecer site-id e item-id. |
| id de item | Itemid | ID do arquivo. 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 do arquivo. A consulta padrão é /me/drive/root. Forneça drive-id, group-id, site-idou user-id para consultar um local específico. |
| insight-type | insightType | Tipo de insight do qual o arquivo é recuperado. Pode ser trending, usedou shared. |
| insight-id | insightId | ID do recurso insight. |
| detalhes do arquivo | fileDetails | Definir como um objeto que representa um arquivo |
| ícone de arquivo | fileIcon | Caminho de URL em que o ícone é armazenado. |
| - | driveItem | Objeto que contém detalhes do Graph no item. |
| - | fileDetails | Objeto que contém o DriveItem. |
| modo de exibição | modo de exibição | Defina para controlar como o arquivo é renderizado. O padrão é oneline. image - mostrar apenas o íconeoneline - mostrar o ícone e uma linha de texto (o padrão é o arquivo name)twolines - mostrar o ícone e duas linhas de texto (name e lastModifiedDateTime por padrão)threelines - mostrar o ícone e três linhas de texto (name, lastModifiedDateTimee displayName do autor por padrão) |
| propriedade line1 | line1Property | Define a propriedade de fileDetails a ser usada para a primeira linha de texto. O padrão é name do arquivo. |
| propriedade line2 | line2Property | Define a propriedade de fileDetails a ser usada para a segunda linha de texto. O padrão é lastModifiedDateTime. |
| propriedade line3 | line3Property | Define a propriedade de fileDetails a ser usada para a terceira linha de texto. O padrão é size do arquivo. |
O exemplo a seguir altera o comportamento do componente para buscar dados de uma consulta específica.
<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2">
</mgt-file>
O exemplo a seguir altera o comportamento do componente para buscar dados de uma consulta específica, mostrar três linhas de informações - nome do arquivo, hora da data modificada pela última vez e tamanho do arquivo por padrão - e definir o ícone do arquivo.
<mgt-file
file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"
view="threeLines"
file-icon="ICON_PATH"
></mgt-file>
O exemplo a seguir altera o comportamento do componente para buscar dados de uma unidade específica.
<mgt-file
drive-id="b!-RIj2DuyvEyV1T4NlOaMHk8XkS_I8MdFlUCq1BlcjgmhRfAj3-Z8RY2VpuvV_tpd"
item-id="01BYE5RZ5MYLM2SMX75ZBIPQZIHT6OAYPB"
></mgt-file>
O exemplo a seguir altera o comportamento do componente para buscar dados de um site e caminho do SharePoint.
<mgt-file
site-id="m365x214355.sharepoint.com,5a58bb09-1fba-41c1-8125-69da264370a0,9f2ec1da-0be4-4a74-9254-973f0add78fd"
item-Path="/DemoDocs/AdminDemo"
></mgt-file>
O exemplo a seguir altera o comportamento do componente para buscar dados por tipo de insights.
<mgt-file
insight-type="shared"
insight-id="AW1GxMvkOztMkJX-SCppUSRPF5EvyPDHRZVAqtQZXI4JoUXwI9_mfEWNlabr1f7aXRBWDMt2C2FDop4fP1vsUw9tRsTL5Ds7TJCV_kgqaVEkBA"
></mgt-file>
Propriedades personalizadas do CSS
O mgt-file componente define as seguintes propriedades personalizadas do CSS.
<mgt-file class="file" file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"></mgt-file>
.file {
--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;
}
Para saber mais, confira componentes de estilo.
APIs e permissões do Microsoft Graph
Esse controle usa as seguintes APIs e permissões do Microsoft Graph. Para cada chamada de API, uma das permissões listadas é necessária.
| Configuração | Escopos de permissão | API |
|---|---|---|
Desenvolvedor fornece {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} |
Desenvolvedor fornece {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} |
Desenvolvedor fornece {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} |
Desenvolvedor fornece {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}/drive/root:/{item-path} |
Desenvolvedor fornece 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} |
Desenvolvedor fornece 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} |
Desenvolvedor fornece {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} |
Desenvolvedor fornece {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}/drive/root:/{item-path} |
Desenvolvedor fornece {site-id} AND E {list-id}{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}/lists/{list-id}/items/{item-id}/driveItem |
Desenvolvedor fornece {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} |
Desenvolvedor fornece {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}/drive/root:/{item-path} |
insight-type é definido como trending e o desenvolvedor fornece {insight-id} |
Sites.Read.All, Sites.ReadWrite.All | GET /me/insights/trending/{insight-id}/resource |
insight-type é definido como used e o desenvolvedor fornece {insight-id} |
Sites.Read.All, Sites.ReadWrite.All | GET /me/insights/used/{id}/resource |
insight-type é shared o desenvolvedor E fornece {insight-id} |
Sites.Read.All, Sites.ReadWrite.All | GET /me/insights/shared/{id}/resource |
Modelos
O mgt-file componente dá suporte a vários 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 como um dos seguintes valores:
| Tipo de dados | Contexto de Dados | Descrição |
|---|---|---|
| Carregar | none | O modelo a ser renderizado enquanto o componente está em um estado de carregamento. |
| sem dados | none | O modelo a ser renderizado quando nenhum dado de arquivo estiver disponível. |
| Padrão. | arquivo: o objeto detalhes do arquivo | O modelo padrão substitui todo o componente por seu próprio. |
Exemplo de uso de modelo
<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2">
<template data-type="default">
<p>File name: {{file.name}}.</p>
<p>File ID: {{file.id}}.</p>
</template>
<template data-type="loading">
<p>Getting the file data...</p>
</template>
<template data-type="no-data">
<p>No file data was found</p>
</template>
</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 |
|---|---|---|
driveFiles |
Lista de arquivos por id de unidade | Usado quando driveId é fornecido |
groupFiles |
Lista de arquivos por id de grupo | Usado quando groupId é fornecido |
siteFiles |
Lista de arquivos por id do site | Usado quando siteId é fornecido |
userFiles |
Lista de arquivos por ID do usuário | Usado quando userId é fornecido |
insightFiles |
Lista de arquivos por insights | Usado quando insightType e insightId são fornecidos |
fileQueries |
Lista de arquivos por consultas | Usado quando fileQuery é 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 |
|---|---|
| modifiedSubtitle | Modified |
| sizeSubtitle | Size |
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