英語で読む

次の方法で共有


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

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

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

プロパティ

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

属性 プロパティ 説明
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-idsite-idまたは user-id を指定drive-idして、特定の場所に対してクエリを実行します。
item-path itemPath ファイルの項目パス。 既定のクエリは です /me/drive/root。 、group-idsite-idまたは user-id を指定drive-idして、特定の場所に対してクエリを実行します。
insight-type insightType ファイルが取得される分析情報の種類。 、 trendingusedまたは を指定 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 行のテキスト (namelastModifiedDateTime、および displayName 作成者の既定) を表示します
line1-property line1Property テキストの最初の fileDetails 行に使用する の プロパティを設定します。 既定値は name ファイルです。
line2-property line2Property 2 行目の fileDetails テキストに使用する の プロパティを設定します。 既定値は lastModifiedDateTime です。
line3-property line3Property 3 行目の fileDetails テキストに使用する の プロパティを設定します。 既定値は size ファイルです。

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

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

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

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

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

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

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

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

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

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

CSS カスタム プロパティ

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

HTML
<mgt-file class="file" file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"></mgt-file>
css
.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-typeshared AND 開発者が提供します {insight-id} Sites.Read.All、Sites.ReadWrite.All GET /me/insights/shared/{id}/resource

テンプレート

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

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

テンプレートの使用例

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