Composant de fichier dans le Kit de ressources Microsoft Graph
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.
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-pathou 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-idou 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-idou 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, usedou 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ôneoneline - 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, lastModifiedDateTimeet 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 |
Commentaires
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez https://aka.ms/ContentUserFeedback.
Envoyer et afficher des commentaires pour