Заменяем стандартное отображение переменной с типом файлы на таблицу с возможностью скачивания файла

Привет, меня зовут Костя!

Хочу рассказать вам, как создать кастомную кнопку для скачивания файлов и заменить стандартное отображение переменной с типом файлы, на удобную таблицу, с возможностью скачивания файла в 1 клик

Рассмотрим как это сделать на примере приложения "Контрагенты" из раздела CRM. У нашего приложения есть атрибут "Документы", который хранит документы компании. Стандартное отображение переменной с типом файлы, выглядит не очень привлекательно, особенно когда их много.

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

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

Код:

declare const window: any
async function onInit(): Promise<void> {
    if (Context.data.documents?.length) {
        const documents = await Promise.all(Context.data.documents.map(f => f.fetch()));
        ViewContext.data.document_list = documents.map(doc => {
            return {
                id: doc.id,
                href: `./(p:preview/${doc.id}/)`,
                name: doc.data.__name
            }
        })
    }
}

/** Функция для скачивания файла */
async function downloadDoc(id: string):Promise<void> {
    if(!id) return
    const file = await System.files.search().where(f => f.__id.eq(id)).first();
    if(!file) throw new Error('file not found')
    let download_link = await file.getDownloadUrl();
    window.location.href = download_link
}

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

HTML:

<% if (ViewContext.data.document_list?.length) { %>
<table class="table">
    <thead class="head-table-cust">
        <th>Название</th>
        <th></th>
    </thead>
    <tbody>
        <% if (ViewContext.data.document_list) { %>
            <% for (const doc of ViewContext.data.document_list) { %>
                <tr>
                    <td><a href="<%= doc.href %>"><%= doc.name %></a></td>
                    <td><button type="button" title="" class="btn btn-link btn-style-icon" onclick="<%= Scripts %>.downloadDoc('<%= doc.id %>')">
                    download</button></td>
                </tr>
            <% } %>
        <% } %>
    </tbody>
</table>
<% } else { %>
<h2>Список документов пуст</h2>
<% } %>

<style>
    .head-table-cust th {
        text-align: start
    }

    .table {
        max-width: 500px
    }
</style>

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


Еще больше полезной информации в ТГ канале WhatDaELMA365