Compartilhar via


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 ícone
oneline - 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