Как сделать кастомную 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" && 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.
Страница-источник на сайте falconspace.ru
-
Руководства
-
Основа Falcon Space
-
Основные компоненты
-
Возможности
-
Коммуникация пользователей
-
Дизайн, стилизация, юзабилити
-
Лендинги
-
Универсальный API
-
Интеграции
-
Каталоги
-
Навигация
-
Документы
-
Дополнительные компоненты
-
Продвижение, SEO
-
Системные моменты
-
Системное администрирование
-
HOWTO
-
Таблицы
-
Формы
Как вывести форму во всплывающем окне рядом с кнопкой (popover) Загрузка формы по ссылке Как принимать в форму не 1 параметр (itemID), а несколько входящих параметров? data-param-p1 Как сделать модальную форму Как добавить коллбек после загрузки формы и после сохранения формы. Как показывать на форме прогресс заполнения (прогресс заполнения формы) Как сделать форму в виде мастера шагов Как сделать подтверждение действия в СМС (SMS) в форме Как установить поля в форме по умолчанию при загрузке Как показывать изменяющуюся информацию при изменении полей Формы. Как сделать в форме более 1 кнопки действий (несколько кнопок действий на форме) Как правильно обрабатывать цены (дробные числа) на форме Как передать в форму скрытый параметр Как в форме добавить примеры заполнения полей (example) Как выбрать значение списка через справочник в модальном окне Как сделать окно подтверждения действия формы Динамическое изменение itemID у формы в зависимости от других элементов страницы Как скрывать/показывать, обновлять область на странице при изменении поля формы Как добавить новый элемент, если в списке на форме его нет Как перезагрузить страницу после сохранения формы Как вывести списковые данные или таблицу внутри формы Как сделать зависимые поля в форме (Страна, Город) Как сделать кастомную HTML разметку для формы (jsRender) Как создать кастом форму с подтверждением действия по Email или SMS Установка фоновой панели для формы Как сделать задержку при сохранении формы (saveDelay) Подсказки-ограничители длины для полей в форме Как динамически изменять тип поля формы Как сохранить значение поля в браузере, чтобы каждый раз его не вбивать при загрузке (оставлять последнее сохраненное). Запоминание поля формы в браузере Как выводить разные данные на одной форме для разных ролей Как сделать форму с сохранением состояния Как сделать поля с анимацией значений Использование Google Recaptcha в формах Как обновить таблицу после сохранения формы в модальном окне Как указать произвольную маску для поля ввода в форме Кастом проверка полей формы через JS Как в выборе даты (datepicker) задать доступные даты Как создать форму для редактирования сущности Загрузка формы в выпадающем окне (dropdown) Добавление смайликов (emoji) в поля форм Как у формы сделать progress bar при загрузке формы Работа с датами в формах Показ количества символов рядом с полем в форме Кнопка очистки формы Reset Контроль заполнения ключевых форм на сайте Как сделать форму с простым подтверждением действия (confirm) Как поменять соотношение длины метки и поля Как при сохранении формы вывести сообщение printlog, а не alert
-
Поля формы
-
Загрузка файлов, картинок
-
HOWTO SQL
-
HOWTO JS
-
HOWTO Верстка
-
Решение проблем