Массовое скачивание файлов из поля с формы элемента

Иногда в переменной типа «Файл – Несколько» может быть размещено очень много файлов. Чтобы скачать все файлы из такого поля с формы элемента, пользователю нужно сориентироваться в этом списке и скачать каждый файл по очереди. Если такую процедуру нужно провести для нескольких таких полей и для нескольких элементов, это будет очень долго и неудобно.

Решение – кнопка, которая бы позволила запустить скачивание всего массива файлов из поля разом.

Создадим в контексте нужного нам приложения поле «Вложенные файлы» с кодом «attachments» и типом «Файлы – Несколько». Выведем это поле на форму просмотра приложения, т.к. с нее мы планируем это поле отображать и скачивать файлы.

Создадим элемент приложения, заполнив поле файлами. Откроем созданный элемент. Видим, что у нас отобразился список файлов. Сейчас мы можем скачать их только по очереди.



Исправим это.

Зайдем в конструктор формы просмотра этого приложения. Перейдем на вкладку «Контекст» и создадим переменную с названием «Ссылки на вложенные файлы», с кодом «contract_attachments_links» и с типом «Строка – Текст».

Перейдем на вкладку «Сценарии» и создадим функцию onInit(). В ней проверяем, заполнено ли поле «Вложенные файлы», получаем ссылки на каждый файл из поля и сохраняем ссылки в переменную contract_attachments_links, которую создали ранее. Обязательно разделяем ссылки каким-либо разделителем, например, управляющим символом перехода на новую строку «/n».

Код:

async function onInit(): Promise<void> {
    if (Context.data.attachments && Context.data.attachments.length > 0) {
        ViewContext.data.contract_attachments_links = "";
        let arr_link = await Promise.all(Context.data.attachments!.map(el => el.getDownloadUrl()));
        for (let one_link of arr_link) {
            ViewContext.data.contract_attachments_links += one_link + "/n";
        }
    }
}

Далее перейдем на вкладку «Шаблон» и создадим на форме виджет «Код». Введем следующий код:

Код:

<script type="text/javascript">
    function downloadFiles(){
        var str_links = "<%= ViewContext.data.contract_attachments_links %>";
        var array_links = str_links.split("/n");
        var length_links = array_links.length - 1;

        let counter = 1;

        for (let i = 0; i < length_links; i++) {
            setTimeout(function(){
                window.location.assign(array_links[i], '_blank');
                }, 1600 * counter++);
        }
    }
</script>
<button ngcontent-ukc-c1143="" type="button" title="" class="btn btn-apps"
onclick="downloadFiles()"><i ngcontent-ukc-c1143="" class="elma-icons ng-star-inserted"> system_download </i>
</button>

В нем мы отрисовываем кнопку со стандартной иконкой ELMA, для кнопки задаем событию onclick функцию загрузки файлов. В этой функции берем строку с ранее заполненным списком ссылок, разделенных «/n». Получаем из строки массив ссылок. С небольшой паузой пробегаемся по данному массиву и запускаем скачивание каждого файла в браузере.

Уже в конструкторе после сохранения виджета мы увидим, что у нас отрисовалась кнопка с иконкой скачивания.



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

Перенесем на форму виджет «Колонки» и разместим в первой колонке поле «Вложенные файлы». Во второй колонке разместим виджет «Строка» со значением параметра «Выравнивание элементов» – «По правому краю». Далее также в ту же вторую колонку поместим наш виджет «Код» с кнопкой. Также выставим для второй колонки стиль «max-width:5%».



Получим такой результат в конструкторе:



Опубликуем изменения. Откроем форму просмотра нашего элемента, и увидим, что у нас рядом с массивом файлов появилась кнопка.



Протестируем. Обязательно в браузере дадим разрешение на скачивание нескольких файлов. Увидим, что у нас запустилось скачивание всех файлов из поля «Вложенные файлы».

Таким образом можно настроить скачивание всех файлов поля с типом «Файлы» по кнопке.