Composant de fichier dans le Kit de ressources Microsoft Graph

Article
11/07/2024

Le composant Fichier est utilisé pour représenter un fichier/dossier individuel à partir de OneDrive ou SharePoint. Le composant affiche des informations telles que le nom du fichier ou du dossier, l’icône de type de fichier et la date de l’auteur et de la dernière modification. Vous pouvez fournir les identificateurs d’un fichier et le composant génère la requête pour récupérer le fichier en fonction des identificateurs fournis. Ce composant peut être utilisé seul ou dans le cadre des composants mgt-file-list .

Exemple

L’exemple suivant affiche un fichier à l’aide du mgt-file composant . Vous pouvez utiliser l’éditeur de code pour voir comment les propriétés modifient le comportement du composant.

HTML
React

Ouvrez cet exemple dans mgt.dev.

Propriétés

Vous pouvez utiliser plusieurs propriétés pour personnaliser le composant.

Attribut	Propriété	Description
file-query	fileQuery	Requête complète ou chemin d’accès au fichier à récupérer.
user-id	userId	ID de l’utilisateur. Cette propriété est utilisée pour obtenir le fichier d’un utilisateur spécifié. Doit également fournir `item-id`, `item-path`ou `insight-typeinsight-id`.
drive-id	driveId	ID du lecteur auquel appartient le fichier. Doit également fournir ou `item-iditem-path`.
group-id	groupId	ID du groupe auquel appartient le fichier. Doit également fournir ou `item-iditem-path`.
site-id	siteId	ID du site auquel appartient le fichier. Doit également fournir ou `item-iditem-path`. Indiquez également si `list-id` vous référencez un fichier à partir d’une liste spécifique.
list-id	listId	ID de la liste à laquelle appartient le fichier. Doit également fournir `site-id` et `item-id`.
item-id	Itemid	ID du fichier. La requête par défaut est `/me/drive/items`. Fournissez `drive-id`, `group-id`, `site-id`ou `user-id` pour interroger un emplacement spécifique.
item-path	itemPath	Chemin d’accès de l’élément du fichier. La requête par défaut est `/me/drive/root`. Fournissez `drive-id`, `group-id`, `site-id`ou `user-id` pour interroger un emplacement spécifique.
insight-type	insightType	Type d’insight à partir duquel le fichier est récupéré. Peut être `trending`, `used`ou `shared`.
insight-id	insightId	ID de la ressource insight.
détails du fichier	fileDetails	Définir sur un objet représentant un fichier
icône de fichier	fileIcon	Chemin d’URL où l’icône est stockée.
-	driveItem	Objet contenant les détails du graphique sur l’élément.
-	fileDetails	Objet contenant l’élément DriveItem.
view	view	Définissez pour contrôler le rendu du fichier. La valeur par défaut est `oneline`. `image` - afficher uniquement l’icône `oneline` - afficher l’icône et une ligne de texte (la valeur par défaut est le fichier `name`) `twolines` - afficher l’icône et deux lignes de texte (`name` et `lastModifiedDateTime` par défaut) `threelines` - afficher l’icône et trois lignes de texte (`name`, `lastModifiedDateTime`et `displayName` de l’auteur par défaut)
line1-property	line1Property	Définit la propriété de `fileDetails` à utiliser pour la première ligne de texte. La valeur par défaut est `name` du fichier.
line2-property	line2Property	Définit la propriété de `fileDetails` à utiliser pour la deuxième ligne de texte. La valeur par défaut est `lastModifiedDateTime`.
line3-property	line3Property	Définit la propriété de `fileDetails` à utiliser pour la troisième ligne de texte. La valeur par défaut est `size` du fichier.

L’exemple suivant modifie le comportement du composant pour extraire des données à partir d’une requête spécifique.

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

L’exemple suivant modifie le comportement du composant pour extraire des données à partir d’une requête spécifique, afficher trois lignes d’informations (nom de fichier, date et heure de la dernière modification et taille de fichier par défaut) et définir l’icône de fichier.

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

L’exemple suivant modifie le comportement du composant pour extraire des données à partir d’un lecteur spécifique.

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

