培训
Microsoft Graph 工具包中的文件组件
文件组件用于表示 OneDrive 或 SharePoint 中的单个文件/文件夹。 组件显示文件或文件夹名称、文件类型图标以及作者和上次修改日期等信息。 你可以为文件提供标识符,组件会生成查询,以便根据提供的标识符检索文件。 此组件可以单独使用,也可以用作 mgt-file-list 组件的一部分。
以下示例使用 mgt-file
组件显示文件。 可以使用代码编辑器来查看 属性 如何更改组件的行为。
可以使用多个属性来自定义组件。
属性 | 属性 | 说明 |
---|---|---|
file-query | fileQuery | 要检索的文件的完整查询或路径。 |
user-id | userId | 用户的 ID。 此属性用于获取指定用户的文件。 还必须提供 item-id 、 item-path insight-type 或 insight-id 。 |
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 。 提供 drive-id 、 group-id 、 site-id 或 user-id 以查询特定位置。 |
item-path | itemPath | 文件的项路径。 默认查询为 /me/drive/root 。 提供 drive-id 、 group-id 、 site-id 或 user-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 - 显示图标,其中一行文本 (默认为文件 name ) twolines - 显示图标和两行文本 (name , lastModifiedDateTime 默认情况下) threelines - 默认显示作者的图标和三行文本 (name 、 lastModifiedDateTime 和 displayName ) |
line1-property | line1Property | 设置 要用于第一行文本的 的 属性 fileDetails 。 默认为 name 文件的 。 |
line2-property | line2Property | 设置 要用于第二行文本的 的 属性 fileDetails 。 默认值为“lastModifiedDateTime ”。 |
line3-property | line3Property | 设置 要用于第三行文本的 的 属性 fileDetails 。 默认为 size 文件的 。 |
以下示例更改组件的行为,以从特定查询中提取数据。
<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2">
</mgt-file>
以下示例更改组件的行为以从特定查询中提取数据,显示三行信息(文件名、上次修改日期时间和默认情况下的文件大小),并设置文件图标。
<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 |
---|---|---|
开发人员提供 {drive-id} AND {item-id} |
Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.Read.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All | GET /drive/{drive-id}/items/{item-id} |
开发人员提供 {drive-id} AND {item-path} |
Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.Read.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All | GET /drive/{drive-id}/root:/{item-path} |
开发人员提供 {group-id} AND {item-id} |
Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.Read.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All | GET /groups/{group-id}/drive/items/{item-id} |
开发人员提供 {group-id} AND {item-path} |
Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.Read.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.Read.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.Read.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All | GET /me/drive/root:/{item-path} |
开发人员提供 {site-id} AND {item-id} |
Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.Read.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All | GET /sites/{site-id}/drive/items/{item-id} |
开发人员提供 {site-id} AND {item-path} |
Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.Read.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All | GET /sites/{site-id}/drive/root:/{item-path} |
开发人员提供 {site-id} AND {list-id} AND {item-id} |
Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.Read.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All | GET /sites/{site-id}/lists/{list-id}/items/{item-id}/driveItem |
开发人员提供 {user-id} AND {item-id} |
Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.Read.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All | GET /users/{user-id}/drive/items/{item-id} |
开发人员提供 {user-id} AND {item-path} |
Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.Read.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All | GET /users/{user-id}/drive/root:/{item-path} |
insight-type 设置为 trending AND developer 提供 {insight-id} |
Sites.Read.All、Sites.ReadWrite.All | GET /me/insights/trending/{insight-id}/resource |
insight-type 设置为 used AND developer 提供 {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 | 无 | 在没有文件数据可用时要呈现的模板。 |
默认 | 文件:文件详细信息对象 | 默认模板将整个组件替换为你自己的组件。 |
<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 |