Dateikomponente im Microsoft Graph-Toolkit

Artikel
11/07/2024

Die Dateikomponente wird verwendet, um eine einzelne Datei/einen einzelnen Ordner aus OneDrive oder SharePoint darzustellen. Die Komponente zeigt Informationen wie den Datei- oder Ordnernamen, das Dateitypsymbol sowie das Datum des Autors und des Datums der letzten Änderung an. Sie können die Bezeichner für eine Datei angeben, und die Komponente generiert die Abfrage, um die Datei basierend auf den bereitgestellten Bezeichnern abzurufen. Diese Komponente kann eigenständig oder als Teil der mgt-file-list-Komponenten verwendet werden.

Beispiel

Im folgenden Beispiel wird eine Datei mit der mgt-file -Komponente angezeigt. Sie können den Code-Editor verwenden, um zu sehen, wie Eigenschaften das Verhalten der Komponente ändern.

HTML
React

Öffnen Sie dieses Beispiel in mgt.dev.

Eigenschaften

Sie können mehrere Eigenschaften verwenden, um die Komponente anzupassen.

Attribut	Eigenschaft	Beschreibung
file-query	fileQuery	Die vollständige Abfrage oder der Pfad zur abzurufenden Datei.
user-id	userId	ID des Benutzers. Diese Eigenschaft wird verwendet, um die Datei für einen angegebenen Benutzer abzurufen. Muss auch , `item-pathinsight-type` oder `insight-id`bereitstellen`item-id`.
Laufwerks-ID	driveId	Die ID des Laufwerks, zu dem die Datei gehört. Muss auch entweder `item-id` oder `item-path`angeben.
group-id	groupId	ID der Gruppe, zu der die Datei gehört. Muss auch entweder `item-id` oder `item-path`angeben.
Site-ID	siteId	ID der Website, zu der die Datei gehört. Muss auch entweder `item-id` oder `item-path`angeben. Geben Sie auch an `list-id` , wenn Sie auf eine Datei aus einer bestimmten Liste verweisen.
list-id	listId	ID der Liste, zu der die Datei gehört. Muss auch und `item-id`bereitstellen`site-id`.
item-id	Itemid	ID der Datei. Die Standardabfrage ist `/me/drive/items`. Geben Sie `drive-id`, `group-id`, `site-id`oder `user-id` an, um einen bestimmten Speicherort abzufragen.
item-path	itemPath	Elementpfad der Datei. Die Standardabfrage ist `/me/drive/root`. Geben Sie `drive-id`, `group-id`, `site-id`oder `user-id` an, um einen bestimmten Speicherort abzufragen.
insight-type	insightType	Typ der Erkenntnis, aus der die Datei abgerufen wird. Kann , `used`oder `shared`sein`trending`.
insight-id	insightId	ID der Erkenntnisressource.
Dateidetails	fileDetails	Auf ein Objekt festgelegt, das eine Datei darstellt
Dateisymbol	fileIcon	URL-Pfad, in dem das Symbol gespeichert ist.
-	driveItem	Objekt, das Graphdetails zum Element enthält.
-	fileDetails	Objekt, das das DriveItem-Objekt enthält.
Ansicht	Ansicht	Legen Sie fest, um zu steuern, wie die Datei gerendert wird. Der Standardwert lautet `oneline`. `image` – nur das Symbol anzeigen `oneline` – Das Symbol und eine Textzeile anzeigen (Standardeinstellung ist Datei `name`) `twolines` – Symbol und zwei Textzeilen anzeigen (`name` und `lastModifiedDateTime` standardmäßig) `threelines` – Zeigt das Symbol und drei Textzeilen (`name`standardmäßig , `lastModifiedDateTime`und `displayName` des Autors) an.
line1-property	line1Property	Legt die -Eigenschaft von `fileDetails` fest, die für die erste Textzeile verwendet werden soll. Der Standardwert ist `name` die Datei.
line2-property	line2Property	Legt die -Eigenschaft von `fileDetails` fest, die für die zweite Textzeile verwendet werden soll. Der Standardwert ist `lastModifiedDateTime`.
line3-property	line3Property	Legt die -Eigenschaft von `fileDetails` fest, die für die dritte Textzeile verwendet werden soll. Der Standardwert ist `size` die Datei.

Im folgenden Beispiel wird das Verhalten der Komponente geändert, um Daten aus einer bestimmten Abfrage abzurufen.

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

Im folgenden Beispiel wird das Verhalten der Komponente geändert, um Daten aus einer bestimmten Abfrage abzurufen, drei Informationszeilen anzuzeigen – Dateiname, Uhrzeit der letzten Änderung und standardmäßig Dateigröße – und festlegen das Dateisymbol.

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

