Начало работы с предпросмотром файлов

Для расширения возможностей, которые предоставляет пользователям Low-code, в системе существуют специальные расширения. Расширения позволяют интегрировать необходимый пользователю функционал в специальные точки, подготовленные для работы с пользовательскими виджетами.

Создание виджета

Работа с расширениями возможна из пользовательского модуля. Модуль возможно создать на странице администрирования. В созданном модуле необходимо создать виджет. Для предпросмотра файлов используется расширение «Предпросмотр файлов» — «Страница предпросмотра». Пользовательский виджет, интегрированный в расширение, может принимать определенные точкой расширения данные в контекст для получения исходных данных. В созданном виджете можно использовать исходные данные в следующих форматах:

Представленные данные передаются в пользовательский виджет для предпросмотра файлов из системы в качестве входных параметров.

Сценарий работы

В пользовательском интерфейсе в модуле предпросмотра создается виджет, настроенный для отображения в данной точке расширения. На шаге инициализации выполняется специальная функция, определяющая, должен ли виджет отображаться в данных условиях. Далее выполняется отображение шаблона виджета и выполнение его сценариев. Во время отображения можно пользоваться виджетами, функциями шаблонизации и выполнения сценариев. За само отображение файла отвечает виджет.

Инициализация

При начале работы точки расширения у модуля вызывается функция проверки условий для отображения виджета, возвращающая в ответе результат, который позволяет определить необходимость отображения содержимого модуля в данной точке расширения. При рендере виджета предпросмотра можно проверить условия, требуемые бизнес-сущностями, и далее принять решение о необходимости отображения файла. Для примера мы можем отображать наш виджет только для пользователей, указавших номер телефона в настройках профиля:

async function onInit() {
    // Получение текущего пользователя
    const user = await System.users.getCurrentUser();
    const userData = await user.fetch();

    return userData.data.mobilePhone !== undefined;
}

Шаблон в виджете

Рассмотрим, как вывести на форме предпросмотра ссылку на скачивание файла вместо превью. Для этого необходимо будет обратиться к полю контекста file. Ссылку на загрузку файла можно получить с помощью метода FileItem.getDownloadUrl. Для передачи самой ссылки в шаблон добавим поле link в контекст:

При помощи данного поля, используя виджет «Код», можно вывести ссылку, по которой пользователь сможет скачать файл:

    <a href="<%= Context.data.link %>" id="link">Ссылка на загрузку</a>

При отображении шаблона можно использовать параметры контекста и сценариев, генерируемых шаблонизатором. В шаблоне к переменной link выполняется обращение через данные контекста Context.data. Остается только модифицировать пользовательский сценарий для получения ссылки на файл:

async function onInit() {
    // Получение ссылки на текущего пользователя
    const user = await System.users.getCurrentUser();
    // Получение данных пользователя
    const userData = await user.fetch();
    
    if(userData.data.mobilePhone === undefined) {
        // Если телефон не задан, виджет не отображается
        return false;
    }
    // Получение ссылки
    await renderLink();
    
    return true;
}

async function renderLink(): Promise<void> {
    if(!Context.data.file) {
        // Если файла нет, выводится ошибка
        throw new Error('no file');
    }
    // Получение ссылки для загрузки файла
    Context.data.link = await Context.data.file.getDownloadUrl();
}

В данном сценарии выполняется работа в рамках функции инициализации, т. к. в нашем случае она позволяет подготовить данные для отображения виджета при инициализации расширения.