Предпросмотр файлов

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

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

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

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

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

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

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

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

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();
}

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