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

[アーティクル]
11/07/2024

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

例

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

HTML
React

[mgt.dev でこの例を開く](https://mgt.dev/?path=/story/components-mgt-file-list-html--file-list&source=docs).

プロパティ

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

属性	プロパティ	説明
file-list-query	fileListQuery	レンダリングするファイルの一覧を含むドライブまたはサイトへの完全なクエリまたはパス。
file-queries	fileQueries	コンポーネントによってレンダリングされるファイルクエリの配列。
-	ファイル	コンポーネントによってレンダリングされるファイルの一覧を取得または設定するファイルの配列。コンポーネントによって読み込まれたファイルにアクセスするには、このプロパティを使用します。この値を設定して、独自のファイルを読み込みます。
insight-type	insightType	ユーザーのトレンド、使用、または共有ファイルを表示するように設定します。
drive-id	driveId	フォルダーが属するドライブの ID。また、 `item-id` または `item-path`も指定する必要があります。
group-id	groupId	フォルダーが属するグループの ID。また、 `item-id` または `item-path`も指定する必要があります。
site-id	siteId	フォルダーが属しているサイトの ID。また、 `item-id` または `item-path`も指定する必要があります。特定のリストからファイルを参照している場合は、 `list-id` を指定します。
user-id	userId	ファイルが属しているユーザーの ID。また、 `item-id` または `item-path`も指定する必要があります。特定のリストからファイルを参照している場合は、 `list-id` を指定します。
item-id	itemId	フォルダーの ID。既定のクエリは `/me/drive/items`。 `drive-id`、`group-id`、`site-id`、または`user-id`を指定して、特定の場所を照会します。
item-path	itemPath	フォルダーの項目パス (ルートに対する相対パス)。既定のクエリは `/me/drive/root`。 `drive-id`、`group-id`、`site-id`、または`user-id`を指定して、特定の場所を照会します。
item-view	itemView	レンダリングするデータを設定します (ファイルアイコンのみ、oneLine、twoLines 3Lines)。既定値は 'threeLines' です
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	アップロードできるファイルの最大数を表す数値。既定値は `10` ファイルです。また、 `enable-file-upload` 属性を `true` に設定する必要があります。
disable-open-on-click	disableOpenOnClick	ブール値を使用して、クリックしたときに別のブラウザータブでファイルを開く既定の動作を有効または無効にします。

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

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

次の例では、アップロードできる最大ファイルサイズを 10,000 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>

CSS カスタムプロパティ

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

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

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

メソッド

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

再読み込み例

DOM からmgt-file-list参照を取得し、click イベントを使用してボタンでメソッドをトリガーすることで、mgt-file-listで公開される reload() メソッドを使用できます。

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

イベント

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

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

テンプレート

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

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

テンプレートの使用例

<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 のアクセス許可

このコンポーネントでは、次の Microsoft Graph API が使用されます。 API 呼び出しごとに、一覧表示されているいずれかのアクセス許可が必要です。

構成	アクセス許可	API
既定値 (識別子またはクエリは指定されていません)	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	`GET /me/drive/root/children`
`{drive-id}` AND を指定する`{item-id}`	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	`GET /drives/{drive-id}/items/{item-id}/children`
`{group-id}` AND を指定する`{item-id}`	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	`GET /groups/{group-id}/drive/items/{item-id}/children`
指定のみ `{item-id}`	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	`GET /me/drive/items/{item-id}/children`
`{site-id}` AND を指定する`{item-id}`	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	`GET /sites/{site-id}/drive/items/{item-id}/children`
`{user-id}` AND を指定する`{item-id}`	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	`GET /users/{user-id}/drive/items/{item-id}/children`
`{drive-id}` AND を指定する`{item-path}`	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	`GET /drives/{drive-id}/root:/{item-path}:/children`
`{group-id}` AND を指定する`{item-path}`	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	`GET /groups/{group-id}/root:/{item-path}:/children`
`{site-id}` AND を指定する`{item-path}`	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	`GET /sites/{site-id}/root:/{item-path}:/children`
`{user-id}` AND を指定する`{item-path}`	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	`GET /users/{user-id}/root:/{item-path}:/children`
指定のみ `{item-path}`	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	`GET /me/drive/root:/{item-path}:/children`
`insight-type` がに設定されている `trending`	Sites.Read.All、Sites.ReadWrite.All	`GET /me/insights/trending`
`insight-type` がに設定されている `used`	Sites.Read.All、Sites.ReadWrite.All	`GET /me/insights/used`
`insight-type` がに設定されている `shared`	Sites.Read.All、Sites.ReadWrite.All	`GET /me/insights/shared`
さらに `enable-file-upload` を提供するには、	Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All	`PUT /me/drive/root:/{filename}:/content` `POST /me/drive/root:/{filename}:/createUploadSession`

サブコンポーネント

mgt-file-list コンポーネントは、前に一覧表示されているもの以外のアクセス許可を必要とする可能性がある 1 つ以上のサブコンポーネントで構成されます。詳細については、各サブコンポーネントのドキュメント mgt-file を参照してください。

認証

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

キャッシュ

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

注:

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

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

ローカリゼーション

コントロールは、ローカライズできる次の変数を公開します。ローカライズを設定する方法の詳細については、「コンポーネントのローカライズ」を参照してください。

文字列名	既定値
showMoreSubtitle	`Show more items`
filesSectionTitle	`Files`
sharedTextSubtitle	`Shared`

次の方法で共有

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

例

プロパティ

CSS カスタムプロパティ

メソッド

再読み込み例

イベント

テンプレート

テンプレートの使用例

Microsoft Graph のアクセス許可

サブコンポーネント

認証

キャッシュ

ローカリゼーション

フィードバック

その他のリソース

次の方法で共有

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

例

プロパティ

CSS カスタム プロパティ

メソッド

再読み込み例

イベント

テンプレート

テンプレートの使用例

Microsoft Graph のアクセス許可

サブコンポーネント

認証

キャッシュ

ローカリゼーション

フィードバック

その他のリソース

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

CSS カスタムプロパティ