トレーニング
モジュール
Power Apps Component Framework の高度な機能を使用する - Training
Power Apps Component Framework の高度な記事について説明します。
このブラウザーはサポートされなくなりました。
Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。
File コンポーネントは、 OneDrive または SharePoint の個々のファイル/フォルダーを表すために使用されます。 コンポーネントには、ファイル名やフォルダー名、ファイルの種類アイコン、作成者や最終更新日などの情報が表示されます。 ファイルの識別子を指定すると、コンポーネントによってクエリが生成され、指定された識別子に基づいてファイルが取得されます。 このコンポーネントは、単独で使用することも、 mgt-file-list コンポーネントの一部として使用することもできます。
次の例では、 コンポーネントを使用してファイルを mgt-file
表示します。 コード エディターを使用して、プロパティ がコンポーネントの動作をどのように変更させるかを確認することができます。
いくつかのプロパティを使用して、コンポーネントをカスタマイズできます。
属性 | プロパティ | 説明 |
---|---|---|
file-query | fileQuery | 取得するファイルへの完全なクエリまたはパス。 |
user-id | userId | ユーザーの ID。 このプロパティは、指定したユーザーのファイルを取得するために使用されます。 、、insight-type または insight-id も指定item-id item-path する必要があります。 |
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 リストからファイルを参照している場合は、 も指定します。 |
list-id | listId | ファイルが属するリストの ID。 と も指定site-id item-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>
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 とアクセス許可を使用します。 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 |
トレーニング
モジュール
Power Apps Component Framework の高度な機能を使用する - Training
Power Apps Component Framework の高度な記事について説明します。