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

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

File コンポーネントは、 OneDrive または SharePoint の個々のファイル/フォルダーを表すために使用されます。コンポーネントには、ファイル名やフォルダー名、ファイルの種類アイコン、作成者や最終更新日などの情報が表示されます。ファイルの識別子を指定すると、コンポーネントによってクエリが生成され、指定された識別子に基づいてファイルが取得されます。このコンポーネントは、単独で使用することも、 mgt-file-list コンポーネントの一部として使用することもできます。

例

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

HTML
React

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

プロパティ

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

属性	プロパティ	説明
file-query	fileQuery	取得するファイルへの完全なクエリまたはパス。
user-id	userId	ユーザーの ID。このプロパティは、指定したユーザーのファイルを取得するために使用されます。、、`insight-type`または `insight-id`も指定`item-iditem-path`する必要があります。
drive-id	driveId	ファイルが属するドライブの ID。またはも`item-iditem-path`指定する必要があります。
group-id	groupId	ファイルが属するグループの ID。またはも`item-iditem-path`指定する必要があります。
site-id	siteId	ファイルが属しているサイトの ID。またはも`item-iditem-path`指定する必要があります。特定の `list-id` リストからファイルを参照している場合は、も指定します。
list-id	listId	ファイルが属するリストの ID。とも指定`site-iditem-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`して、特定の場所に対してクエリを実行します。
insight-type	insightType	ファイルが取得される分析情報の種類。、 `trending`、 `used`またはを指定 `shared`できます。
insight-id	insightId	分析情報リソースの ID。
file-details	fileDetails	ファイルを表すオブジェクトに設定します
file-icon	fileIcon	アイコンが格納されている URL パス。
-	driveItem	項目の Graph の詳細を含むオブジェクト。
-	fileDetails	DriveItem を含むオブジェクト。
view	view	を設定して、ファイルのレンダリング方法を制御します。既定値は `oneline` です。 `image` - アイコンのみを表示する `oneline` - アイコンと 1 行のテキストを表示します (既定値は file `name`) `twolines` - アイコンと 2 行のテキスト (`name` および `lastModifiedDateTime` 既定) を表示します `threelines` - アイコンと 3 行のテキスト (`name`、 `lastModifiedDateTime`、および `displayName` 作成者の既定) を表示します
line1-property	line1Property	テキストの最初の `fileDetails` 行に使用するのプロパティを設定します。既定値は `name` ファイルです。
line2-property	line2Property	2 行目の `fileDetails` テキストに使用するのプロパティを設定します。既定値は `lastModifiedDateTime` です。
line3-property	line3Property	3 行目の `fileDetails` テキストに使用するのプロパティを設定します。既定値は `size` ファイルです。

次の例では、特定のクエリからデータを取得するコンポーネントの動作を変更しています。

<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2">
</mgt-file>

次の例では、コンポーネントの動作を変更して、特定のクエリからデータをフェッチし、3 行の情報 (ファイル名、最終変更日時、既定ではファイルサイズ) を表示し、ファイルアイコンを設定します。

<mgt-file
  file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"
  view="threeLines"
  file-icon="ICON_PATH"
></mgt-file>

次の例では、コンポーネントの動作を変更して、特定のドライブからデータをフェッチします。

<mgt-file
  drive-id="b!-RIj2DuyvEyV1T4NlOaMHk8XkS_I8MdFlUCq1BlcjgmhRfAj3-Z8RY2VpuvV_tpd"
  item-id="01BYE5RZ5MYLM2SMX75ZBIPQZIHT6OAYPB"
></mgt-file>

次の例では、コンポーネントの動作を変更して、SharePoint サイトとパスからデータをフェッチします。

<mgt-file
  site-id="m365x214355.sharepoint.com,5a58bb09-1fba-41c1-8125-69da264370a0,9f2ec1da-0be4-4a74-9254-973f0add78fd"
  item-Path="/DemoDocs/AdminDemo"
></mgt-file>

次の例では、コンポーネントの動作を変更して、分析情報の種類別にデータをフェッチします。

<mgt-file
  insight-type="shared"
  insight-id="AW1GxMvkOztMkJX-SCppUSRPF5EvyPDHRZVAqtQZXI4JoUXwI9_mfEWNlabr1f7aXRBWDMt2C2FDop4fP1vsUw9tRsTL5Ds7TJCV_kgqaVEkBA"
></mgt-file>

CSS カスタムプロパティ

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

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

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

Microsoft Graph API とアクセス許可

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

構成	アクセス許可スコープ	API
開発者は 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 /drive/{drive-id}/items/{item-id}
開発者は 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 /drive/{drive-id}/root:/{item-path}
開発者は 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}
開発者は 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}/drive/root:/{item-path}
開発者が提供するのはのみ `{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}
開発者が提供するのはのみ `{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}
開発者は 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}
開発者は 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}/drive/root:/{item-path}
開発者は AND とを`{list-id}`提供`{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}/lists/{list-id}/items/{item-id}/driveItem
開発者は 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}
開発者は 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}/drive/root:/{item-path}
`insight-type`が AND に設定されている開発者は、`trending{insight-id}`	Sites.Read.All、Sites.ReadWrite.All	GET /me/insights/trending/{insight-id}/resource
`insight-type`が AND に設定されている開発者は、`used{insight-id}`	Sites.Read.All、Sites.ReadWrite.All	GET /me/insights/used/{id}/resource
`insight-type` は `shared` AND 開発者が提供します `{insight-id}`	Sites.Read.All、Sites.ReadWrite.All	GET /me/insights/shared/{id}/resource

テンプレート

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

データ型	データコンテキスト	説明
読み込み中	なし	コンポーネントがロード状態のときにレンダリングするテンプレート。
no-data	なし	使用可能なファイルデータがない場合にレンダリングするテンプレート。
default	file: ファイルの詳細オブジェクト	デフォルトのテンプレートは、コンポーネント全体を独自のテンプレートに置き換えます。

テンプレートの使用例

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

認証

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

キャッシュ

オブジェクトストア	キャッシュされたデータ	注釈
`driveFiles`	ドライブ ID 別のファイルの一覧	が指定されている場合に `driveId` 使用されます
`groupFiles`	グループ ID 別のファイルの一覧	が指定されている場合に `groupId` 使用されます
`siteFiles`	サイト ID 別のファイルの一覧	が指定されている場合に `siteId` 使用されます
`userFiles`	ユーザー ID 別のファイルの一覧	が指定されている場合に `userId` 使用されます
`insightFiles`	分析情報別のファイルの一覧	と `insightId` が指定されている場合`insightType`に使用されます
`fileQueries`	クエリ別のファイルの一覧	が指定されている場合に `fileQuery` 使用されます

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

ローカリゼーション

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

文字列名	既定値
modifiedSubtitle	`Modified`
sizeSubtitle	`Size`

次の方法で共有

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

例

プロパティ

CSS カスタムプロパティ

Microsoft Graph API とアクセス許可

テンプレート

テンプレートの使用例

認証

キャッシュ

ローカリゼーション

フィードバック

その他のリソース

次の方法で共有

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

例

プロパティ

CSS カスタム プロパティ

Microsoft Graph API とアクセス許可

テンプレート

テンプレートの使用例

認証

キャッシュ

ローカリゼーション

フィードバック

その他のリソース

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

CSS カスタムプロパティ