Microsoft Graph Toolkit のファイル リスト コンポーネント

  • [アーティクル]

[ファイル一覧] コンポーネントには、指定したファイル /フォルダー名、 アイコン、およびその他のプロパティを使用して、複数のフォルダーとファイルの一覧が表示されます。 このコンポーネントでは 、mgt-file コンポーネントを 使用します。 特定のドライブまたはサイトを指定したり、分析情報の種類 (トレンド、使用、共有) に基づいてファイルの一覧を表示したり、ファイルのカスタム リストにクエリを提供したりできます。 コンポーネントには、ユーザーが One Drive または SharePoint の指定した場所にファイルをアップロードできるようにするオプションも用意されています。

例

次の例では、 コンポーネントを使用してファイルを mgt-file-list 表示します。 コード エディターを使用して、プロパティ がコンポーネントの動作をどのように変更させるかを確認することができます。

この例を mgt.dev で開きます。

プロパティ

いくつかのプロパティを使用して、コンポーネントをカスタマイズできます。

属性 プロパティ 説明
file-list-query fileListQuery レンダリングするファイルの一覧を含むドライブまたはサイトへの完全なクエリまたはパス。
file-queries fileQueries コンポーネントによってレンダリングされるファイル クエリの配列。
none ファイル コンポーネントによってレンダリングされるファイルの一覧を取得または設定するファイルの配列。 コンポーネントによって読み込まれたファイルにアクセスするには、これを使用します。 この値を設定して、独自のファイルを読み込みます。
insight-type insightType ユーザーのトレンド、使用、または共有ファイルを表示するように設定します。
drive-id driveId フォルダーが属するドライブの ID。 または もitem-iditem-path指定する必要があります。
group-id groupId フォルダーが属するグループの ID。 または もitem-iditem-path指定する必要があります。
site-id siteId フォルダーが属しているサイトの ID。 または も{item-id}{item-path}指定する必要があります。 特定のリストからファイルを参照している場合は、 を指定 {list-id} します。
item-id Itemid フォルダーの ID。 既定のクエリは です /me/drive/items。 、{group-id}、{site-id}または {user-id} を指定{drive-id}して、特定の場所に対してクエリを実行します。
item-path itemPath フォルダーの項目パス (ルートに対する相対パス)。 既定のクエリは です /me/drive/root。 、{group-id}、{site-id}または {user-id} を指定{drive-id}して、特定の場所に対してクエリを実行します。
page-size Pagesize 各ページにレンダリングするファイルの最大数を示す数値。 メモ：page-size ではサポートされていません insight-type。
file-extensions fileExtensions 表示するファイルをフィルター処理するために使用されるファイル拡張子の配列。
hide-more-files-button hideMoreFilesButton より多くのファイルをレンダリングするボタンを表示するかどうかを示すブール値。
enable-file-upload enableFileUpload ブール型 (Boolean) を使用して、ファイルのアップロード機能を有効または無効にします。 既定値は false です。
excluded-file-extensions excludedFileExtensions ファイルのアップロードから除外するファイル拡張子の文字列配列。 属性も に enable-file-upload 設定する true必要があります。
max-file-size maxFileSize 最大ファイル アップロード サイズ (KB) を表す数値。 属性も に enable-file-upload 設定する true必要があります。
max-upload-file maxUploadFile アップロードできるファイルの最大数を表す数値。 既定値は files です 10 。 属性も に enable-file-upload 設定する true必要があります。

次の例では、コンポーネントの動作を変更して、特定のクエリからファイル リストをフェッチします。

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

次の例では、フォルダー ID を指定してフォルダーからファイル リストをフェッチするようにコンポーネントの動作を変更します。

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

次の例では、グループ ID とフォルダー パスを指定して、コンポーネントの動作を変更してグループからファイル リストをフェッチします。

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

次の例では、ユーザー ID とフォルダー ID を指定して、コンポーネントの動作を変更してユーザーからファイル リストをフェッチします。

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

次の例では、分析情報の種類を指定して、コンポーネントの動作を変更してファイル リストをフェッチします。

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

次の例では、ファイルのアップロード機能を有効にします。

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

次の例では、アップロードできるファイルの最大数を 5 に制限します。

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

次の例では、アップロードできる最大ファイル サイズを 10000 KB に制限します。

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

次の例では、ファイル拡張子が ".doc,.pdf" のファイルのアップロードを除外します。

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

メソッド

メソッド 説明
reload(clearCache = false) メソッドを呼び出して、そのプロパティに基づいて新しいデータの可能性のあるコンポーネントをリロードします。 を渡 true して、再読み込みする前にキャッシュをクリアします。

