Модули расширения системы > Примеры модулей интеграции с ELMA365 / Интеграция с внешними просмотрщиками файлов

Интеграция с внешними средствами просмотра и редактирования файлов

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

Например, на странице оформления заказа вы хотите разместить не только текстовое описание, но и схемы монтажа оборудования в формате .djvu. По умолчанию в системе нельзя просматривать файлы такого типа, но вы можете создать пользовательский модуль, который позволит это делать.

начало внимание

Создавать и настраивать модули могут только пользователи, включенные в группу Администраторы.

конец внимание

 

Архитектура

 

Модуль состоит из следующих основных частей: параметры конфигурации, виджет Страница предпросмотра и методы API.

Параметры конфигурации определяют поведение модуля в целом. Это могут быть, например, поддерживаемые форматы файлов , адрес сервера просмотра, язык интерфейса и т.п.

Логика просмотра и редактирования реализована в виджете Страница предпросмотра с помощью клиент-серверных сценариев.

Методы API  в составе модуля обеспечивают обмен данными с внешним приложением.

Создание и настройка модуля

Модули создаются и подключатся в разделе Администрирование > Модули.  

На вкладке Настройки можно создавать, редактировать и удалять общие параметры модуля. Чтобы создать настройку нажмите +Добавить и заполните поля в открывшемся окне. Затем нажмите кнопку Создать.

При работе с модулем параметры с вкладки Настройки отображаются на его главной странице. При необходимости вы можете изменить стандартную форму представления настроек. Для этого на вкладке нажмите кнопку Редактировать форму. Откроется конструктор, где вы сможете настроить форму по своему усмотрению.

Параметры являются глобальными — они применяются ко всем файлам в системе, которые просматриваются или редактируются с помощью модуля.

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

preview-module-3

Методы API

На вкладке Методы API необходимо добавить методы обмена данными с внешним сервером просмотра.
Например, можно создать GET-метод callback, который будет запрашивать на сервере актуальный файл и создавать из него версию на сервере ELMA365. Ниже в качестве примера приведен исходный код метода API на языке TypeScript:

async function callback(req: FetchRequest): Promise<HttpResponse | void> {
    
let requestText = String(req.body);
    let parsedData = JSON.parse(requestText);
 
    if (parsedData.status == 2) {
        let fileId = parsedData.key.split('.').shift();//Выделяем Id файла 
        let url = parsedData.url;// Выделяем url-адрес файла
        let file = await System.files.search().where(f => f.__id.eq(fileId)).first();// Ищем в нашей системе файл с таким же Id
 
        if (file && url) {//
            const fetchedFile = await fetch(url);
            const buf = await fetchedFile.arrayBuffer();
            responseCode = 1;
            file.addVersion(file.data.__name, buf);// Добавляем версию файла
        }
    }
 
    return resp;
}

Метод получает с сервера просмотра информацию о версии файл и, если файл в системе старше, то добавляет последнюю версию.

Виджет предпросмотра

Виджет предпросмотра является главным компонентом модуля.В нем осуществляется обмен данных между ELMA365 и внешним приложением. Чтобы создать виджет:

  1. Перейдите в настройках модуля на вкладку Виджеты.
  2. Нажмите кнопку +Виджет.
  3. Укажите название виджета.
  4. В поле Расширение выберите группу Предпросмотр файлов. Укажите тип Страница предпросмотра.

preview-module-1

На вкладку Контекст виджета по умолчанию добавлены следующие свойства:  

  • File — тип файл, документ, который открывается модулем просмотра и редактирования.
  • Action — тип строка, режим открытия документа: только просмотр, просмотр и редактирование. Может принимать значения view и edit.
  • Extension —  тип строка, расширение файла из свойства File.

preview-module-2

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

function getFileExtension() {
    if (Context.data.extension){
        return (Context.data.extension[0]);
    }
    else {
        return "";
    }
}

Если формат файла поддерживается, то будем возвращать «true», и «false» в противном случае. В примере ниже разрешена обработка только файлов с расширением .xlsx.

async function canRender() {
    let fileType:string = getFileExtension();   
    if (fileType == "xlsx")
    {
        return  true;
    }
    else 
    {
        return  false;
    }
}

Если файл имеет другое расширение, то система вместо пользовательского модуля будет использовать средство просмотра по умолчанию: пакет MS Office365. При неудачной попытке открытия файла в окне просмотра появится сообщение об ошибке.

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

Пример интеграции с внешним средством просмотра

Рассмотрим интеграцию модуля предпросмотра с внешними приложениями на примере сервера просмотра OnlyOffice. В ней c помощью сценария на языке Javascript реализованы отправка документа и параметров его просмотра на внешний сервер, получение и отображение ответа в ELMA365.

Перейдем на вкладку Виджеты модуля предпросмотра, откроем виджет типа Страница предпросмотра и перейдем на вкладку Шаблон. Вынесем на шаблон формы с правой панели виджет Код.

Код примера интеграции

Сохраним и опубликуем виджет.

Сценарий формирует запрос с ИД файла и параметрами его просмотра, отправляет эти сведения во внешнее приложение, принимает ответ и отображает его в ELMA365.

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

 

 

Нашли опечатку? Выделите текст, нажмите ctrl + enter и оповестите нас