Componente de arquivo no Microsoft Graph Toolkit

Artigo
11/07/2024

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.

HTML
React

Abra este exemplo no mgt.dev.

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-path`ou `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-id`ou `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-id`ou `user-id` para consultar um local específico.
insight-type	insightType	Tipo de insight do qual o arquivo é recuperado. Pode ser `trending`, `used`ou `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`, `lastModifiedDateTime`e `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`

Compartilhar via