Формы. Как сделать кастомную HTML разметку для формы (jsRender)

Указываем кастомную разметку в полей настройках формы. Используем следующие псевдоэлементы:

  • {form-title} - заголовок формы
  • {form-result} - здесь будет выводиться результат операции сохранения формы
  • {form-subtitle} - подзаголовок формы
  • {form-button} - кнопка сохранения формы
  • {colwithlabel-[fieldcode]} - поле с меткой
  • {colcontrol-[fieldcode]}  - выводит только элемент управления без метки
  • {colview-[fieldcode]} - выводит значение поля (с подсказкой, если она есть)
  • {collabel-[fieldcode]} - выводит метку поля
  • {colexample-[fieldcode]} - вывод примеров заполнения форм (сами примеры задаются в GetItem SELECT1 в полях example_{colCode})
  • {pageCode} - код страницы (можно использовать для условий вывода определенных блоков).

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

Пример настроек:

В кастом разметке можно использовать правила JS Render

В консоли браузера (Chrome F12/Console) вы можете посмотреть какой объект передается в JS Render (метка - JSRender Form).

Документация по JS Render - https://www.jsviews.com/#jsrtags

Простой пример (когда на форме добавления надо спрятать какие то элементы формы).

Примечание: не забывайте использовать заголовок ({form-title}) для модальных форм, чтобы для них выводились служебные значки (перейти на управление формой, печать и перенос sql формы). При необходимости можно спрятать сам заголовок через CSS.

Платформа Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства

Бесплатное обучение разработке на Falcon Space

Вы можете разрабатывать самостоятельно или сотрудничать с нами в плане веб-разработки на платформе Falcon Space.
Примечание

Google поиск по нашей документации