Формы. Управление настройками поля через 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 

  1. mask - '9999999' - маска на ввод
  2. prefix, suffix - добавляет в поле доп. разметку в начале или в конце поля.
  3. maxlength - задает максимальное количество символов в поле

Пример: 

select  '{"prefix":"prefix", "suffix": ""}' options_s1  

int, float, html-number

  1. min - минимальное значение,
  2. max - максимальное значение поля,
  3. step - шаг приращения,
  4. readonly - если true, то элемент только на чтение

date

  1. availableDates - доступные даты для выбора (через запятую, см. отдельную документацию по использованию этих режимов)
  2. disabledDates - недоступные даты для выбора (через запятую)
  3. format - если установлен, то задает формат даты (если нет - то берутся глобальные настройки формата даты из GetLayout). 
  4. isInput - если true, то выводится как поле ввода с выпадающим календарем

daterange

  1. format - если установлен, то задает формат даты (если нет - то берутся глобальные настройки формата даты из GetLayout). 
  2. 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

  1. format - если установлен, то задает формат времени (по умолчанию hh:ii). 
  2. minuteStep - шаг выбора между минутами (по умолчанию 5)

bool

  1. hideLabel - если true, то у галки не будет показываться label

switch

  1. size - задает размер переключателя (mini, normal, small, large)
  2. on - текст при включенном состоянии
  3. off - текст при выключенном состоянии
  4. onstyle - стиль включенного состояния (success, danger...)
  5. offstyle - стиль выключенного состояния (success, danger, outline-primary, outline-secondary...) 
  6. switchStyle - стиль переключателя (slow, android, ios)
  7. switchWidth, switchHeight - ширина и высота переключателя

Подробнее - https://gitbrent.github.io/bootstrap4-toggle/ 

text

  1. rows - число, задающее высоту (rows) у textarea
  2. cols - число, задающее ширину (cols) у textarea
  3. maxlength - задает максимальное количество символов в поле

select-search

  1. selectHint - строка, указывает начальную подсказку в элементе 
  2. multiple - если true - то можно вводить множественные значения (значения передаются через запятую - просто тексты названий без id).

select2

  1. placeholder - подсказка в элементе когда нет выбранных элементов
  2. multiple - если true, то доступен множественный выбор. Если выбрано несколько элементов, то они передаются через запятую в процедуру. 
  3. tags - если true, то можно добавить свой элемент, если его нет среди существующих (пишем текст и добавляем). Новые добавленные элементы будут иметь value такой же как и text

treeCheckboxes, treeOrder

  1. cascadeCheck - если true, то выбор галочки выбирает и все дочерние элементы.
  2. width - число, ширина дерева           

files, fileContent

  1. code - код менеджера ресурсов
  2. title - заголовок менеджера ресурсов
  3. compact - если true - то компактный режим отображения галереи файлов
  4. ultracompact - если true, то очень компактный режим отображения галереи файлов
  5. emptyText - текст, когда нет загруженных элементов в менеджере ресурсов
  6. uploadTitle - заголовок окна загрузки

intrange (диапазон чисел)

  1. min - минимальное значение выбранного интервала
  2. max - максимальное значение выбранного интервала
  3. step - шаг изменения диапазона
  4. minValue - минимальная граница
  5. maxValue - максимальная граница           

geo-autocomplete (выбор гео точки)

  1. 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

  1. code - задает код таймера 
  2. itemID - задает itemID связанного элемента, к которому относится таймер           

checkboxes

  1. lineLabel - если true или 1, то каждый чекбокс будет на отдельной строке           

defaultRadio

  1. lineLabel - если true или 1, то каждый элемент выбора будет на отдельной строке

slider

  1. min - минимальное значение, число
  2. max - максимальное значение, число
  3. step - шаг перемещения, число
  4. enabled -если true, то включен
  5. ticks - строка чисел через запятую где будут метки
  6. labels - метки-подписи через запятую (строка), соответствуют по положению ticks
  7. orientation - ориентация - horizontal, vertical           

weekTime

  1. standartWorkTime - строка, название кнопки для установки стандартного графика работы 7/2 9-17
  2. showHours - если true, то в сетке будут показаны часы   
  3. responsive - если true, то таблица будет адаптивная (ужиматься по ширине при малом экране с появлением горизонтального скроллинга)      

patternString 

  1. templates - массив регулярных выражений для извлечения нужного кода из строки ввода (пример для ютуб ссылок - [".*?v=(.*)$", "https://youtu.be/(.*)$"])
  2. makeup - разметка, которая будет визуализироваться под полем ввода со вставкой извлеченного кода в виде {value}           

html, html-lite

  1. hegiht - установка в px высоты редактора.

editorHTML, editorSQL, editorCSS, editorJS

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

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

Falcon Space

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

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

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

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

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

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