L’exemple suivant modifie le comportement du composant pour extraire des données à partir d’un site sharePoint et d’un chemin d’accès.

<mgt-file
  site-id="m365x214355.sharepoint.com,5a58bb09-1fba-41c1-8125-69da264370a0,9f2ec1da-0be4-4a74-9254-973f0add78fd"
  item-Path="/DemoDocs/AdminDemo"
></mgt-file>

L’exemple suivant modifie le comportement du composant pour extraire des données par type d’insight.

<mgt-file
  insight-type="shared"
  insight-id="AW1GxMvkOztMkJX-SCppUSRPF5EvyPDHRZVAqtQZXI4JoUXwI9_mfEWNlabr1f7aXRBWDMt2C2FDop4fP1vsUw9tRsTL5Ds7TJCV_kgqaVEkBA"
></mgt-file>

Propriétés personnalisées CSS

Le mgt-file composant définit les propriétés personnalisées CSS suivantes.

<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;
}

Pour en savoir plus, consultez composants de style.

API et autorisations Microsoft Graph

Ce contrôle utilise les API et autorisations Microsoft Graph suivantes. Pour chaque appel d’API, l’une des autorisations répertoriées est requise.

Configuration	Étendues d’autorisation	API
Le développeur fournit `{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}
Le développeur fournit `{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}
Le développeur fournit `{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}
Le développeur fournit `{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}
Le développeur fournit UNIQUEMENT `{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}
Le développeur fournit UNIQUEMENT `{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}
Le développeur fournit `{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}
Le développeur fournit `{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}
Le développeur fournit `{site-id}` AND AND `{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
Le développeur fournit `{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}
Le développeur fournit `{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` est défini sur `trending` AND developer fournit `{insight-id}`	Sites.Read.All, Sites.ReadWrite.All	GET /me/insights/trending/{insight-id}/resource
`insight-type` est défini sur `used` AND developer fournit `{insight-id}`	Sites.Read.All, Sites.ReadWrite.All	GET /me/insights/used/{id}/resource
`insight-type` is `shared` AND developer fournit `{insight-id}`	Sites.Read.All, Sites.ReadWrite.All	GET /me/insights/shared/{id}/resource

Modèles

Le mgt-file composant prend en charge plusieurs modèles qui vous permettent de remplacer certaines parties du composant. Pour spécifier un modèle, incluez un <template> élément à l’intérieur d’un composant et définissez sur l’une data-type des valeurs suivantes :

Type de données	Contexte de données	Description
Chargement	none	Modèle à afficher lorsque le composant est dans un état de chargement.
no-data	none	Modèle à afficher quand aucune donnée de fichier n’est disponible.
Valeur par défaut.	file : l’objet de détails du fichier	Le modèle par défaut remplace l’intégralité du composant par le vôtre.

Exemple d’utilisation du modèle

<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>

Authentification

Le contrôle utilise le fournisseur d’authentification global décrit dans la documentation sur l’authentification pour extraire les données requises.

Cache

Magasin d’objets	Données mises en cache	Remarques
`driveFiles`	Liste des fichiers par ID de lecteur	Utilisé quand `driveId` est fourni
`groupFiles`	Liste des fichiers par ID de groupe	Utilisé quand `groupId` est fourni
`siteFiles`	Liste des fichiers par ID de site	Utilisé quand `siteId` est fourni
`userFiles`	Liste des fichiers par ID d’utilisateur	Utilisé quand `userId` est fourni
`insightFiles`	Liste des fichiers par insights	Utilisé lorsque `insightType` et `insightId` sont fournis
`fileQueries`	Liste des fichiers par requêtes	Utilisé quand `fileQuery` est fourni

Pour plus d’informations sur la configuration du cache, consultez Mise en cache.

Localisation

Le contrôle expose les variables suivantes qui peuvent être localisées. Pour plus d’informations sur la configuration de la localisation, consultez Localisation des composants.

Nom de la chaîne	Valeur par défaut
modifiedSubtitle	`Modified`
sizeSubtitle	`Size`

Partager via