Dateilistenkomponente im Microsoft Graph-Toolkit
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.
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-pathangeben. |
| group-id | groupId | ID der Gruppe, zu der der Ordner gehört. Muss auch entweder item-id oder item-pathangeben. |
| Site-ID | siteId | ID der Website, zu der der Ordner gehört. Muss auch entweder item-id oder item-pathangeben. 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-pathangeben. 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-idoder 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-idoder 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. Hinweis:page-size wird mit insight-typenicht 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 truefestlegen. |
| max-file-size | Maxfilesize | Eine Zahl, die die maximale Dateiuploadgröße (KB) darstellt. Muss auch das enable-file-upload -Attribut auf truefestlegen. |
| 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 truefestlegen. |
| 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 | Abbrechbare | 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 |
|---|---|---|
| Standard | 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 | Bemerkungen |
|---|---|---|
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 |
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Tickets als Feedbackmechanismus für Inhalte auslaufen lassen und es durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter: https://aka.ms/ContentUserFeedback.
Einreichen und Feedback anzeigen für