CSS カスタム プロパティ

mgt-file-list コンポーネントは、以下の CSS カスタム プロパティを定義します。

mgt-file-list {
  --font-family: 'Segoe UI';
  --font-size: 14px;

  --file-list-background-color: #ffffff;
  --file-list-border: none;
  --file-list-box-shadow: none;
  --file-list-padding: 4px 0;
  --file-list-margin: 0;

  --file-item-background-color--hover: rgba(0, 0, 0, 0.1);
  --file-item-background-color--active: rgba(0, 0, 0, 0.05);
  --file-item-border-radius: 2px;
  --file-item-margin: 0 4px;

  --file-item-border-top: none;
  --file-item-border-left: none;
  --file-item-border-right: none;
  --file-item-border-bottom: none;

  --show-more-button-background-color: #f3f2f1;
  --show-more-button-background-color--hover: rgba(0, 0, 0, 0.1);
  --show-more-button-font-size: 12px;
  --show-more-button-padding: 6px;
  --show-more-button-border-bottom-right-radius: 4px;
  --show-more-button-border-bottom-left-radius: 4px;

  --file-upload-border: 4px dotted #ffbdc3;
  --file-upload-background-color: rgba(255, 0, 0, 0.1);
  --file-upload-button-float: left;
  --file-upload-button-color: #323130;
  --file-upload-button-background-color: #fef8dd;
  --file-upload-dialog-content-background-color: #ffe7c7;
  --file-upload-dialog-primarybutton-background-color: #ffe7c7;
  --file-upload-dialog-primarybutton-color: #323130;
}

詳細については、「コンポーネントのスタイリング」を参照してください。

Microsoft Graph API とアクセス許可

