Компонент файла в наборе средств Microsoft Graph

Статья
02/08/2024

Компонент File используется для представления отдельного файла или папки из OneDrive или SharePoint. Компонент отображает такие сведения, как имя файла или папки, значок типа файла, а также дата создания и последнего изменения. Вы можете указать идентификаторы для файла, и компонент создает запрос для получения файла на основе предоставленных идентификаторов. Этот компонент можно использовать отдельно или как часть компонентов mgt-file-list .

Пример

В следующем примере показан файл с помощью mgt-file компонента . Вы можете использовать редактор кода, чтобы узнать, как свойства изменяют поведение компонента.

HTML
React;

Откройте этот пример в mgt.dev.

Свойства

Для настройки компонента можно использовать несколько свойств.

Атрибут	Свойство	Описание
file-query	fileQuery	Полный запрос или путь к извлекаемом файлу.
user-id	userId	Идентификатор пользователя. Это свойство используется для получения файла для указанного пользователя. Также необходимо указать `item-id`, `insight-typeitem-path`или `insight-id`.
идентификатор диска	driveId	Идентификатор диска, которому принадлежит файл. Также необходимо указать или `item-iditem-path`.
group-id	groupId	Идентификатор группы, к которой принадлежит файл. Также необходимо указать или `item-iditem-path`.
идентификатор сайта	siteId	Идентификатор сайта, которому принадлежит файл. Также необходимо указать или `item-iditem-path`. `list-id` Укажите , если вы ссылаетесь на файл из определенного списка.
list-id	listId	Идентификатор списка, к которому принадлежит файл. Необходимо также указать `site-id` и `item-id`.
item-id	Itemid	Идентификатор файла. Запрос по умолчанию — `/me/drive/items`. Укажите `drive-id`, `group-id`, `site-id`или `user-id` для запроса определенного расположения.
путь к элементу	itemPath	Путь к элементу файла. Запрос по умолчанию — `/me/drive/root`. Укажите `drive-id`, `group-id`, `site-id`или `user-id` для запроса определенного расположения.
тип аналитики	insightType	Тип аналитических сведений, из которого извлекается файл. Может быть `trending`, `used`или `shared`.
insight-id	insightId	Идентификатор ресурса аналитики.
сведения о файле	fileDetails	Задайте для объекта, представляющего файл
Значок файла	fileIcon	URL-путь, в котором хранится значок.
-	driveItem	Объект, содержащий сведения об элементе Graph.
-	fileDetails	Объект, содержащий Объект DriveItem.
представление	представление	Задайте для управления способом отрисовки файла. Значение по умолчанию: `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>

Настраиваемые свойства 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;
}

Дополнительные сведения см. в статье Компоненты стиля.

Страница "Разрешения API и приложений Microsoft Graph"

Этот элемент управления использует следующие API и разрешения Microsoft Graph. Для каждого вызова API требуется одно из перечисленных разрешений.

Конфигурация	Области разрешений	API
Разработчик предоставляет `{drive-id}` И `{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 /drives/{drive-id}/items/{item-id}
Разработчик предоставляет `{drive-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 /drives/{drive-id}/root:/{item-path}
Разработчик предоставляет `{group-id}` И `{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}` И `{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}` И `{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}` И `{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}` И `{list-id}` И `{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}` И `{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}` И `{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{insight-id}`	Sites.Read.All, Sites.ReadWrite.All	GET /me/insights/trending/{insight-id}/resource
`insight-type`имеет значение И предоставляется разработчиком.`used{insight-id}`	Sites.Read.All, Sites.ReadWrite.All	GET /me/insights/used/{id}/resource
`insight-type` is `shared` AND developer предоставляет `{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`	Список файлов по идентификатору диска	Используется при `driveId` предоставлении
`groupFiles`	Список файлов по идентификатору группы	Используется при `groupId` предоставлении
`siteFiles`	Список файлов по идентификатору сайта	Используется при `siteId` предоставлении
`userFiles`	Список файлов по идентификатору пользователя	Используется при `userId` предоставлении
`insightFiles`	Список файлов по аналитике	Используется при `insightType` предоставлении и `insightId`
`fileQueries`	Список файлов по запросам	Используется при `fileQuery` предоставлении

Дополнительные сведения о настройке кэша см. в разделе Кэширование.

Локализация

Элемент управления предоставляет следующие переменные, которые можно локализовать. Дополнительные сведения о настройке локализации см. в разделе Локализация компонентов.

Имя строки	Значение по умолчанию
modifiedSubtitle	`Modified`
sizeSubtitle	`Size`