Как создать пользовательское приложение в Erpnext, которое расширяет отчеты с помощью мощного Datatable
Руководство по созданию пользовательского приложения на Frappe, расширяющего основные функции платформы.
Это руководство предназначено для пользователей Erpnext, знакомых с платформой и желающих создавать решения на ее основе. Он охватывает этапы создания базового пользовательского приложения (модулей, расширяющих Erpnext). И, надеюсь, те, кто не слышал об Erpnext, будут достаточно взволнованы, чтобы изучить платформу.
Erpnext - одна из лучших ERP-платформ с открытым исходным кодом для малого и среднего бизнеса. Он приобрел популярность благодаря своим функциям, которые позволяют легко настраивать его с очень небольшими знаниями программирования. Платформа может быть расширена с помощью пользовательских приложений, разработанных на базовой платформе Frappe. Фактически, весь Erpnext представляет собой приложение, подключенное к платформе Frappe.
Чтобы начать работу с Frappe / Erpnext, все, что необходимо, - это базовые знания Python и javascript. Документация Frappe раскрывает детали платформы, а также показывает, как создать полноценное примерное приложение с нуля. Хороший учебник по кодированию Frappe, в том числе по настройке Erpnext, также можно найти здесь.
Проблема
Функция отчетов в Frappe упрощает добавление пользовательских отчетов, вы можете создавать отчеты за считанные минуты, если у вас есть необходимый sql-запрос. По большей части это должно быть все, что вам нужно. Однако, если вам действительно нужны дополнительные функции в сетке данных, например условный стиль для строк, закрепление столбцов или строк, контекстное меню при выборе строки / ячейки, вам, возможно, придется искать более мощный компонент сетки, который имеет эти функции.
Решение
Выбранная библиотека - Tabulator, абсолютная жемчужина сетки данных javascript, которая поставляется с множеством функций и отличной документацией.
Шаг 1. Создайте сайт
cd в каталог bench, обычно frappe-bench, и запустите:
Это должно дать вам сайт с базовым фреймворком Frappe. Теперь вы можете установить Erpnext на пустой сайт. Помните, что Erpnext должен быть установлен первым на любом сайте. Вам не нужно устанавливать Erpnext, если вы собираетесь создавать собственное приложение на платформе frappe и вам не нужны функции ERP.
После того, как сайт установлен, откройте его в своем браузере и пройдите через мастер, чтобы завершить настройку вашего сайта с указанием компании, Таблицы счетов и других параметров.
Шаг 2. Создайте собственное приложение
Заполните информацию в приглашении, и у вас будет папка tabulator, созданная в папке приложений, например. frappe-bench / apps / tabulator
Теперь весь код вашего приложения находится в папке табулятора. Вам нужно создать репозиторий git в папке, чтобы добавить свой код в систему контроля версий.
Шаг 3. Создайте тип документа
Включите developer_mode в site_config.json для своего сайта
bench --site tabulator set-config developer_mode 1
Создайте документ Tabulator Report с двумя полями, так как большая часть того, что нам нужно, уже есть в Report Doctype of Frappe.
- Название отчета ›Ссылка› Отчет
2. Отчет HTML ›HTML
Установите autoname для поля: {report_name}
К этому типу документа можно добавить больше полей, таких как высота, стиль и т. Д., Что позволит пользователям по-разному управлять внешним видом каждого отчета. В документации Конфигурация табулятора есть исчерпывающий список свойств, которые можно использовать для настройки таблицы.
В файле контроллера tabulator_report.py и tabulator_report.js выполняется большая часть кодирования.
Шаг 4. Создайте вкладку для отчета о задачах.
Идите вперед и создайте новый отчет табулятора, выберите ToDo report для report_name. На следующем шаге мы создадим таблицу табулятора в поле report_html, но пока в нем нет содержимого, и все, что у вас есть, - это пустая форма.
Шаг 5. Добавьте файлы библиотеки Tabulator в приложение
Получите миниатюрные файлы js и css для Tabulator по ссылкам на странице установки. Tabulator поставляется с несколькими темами, используйте CSS для той темы, которую вы предпочитаете.
Https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/css/tabulator.min.css
Https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js
и добавьте их в папки js и css в общей папке приложения.
/ frappe-bench / apps / frappe_tabulator / frappe_tabulator / public
Настройте загрузку файлов на рабочем столе из файла hooks.py приложения.
Шаг 6. Загрузите отчет запроса Frappe в отчет табулятора
На первом проходе просто загрузите отчет из поля report_name при открытии документа Tab Report. Мы построим это позже, чтобы настроить фильтры, обработать изменение фильтров и т. Д. Вставьте приведенный ниже код в tabulator_report.js.
Теперь обновите отчет о вкладках, созданный на шаге 4. Вы можете увидеть таблицу табулятора, созданную с данными из отчета ToDo.
Шаг 6. Добавьте средство форматирования столбцов для обработки полей HTML и ссылок.
Как видите, необходимо решить несколько проблем. Значения html не отображаются как html, и значения столбца ссылок не являются ссылками. Мы исправим это с помощью API Табулятора, чтобы создать форматировщик столбца для обработки известных типов полей, таких как Ссылка, Дата, Валюта.
Примечание. frappe.utils.is_html не выполняет полную проверку HTML, поэтому в окончательной версии он заменен на https://github.com/sindresorhus/is-html кода.
Давайте создадим новый отчет о сценариях, который будет иметь контроллер py и файл настроек js, в котором мы сможем настроить фильтры отчетов.
Шаг 7. Создайте отчет о скрипте
Создайте скрипт отчета ToDo Tabulator. Обязательно выберите Frappe Tabulator в качестве модуля, чтобы файлы отчетов создавались в нашем модуле.
Скопируйте код из frappe / desk / report / todo / todo.py в созданный новый контроллер frappe_tabulator / report / todo_tabulator / todo_tabulator.py. Добавьте несколько фильтров в todo_tabulator.js
Проверьте отчет о запросах фраппе, чтобы убедиться, что он работает.
Создайте отчет с вкладками для нового отчета Todo Tabulator.
Шаг 8: Загрузите фильтры и пользовательские js из настроек отчета.
Мы используем функцию get_report_settings из query_report.js для загрузки js отчета и функцию page.add_field для добавления полей фильтра.
Внесите небольшие изменения в todo_tabulator.py, чтобы отфильтровать результаты
Шаг 9. Используйте расширенную функцию табулятора
Помните, что мы еще не использовали какие-либо расширенные функции Tabulator. Изучите документацию и добавьте необходимые функции в tab_report.js. Или даже сделайте редактируемую сетку, если возникнет необходимость. А пока добавим закрепленный столбец. Внесите несколько изменений в todo_tabulator.py, чтобы установить свойство заморожено в поле владельца.
Вывод
Мы использовали существующую мощную структуру отчетов в Frappe, которая обрабатывает разрешения и создает фильтры, запросы и т. Д., И просто добавили оболочку вокруг этого, чтобы использовать Tabulator. Теперь должно быть легко добавлять дополнительные функции в сетку.
Исходные отчеты по-прежнему доступны по обычным маршрутам frappe / desk # query-report / ‹report-name›, в то время как новые отчеты табулятора доступны как / desk # Form / Tabulator Report / ‹Report-name›
