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

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

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

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

 {form-title}
    <div class="text-muted small">Аренда с {colview-started} {colview-rentTime1} по {colview-finished} {colview-rentTime2}
      {{if isBlocked=="1"}}<span class="text-danger small">Заявка заблокирована</span>{{/if}}
    </div>
    {{if isNew == "1" &amp;&amp; isClient == "1"}}
    <a href="#" class="as-form-modal mt-2 btn btn-primary" data-code="addorder" data-itemid="{colview-objectID}_{colview-instanceID}" data-big="0" data-title="Изменение Срока аренды">Изменить cрок аренды</a>
    {form-result}
    {{/if}}

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

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

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

Элементы стилизации в разметке страниц Falcon Space

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

Вывод табличных данных в форме

Это можно сделать либо через вложенную таблицу (кладем сниппет таблицы в Custom makeup) либо через SELECT 3 в GetItem. 

Для этого указываем произвольный SELECT запрос в SELECT 3, а в кастом makeup прописываем вывод таблицы: https://pastebin.com/TjpqqAW5

Используем переменную table, в которой находятся данные по SELECT 3.

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

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

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.
Сайт использует Cookie. Правила конфиденциальности OK