Componente de ficheiros no Microsoft Graph Toolkit

Cuidado

O Toolkit do Microsoft Graph foi preterido. O período de reforma começa a 1 de setembro de 2025, com a reforma completa prevista para 28 de agosto de 2026. Os programadores devem migrar para utilizar os SDKs do Microsoft Graph ou outras ferramentas suportadas do Microsoft Graph para criar experiências Web. Para obter mais informações, veja o anúncio de preterição.

O componente Ficheiro é utilizado para representar um ficheiro/pasta individual do OneDrive ou do SharePoint. O componente apresenta informações como o nome do ficheiro ou pasta, o ícone de tipo de ficheiro e o autor e a data da última modificação. Pode fornecer os identificadores de um ficheiro e o componente gera a consulta para obter o ficheiro com base nos identificadores fornecidos. Este componente pode ser utilizado por si só ou como parte dos componentes mgt-file-list .

Exemplo

O exemplo seguinte apresenta um ficheiro com o mgt-file componente . Pode utilizar o editor de código para ver como as propriedades alteram o comportamento do componente.

HTML
React

Abra este exemplo no mgt.dev.

Propriedades

Pode utilizar várias propriedades para personalizar o componente.

Atributo	Propriedade	Descrição
file-query	fileQuery	A consulta completa ou o caminho para o ficheiro a obter.
user-id	userId	ID do utilizador. Esta propriedade é utilizada para obter o ficheiro de um utilizador especificado. Também tem de fornecer `item-id`, `item-path`ou `insight-idinsight-type` .
drive-id	driveId	O ID da unidade a que o ficheiro pertence. Também tem de fornecer ou `item-iditem-path`.
group-id	groupId	ID do grupo ao qual o ficheiro pertence. Também tem de fornecer ou `item-iditem-path`.
site-id	siteId	ID do site a que pertence o ficheiro. Também tem de fornecer ou `item-iditem-path`. Indique também `list-id` se estiver a referenciar um ficheiro a partir de uma lista específica.
list-id	listId	ID da lista à que pertence o ficheiro. Também tem de fornecer `site-id` e `item-id`.
item-id	itemId	ID do ficheiro. A consulta predefinida é `/me/drive/items`. Indique `drive-id`, `group-id`, `site-id`ou `user-id` para consultar uma localização específica.
caminho do item	itemPath	Caminho do item do ficheiro. A consulta predefinida é `/me/drive/root`. Indique `drive-id`, `group-id`, `site-id`ou `user-id` para consultar uma localização específica.
insight-type	insightType	Tipo de informações de onde o ficheiro é obtido. Pode ser `trending`, `used`ou `shared`.
insight-id	insightId	ID do recurso de informações.
file-details	fileDetails	Definir como um objeto que representa um ficheiro
ícone de ficheiro	fileIcon	Caminho do URL onde o ícone está 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 a forma como o ficheiro é composto. O padrão é `oneline`. `image` - mostrar apenas o ícone `oneline` - mostrar o ícone e uma linha de texto (a predefinição é o ficheiro `name`) `twolines` - mostrar o ícone e duas linhas de texto (`name` e `lastModifiedDateTime` por predefinição) `threelines` - mostrar o ícone e três linhas de texto (`name`, `lastModifiedDateTime`e `displayName` do autor por predefinição)
propriedade line1	line1Property	Define a propriedade de `fileDetails` a utilizar para a primeira linha de texto. A predefinição é `name` do ficheiro .
propriedade line2	line2Property	Define a propriedade de `fileDetails` a utilizar para a segunda linha de texto. O padrão é `lastModifiedDateTime`.
propriedade line3	line3Property	Define a propriedade de `fileDetails` a utilizar para a terceira linha de texto. A predefinição é `size` do ficheiro .

O exemplo seguinte altera o comportamento do componente para obter dados de uma consulta específica.

<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2">
</mgt-file>

O exemplo seguinte altera o comportamento do componente para obter dados de uma consulta específica, mostrar três linhas de informações - nome de ficheiro, hora da última modificação e tamanho do ficheiro por predefinição - e definir o ícone de ficheiro.

<mgt-file
  file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"
  view="threeLines"
  file-icon="ICON_PATH"
></mgt-file>

O exemplo seguinte altera o comportamento do componente para obter dados de uma unidade específica.

<mgt-file
  drive-id="b!-RIj2DuyvEyV1T4NlOaMHk8XkS_I8MdFlUCq1BlcjgmhRfAj3-Z8RY2VpuvV_tpd"
  item-id="01BYE5RZ5MYLM2SMX75ZBIPQZIHT6OAYPB"
></mgt-file>

O exemplo seguinte altera o comportamento do componente para obter 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 seguinte altera o comportamento do componente para obter dados por tipo de informações.

<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, veja Componentes de estilo.

APIs e permissões do Microsoft Graph

Este controlo utiliza as seguintes APIs e permissões do Microsoft Graph. Para cada chamada à API, é necessária uma das permissões listadas.

Configuração	Âmbitos de Permissão	API
O programador fornece `{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}
O programador fornece `{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}
O programador fornece `{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}
O programador fornece `{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}/drive/root:/{item-path}
O programador fornece 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}
O programador fornece 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}
O programador fornece `{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}
O programador fornece `{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}/drive/root:/{item-path}
O programador fornece `{site-id}` E 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
O programador fornece `{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}
O programador fornece `{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}/drive/root:/{item-path}
`insight-type` está definido como `trending` E fornecido pelo programador `{insight-id}`	Sites.Read.All, Sites.ReadWrite.All	GET /me/insights/trending/{insight-id}/resource
`insight-type` está definido como `used` E fornecido pelo programador `{insight-id}`	Sites.Read.All, Sites.ReadWrite.All	GET /me/insights/used/{id}/resource
`insight-type` é `shared` e o programador fornece `{insight-id}`	Sites.Read.All, Sites.ReadWrite.All	GET /me/insights/shared/{id}/resource

Modelos

O mgt-file componente suporta vários modelos que lhe permitem substituir determinadas partes do componente. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina como data-type um dos seguintes valores:

Tipo de dados	Contexto de Dados	Descrição
a carregar	none	O modelo a compor enquanto o componente está num estado de carregamento.
sem dados	none	O modelo a compor quando não existem dados de ficheiro disponíveis.
Padrão.	ficheiro: o objeto de detalhes do ficheiro	O modelo predefinido substitui todo o componente pelo seu próprio.

Exemplo de utilização de modelos

<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 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
`driveFiles`	Lista de ficheiros por ID de unidade	Utilizado quando `driveId` é fornecido
`groupFiles`	Lista de ficheiros por ID de grupo	Utilizado quando `groupId` é fornecido
`siteFiles`	Lista de ficheiros por ID do site	Utilizado quando `siteId` é fornecido
`userFiles`	Lista de ficheiros por ID de utilizador	Utilizado quando `userId` é fornecido
`insightFiles`	Lista de ficheiros por informações	Utilizado quando `insightType` e `insightId` são fornecidos
`fileQueries`	Lista de ficheiros por consultas	Utilizado quando `fileQuery` é 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
modifiedSubtitle	`Modified`
sizeSubtitle	`Size`

Comentários

Esta página foi útil?

Last updated on 2025-09-05