Список типов полей формы
У каждого поля есть свой тип, который определяет вид и функциональность этого поля.
Пример полей формы на демостенде
Вы можете использовать следующие типы полей
- Editor (CSS), editorCSS - редактор CSS с подсветкой синтаксиса
- Editor (HTML), editorHTML - редактор HTML с подсветкой синтаксиса
- Editor (JS), editorJS - редактор JS с подсветкой синтаксиса (если нужно отменить возможность форматировать код - ставим CSS класс as-disableAutoFormat)
- Editor (SQL), editorSQL - редактор SQL с подсветкой синтаксиса
- hidden - input type=hidden поле. Просто значение поля прокидывается из GetItem в SaveItem через форму (внимание, пользователь может его изменить через HTML).
- HTML, html - Rich редактор tinyMCE(старая версия)
- HTML2, html2 - Rich редактор tinyMCE(новая версия)
- HTML Lite, html-lite - выбор Rich редактора tinyMCE в упрощенном виде
- HTML5 Color, html-color - редактирование цвета
- HTML5 Date, html-date - поля для ввода даты. Форма сохранения YYYY-MM-DD (и не зависит от настройки в GetLayoutInfo dateFormat!)
- HTML5 Datetime local, html-datetime-local - поле для ввода даты и времени без учета часового пояса. Формат сохранения YYYY-MM-DDTHH:MM, ВАЖНО - datatime-local не работает в Firefox (поэтому используйте в большинстве случаев поля date + time).
- HTML5 Email, html-email - редактирование email
- HTML5 Month, html-month - выбор месяца. Формат сохранения YYYY-MM.
- HTML5 Number, html-number - выбор числа
- HTML5 Tel, html-tel - поле для телефона (установка формата делается через GetLayoutInfo, параметр phoneFormat, а для лендов добавить hidden поле с классом as-phoneFormat, и value="+d ddd-ddd-dddd")
- HTML5 Time, html-time - поле для ввода времени/ Формат сохранения HH:MM
- HTML5 Url, html-url - поле для ввода URL
- HTML5 Week, html-week - выбор недели. Формат сохранения 2020-W01 (YYYY-WWW).
- localStorage, sessionStorage, cookie, urlParameter - скрытые поля для передачи параметров в saveItem из куки, локальных ресурсов браузера или из URL.
- Альтернативный способ выбора содержимого текстовых файлов, textFile - файл не грузится на сервер, а содержимое файлов извлекается из него прямо в браузере. Подробнее.
- Ввод пароля, password - используется в формах регистрации. Скрывает ввод в виде звездочек.
- Выбор radio, radio - одиночный выбор через радиокнопки (в стиле связанных кнопок Bootstrap)
- Выбор иконки, iconPicker - выбор иконки Font Awesome. В базе значение хранится в текстовом виде, например, fas fa-search
- Выбор времени, time - выбор времени из выпадающего списка
- Выбор диапазона дат, daterange - (формат даты можно задать через настройку format либо использовать глобальную настройку dateFormat в GetLayout)
- Выбор места (гео), geo-autocomplete - вывод поля с поиском геолокации. Формат хранения значения - {lat}||{lon}||{geotext}||{JSONOptions}
- Выбор файла, files - можно добавлять файлы к форме (в том числе и в форме на добавление, когда еще нет сущности, к которой привязывать файлы). Подробнее.
- Дата выбор, date - выбор даты через плагин Datepicker (формат устанавливается в GetLayout в параметре dateFormat).
- Дерево с галочками, treeCheckboxes - выбор галочек в иерархическом списке
- Дробное число, float - число с плавающей точкой
- Картинки Radio, imageRadio - выбор через радиокнопки с картинкой
- Картинки Флажки, imageCheckboxes - выбор флажков с картинками.
- Многострочный текст, text - вывод textarea
- Переключатель, switch - чекбокс в виде переключателя (Да, Нет). В placeholder можно задать текст вместо Да/Нет. Для изменения размера можно передать классы в GetItem SELECT 1 ( 'as-switch-large' class_immediatelyLoad). as-switch-large, as-switch-mini, as-switch-small
- Подсказки dadata, dadata - поле с выпадающими подсказками по разным объектам - адреса, компании, банки и т.д. (демо)
- Слайдер значений, slider - выбор числа или диапазона чисел в виде ползунка.
- Содержимое файла, fileContent - загрузка файла через менеджер ресурсов и передача его содержимого в SQL процедуру в виде строки. Подробнее.
- Сортировка дерева, treeOrder - управление структурой дерева через Drag&Drop
- Список chosen, chosen - выбор из списка с возможностью поиска
- Список, select - комбосписок для одиночного выбора. Подробнее
- Список множественный chosen, chosenMiltiple - множественный выбор элементов из списка (в сохранение они идут как id через запятую).
- Список-поиск, select-search - поиск через autocomplete
- Список 2 (более функциональный), select2 - выбор элемента с поиском, добавлением элемента
- Стандартный выбор radio, defaultRadio - стандартный выбор из радиополей.
- Строка по шаблону, patternString - вводим некую строку, разбираем регулярным выражением и выводим разметку с неким значением (например, ввод ютуб ссылки и вывод iframe)
- Строка, string - текстовое поле в 1 строку
- Таймер, timer - поле, которое позволяет запускать таймер по секундам. Время в итоге передается в виде mm:ss.
- Установка рабочего графика, weekTime - позволяет выбрать определенные часы в неделе.
- Флажки, checkboxes - множественный выбор через галочки
- Флажок, bool - чекбокс
- Файл на внешнем ресурсе, remoteFile - указание URL и передача в процедуру saveItem тела файла, загруженного по данному URL. Подробнее.
- Целое число, int - целочисленное число
- Цвет множ. colorCheck, цвет colorRadio - выбор цвета (одиночный и множественный). В value - цвет, в text - текст (необязательно).
- Градиент, gradient - выбор градиента с несколькими цветовыми маркерами.
Примечание: если HTML5 будут введены некорректно, то они подсвечиваются розовым и форма не будет сохраняться, пока не будут исправлены ошибки.
Некоторые типы полей имеют дополнительные настройки в GetItem SELECT 1 в параметрах options_{code}. Подробнее
Страница-источник на сайте falconspace.ru
-
Начало работы
-
Основа Falcon Space
-
Руководства
-
Возможности
-
Коммуникация пользователей
-
Таблицы
-
Формы
Работа с формами Настройка полей формы Список типов полей формы GetItem - вывод данных формы CheckItem - процедура проверка введенных данных на форме SaveItem - процедура сохранения формы SaveField - сохранение одиночного поля на форме CheckItemFIeld - процедура реагирования на изменения поля dict - процедура для значений списковых полей формы Progress - процедура отображения статуса заполнения формы Как вывести форму во всплывающем окне рядом с кнопкой (popover) Загрузка формы по ссылке Как принимать в форму не 1 параметр (itemID), а несколько входящих параметров? data-param-p1 Как сделать модальную форму Как добавить коллбек после загрузки формы и после сохранения формы. Как показывать на форме прогресс заполнения (прогресс заполнения формы) Как сделать форму в виде мастера шагов Как сделать подтверждение действия в СМС (SMS) в форме Как установить поля в форме по умолчанию при загрузке Как показывать изменяющуюся информацию при изменении полей Формы. Как сделать в форме более 1 кнопки действий (несколько кнопок действий на форме) Как правильно обрабатывать цены (дробные числа) на форме Как передать в форму скрытый параметр Как в форме добавить примеры заполнения полей (example) Как сделать окно подтверждения действия формы Как выбрать значение списка через справочник в модальном окне Динамическое изменение itemID у формы в зависимости от других элементов страницы Как скрывать/показывать, обновлять область на странице при изменении поля формы Как добавить новый элемент, если в списке на форме его нет Как перезагрузить страницу после сохранения формы Как вывести списковые данные или таблицу внутри формы Как сделать зависимые поля в форме (Страна, Город) Как сделать кастомную HTML разметку для формы (jsRender) Как создать кастом форму с подтверждением действия по Email или SMS (JS метод) Установка фоновой панели для формы Как сделать задержку при сохранении формы (saveDelay) Подсказки-ограничители длины для полей в форме Как динамически изменять тип поля формы Как сохранить значение поля в браузере, чтобы каждый раз его не вбивать при загрузке (оставлять последнее сохраненное). Запоминание поля формы в браузере Как выводить разные данные на одной форме для разных ролей Как сделать форму с сохранением состояния Как сделать поля с анимацией значений Использование Google Recaptcha в формах Как обновить таблицу после сохранения формы в модальном окне Как указать произвольную маску для поля ввода в форме Кастом проверка полей формы через JS Как в выборе даты (datepicker) задать доступные даты Как создать форму для редактирования сущности Загрузка формы в выпадающем окне (dropdown) Добавление смайликов (emoji) в поля форм Как у формы сделать progress bar при загрузке формы Работа с датами в формах Показ количества символов рядом с полем в форме Кнопка очистки формы Reset Контроль заполнения ключевых форм на сайте Как сделать форму с простым подтверждением действия (confirm) Как поменять соотношение длины метки и поля Как при сохранении формы вывести сообщение printlog, а не alert Выпадающая панель в форме рядом с названием dropdownPanel
-
Поля формы
-
Лендинги
-
Дизайн, стилизация, юзабилити
-
Интеграции
-
Универсальный API
-
Каталоги
-
Навигация
-
Документы
-
Дополнительные компоненты
-
Продвижение, SEO
-
Системные моменты
-
Системное администрирование
-
HOWTO
-
Загрузка файлов, картинок
-
HOWTO SQL
-
HOWTO JS
-
HOWTO Верстка
-
Решение проблем
-
Советы по реализации