Im folgenden Beispiel wird das Verhalten der Komponente geändert, um Daten von einem bestimmten Laufwerk abzurufen.

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

Im folgenden Beispiel wird das Verhalten der Komponente geändert, um Daten von einer SharePoint-Website und einem Pfad abzurufen.

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

Im folgenden Beispiel wird das Verhalten der Komponente geändert, um Daten nach Erkenntnistyp abzurufen.

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

Benutzerdefinierte CSS-Eigenschaften

Die mgt-file Komponente definiert die folgenden benutzerdefinierten CSS-Eigenschaften.

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

Weitere Informationen finden Sie unter Formatieren von Komponenten.

Microsoft Graph-APIs und -Berechtigungen

Dieses Steuerelement verwendet die folgenden Microsoft Graph-APIs und -Berechtigungen. Für jeden API-Aufruf ist eine der aufgeführten Berechtigungen erforderlich.

Konfiguration	Berechtigungsbereiche	API
Entwickler stellt AND bereit `{drive-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 /drives/{drive-id}/items/{item-id}
Entwickler stellt AND bereit `{drive-id}{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}
Entwickler stellt AND bereit `{group-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 /groups/{group-id}/drive/items/{item-id}
Entwickler stellt AND bereit `{group-id}{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}
Entwickler stellt NUR bereit `{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}
Entwickler stellt NUR bereit `{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}
Entwickler stellt AND bereit `{site-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}/drive/items/{item-id}
Entwickler stellt AND bereit `{site-id}{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}
Entwickler stellt AND `{list-id}` AND bereit `{site-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
Entwickler stellt AND bereit `{user-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 /users/{user-id}/drive/items/{item-id}
Entwickler stellt AND bereit `{user-id}{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` ist auf AND(n `trending` ) festgelegt. `{insight-id}`	Sites.Read.All, Sites.ReadWrite.All	GET /me/insights/trending/{insight-id}/resource
`insight-type` ist auf AND(n `used` ) festgelegt. `{insight-id}`	Sites.Read.All, Sites.ReadWrite.All	GET /me/insights/used/{id}/resource
`insight-type` is `shared` AND developer provides `{insight-id}`	Sites.Read.All, Sites.ReadWrite.All	GET /me/insights/shared/{id}/resource

Vorlagen

Die mgt-file Komponente unterstützt mehrere Vorlagen , mit denen Sie bestimmte Teile der Komponente ersetzen können. Um eine Vorlage anzugeben, schließen Sie ein <template> Element innerhalb einer Komponente ein, und legen Sie auf data-type einen der folgenden Werte fest:

Datentyp	Datenkontext	Beschreibung
Laden	keine	Die Vorlage, die gerendert werden soll, während sich die Komponente im Ladezustand befindet.
Keine Daten	keine	Die Vorlage, die gerendert werden soll, wenn keine Dateidaten verfügbar sind.
Standard	file: Das Dateidetails-Objekt	Die Standardvorlage ersetzt die gesamte Komponente durch Ihre eigene.

Beispiel für die Vorlagenverwendung

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

Authentifizierung

Das Steuerelement verwendet den in der Authentifizierungsdokumentation beschriebenen globalen Authentifizierungsanbieter, um die erforderlichen Daten abzurufen.

Cache

Objektspeicher	Zwischengespeicherte Daten	Bemerkungen
`driveFiles`	Liste der Dateien nach Laufwerks-ID	Wird verwendet, wenn `driveId` bereitgestellt wird
`groupFiles`	Liste der Dateien nach Gruppen-ID	Wird verwendet, wenn `groupId` bereitgestellt wird
`siteFiles`	Liste der Dateien nach Website-ID	Wird verwendet, wenn `siteId` bereitgestellt wird
`userFiles`	Liste der Dateien nach Benutzer-ID	Wird verwendet, wenn `userId` bereitgestellt wird
`insightFiles`	Liste der Dateien nach Erkenntnissen	Wird verwendet, wenn `insightType` und `insightId` bereitgestellt werden
`fileQueries`	Liste der Dateien nach Abfragen	Wird verwendet, wenn `fileQuery` bereitgestellt wird

Ausführliche Informationen zum Konfigurieren des Caches finden Sie unter Zwischenspeichern.

Lokalisierung

Das -Steuerelement macht die folgenden Variablen verfügbar, die lokalisiert werden können. Ausführliche Informationen zum Einrichten der Lokalisierung finden Sie unter Lokalisieren von Komponenten.

Zeichenfolgenname	Standardwert
modifiedSubtitle	`Modified`
sizeSubtitle	`Size`

Freigeben über