В Битрикс24 для разработчиков приложений есть несколько стандартных системных диалогов, которые можно вызывать через REST API в своих собственных приложениях. Например, выбор пользователя или сущностей в CRM.
Делая в Twin px статическое приложение для проверки электронной подписи в PDF-документах для Битрикс24, мы столкнулись с отсутствием важного диалога выбора файла из Битрикс24.Диск. Точнее, он имеется в системе, но у разработчиков нет к нему доступа через штатный REST API, только к «низкоуровневым» функциям для работы с Битрикс24.Диск.
В сети на форумах разработчиков можно найти периодические обращения к 1C-Битрикс с просьбой реализации доступа к этому диалогу. Но до сих пор эти просьбы не были выполнены. Готовых сторонних решений мы тоже не нашли.
Наша задача состояла в том, чтобы полностью повторить дизайн системного диалога выбора файла из Битрикс24.Диск, т.е. мимикрировать под него.
Вот пример стандартного системного диалога выбора файла:
Для реализации задачи мы использовали Vue.js. Использовать наше решение очень просто. Показываете диалоговое окно:
<script>
(function() {
var js = ['//api.bitrix24.com/api/v1/', 'popup/chunk-vendors.bx24-popup.js', 'popup/app.bx24-popup.js'];
var css = ['popup/app.bx24-popup.css'];
var p=document.createElement("div");p.id="BXPopupWindow",document.body.prepend(p),js.forEach(function(e){var n=document.createElement("script");n.src=e,document.body.append(n)}),css.forEach(function(e){var n=document.createElement("link");n.rel="stylesheet",n.href=e,document.head.append(n)});
}());
</script>
Здесь в переменных js и css перечислены пути к подключаемым файлам. Для элемента, который должен вызывать показ диалогового окна, устанавливаете атрибут id=”BXPopupWindowShowButton”. Подключение готово, теперь при нажатии на этот элемент будет всплывать окно для навигации по папкам внутри Диска и выбора файла.
После нажатия на кнопку «Выбрать документ» внутри диалогового окна сработает событие bx.popup.window.download. Для его обработки и дальнейшей работы с файлом на странице подключаем скрипт:
<script>
window.addEventListener('load', () => {
document
.getElementById('BXPopupWindowShowButton')
.addEventListener('bx.popup.window.download', (e) => {
//выводим путь для скачивания файла в консоль
console.log(e.detail.files);
});
});
</script>
Обработчик получит объект со ссылкой на выбранный файл для дальнейшего оперирования им внутри приложения:
Вы можете использовать наше решение в своих проектах программ для Битрикс24 при необходимости. Мы не делали решение универсальным и гибким, т.е. вам придётся самостоятельно изменить в коде модуля некоторые вещи под ваши задачи.
Исходный код проекта диалогового окна выбора файла вы можете скачать на Bitbucket.
Для полноценной работы модуля приложению, которое его использует, нужны права Битрикс24 — Диск и Пользователи (минимальные).
Пример использования нашего решения в программе проверки ЭП в PDF-документах для Битрикс24:
P.S.
Обязательно пишите в комментариях, если это решение и статья были полезны для вас. Обратная связь мотивирует нас на продолжение публикации полезных заметок.
