Dateikomponente im Microsoft Graph-Toolkit

  • Artikel

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.

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-idbereitstellenitem-id.
Laufwerks-ID driveId Die ID des Laufwerks, zu dem die Datei gehört. Muss auch entweder item-id oder item-pathangeben.
group-id groupId ID der Gruppe, zu der die Datei gehört. Muss auch entweder item-id oder item-pathangeben.
Site-ID siteId ID der Website, zu der die Datei gehört. Muss auch entweder item-id oder item-pathangeben. 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-idbereitstellensite-id.
item-id Itemid ID der Datei. 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 der Datei. Die Standardabfrage ist /me/drive/root. Geben Sie drive-id, group-id, site-idoder user-id an, um einen bestimmten Speicherort abzufragen.
insight-type insightType Typ der Erkenntnis, aus der die Datei abgerufen wird. Kann , usedoder sharedseintrending.
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 (namestandardmäßig , lastModifiedDateTimeund 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