Формы. Управление настройками поля через options_ поля
Описание использования options
Ранее настройки некоторых сложных элементов формы делались через элементы процедуры dict поля формы.
Теперь есть возможность использовать для этого специальное псевдополе options_{colCode} в GetItem SELECT 1 формы (colCode - это название соответствующего столбца).
Данный способ переопределяет аналогичные настройки из dict (но при этом поддерживается и старый способ настроек через dict процедуру).
Пример настроек:
--SELECT 1 в GetItem формы
select name,
'{
"title": "Title1",
"disabled": true
}' options_name
from t1
ВАЖНО. Обязательно использовать кавычки для имен полей в JSON.
Настройки по типам
Общие настройки
- disabled: true false,
- title - подменяет заголовок элемента,
- class - задает CSS класс,
- width - задает ширину как css значение для width,
- placeholder - подсказка к вводу значения элемента,
- hide - если true, то поле будет скрыто на форме через CSS.
- saveState - если true, то поле будет сохранять свое значение после сохранения и будет подставляться в будущем при загрузке формы (если не указано значение в поле).
string
- mask - '9999999' - маска на ввод
- prefix, suffix - добавляет в поле доп. разметку в начале или в конце поля.
- maxlength - задает максимальное количество символов в поле
Пример:
select '{"prefix":"prefix", "suffix": ""}' options_s1
int, float, html-number
- min - минимальное значение,
- max - максимальное значение поля,
- step - шаг приращения,
- readonly - если true, то элемент только на чтение
date
- availableDates - доступные даты для выбора (через запятую, см. отдельную документацию по использованию этих режимов)
- disabledDates - недоступные даты для выбора (через запятую)
- format - если установлен, то задает формат даты (если нет - то берутся глобальные настройки формата даты из GetLayout).
- isInput - если true, то выводится как поле ввода с выпадающим календарем
daterange
- format - если установлен, то задает формат даты (если нет - то берутся глобальные настройки формата даты из GetLayout).
- daterangeJSON - можно задать JSON строку для настроек параметров элемента. Детали - https://www.daterangepicker.com/
Пример:
select '{ "daterangeJSON": { "maxSpan": { "days": 7},
"opens": "left",
"drops": "up",
"buttonClasses": "btn btn-lg",
"applyButtonClasses": "btn-danger",
"cancelClass": "btn-danger"
}
}' options_s45,
time
- format - если установлен, то задает формат времени (по умолчанию hh:ii).
- minuteStep - шаг выбора между минутами (по умолчанию 5)
bool
- hideLabel - если true, то у галки не будет показываться label
switch
- size - задает размер переключателя (mini, normal, small, large)
- on - текст при включенном состоянии
- off - текст при выключенном состоянии
- onstyle - стиль включенного состояния (success, danger...)
- offstyle - стиль выключенного состояния (success, danger, outline-primary, outline-secondary...)
- switchStyle - стиль переключателя (slow, android, ios)
- switchWidth, switchHeight - ширина и высота переключателя
Подробнее - https://gitbrent.github.io/bootstrap4-toggle/
text
- rows - число, задающее высоту (rows) у textarea
- cols - число, задающее ширину (cols) у textarea
- maxlength - задает максимальное количество символов в поле
select-search
- selectHint - строка, указывает начальную подсказку в элементе
- multiple - если true - то можно вводить множественные значения (значения передаются через запятую - просто тексты названий без id).
select2
- placeholder - подсказка в элементе когда нет выбранных элементов
- multiple - если true, то доступен множественный выбор. Если выбрано несколько элементов, то они передаются через запятую в процедуру.
- tags - если true, то можно добавить свой элемент, если его нет среди существующих (пишем текст и добавляем). Новые добавленные элементы будут иметь value такой же как и text
treeCheckboxes, treeOrder
- cascadeCheck - если true, то выбор галочки выбирает и все дочерние элементы.
- width - число, ширина дерева
files, fileContent
- code - код менеджера ресурсов
- title - заголовок менеджера ресурсов
- compact - если true - то компактный режим отображения галереи файлов
- ultracompact - если true, то очень компактный режим отображения галереи файлов
- emptyText - текст, когда нет загруженных элементов в менеджере ресурсов
- uploadTitle - заголовок окна загрузки
intrange (диапазон чисел)
- min - минимальное значение выбранного интервала
- max - максимальное значение выбранного интервала
- step - шаг изменения диапазона
- minValue - минимальная граница
- maxValue - максимальная граница
geo-autocomplete (выбор гео точки)
- jsonOptions - строка с JSON настройками гео (смотри документацию по Гео). Это именно вложенный объект JSON.
Пример, как сделать так, чтобы показывались только бизнес-объекты и настройки без ограничений типа объектов (по умолчанию types= ["geocode"]):
-- SELECT 1 in GetItem - только бизнес-объекты
select '{
"jsonOptions": "{\"types\": [\"establishment\"] }"
}' options_geoAddress
-- SELECT 1 in GetItem - без ограничений по типу
select '{
"jsonOptions": "{\"types\": [] }"
}' options_geoAddress
Детали - https://developers.google.com/maps/documentation/places/web-service/supported_types#table3
timer
- code - задает код таймера
- itemID - задает itemID связанного элемента, к которому относится таймер
checkboxes
- lineLabel - если true или 1, то каждый чекбокс будет на отдельной строке
defaultRadio
- lineLabel - если true или 1, то каждый элемент выбора будет на отдельной строке
slider
- min - минимальное значение, число
- max - максимальное значение, число
- step - шаг перемещения, число
- enabled -если true, то включен
- ticks - строка чисел через запятую где будут метки
- labels - метки-подписи через запятую (строка), соответствуют по положению ticks
- orientation - ориентация - horizontal, vertical
weekTime
- standartWorkTime - строка, название кнопки для установки стандартного графика работы 7/2 9-17
- showHours - если true, то в сетке будут показаны часы
- responsive - если true, то таблица будет адаптивная (ужиматься по ширине при малом экране с появлением горизонтального скроллинга)
patternString
- templates - массив регулярных выражений для извлечения нужного кода из строки ввода (пример для ютуб ссылок - [".*?v=(.*)$", "https://youtu.be/(.*)$"])
- makeup - разметка, которая будет визуализироваться под полем ввода со вставкой извлеченного кода в виде {value}
html, html-lite
- height - установка в px высоты редактора.
editorHTML, editorSQL, editorCSS, editorJS
- height - установка в px высоты редактора.
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация, юзабилити
- Лендинги
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы Формы. Как принимать в форму не 1 параметр (itemID), а несколько входящих параметров? data-param-p1 Формы. Как создать форму для редактирования сущности Формы. Как сделать кастомную HTML разметку для формы (jsRender) Формы. Как сделать поиск для поля, т.е. список с поиском через обращение к БД (autocomplete. search-select) Формы. Как установить некоторые поля в форме по умолчанию при загрузке Формы. Как выводить разные данные на одной форме для разных ролей Формы. Как в форме вывести список галочек (множественный выбор поля) Формы. Как выводить и сохранять множественный список через chosen поле. Формы. Как перезагрузить страницу после сохранения Формы. Как добавить коллбек после загрузки формы и после сохранения формы. Формы. Как динамически изменять тип колонки при рендеринге формы. Формы. Как сделать модальную форму (открывается в диалоговом окне) Формы. Как обновить таблицу (или форму) после сохранения формы в открытом модальном окне Формы. Как вывести форму во всплывающем окне рядом с кнопкой (popover) Формы. Как сделать зависимые поля в форме (Страна, Город) Формы. Как сделать выбор адреса и сохранение координат места (lat,lng). Формы. Как правильно обрабатывать цены (дробные числа) на форме Формы. Как вывести списковые данные или таблицу внутри формы Формы. Установка фоновой панели для формы Формы. Как передать в форму скрытый параметр Формы. Как сделать списки select и chosen с категориями (optgroup) Формы. Как сделать форму в виде мастера шагов Формы. Как показывать на форме прогресс заполнения (прогрессбар заполнения формы) Формы. Как использовать Флажки и выбор радио с картинкой Формы. Как сделать поля с анимацией значений (крутящиеся числа, цифры). Формы. Как редактировать текст элементов HTML в Rich-редакторе Формы. Как использовать в форме поле Выбор файлов. Типы полей формы files, remoteFile, fileContent Формы. Как скрывать/показывать, обновлять область на странице при изменении поля формы Формы. Как работать с полем Таймер Формы. Как в форму в SaveItem передать некий скрытый параметр (например Куки или параметр URL) Формы. Как показывать изменяющуюся информацию при изменении полей Формы. Как сделать форму с сохранением состояния Формы. Как работать с полем типа Слайдер (ползунок) Формы. Добавление кнопки очистки формы (Reset form) Формы. Как сделать подтверждение действия в СМС (SMS) в форме Установка графика работы (поле формы weekTime) Формы. Как сделать в форме более 1 кнопки действий (несколько кнопок действий на форме) Как в форме добавить примеры заполнения полей (example) Как выбрать значение списка через справочник в модальном окне Как сделать окно подтверждения действия формы Формы. Динамическое изменение itemID у формы в зависимости от других элементов страницы Формы. Как добавить новый элемент, если в списке на форме его нет Как создать кастом форму с подтверждением действия по Email или SMS Как сделать задержку при сохранении формы (saveDelay) Подсказки-ограничители длины для полей в форме Как сохранить значение поля в браузере, чтобы каждый раз его не вбивать при загрузке (оставлять последнее сохраненное). Запоминание поля формы в браузере Вставка ссылок по шаблону (ютуб ссылка, patternString) Формы. Загрузка формы по ссылке Формы. Управление настройками поля через options_ поля Формы. Использование Google Recaptcha в формах Как указать произвольную маску для поля ввода в форме Форма. Как вывести дерево с выбором галочек Формы. Как сделать выбор цвета в форме Кастом проверка полей формы через JS Как в выборе даты (datepicker) задать доступные даты Загрузка формы в выпадающем окне (dropdown) Добавление смайликов (emoji) в поля форм Форма. Обработка даты из поля datetime-local Как у формы сделать progress bar при загрузке формы Редактор текста - код поля формы html2 Работа с датами в формах Форма. Как работать с полем Дробное число Как настроить выбор вариантов для поля Интервал дат Выбор из элементов с табуляцией - поле формы tabs Показ количества символов рядом с полем в форме Кнопка очистки формы Reset Контроль заполнения ключевых форм на сайте Как сделать форму с простым подтверждением действия (confirm) Тип поля imageCheckbox (флажок-картинка)
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Выгода от использования Falcon Space
В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
- Шаг 1. Создать концепт проекта
- Шаг 2. Получить оценку бюджета (КП)
- Шаг 3. Заключить договор
- Шаг 4. Создать совместно техническое задание
- Шаг 5. Поэтапная реализация проекта