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

[アーティクル]
02/08/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-iditem-path`指定する必要があります。
group-id	groupId	フォルダーが属するグループの ID。またはも`item-iditem-path`指定する必要があります。
site-id	siteId	フォルダーが属しているサイトの ID。またはも`item-iditem-path`指定する必要があります。特定のリストからファイルを参照している場合は、を指定 `list-id` します。
user-id	userId	ファイルが属しているユーザーの ID。またはも`item-iditem-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`して、特定の場所に対してクエリを実行します。
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	アップロードできるファイルの最大数を表す数値。既定値は files です `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 から参照をreload()取得mgt-file-listし、イベントを使用してボタンでメソッドをトリガーすることで、公開されている mgt-file-list メソッドをclick使用できます。

<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`
AND を指定する`{drive-id}{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`
AND を指定する`{group-id}{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`
AND を指定する`{site-id}{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`
AND を指定する`{user-id}{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`
AND を指定する`{drive-id}{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`
AND を指定する`{group-id}{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`
AND を指定する`{site-id}{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`
AND を指定する`{user-id}{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、IndexedDB のfileQueriesmgt-fileオブジェクトストアを使用して、指定されたときに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 カスタムプロパティ