Dateilistenkomponente im Microsoft Graph-Toolkit

Artikel
11/07/2024

Die Komponente Dateiliste zeigt eine Liste mehrerer Ordner und Dateien mithilfe des Datei-/Ordnernamens, eines Symbols und anderer eigenschaften an, die Sie angeben. Diese Komponente verwendet die mgt-file-Komponente . Sie können ein bestimmtes Laufwerk oder eine bestimmte Website angeben, eine Liste von Dateien basierend auf dem Erkenntnistyp (trending, used oder shared) anzeigen oder Abfragen für eine benutzerdefinierte Liste von Dateien bereitstellen. Die Komponente bietet auch die Option, Benutzern das Hochladen von Dateien an einen angegebenen Speicherort in One Drive oder SharePoint zu ermöglichen.

Beispiel

Im folgenden Beispiel wird eine Datei mit der mgt-file-list -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] (https://mgt.dev/?path=/story/components-mgt-file-list-html--file-list&source=docs).

Eigenschaften

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

Attribut	Eigenschaft	Beschreibung
file-list-query	fileListQuery	Die vollständige Abfrage oder der Pfad zu dem Laufwerk oder der Website, das die Liste der zu rendernden Dateien enthält.
dateiabfragen	fileQueries	Ein Array von Dateiabfragen, die von der Komponente gerendert werden.
-	files	Ein Array von Dateien zum Abrufen oder Festlegen der Liste der von der Komponente gerenderten Dateien. Verwenden Sie diese Eigenschaft, um auf die von der Komponente geladenen Dateien zuzugreifen. Legen Sie diesen Wert fest, um Ihre eigenen Dateien zu laden.
insight-type	insightType	Legen Sie fest, um die beliebten, verwendeten oder freigegebenen Dateien des Benutzers anzuzeigen.
Laufwerks-ID	driveId	ID des Laufwerks, zu dem der Ordner gehört. Muss auch entweder `item-id` oder `item-path`angeben.
group-id	groupId	ID der Gruppe, zu der der Ordner gehört. Muss auch entweder `item-id` oder `item-path`angeben.
Site-ID	siteId	ID der Website, zu der der Ordner gehört. Muss auch entweder `item-id` oder `item-path`angeben. Geben Sie an `list-id` , wenn Sie auf eine Datei aus einer bestimmten Liste verweisen.
user-id	userId	ID des Benutzers, zu dem die Dateien gehören. Muss auch entweder `item-id` oder `item-path`angeben. Geben Sie an `list-id` , wenn Sie auf eine Datei aus einer bestimmten Liste verweisen.
item-id	itemId	ID des Ordners. 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 des Ordners (relativ zum Stamm). Die Standardabfrage ist `/me/drive/root`. Geben Sie `drive-id`, `group-id`, `site-id`oder `user-id` an, um einen bestimmten Speicherort abzufragen.
Elementansicht	itemView	Legt fest, welche Daten gerendert werden sollen (nur Dateisymbol, oneLine, twoLines threeLines). Der Standardwert ist "threeLines"
Seitengröße	Pagesize	Ein Zahlenwert, der die maximale Anzahl von Dateien angibt, die auf jeder Seite gerendert werden sollen. Anmerkung:`page-size` wird mit `insight-type`nicht unterstützt.
dateierweiterungen	fileExtensions	Ein Array von Dateierweiterungen, die zum Filtern der anzuzeigenden Dateien verwendet werden.
Schaltfläche "Weitere Dateien ausblenden"	hideMoreFilesButton	Boolescher Wert, um anzugeben, ob eine Schaltfläche zum Rendern weiterer Dateien angezeigt werden soll.
enable-file-upload	enableFileUpload	Boolescher Wert zum Aktivieren oder Deaktivieren der Dateiuploadfunktion. Der Standardwert ist `false`.
excluded-file-extensions	excludedFileExtensions	Zeichenfolgenarray von Dateierweiterungen, die vom Dateiupload ausgeschlossen werden sollen. Muss auch das `enable-file-upload` -Attribut auf `true`festlegen.
max-file-size	maxFileSize	Eine Zahl, die die maximale Dateiuploadgröße (KB) darstellt. Muss auch das `enable-file-upload` -Attribut auf `true`festlegen.
max-upload-file	maxUploadFile	Eine Zahl, die die maximale Anzahl von Dateien darstellt, die hochgeladen werden dürfen. Der Standardwert ist `10` files. Muss auch das `enable-file-upload` -Attribut auf `true`festlegen.
disable-open-on-click	disableOpenOnClick	Boolescher Wert, um das Standardverhalten des Öffnens einer Datei in einer separaten Browserregisterkarte zu aktivieren oder zu deaktivieren, wenn darauf geklickt wird.

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

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

Im folgenden Beispiel wird das Verhalten der Komponente geändert, um eine Dateiliste aus einem Ordner abzurufen, indem die Ordner-ID angegeben wird.

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

Im folgenden Beispiel wird das Verhalten der Komponente zum Abrufen der Dateiliste aus einer Gruppe geändert, indem die Gruppen-ID und der Ordnerpfad angegeben werden.

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

Im folgenden Beispiel wird das Verhalten der Komponente geändert, um die Dateiliste von einem Benutzer abzurufen, indem die Benutzer-ID und die Ordner-ID angegeben werden.

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

Im folgenden Beispiel wird das Verhalten der Komponente zum Abrufen der Dateiliste geändert, indem der Erkenntnistyp bereitgestellt wird.

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

Im folgenden Beispiel wird das Dateiuploadfeature aktiviert.

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

Im folgenden Beispiel wird die maximale Anzahl von Dateien, die hochgeladen werden können, auf 5 beschränkt.

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

Im folgenden Beispiel wird die maximale Dateigröße, die hochgeladen werden kann, auf 10.000 KB beschränkt.

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

Im folgenden Beispiel wird das Hochladen von Dateien mit der Dateierweiterung ".doc, .pdf" ausgeschlossen.

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

Benutzerdefinierte CSS-Eigenschaften

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

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

Weitere Informationen finden Sie unter Formatieren von Komponenten.

Methoden

Methode	Beschreibung
reload(clearCache = false)	Rufen Sie die -Methode auf, um die Komponente basierend auf ihren Eigenschaften mit potenziellen neuen Daten neu zu laden. Übergeben Sie `true` , um den Cache vor dem erneuten Laden zu löschen.

Beispiel für erneutes Laden

Sie können die reload() Methode verwenden, die für verfügbar gemacht mgt-file-list wird, indem Sie den mgt-file-list Verweis aus dem DOM abrufen und die -Methode mithilfe des click -Ereignisses in einer Schaltfläche auslösen.

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

Ereignisse

Ereignis	Wann wird es ausgegeben?	Benutzerdefinierte Daten	Annullierbar	Blasen	Funktioniert mit benutzerdefinierter Vorlage
`itemClick`	Wird ausgelöst, wenn der Benutzer eine Datei auswählt.	Ausgewählte Datei	Nein	Nein	Ja, mit einer benutzerdefinierten Dateivorlage .

Weitere Informationen zum Behandeln von Ereignissen finden Sie unter Ereignisse.

Vorlagen

Die mgt-file-list Komponente unterstützt viele 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 den data-type Wert auf einen der in der folgenden Tabelle aufgeführten Datentypen fest.

Datentyp	Datenkontext	Beschreibung
Vorgabe	`files`: Liste der Dateiobjekte	Die Standardvorlage ersetzt die gesamte Komponente durch Ihre eigene.
file	`file`: file-Objekt	Die Vorlage, die zum Rendern der einzelnen Dateien verwendet wird.
Keine Daten	Es wird kein Datenkontext übergeben.	Die Vorlage, die verwendet wird, wenn keine Daten verfügbar sind.
Laden	Es wird kein Datenkontext übergeben.	Die Vorlage, die beim Laden des Zustands der Komponente verwendet wird.

Beispiel für die Vorlagenverwendung

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

Microsoft Graph-Berechtigungen

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

Konfiguration	Berechtigungen	API
Standard (keine Bezeichner oder Abfrage angegeben)	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`
Bereitstellen von `{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}/children`
Bereitstellen von `{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}/children`
NUR angeben `{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`
Bereitstellen von `{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}/children`
Bereitstellen von `{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}/children`
Bereitstellen von `{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}:/children`
Bereitstellen von `{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}/root:/{item-path}:/children`
Bereitstellen von `{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}/root:/{item-path}:/children`
Bereitstellen von `{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}/root:/{item-path}:/children`
Nur angeben `{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` ist auf festgelegt. `trending`	Sites.Read.All, Sites.ReadWrite.All	`GET /me/insights/trending`
`insight-type` ist auf festgelegt. `used`	Sites.Read.All, Sites.ReadWrite.All	`GET /me/insights/used`
`insight-type` ist auf festgelegt. `shared`	Sites.Read.All, Sites.ReadWrite.All	`GET /me/insights/shared`
Zusätzlich erfordert die Bereitstellung `enable-file-upload`	Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All	`PUT /me/drive/root:/{filename}:/content` `POST /me/drive/root:/{filename}:/createUploadSession`

Unterkomponenten

Die mgt-file-list Komponente besteht aus einem oder mehreren Unterkomponenten, die möglicherweise andere Als die zuvor aufgeführten Berechtigungen benötigen. Weitere Informationen finden Sie in der Dokumentation zu den einzelnen Unterkomponenten: mgt-file.

Authentifizierung

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

Cache

Objektspeicher	Zwischengespeicherte Daten	Hinweise
`fileLists`	Liste der Dateilisten	Standardcacheliste zum Speichern von Dateilisten.
`insightfileLists`	Liste der Erkenntnisdateilisten	Wird verwendet, wenn `insightType` angegeben wird.

Hinweis

Die mgt-file-list Komponente verwendet auch den fileQueries Objektspeicher in mgt-file IndexedDB, um Dateien zwischenzuspeichern, wenn fileQueries 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
showMoreSubtitle	`Show more items`
filesSectionTitle	`Files`
sharedTextSubtitle	`Shared`

Freigeben über