Работа со строкой данных элемента управления "Список файлов" (fileList)

Пример взаимодействия со строками элемента управления "Список файлов" (fileList). Расширение добавляет к строке элемента управления красную обводку при скачивании файла.

Перечень необходимых инструментов:

NodeJS v14.17.0+

Описание файлов проекта

В папке "FileListHighlightRow" расположены файлы:

copy-path.js — содержит константы с названием расширения и параметрами сборки; в данном файле указывается каталог, в который выгружаются файлы при сборке.
gulpfile.js — файл конфигурации Gulp (используется для сборки стилей);
package.json — файл конфигурации NPM с командами сборки и списком зависимостей.
package-lock.json — служебный файл NPM.
rollup.config.js — файл конфигурации Rollup. Используется для сборки скриптов в один файл — "бандл".
tsconfig.json — файл конфигурации TypeScript.
node_modules — служебная папка NPM, в которую при выполнении команды npm install загружаются npm-зависимости.
src — папка для размещения исходных файлы расширения.

Папка src содержит файлы:

EventHandlers.tsx — пример файла с обработчиком события.
Index.ts-- файл с обязательной функцией регистрации клиентского расширения.
Template.scss — пример файла стилей.

Сборка и установка

Откройте консоль в папке FileListHighlightRow и выполните последовательно команды:
```
$ npm install
$ npm update
$ npm run build:prod
```
Скопируйте каталог SamplesOutput\Site\Content\Modules\FileListHighlightRow в каталог Путь-к-установленному-Web-клиент\Site\Content\Modules.
Перезапустите IIS.
Добавьте скрипт fileListHighlightRow в качестве обработчика события. On file version downloaded элемента управления fileList в конструкторе разметок.

Начальный код расширения должен импортировать прямо или косвенно все остальные строки, чтобы затем объединить код в один пакет.

Index.ts

import { extensionManager } from "@docsvision/webclient/System/ExtensionManager";
import * as EventHandler from "./EventHandlers/EventHandler";

extensionManager.registerExtension({ (1)
    name: "FileListHighlightRow",
    version: "1.0",
    globalEventHandlers: [ EventHandler ]
})

1	Регистрация расширения позволяет корректно установить все обработчики событий, сервисы и прочие сущности web-приложения.

EventHandler.ts

import { FileListControl } from "@docsvision/webclient/BackOffice/FileListControl";
import { IRowClickArgs } from "@docsvision/webclient/BackOffice/IRowClickArgs";

export async function fileListHighlightRow(sender: FileListControl, event) {
    const fileItem = event.fileItem;
	const customClass = "file-list-row_red-border";

    if (!event.fileItem?.cssClasses?.includes(customClass)) {
        sender.toggleRowClass(fileItem, customClass);
    }
}

Проверка примера

Откройте папку с элементом управления и добавленным обработчиком события.
Скачайте версию файла.