構成 アクセス許可 API
既定値 (識別子またはクエリは指定されていません) Files.Read、Files.Read.All、Sites.Read.All GET /me/drive/root/children
提供 enable-file-upload Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All GET /me/drive/root/children
PUT /me/drive/root:/{filename}:/content
POST /me/drive/root:/{filename}:/createUploadSession
AND を指定する{drive-id}{item-id} Files.Read、Files.Read.All、Sites.Read.All GET /drives/{drive-id}/items/{item-id}/children
AND と を指定{drive-id}する{item-id}enable-file-upload Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All GET /drives/{drive-id}/items/{item-id}/children
PUT /drives/{drive-id}/items/{item-id}:/{filename}:/content
POST /drives/{drive-id}/items/{item-id}:/{filename}:/createUploadSession
AND を指定する{group-id}{item-id} Files.Read、Files.Read.All、Sites.Read.All GET /groups/{group-id}/drive/items/{item-id}/children
AND と を指定{group-id}する{item-id}enable-file-upload Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All GET /groups/{group-id}/drive/items/{item-id}/children
PUT /groups/{group-id}/drive/items/{item-id}:/{filename}:/content
POST /groups/{group-id}/drive/items/{item-id}:/{filename}:/createUploadSession
指定のみ {item-id} Files.Read、Files.Read.All、Sites.Read.All GET /me/drive/items/{item-id}/children
AND のみを指定する{item-id}enable-file-upload Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All GET /me/drive/items/{item-id}/children
PUT /me/drive/items/{item-id}:/{filename}:/content
POST /me/drive/items/{item-id}:/{filename}:/createUploadSession
AND を指定する{site-id}{item-id} Files.Read、Files.Read.All、Sites.Read.All GET /sites/{site-id}/drive/items/{item-id}/children
AND と を指定{site-id}する{item-id}enable-file-upload Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All GET /sites/{site-id}/drive/items/{item-id}/children
PUT /sites/{site-id}/drive/items/{item-id}:/{filename}:/content
POST /sites/{site-id}/drive/items/{item-id}:/{filename}:/createUploadSession
AND を指定する{user-id}{item-id} Files.Read、Files.Read.All、Sites.Read.All GET /users/{user-id}/drive/items/{item-id}/children
AND と を指定{user-id}する{item-id}enable-file-upload Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All GET /users/{user-id}/drive/items/{item-id}/children
PUT /users/{user-id}/drive/items/{item-id}:/{filename}:/content
POST /users/{user-id}/drive/items/{item-id}:/{filename}:/createUploadSession
AND を指定する{drive-id}{item-path} Files.Read、Files.Read.All、Sites.Read.All GET /drives/{drive-id}/root:/{item-path}:/children
AND と を指定{drive-id}する{item-path}enable-file-upload Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All GET /drives/{drive-id}/root:/{item-path}:/children
PUT /drives/{drive-id}/root:/{item-path}/{filename}:/content
POST /drives/{drive-id}/root:/{item-path}/{filename}:/createUploadSession
AND を指定する{group-id}{item-path} Files.Read、Files.Read.All、Sites.Read.All GET /groups/{group-id}/root:/{item-path}:/children
AND と を指定{group-id}する{item-path}enable-file-upload Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All GET /groups/{group-id}/root:/{item-path}:/children
PUT /groups/{group-id}/root:/{item-path}/{filename}:/content
POST /groups/{group-id}/root:/{item-path}/{filename}:/createUploadSession
AND を指定する{site-id}{item-path} Files.Read、Files.Read.All、Sites.Read.All GET /sites/{site-id}/root:/{item-path}:/children
AND と を指定{site-id}する{item-path}enable-file-upload Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All GET /sites/{site-id}/root:/{item-path}:/children
PUT /sites/{site-id}/root:/{item-path}/{filename}:/content
POST /sites/{site-id}/root:/{item-path}/{filename}:/createUploadSession
AND を指定する{user-id}{item-path} Files.Read、Files.Read.All、Sites.Read.All GET /users/{user-id}/root:/{item-path}:/children
AND と を指定{user-id}する{item-path}enable-file-upload Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All GET /users/{user-id}/root:/{item-path}:/children
PUT /users/{user-id}/root:/{item-path}/{filename}:/content
POST /users/{user-id}/root:/{item-path}/{filename}:/createUploadSession
指定のみ {item-path} Files.Read、Files.Read.All、Sites.Read.All GET /me/drive/root:/{item-path}:/children
AND のみを指定する{item-path}enable-file-upload Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All GET /me/drive/root:/{item-path}:/children
PUT /me/drive/root:/{item-path}/{filename}:/content
POST /me/drive/root:/{item-path}/{filename}:/createUploadSession
insight-type がトレンドに設定されている Sites.Read.All GET /me/insights/trending
[AND のinsight-type指定{user-id or upn}] が に設定されているtrending Sites.Read.All GET /users/{id or userPrincipalName}/insights/trending
insight-type が に設定されている used Sites.Read.All GET /me/insights/used
[AND のinsight-type指定{user-id or upn}] が に設定されているused Sites.Read.All GET /users/{id or userPrincipalName}/insights/used
insight-type が shared に設定されている Sites.Read.All GET /me/insights/shared
[AND のinsight-type指定{user-id or upn}] が に設定されているshared Sites.Read.All GET /users/{id or userPrincipalName}/insights/shared?$filter=((lastshared/sharedby/id eq '${user-id}') and (resourceReference/type eq 'microsoft.graph.driveItem'))

イベント

イベント いつ出力されるか カスタム データ キャンセル 泡 カスタム テンプレートを使用する
itemClick ユーザーがファイルをクリックしたときに発生します。 選択した ファイル いいえ いいえ はい(カスタム ファイル テンプレートを使用)

イベントの処理の詳細については、「 イベント」を参照してください。

テンプレート

mgt-file-list コンポーネントは、いくつかの テンプレート をサポートしており、コンポーネントの特定の部分を置き換えることができます。 テンプレートを指定するには、コンポーネント内に 要素を含 <template> め、値を data-type 次の表に示すデータ型のいずれかに設定します。

データ型 データ コンテキスト 説明
default files: ファイル オブジェクトの一覧 デフォルトのテンプレートは、コンポーネント全体を独自のテンプレートに置き換えます。
file file: file オブジェクト 各ファイルのレンダリングに使用されるテンプレート。
no-data データ コンテキストはパスされません 連絡可能なデータがないときに使用するテンプレート。
loading データ コンテキストはパスされません コンポーネントが状態をロードするときに使用されるテンプレート。

認証

このコントロールは、認証ドキュメントに記述されているグローバル認証プロバイダーを使用して、必要なデータを取得します。

キャッシュ

オブジェクト ストア キャッシュされたデータ 注釈
fileLists ファイル リストの一覧 ファイル リストを格納する既定のキャッシュ リスト。
insightfileLists 分析情報ファイルリストの一覧 が指定されている場合に insightType 使用されます。

注:

コンポーネントはmgt-file-list、IndexedDB のfileQueriesmgt-fileオブジェクト ストアを使用して、指定されたときにfileQueriesファイルをキャッシュします。

キャッシュを構成する方法の詳細については、「 キャッシュ」を参照してください。