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

editorHTML, editorSQL, editorCSS, editorJS

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

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

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

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