Composant Liste de fichiers dans le Kit de ressources Microsoft Graph

Article
11/07/2024

Le composant Liste de fichiers affiche une liste de plusieurs dossiers et fichiers à l’aide du nom du fichier/dossier, d’une icône et d’autres propriétés que vous spécifiez. Ce composant utilise le composant mgt-file . Vous pouvez spécifier un lecteur ou un site spécifique, afficher une liste de fichiers en fonction du type d’insight (tendance, utilisé ou partagé) ou fournir des requêtes à une liste personnalisée de fichiers. Le composant fournit également la possibilité d’autoriser les utilisateurs à charger des fichiers à un emplacement spécifié dans One Drive ou SharePoint.

Exemple

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

HTML
React

[Ouvrir cet exemple dans mgt.dev] (https://mgt.dev/?path=/story/components-mgt-file-list-html--file-list&source=docs).

Propriétés

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

Attribut	Propriété	Description
file-list-query	fileListQuery	Requête complète ou chemin d’accès au lecteur ou au site qui contient la liste des fichiers à afficher.
requêtes de fichier	fileQueries	Tableau de requêtes de fichier rendues par le composant.
-	fichiers	Tableau de fichiers pour obtenir ou définir la liste des fichiers rendus par le composant. Utilisez cette propriété pour accéder aux fichiers chargés par le composant. Définissez cette valeur pour charger vos propres fichiers.
insight-type	insightType	Définissez pour afficher les fichiers tendance, utilisés ou partagés de l’utilisateur.
drive-id	driveId	ID du lecteur auquel appartient le dossier. Doit également fournir ou `item-iditem-path`.
group-id	groupId	ID du groupe auquel appartient le dossier. Doit également fournir ou `item-iditem-path`.
site-id	siteId	ID du site auquel appartient le dossier. Doit également fournir ou `item-iditem-path`. Indiquez `list-id` si vous référencez un fichier à partir d’une liste spécifique.
user-id	userId	ID de l’utilisateur auquel les fichiers appartiennent. Doit également fournir ou `item-iditem-path`. Indiquez `list-id` si vous référencez un fichier à partir d’une liste spécifique.
item-id	itemId	ID du dossier. 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 dossier (relatif à la racine). 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.
item-view	itemView	Définit les données à afficher (icône de fichier uniquement, oneLine, twoLines threeLines). La valeur par défaut est « threeLines »
taille de page	Pagesize	Valeur numérique pour indiquer le nombre maximal de fichiers à afficher sur chaque page. Note:`page-size` n’est pas pris en charge avec `insight-type`.
extensions de fichier	fileExtensions	Tableau d’extensions de fichier utilisées pour filtrer les fichiers à afficher.
hide-more-files-button	hideMoreFilesButton	Boolean pour indiquer s’il faut afficher un bouton pour afficher d’autres fichiers.
enable-file-upload	enableFileUpload	Boolean pour activer ou désactiver la fonctionnalité de chargement de fichiers. La valeur par défaut est `false`.
excluded-file-extensions	excludedFileExtensions	Tableau de chaînes d’extensions de fichier à exclure du chargement de fichiers. Doit également définir l’attribut sur `enable-file-uploadtrue`.
max-file-size	maxFileSize	Nombre représentant la taille maximale de chargement de fichier (Ko). Doit également définir l’attribut sur `enable-file-uploadtrue`.
max-upload-file	maxUploadFile	Nombre représentant le nombre maximal de fichiers autorisés à être chargés. La valeur par défaut est `10` files. Doit également définir l’attribut sur `enable-file-uploadtrue`.
disable-open-on-click	disableOpenOnClick	Boolean pour activer ou désactiver le comportement par défaut de l’ouverture d’un fichier dans un onglet de navigateur distinct lorsque vous cliquez dessus.

L’exemple suivant modifie le comportement du composant pour extraire une liste de fichiers à partir d’une requête spécifique.

<mgt-file-list
  file-list-query="/me/drive/items/01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY/children"
></mgt-file-list>

L’exemple suivant modifie le comportement du composant pour extraire une liste de fichiers à partir d’un dossier en fournissant l’ID de dossier.

<mgt-file-list item-id="01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY"></mgt-file-list>

L’exemple suivant modifie le comportement du composant pour extraire la liste de fichiers d’un groupe en fournissant l’ID de groupe et le chemin d’accès au dossier.

<mgt-file-list
  group-id="8090c93e-ba7c-433e-9f39-08c7ba07c0b3"
  item-path="/Design"
></mgt-file-list>

L’exemple suivant modifie le comportement du composant pour extraire la liste de fichiers d’un utilisateur en fournissant l’ID utilisateur et l’ID de dossier.

<mgt-file-list
  user-id="48d31887-5fad-4d73-a9f5-3c356e68a038"
  item-id="01BYE5RZYFPM65IDVARFELFLNTXR4ZKABD"
></mgt-file-list>

L’exemple suivant modifie le comportement du composant pour extraire la liste des fichiers en fournissant le type d’insight.

<mgt-file-list insight-type="shared"></mgt-file-list>

L’exemple suivant active la fonctionnalité de chargement de fichiers.

<mgt-file-list enable-file-upload></mgt-file-list>

L’exemple suivant limite le nombre maximal de fichiers pouvant être chargés à 5.

<mgt-file-list max-upload-file="5" enable-file-upload></mgt-file-list>

L’exemple suivant limite la taille maximale du fichier pouvant être chargé à 10 000 Ko.

<mgt-file-list max-file-size="10000" enable-file-upload></mgt-file-list>

L’exemple suivant exclut le chargement de fichiers avec les extensions de fichier « .doc, .pdf ».

<mgt-file-list
  excluded-file-extensions=".doc,.pdf"
  enable-file-upload
></mgt-file-list>

Propriétés personnalisées CSS

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

<mgt-file-list class="file-list" insight-type="shared"></mgt-file-list>

.file-list {
  /** mgt-file-upload custom styling */
  --file-upload-background-color-drag: rgb(255, 0, 0, 0.5);
  --file-upload-border-drag: 2px groove black;
  --file-upload-button-background-color: orange;
  --file-upload-button-background-color-hover: green;
  --file-upload-button-text-color: whitesmoke;
  --file-upload-dialog-background-color: azure;
  --file-upload-dialog-text-color: yellow;
  --file-upload-dialog-replace-button-background-color: white;
  --file-upload-dialog-replace-button-background-color-hover: gray;
  --file-upload-dialog-replace-button-text-color: black;
  --file-upload-dialog-keep-both-button-background-color: black;
  --file-upload-dialog-keep-both-button-background-color-hover: gray;
  --file-upload-dialog-keep-both-button-text-color: white;
  --file-upload-button-border: 2px dotted yellow;
  --file-upload-dialog-replace-button-border: 2px dotted;
  --file-upload-dialog-keep-both-button-border: 2px dashed;
  --file-upload-dialog-border: 2px solid blue;
  --file-upload-dialog-width: 300px;
  --file-upload-dialog-height: 100px;
  --file-upload-dialog-padding: 36px;

  /** mgt-file custom styling */
  --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;

  /** mgt-file-list CSS tokens */
  --file-list-background-color: #e0f8db;
  --file-list-box-shadow: none;
  --file-list-border: 4px dotted #ffbdc3;
  --file-list-border-radius: 10px;
  --file-list-padding: 0;
  --file-list-margin: 0;
  --show-more-button-background-color: #fef8dd;
  --show-more-button-background-color--hover: #ffe7c7;
  --show-more-button-font-size: 14px;
  --show-more-button-padding: 16px;
  --show-more-button-border-bottom-right-radius: 12px;
  --show-more-button-border-bottom-left-radius: 12px;
}

Pour en savoir plus, consultez composants de style.

Méthodes

Méthode	Description
reload(clearCache = false)	Appelez la méthode pour recharger le composant avec de nouvelles données potentielles en fonction de ses propriétés. `true` Passez pour effacer le cache avant le rechargement.

Exemple de rechargement

Vous pouvez utiliser la reload() méthode exposée sur mgt-file-list en obtenant la mgt-file-list référence à partir du DOM et en déclenchant la méthode dans un bouton à l’aide de l’événement click .

<mgt-file-list insight-type="shared"></mgt-file-list>

<button id="reload-btn">Reload Files</button>

const fileList = document.querySelector("mgt-file-list");
document.getElementById("reload-btn").addEventListener("click", () => {
  // passing true will clear file cache before reloading
  fileList.reload(true);
});

Événements

Événement	Quand est-il émis	Données personnalisées	Annulable	Bulles	Fonctionne avec un modèle personnalisé
`itemClick`	Déclenché lorsque l’utilisateur sélectionne un fichier.	Fichier sélectionné	Non	Non	Oui, avec un modèle de fichier personnalisé.

Pour plus d’informations sur la gestion des événements, consultez événements.

Modèles

Le mgt-file-list composant prend en charge de nombreux 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 la data-type valeur sur l’un des types de données répertoriés dans le tableau suivant.

Type de données	Contexte de données	Description
Valeur par défaut.	`files`: liste des objets de fichier	Le modèle par défaut remplace l’intégralité du composant par le vôtre.
file	`file`: objet file	Modèle utilisé pour afficher chaque fichier.
no-data	Aucun contexte de données n’est passé	Modèle utilisé lorsqu’aucune donnée n’est disponible.
chargement	Aucun contexte de données n’est passé	Modèle utilisé pendant que le composant charge l’état.

Exemple d’utilisation de modèle

<mgt-file-list insight-type="shared">
  <template data-type="loading">
    <p>Getting files</p>
  </template>
  <template data-type="no-data">
    <p>No files found</p>
  </template>
  <template data-type="file">
    <p>File name{{file.name}}</p>
  </template>
</mgt-file-list>

Autorisations de Microsoft Graph

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

Configuration	Autorisations	API
Par défaut (aucun identificateur ou requête fourni)	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/children`
Indiquez `{drive-id}` ET `{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}/children`
Indiquez `{group-id}` ET `{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}/children`
Fournir 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}/children`
Indiquez `{site-id}` ET `{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}/children`
Indiquez `{user-id}` ET `{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}/children`
Indiquez `{drive-id}` ET `{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}:/children`
Indiquez `{group-id}` ET `{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}/root:/{item-path}:/children`
Indiquez `{site-id}` ET `{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}/root:/{item-path}:/children`
Indiquez `{user-id}` ET `{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}/root:/{item-path}:/children`
Fournir 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}:/children`
`insight-type` est défini sur `trending`	Sites.Read.All, Sites.ReadWrite.All	`GET /me/insights/trending`
`insight-type` est défini sur `used`	Sites.Read.All, Sites.ReadWrite.All	`GET /me/insights/used`
`insight-type` est défini sur `shared`	Sites.Read.All, Sites.ReadWrite.All	`GET /me/insights/shared`
Fournir en `enable-file-upload` outre nécessite	Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All	`PUT /me/drive/root:/{filename}:/content` `POST /me/drive/root:/{filename}:/createUploadSession`

Sous-composants

Le mgt-file-list composant se compose d’un ou plusieurs sous-composants qui peuvent nécessiter des autorisations autres que celles répertoriées précédemment. Pour plus d’informations, consultez la documentation de chaque sous-composant : 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
`fileLists`	Liste des listes de fichiers	Liste de cache par défaut pour stocker les listes de fichiers.
`insightfileLists`	Liste des listes de fichiers d’insight	Utilisé quand `insightType` est fourni.

Remarque

Le mgt-file-list composant utilise également le magasin d’objets fileQueries dans mgt-file IndexedDB pour mettre en cache les fichiers quand fileQueries 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
showMoreSubtitle	`Show more items`
filesSectionTitle	`Files`
sharedTextSubtitle	`Shared`

Partager via